@streamlayer/react-ui 1.33.2 → 1.34.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/lib/app/app/Polymarket/index.d.ts +4 -0
  2. package/lib/app/app/Polymarket/index.js +56 -0
  3. package/lib/app/app/Polymarket/story.d.ts +2 -0
  4. package/lib/app/app/Polymarket/story.js +17 -0
  5. package/lib/app/masters/useSdkResponsive.js +1 -1
  6. package/lib/app/masters/useSdkScroll.js +1 -1
  7. package/lib/app/useSdkResponsive.js +1 -1
  8. package/lib/app/useSdkScroll.js +1 -1
  9. package/lib/app/webos/Advertisement/index.js +61 -61
  10. package/lib/app/webos/ExposedPauseAd/PauseAd.js +130 -103
  11. package/lib/app/webos/Question/index.js +30 -27
  12. package/lib/app/webos/index.d.ts +1 -0
  13. package/lib/app/webos/ui/Sidebar/index.js +145 -141
  14. package/lib/app/webos/ui/Sidebar/styles.d.ts +2 -0
  15. package/lib/app/webos/ui/Sidebar/styles.js +95 -85
  16. package/lib/assets/style.css +1 -1
  17. package/lib/{index-tnt2CtQe.js → index-Deo5_bIg.js} +6 -12
  18. package/lib/{index-DSi8Qgfs.js → index-Fv2CC2QU.js} +4 -4
  19. package/lib/ui/advertisement/overlay/externalAd/vast-player/useGAMPlayer.js +1 -1
  20. package/lib/ui/advertisement/overlay/externalAd/vast-player/useVastAds.js +1 -1
  21. package/lib/ui/gamification/question/inapp/notification/AdNotification/index.d.ts +1 -0
  22. package/lib/ui/gamification/question/inapp/notification/AdNotification/index.js +62 -48
  23. package/lib/ui/gamification/question/inapp/prediction-result/index.d.ts +1 -0
  24. package/lib/ui/gamification/question/inapp/prediction-result/index.js +4 -4
  25. package/lib/ui/gamification/question/inapp/prediction-result-ad/index.d.ts +1 -0
  26. package/lib/ui/gamification/question/inapp/prediction-result-ad/index.js +27 -16
  27. package/lib/ui/gamification/vote/insight-details/index.js +5 -5
  28. package/lib/ui/polymarket/index.d.ts +21 -0
  29. package/lib/ui/polymarket/index.js +226 -0
  30. package/lib/ui/polymarket/styles.d.ts +13 -0
  31. package/lib/ui/polymarket/styles.js +69 -0
  32. package/lib/utils/decorators/container.d.ts +1 -0
  33. package/lib/utils/decorators/container.js +9 -8
  34. package/lib/utils/decorators/styles.d.ts +1 -0
  35. package/lib/utils/decorators/styles.js +9 -4
  36. package/package.json +19 -16
  37. package/lib/ui/advertisement/overlay/externalAd/vast-player/useGAMStatic.d.ts +0 -10
  38. package/lib/ui/advertisement/overlay/externalAd/vast-player/useGAMStatic.js +0 -69
@@ -0,0 +1,4 @@
1
+ import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
2
+ export declare const StreamLayerSDKPolymarket: React.FC<{
3
+ sdk: StreamLayerSDK;
4
+ }>;
@@ -0,0 +1,56 @@
1
+ import { jsx as s } from "react/jsx-runtime";
2
+ import { styled as y } from "@linaria/react";
3
+ import { useStore as h } from "@streamlayer/react-polyfills";
4
+ import { PolymarketCard as b } from "../../../ui/polymarket/index.js";
5
+ const D = /* @__PURE__ */ y("div")({
6
+ name: "Container",
7
+ class: "claeaeg",
8
+ propsAsIs: !1
9
+ }), P = (e) => /* @__PURE__ */ s(b, {
10
+ ...e
11
+ }), k = ({
12
+ sdk: e
13
+ }) => {
14
+ const o = h(e.polymarket.marketWithSeries);
15
+ if (!o.data)
16
+ return null;
17
+ const i = o.data.outcomes, {
18
+ teams: n,
19
+ chartData: m
20
+ } = i.reduce((r, t) => {
21
+ const l = t.points[t.points.length - 1], d = l ? l.p * 100 : t.probabilityPct;
22
+ return r.teams.push({
23
+ teamName: t.label,
24
+ probabilityPct: d,
25
+ teamColor: t.color ?? "",
26
+ teamLogo: t.rawMetadata.teamLogo ?? "",
27
+ isDraw: t.type === 2
28
+ }), r.chartData.push({
29
+ label: t.label,
30
+ color: t.rawMetadata.teamColor ?? `#${t.color ?? ""}`,
31
+ points: t.points
32
+ }), r;
33
+ }, {
34
+ teams: [],
35
+ chartData: []
36
+ }), {
37
+ drawTeam: a,
38
+ teamsWithoutDraw: p
39
+ } = n.reduce((r, t) => (t.isDraw ? r.drawTeam = t : r.teamsWithoutDraw.push(t), r), {
40
+ drawTeam: void 0,
41
+ teamsWithoutDraw: []
42
+ });
43
+ return /* @__PURE__ */ s(D, {
44
+ children: /* @__PURE__ */ s(P, {
45
+ logo: "https://cdn-test.streamlayer.io/web-sdk/polymarket.png",
46
+ volume: o.data.volume,
47
+ drawProbabilityPct: a == null ? void 0 : a.probabilityPct,
48
+ drawColor: a == null ? void 0 : a.teamColor,
49
+ teams: p,
50
+ chartData: m
51
+ })
52
+ });
53
+ };
54
+ export {
55
+ k as StreamLayerSDKPolymarket
56
+ };
@@ -0,0 +1,2 @@
1
+ import { DebugProps } from '../../../utils/debug';
2
+ export declare const PolymarketStory: React.FC<DebugProps>;
@@ -0,0 +1,17 @@
1
+ import { jsxs as n, jsx as t } from "react/jsx-runtime";
2
+ import { d as m, e as s, u } from "../../../hooks-B0Qttldg.js";
3
+ import { useStreamLayerDebug as d } from "../../../utils/debug/index.js";
4
+ import { StreamLayerSDKPolymarket as i } from "./index.js";
5
+ const y = () => {
6
+ const r = u();
7
+ return r ? /* @__PURE__ */ t(i, { sdk: r }) : null;
8
+ }, v = ({ sdkKey: r, eventId: o, production: a }) => {
9
+ const e = d({ sdkKey: r, eventId: o, production: a });
10
+ return /* @__PURE__ */ n(m, { sdkKey: e.sdkKey, production: e.env === "production", autoEnable: !0, children: [
11
+ /* @__PURE__ */ t(s, { event: e.event }),
12
+ /* @__PURE__ */ t(y, {})
13
+ ] });
14
+ };
15
+ export {
16
+ v as PolymarketStory
17
+ };
@@ -1,7 +1,7 @@
1
1
  import c from "lodash.throttle";
2
2
  import { useState as m, useEffect as u } from "react";
3
3
  import { BREAKPOINTS as r } from "../../ui/theme/constants.js";
4
- import { m as p } from "../../index-DSi8Qgfs.js";
4
+ import { m as p } from "../../index-Fv2CC2QU.js";
5
5
  const d = Object.keys(r), i = () => {
6
6
  const t = window.innerWidth;
7
7
  let e = "sm";
@@ -2,7 +2,7 @@ import g from "lodash.throttle";
2
2
  import { useRef as m, useState as h, useEffect as b } from "react";
3
3
  import { useStore as v } from "@streamlayer/react-polyfills";
4
4
  import { BREAKPOINTS as d } from "../../ui/theme/constants.js";
5
- import { m as E } from "../../index-DSi8Qgfs.js";
5
+ import { m as E } from "../../index-Fv2CC2QU.js";
6
6
  const y = (e, i, o) => {
7
7
  var t;
8
8
  (t = e.current) == null || t.scrollTo({
@@ -1,7 +1,7 @@
1
1
  import i from "lodash.throttle";
2
2
  import { useState as m, useEffect as a } from "react";
3
3
  import { BREAKPOINTS as r } from "../ui/theme/constants.js";
4
- import { m as u } from "../index-DSi8Qgfs.js";
4
+ import { m as u } from "../index-Fv2CC2QU.js";
5
5
  const o = Object.keys(r), c = () => {
6
6
  const t = window.innerWidth;
7
7
  let e = "sm";
@@ -3,7 +3,7 @@ import { useRef as u, useState as b, useEffect as g } from "react";
3
3
  import { useStore as k } from "@streamlayer/react-polyfills";
4
4
  import { BREAKPOINTS as a } from "../ui/theme/constants.js";
5
5
  import { checkSdkInDesktopView as m } from "./useSdkResponsive.js";
6
- import { m as v } from "../index-DSi8Qgfs.js";
6
+ import { m as v } from "../index-Fv2CC2QU.js";
7
7
  const I = (o, e, n) => {
8
8
  const t = e >= a.lg && e < a.xl ? 75 : 52;
9
9
  o.current && window.scrollTo({
@@ -1,88 +1,88 @@
1
- import { jsx as u, jsxs as $ } from "react/jsx-runtime";
1
+ import { jsx as l, jsxs as N } from "react/jsx-runtime";
2
2
  import { cx as V } from "@linaria/core";
3
- import { styled as j } from "@linaria/react";
4
- import { StreamLayerSDKBannerProvider as q } from "../../app/Banner/index.js";
5
- import { useAnalyticsListener as H } from "../../../hooks/analytics.js";
6
- import { useHideTransition as Q } from "../../../hooks/showIn.js";
7
- import { forwardRef as G, useEffect as _, useRef as z } from "react";
8
- import { useStore as d } from "@streamlayer/react-polyfills";
3
+ import { styled as $ } from "@linaria/react";
4
+ import { StreamLayerSDKBannerProvider as j } from "../../app/Banner/index.js";
5
+ import { useAnalyticsListener as q } from "../../../hooks/analytics.js";
6
+ import { useHideTransition as H } from "../../../hooks/showIn.js";
7
+ import { forwardRef as Q, useEffect as G, useRef as _ } from "react";
8
+ import { useStore as u } from "@streamlayer/react-polyfills";
9
9
  import { eventBus as x } from "@streamlayer/sdk-web-interfaces";
10
- import { QuestionPosition as C, AdUnit as J, PromotionType as X, FeatureType as Y } from "@streamlayer/sdk-web-types";
11
- import { useAdvertisementBackground as Z } from "../../../ui/theme/utils.js";
12
- import { AdvertisementUI as ee } from "./AdvertisementUI.js";
13
- const D = /* @__PURE__ */ j("div")({
10
+ import { QuestionPosition as z, AdUnit as C, PromotionType as J, FeatureType as X } from "@streamlayer/sdk-web-types";
11
+ import { useAdvertisementBackground as Y } from "../../../ui/theme/utils.js";
12
+ import { AdvertisementUI as Z } from "./AdvertisementUI.js";
13
+ const D = /* @__PURE__ */ $("div")({
14
14
  name: "AdvertisementUIWrap",
15
15
  class: "a17b2u9w",
16
16
  propsAsIs: !1
17
- }), te = (t) => {
17
+ }), ee = (t) => {
18
18
  const r = t.target;
19
19
  if (r instanceof HTMLAnchorElement && r.target === "_blank") {
20
- const n = r.getAttribute("data-promo-id") || "", a = r.getAttribute("data-promo-type") || X.UNSET;
20
+ const s = r.getAttribute("data-promo-id") || "", a = r.getAttribute("data-promo-type") || J.UNSET;
21
21
  r.getAttribute("data-a") === "button" && x.emit("advertisement", {
22
22
  action: "buttonSelect",
23
23
  payload: {
24
- id: n,
24
+ id: s,
25
25
  type: a
26
26
  }
27
27
  }), r.getAttribute("data-a") === "banner" && x.emit("advertisement", {
28
28
  action: "bannerSelect",
29
29
  payload: {
30
- id: n,
30
+ id: s,
31
31
  type: a
32
32
  }
33
33
  });
34
34
  }
35
- }, re = G(({
35
+ }, te = Q(({
36
36
  gamification: t,
37
37
  skipAutoClose: r,
38
- containerId: n,
38
+ containerId: s,
39
39
  muted: a,
40
- notification: m,
41
- sidebar: l,
42
- banner: i,
40
+ notification: i,
41
+ sidebar: d,
42
+ banner: n,
43
43
  persistent: c,
44
44
  controlVideo: p
45
- }, s) => {
46
- var g, A, S, b, U, y, I, L, P, h, W, k, w, E, T, B;
47
- const e = d(t.advertisement.$store), o = d(t.openedQuestion.$store), f = d(t.openedQuestion.$extendedStore), {
45
+ }, m) => {
46
+ var A, g, b, S, y, L, U, P, I, W, O, h, k, E, T, B;
47
+ const e = u(t.advertisement.$store), o = u(t.openedQuestion.$store), f = u(t.openedQuestion.$extendedStore), {
48
48
  finished: v
49
- } = Q();
50
- H(s, {
49
+ } = H();
50
+ q(m, {
51
51
  enabled: !!e.data,
52
52
  event: "click",
53
- listener: te
54
- }), _(() => {
55
- var O;
56
- v && ((O = e.close) == null || O.call(e));
53
+ listener: ee
54
+ }), G(() => {
55
+ var w;
56
+ v && ((w = e.close) == null || w.call(e));
57
57
  }, [v]);
58
- const F = !i && !l, M = ((S = (A = (g = e.data) == null ? void 0 : g.question) == null ? void 0 : A.backgroundImage) == null ? void 0 : S.landscapeUrl) || ((U = (b = e.data) == null ? void 0 : b.promotion) == null ? void 0 : U.backgroundImageLandscapeUrl), R = ((L = (I = (y = e.data) == null ? void 0 : y.question) == null ? void 0 : I.backgroundImage) == null ? void 0 : L.portraitUrl) || ((h = (P = e.data) == null ? void 0 : P.promotion) == null ? void 0 : h.backgroundImagePortraitUrl), K = Z({
59
- containerId: n,
60
- landscapeUrl: M,
61
- portraitUrl: R
62
- }), N = ((k = (W = f == null ? void 0 : f.data) == null ? void 0 : W.appearance) == null ? void 0 : k.position) === C.LBAR;
63
- return i && e.data === void 0 && ((w = o == null ? void 0 : o.attributes) == null ? void 0 : w.adUnit) === J.STANDART && N && ((B = (T = (E = o == null ? void 0 : o.attributes) == null ? void 0 : E.adPromotion) == null ? void 0 : T.banner) != null && B.imageUrl) ? /* @__PURE__ */ u(D, {
64
- ref: s,
58
+ const F = ((b = (g = (A = e.data) == null ? void 0 : A.question) == null ? void 0 : g.backgroundImage) == null ? void 0 : b.landscapeUrl) || ((y = (S = e.data) == null ? void 0 : S.promotion) == null ? void 0 : y.backgroundImageLandscapeUrl), M = ((P = (U = (L = e.data) == null ? void 0 : L.question) == null ? void 0 : U.backgroundImage) == null ? void 0 : P.portraitUrl) || ((W = (I = e.data) == null ? void 0 : I.promotion) == null ? void 0 : W.backgroundImagePortraitUrl), R = Y({
59
+ containerId: s,
60
+ landscapeUrl: F,
61
+ portraitUrl: M
62
+ }), K = ((h = (O = f == null ? void 0 : f.data) == null ? void 0 : O.appearance) == null ? void 0 : h.position) === z.LBAR;
63
+ return n && e.data === void 0 && ((k = o == null ? void 0 : o.attributes) == null ? void 0 : k.adUnit) === C.STANDART && K && ((B = (T = (E = o == null ? void 0 : o.attributes) == null ? void 0 : E.adPromotion) == null ? void 0 : T.banner) != null && B.imageUrl) ? /* @__PURE__ */ l(D, {
64
+ ref: m,
65
65
  style: {
66
66
  height: "100%"
67
67
  },
68
- className: V("SL-AdvertisementUIWrap", "SL-AdvertisementWebOs", "SL-AdvertisementUIWrap--lower-third"),
69
- children: /* @__PURE__ */ u(q, {
68
+ className: V("SL-AdvertisementWebOs", "SL-AdvertisementWebOs--banner"),
69
+ children: /* @__PURE__ */ l(j, {
70
70
  cardId: o.id,
71
71
  promotion: {
72
72
  ...o.attributes.adPromotion,
73
73
  adUnit: o.attributes.adUnit
74
74
  },
75
- direction: i
75
+ direction: n
76
76
  })
77
- }) : e.data === void 0 || !c && e.isViewed ? null : /* @__PURE__ */ $(D, {
78
- ref: s,
77
+ }) : e.data === void 0 || !c && e.isViewed ? null : /* @__PURE__ */ N(D, {
78
+ ref: m,
79
79
  style: {
80
- height: F ? "auto" : "100%"
80
+ height: d || n ? "100%" : "auto"
81
81
  },
82
- className: V("SL-AdvertisementUIWrap", "SL-AdvertisementWebOs", "SL-AdvertisementUIWrap--lower-third"),
83
- children: [!m && K, /* @__PURE__ */ u(ee, {
84
- sidebar: l,
85
- banner: i,
82
+ className: V("SL-AdvertisementWebOs", !d && !n && !i && "SL-AdvertisementWebOs--overlay", d && "SL-AdvertisementWebOs--sidebar", n && "SL-AdvertisementWebOs--banner", i && "SL-AdvertisementWebOs--notification"),
83
+ children: [!i && R, /* @__PURE__ */ l(Z, {
84
+ sidebar: d,
85
+ banner: n,
86
86
  advertisement: e.data,
87
87
  advertisementPaused: !!e.isPaused,
88
88
  togglePause: e.togglePause || (() => {
@@ -94,40 +94,40 @@ const D = /* @__PURE__ */ j("div")({
94
94
  fireEvent: e.fireEvent,
95
95
  markAsViewed: t.advertisement.markAsViewed,
96
96
  open: t.advertisement.open,
97
- isNotification: m,
97
+ isNotification: i,
98
98
  skipAutoClose: r,
99
99
  controlVideo: p,
100
100
  muted: a
101
101
  })]
102
102
  });
103
- }), ge = ({
103
+ }), ve = ({
104
104
  sdk: t,
105
105
  sidebar: r,
106
- muted: n,
106
+ muted: s,
107
107
  banner: a,
108
- skipAutoClose: m,
109
- persistent: l,
110
- notification: i
108
+ skipAutoClose: i,
109
+ persistent: d,
110
+ notification: n
111
111
  }) => {
112
112
  const {
113
113
  containerId: c
114
- } = d(t.options), p = d(t.featuresList.getStore()), s = z(null);
114
+ } = u(t.options), p = u(t.featuresList.getStore()), m = _(null);
115
115
  if (!p)
116
116
  return null;
117
- const e = t.getFeature(Y.GAMES);
118
- return e != null && e.advertisement ? /* @__PURE__ */ u(re, {
119
- ref: s,
117
+ const e = t.getFeature(X.GAMES);
118
+ return e != null && e.advertisement ? /* @__PURE__ */ l(te, {
119
+ ref: m,
120
120
  gamification: e,
121
121
  sidebar: r,
122
122
  banner: a,
123
- persistent: l,
124
- skipAutoClose: m,
125
- muted: n,
126
- notification: i,
123
+ persistent: d,
124
+ skipAutoClose: i,
125
+ muted: s,
126
+ notification: n,
127
127
  containerId: c,
128
128
  controlVideo: t.controlVideoPlayer
129
129
  }) : null;
130
130
  };
131
131
  export {
132
- ge as StreamLayerSDKAdvertisementWebOS
132
+ ve as StreamLayerSDKAdvertisementWebOS
133
133
  };
@@ -1,136 +1,163 @@
1
- import { jsx as u, jsxs as b } from "react/jsx-runtime";
2
- import { cx as G } from "@linaria/core";
3
- import { useFocusable as I } from "@noriginmedia/norigin-spatial-navigation";
4
- import { useState as B, useRef as E, useCallback as C, useEffect as y } from "react";
5
- import { useStore as N } from "@streamlayer/react-polyfills";
6
- import { eventBus as g } from "@streamlayer/sdk-web-interfaces";
7
- import { useLoadGAMStatic as M } from "../../../ui/advertisement/overlay/externalAd/vast-player/useGAMStatic.js";
8
- import { PauseAdOverlay as j, PauseAdContent as K, PauseAdTopLeft as O, PauseAdTitle as V, PauseAdCaption as $, PauseAdBottomLeft as _, PauseAdPlayButton as q, PauseAdSidebarGradient as z, PauseAdSidebar as H, PauseAdTitleDescription as J, ExternalAdContainer as D } from "./styles.js";
9
- const Q = ({ vastUrl: r, isDesktop: o }) => {
10
- var a;
11
- const [, h] = M(), e = N(h, { keys: [r] });
12
- return y(() => {
13
- e && e[r] && e[r].imageSrc && e[r].id && g.emit("exposedPauseAd", {
14
- action: "rendered",
15
- payload: {
16
- id: e[r].id
17
- }
18
- });
19
- }, [e, r]), (a = e == null ? void 0 : e[r]) != null && a.imageSrc ? !e[r].adUrl || !o ? /* @__PURE__ */ u(D, { src: e[r].imageSrc }) : /* @__PURE__ */ u(
20
- "a",
21
- {
22
- onClick: () => {
23
- g.emit("exposedPauseAd", {
24
- action: "navigated",
25
- payload: {
26
- id: e[r].id
27
- }
28
- });
29
- },
30
- href: e[r].adUrl,
31
- target: "_blank",
32
- rel: "noopener noreferrer",
33
- children: /* @__PURE__ */ u(D, { src: e[r].imageSrc })
1
+ import { jsx as u, jsxs as B } from "react/jsx-runtime";
2
+ import { cx as j } from "@linaria/core";
3
+ import { useFocusable as K } from "@noriginmedia/norigin-spatial-navigation";
4
+ import { useState as F, useRef as w, useCallback as N, useEffect as n } from "react";
5
+ import { useStore as M } from "@streamlayer/react-polyfills";
6
+ import { eventBus as v } from "@streamlayer/sdk-web-interfaces";
7
+ import { PauseAdOverlay as U, PauseAdContent as V, PauseAdTopLeft as $, PauseAdTitle as G, PauseAdCaption as _, PauseAdBottomLeft as q, PauseAdPlayButton as z, PauseAdSidebarGradient as H, PauseAdSidebar as J, PauseAdTitleDescription as Q, ExternalAdContainer as O } from "./styles.js";
8
+ const W = ({
9
+ vastUrl: l,
10
+ isDesktop: o,
11
+ content: r
12
+ }) => (n(() => {
13
+ r.imageSrc && r.id && v.emit("exposedPauseAd", {
14
+ action: "rendered",
15
+ payload: {
16
+ id: r.id,
17
+ parentId: r.parentId
34
18
  }
35
- ) : null;
36
- }, W = ({ isClosing: r, title: o, caption: h, onPlay: e, onClose: a, vastUrl: f, options: t, isDesktop: m }) => {
37
- const T = (t == null ? void 0 : t.showPauseButton) ?? !0, { ref: s, focusSelf: p } = I({
19
+ });
20
+ }, [r, l]), r != null && r.imageSrc ? !r.adUrl || !o ? /* @__PURE__ */ u(O, { src: r.imageSrc }) : /* @__PURE__ */ u(
21
+ "a",
22
+ {
23
+ onClick: () => {
24
+ v.emit("exposedPauseAd", {
25
+ action: "navigated",
26
+ payload: {
27
+ id: r.id,
28
+ parentId: r.parentId
29
+ }
30
+ });
31
+ },
32
+ href: r.adUrl,
33
+ target: "_blank",
34
+ rel: "noopener noreferrer",
35
+ children: /* @__PURE__ */ u(O, { src: r.imageSrc })
36
+ }
37
+ ) : null), X = ({ isClosing: l, content: o, externalPauseAdStore: r, title: k, caption: y, onPlay: f, onClose: a, vastUrl: c, options: A, isDesktop: m }) => {
38
+ const b = (A == null ? void 0 : A.showPauseButton) ?? !0, { ref: s, focusSelf: I } = K({
38
39
  focusKey: "sl-pause-ad-play",
39
- onEnterRelease: e,
40
+ onEnterRelease: f,
40
41
  isFocusBoundary: !0,
41
42
  forceFocus: !0
42
43
  });
43
- return y(() => {
44
- s.current && p();
45
- }, [s, p]), y(() => {
44
+ return n(() => () => {
45
+ r.revalidate();
46
+ }, [r]), n(() => {
47
+ s.current && I();
48
+ }, [s, I]), n(() => {
46
49
  if (!a)
47
50
  return () => {
48
51
  };
49
- const S = (A) => {
50
- const d = A.keyCode;
51
- if (d === 461 || d === 10009 || d === 27 || d === 8) {
52
- A.preventDefault(), A.stopPropagation(), A.stopImmediatePropagation(), a();
52
+ const E = (d) => {
53
+ const t = d.keyCode;
54
+ if (t === 461 || t === 10009 || t === 27 || t === 8) {
55
+ d.preventDefault(), d.stopPropagation(), d.stopImmediatePropagation(), a();
53
56
  return;
54
57
  }
55
58
  };
56
- return window.addEventListener("keydown", S, { capture: !0 }), () => window.removeEventListener("keydown", S, { capture: !0 });
57
- }, [a]), /* @__PURE__ */ u(j, { className: G("SL_PauseAdOverlay", r && "pause-ad-closing"), children: /* @__PURE__ */ b(K, { children: [
58
- /* @__PURE__ */ b(O, { children: [
59
- /* @__PURE__ */ u(V, { children: o }),
60
- /* @__PURE__ */ u($, { children: h })
59
+ return window.addEventListener("keydown", E, { capture: !0 }), () => window.removeEventListener("keydown", E, { capture: !0 });
60
+ }, [a]), /* @__PURE__ */ u(U, { className: j("SL_PauseAdOverlay", l && "pause-ad-closing"), children: /* @__PURE__ */ B(V, { children: [
61
+ /* @__PURE__ */ B($, { children: [
62
+ /* @__PURE__ */ u(G, { children: k }),
63
+ /* @__PURE__ */ u(_, { children: y })
61
64
  ] }),
62
- T && /* @__PURE__ */ u(_, { children: /* @__PURE__ */ u(
63
- q,
65
+ b && /* @__PURE__ */ u(q, { children: /* @__PURE__ */ u(
66
+ z,
64
67
  {
65
68
  ref: s,
66
- onClick: e,
69
+ onClick: f,
67
70
  onMouseEnter: () => s.current.focus(),
68
71
  "aria-label": "Resume playback"
69
72
  }
70
73
  ) }),
71
- /* @__PURE__ */ u(z, { className: "SL_PauseAdSidebar", children: /* @__PURE__ */ b(H, { children: [
72
- f && /* @__PURE__ */ u(Q, { isDesktop: m, vastUrl: f }),
73
- /* @__PURE__ */ u(J, { children: "ADVERTISEMENT" })
74
+ /* @__PURE__ */ u(H, { className: "SL_PauseAdSidebar", children: /* @__PURE__ */ B(J, { children: [
75
+ c && /* @__PURE__ */ u(W, { content: o, isDesktop: m, vastUrl: c }),
76
+ /* @__PURE__ */ u(Q, { children: "ADVERTISEMENT" })
74
77
  ] }) })
75
78
  ] }) });
76
- }, te = ({ showPauseAd: r, vastUrls: o, title: h, caption: e, sdk: a, onClose: f, onRender: t, options: m, isDesktop: T }) => {
77
- const s = (m == null ? void 0 : m.pauseAdDelay) ?? 5e3, [p, S] = B(!1), [A, d] = B(!1), c = E(), i = o == null ? void 0 : o[0].url, P = E(i), x = E("");
78
- P.current = i;
79
- const [k, w] = M(), n = C(() => {
80
- f && (x.current = P.current, g.emit("exposedPauseAd", {
81
- action: "closed",
82
- payload: {}
83
- }), f());
84
- }, [f]), F = C(() => {
85
- a.controlVideoPlayer({ play: !0 });
86
- }, [a]);
87
- return y(() => {
88
- if (r && i) {
89
- g.emit("exposedPauseAd", {
79
+ }, se = ({ showPauseAd: l, vastUrls: o, title: r, caption: k, sdk: y, onClose: f, onRender: a, options: c, isDesktop: A }) => {
80
+ const m = (c == null ? void 0 : c.pauseAdDelay) ?? 0, b = (c == null ? void 0 : c.pauseAdRefetchInterval) ?? 1e3 * 60 * 50, [s, I] = F(!1), [E, d] = F(!1), t = w(), p = o == null ? void 0 : o[0].url, P = w(p), S = w(""), T = w("");
81
+ P.current = p;
82
+ const [i, D] = y.advertisement.getExternalPauseAd(p, {
83
+ refetchInterval: b,
84
+ $enabled: m === 0 || !!l,
85
+ prefetch: m === 0 && b > 0
86
+ }), x = M(i), g = N(() => {
87
+ if (f) {
88
+ T.current = P.current;
89
+ const e = i.get().data;
90
+ v.emit("exposedPauseAd", {
91
+ action: "closed",
92
+ payload: (e == null ? void 0 : e.url) === T.current ? {
93
+ id: e == null ? void 0 : e.id,
94
+ parentId: e == null ? void 0 : e.parentId
95
+ } : {}
96
+ }), f();
97
+ }
98
+ }, [f, i]), R = N(() => {
99
+ y.controlVideoPlayer({ play: !0 });
100
+ }, [y]);
101
+ return n(() => {
102
+ D === P.current && x.error && (console.log("error", x.error), clearTimeout(t.current), g == null || g());
103
+ }, [x, g, D]), n(() => {
104
+ if (l && p) {
105
+ S.current = P.current, T.current = "";
106
+ const e = i.get().data;
107
+ v.emit("exposedPauseAd", {
90
108
  action: "enabled",
91
- payload: {}
92
- }), k(i).then((l) => {
93
- P.current === i && (l == null ? void 0 : l.success) !== !0 && (clearTimeout(c.current), n == null || n());
94
- }).catch(() => {
95
- P.current === i && (clearTimeout(c.current), n == null || n());
109
+ payload: (e == null ? void 0 : e.url) === S.current ? {
110
+ id: e == null ? void 0 : e.id,
111
+ parentId: e == null ? void 0 : e.parentId
112
+ } : {}
96
113
  });
97
114
  const L = () => {
98
- const l = w.get()[P.current];
99
- l != null && l.imageSrc ? (clearTimeout(c.current), d(!1), S(!0)) : c.current = setTimeout(() => {
100
- L();
101
- }, 200);
115
+ const C = i.get(), h = C.data;
116
+ (h == null ? void 0 : h.url) === P.current && (!C.loading && (h != null && h.imageSrc) ? (clearTimeout(t.current), d(!1), I(!0)) : C.loading && (t.current = setTimeout(() => {
117
+ console.log("checkAndAllowRender timeout"), L();
118
+ }, 200)));
102
119
  };
103
- c.current = setTimeout(() => {
120
+ clearTimeout(t.current), t.current = setTimeout(() => {
104
121
  L();
105
- }, s);
106
- } else
107
- x.current !== P.current && (x.current = "", g.emit("exposedPauseAd", {
108
- action: "disabled",
109
- payload: {}
110
- })), d(!0), c.current = setTimeout(() => {
111
- S(!1);
122
+ }, m);
123
+ } else {
124
+ if (T.current !== P.current) {
125
+ const e = i.get().data;
126
+ T.current = "", S.current !== "" && (v.emit("exposedPauseAd", {
127
+ action: "disabled",
128
+ payload: S.current === (e == null ? void 0 : e.url) ? {
129
+ id: e == null ? void 0 : e.id,
130
+ parentId: e == null ? void 0 : e.parentId
131
+ } : {}
132
+ }), S.current = "");
133
+ }
134
+ d(!0), t.current = setTimeout(() => {
135
+ I(!1);
112
136
  }, 400);
137
+ }
113
138
  return () => {
114
- c.current && clearTimeout(c.current);
139
+ t.current && clearTimeout(t.current);
115
140
  };
116
- }, [w, k, n, s, r, i]), y(() => {
117
- t == null || t({ rendered: p });
118
- }, [p, t]), y(() => () => {
119
- t == null || t({ rendered: !1 });
120
- }, [t]), p ? /* @__PURE__ */ u(
121
- W,
141
+ }, [i, g, m, l, p]), n(() => {
142
+ a == null || a({ rendered: s });
143
+ }, [s, a]), n(() => () => {
144
+ a == null || a({ rendered: !1 });
145
+ }, [a]), !s || !x.data ? null : /* @__PURE__ */ u(
146
+ X,
122
147
  {
123
- onClose: n,
124
- isClosing: A,
125
- title: h,
126
- caption: e,
127
- onPlay: F,
128
- vastUrl: i,
129
- options: m,
130
- isDesktop: T
148
+ onClose: g,
149
+ isClosing: E,
150
+ title: r,
151
+ caption: k,
152
+ onPlay: R,
153
+ vastUrl: p,
154
+ options: c,
155
+ isDesktop: A,
156
+ externalPauseAdStore: i,
157
+ content: x.data
131
158
  }
132
- ) : null;
159
+ );
133
160
  };
134
161
  export {
135
- te as PauseAd
162
+ se as PauseAd
136
163
  };