@streamlayer/react-ui 1.32.4 → 1.33.2

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 (67) hide show
  1. package/lib/app/app/Advertisement/index.js +14 -15
  2. package/lib/app/app/Features/Gamification/Leaderboard.js +46 -36
  3. package/lib/app/app/Features/Gamification/Question.js +42 -42
  4. package/lib/app/app/Features/Gamification/QuestionAdvertisement.js +19 -25
  5. package/lib/app/app/Features/Gamification/index.js +29 -28
  6. package/lib/app/app/Notifications/Onboarding/index.js +45 -42
  7. package/lib/app/app/story/index.js +24 -24
  8. package/lib/app/app/story/insight/index.js +14 -15
  9. package/lib/app/app/story/insight/video.js +3 -3
  10. package/lib/app/app/story/promotion/content.js +5 -5
  11. package/lib/app/app/story/promotion/index.d.ts +1 -0
  12. package/lib/app/app/story/promotion/index.js +24 -25
  13. package/lib/app/app/story/promotion/video.d.ts +0 -1
  14. package/lib/app/app/story/promotion/video.js +41 -43
  15. package/lib/app/app/story/promotion-notification/index.js +15 -16
  16. package/lib/app/app/story/promotion-notification/video.d.ts +0 -1
  17. package/lib/app/app/story/promotion-notification/video.js +22 -30
  18. package/lib/app/app/story/settings/index.js +6 -6
  19. package/lib/app/app/story/settings/login.js +1 -1
  20. package/lib/app/app/story/video.js +28 -28
  21. package/lib/app/login/demo.js +19 -18
  22. package/lib/app/masters/BetPack/BetPackContent/EndScreen/index.d.ts +0 -1
  23. package/lib/app/masters/BetPack/BetPackContent/EndScreen/index.js +17 -17
  24. package/lib/app/masters/Notifications/Onboarding/index.js +42 -39
  25. package/lib/app/masters/masters.d.ts +1 -0
  26. package/lib/app/masters/masters.js +34 -32
  27. package/lib/app/masters/provider.d.ts +4 -0
  28. package/lib/app/masters/provider.js +23 -0
  29. package/lib/app/masters/story/components.js +48 -52
  30. package/lib/app/masters/story/index.js +16 -15
  31. package/lib/app/tgl/index.d.ts +1 -0
  32. package/lib/app/tgl/index.js +19 -20
  33. package/lib/app/tgl/video.d.ts +0 -1
  34. package/lib/app/tgl/video.js +40 -42
  35. package/lib/app/webos/ExposedPauseAd/PauseAd.js +68 -68
  36. package/lib/app/webos/story.js +26 -26
  37. package/lib/app/webos/ui/Sidebar/styles.js +82 -888
  38. package/lib/assets/style.css +1 -1
  39. package/lib/core/app.d.ts +7 -0
  40. package/lib/core/app.js +14 -0
  41. package/lib/core/event.d.ts +6 -0
  42. package/lib/core/event.js +5 -0
  43. package/lib/core/hooks.d.ts +16 -0
  44. package/lib/core/hooks.js +8 -0
  45. package/lib/core/provider.d.ts +49 -0
  46. package/lib/core/provider.js +9 -0
  47. package/lib/hooks-B0Qttldg.js +99 -0
  48. package/lib/index.d.ts +0 -1
  49. package/lib/index.js +2 -4
  50. package/lib/ui/advertisement/banner/index.d.ts +2 -2
  51. package/lib/ui/advertisement/notification/lower-third/index.js +34 -30
  52. package/lib/ui/advertisement/overlay/externalAd/vast-player/useGAMPlayer.js +100 -33212
  53. package/lib/ui/advertisement/overlay/externalAd/vast-player/useGAMStatic.js +13 -13
  54. package/lib/ui/advertisement/overlay/externalAd/vast-player/useVastAds.js +63 -204
  55. package/lib/ui/gamification/leaderboard/static.d.ts +1 -1
  56. package/lib/ui/gamification/question/inapp/notification/AdNotification/NotificationMedia/index.d.ts +1 -1
  57. package/lib/ui/gamification/question/inapp/notification/AdNotification/NotificationMedia/index.js +1 -1
  58. package/lib/ui/icons/index.d.ts +198 -66
  59. package/lib/ui/video-player/index.js +26 -23
  60. package/lib/useStreamLayerApp.d.ts +23 -0
  61. package/lib/useStreamLayerApp.js +167 -0
  62. package/lib/utils/debug/index.js +8 -8
  63. package/package.json +42 -35
  64. package/lib/index-l-eyvmpL.js +0 -3758
  65. package/lib/utils/createDemo.d.ts +0 -12
  66. package/lib/utils/createDemo.js +0 -49
  67. package/lib/vast-client.min-B0NUra1B.js +0 -1060
@@ -1,18 +1,19 @@
1
- import { jsx as n, jsxs as w, Fragment as O } from "react/jsx-runtime";
1
+ import { jsx as n, jsxs as k, Fragment as O } from "react/jsx-runtime";
2
2
  import { styled as y } from "@linaria/react";
3
3
  import { useImagesPreload as _ } from "../../../useImagesPreload.js";
4
4
  import { scrollIntoAppView as E } from "../../../useSdkScroll.js";
5
5
  import { useRef as M, useState as T, useMemo as A, useLayoutEffect as R, useEffect as V } from "react";
6
6
  import { useStore as F } from "@streamlayer/react-polyfills";
7
- import { FeatureType as W } from "@streamlayer/sdk-web-types";
8
- import { OnboardingUI as $ } from "../../../../ui/gamification/onboarding/index.js";
9
- import { ModalPortal as j } from "../../../../ui/modal/index.js";
10
- import { ShowIn as P } from "../../../../ui/show-in/index.js";
7
+ import { createSingleStore as W } from "@streamlayer/sdk-web-interfaces";
8
+ import { FeatureType as $ } from "@streamlayer/sdk-web-types";
9
+ import { OnboardingUI as j } from "../../../../ui/gamification/onboarding/index.js";
10
+ import { ModalPortal as P } from "../../../../ui/modal/index.js";
11
+ import { ShowIn as q } from "../../../../ui/show-in/index.js";
11
12
  import { Onboarding as L } from "./Notification/index.js";
12
13
  const C = [{
13
14
  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/dark/step_1.png",
14
15
  tagline: "",
15
- headline: /* @__PURE__ */ w(O, {
16
+ headline: /* @__PURE__ */ k(O, {
16
17
  children: ["Welcome to ", /* @__PURE__ */ n("br", {}), " Live Challenge"]
17
18
  })
18
19
  }, {
@@ -21,11 +22,11 @@ const C = [{
21
22
  }, {
22
23
  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/dark/step_3.png",
23
24
  headline: "Win points and play against friends."
24
- }], q = /* @__PURE__ */ y("div")({
25
+ }], z = /* @__PURE__ */ y("div")({
25
26
  name: "OnboardingContainer",
26
27
  class: "o1xni1kr",
27
28
  propsAsIs: !1
28
- }), z = () => P, D = /* @__PURE__ */ y(z())({
29
+ }), D = () => q, G = /* @__PURE__ */ y(D())({
29
30
  name: "OnboardingNotificationContainer",
30
31
  class: "o1vnouv7",
31
32
  propsAsIs: !0
@@ -33,36 +34,38 @@ const C = [{
33
34
  name: "InnerContainer",
34
35
  class: "i59uefw",
35
36
  propsAsIs: !1
36
- }), G = /* @__PURE__ */ y("div")({
37
+ }), U = /* @__PURE__ */ y("div")({
37
38
  name: "OnboardingOverlap",
38
39
  class: "ovnr8ov",
39
40
  propsAsIs: !1
40
- }), U = ({
41
+ }), J = ({
41
42
  deepLink: l,
42
43
  onboardingOpts: e,
43
44
  notification: o,
44
- gamification: p,
45
+ gamification: d,
45
46
  loading: s,
46
- sdk: d,
47
+ sdk: c,
47
48
  throttled: I
48
49
  }) => {
49
- var a, b, h, f, v, t, u;
50
- const c = F(p.friends.getStore()), [r, k] = T(void 0), g = A(() => {
51
- var m, S;
52
- const i = d.getInviter();
53
- return i ? (S = (m = c.data) == null ? void 0 : m.find(({
50
+ var a, b, h, f, v, t, m;
51
+ const u = F(d.friends ? d.friends.getStore() : W({
52
+ data: []
53
+ })), [r, S] = T(void 0), g = A(() => {
54
+ var p, w;
55
+ const i = c.getInviter();
56
+ return i ? (w = (p = u.data) == null ? void 0 : p.find(({
54
57
  slId: B
55
- }) => B === i)) == null ? void 0 : S.name : "";
56
- }, [c.data, d]);
58
+ }) => B === i)) == null ? void 0 : w.name : "";
59
+ }, [u.data, c]);
57
60
  return V(() => {
58
- const i = l.$store.subscribe((m) => {
59
- m && k(m.data);
61
+ const i = l.$store.subscribe((p) => {
62
+ p && S(p.data);
60
63
  });
61
64
  return () => {
62
65
  i();
63
66
  };
64
- }, [l.$store]), /* @__PURE__ */ w(q, {
65
- children: [/* @__PURE__ */ n($, {
67
+ }, [l.$store]), /* @__PURE__ */ k(z, {
68
+ children: [/* @__PURE__ */ n(j, {
66
69
  loading: s,
67
70
  rules: [{
68
71
  label: "Answer as many questions as you like.",
@@ -83,26 +86,26 @@ const C = [{
83
86
  inviteLink: r,
84
87
  inviteCardTitle: (v = e.inviteCard) == null ? void 0 : v.heading,
85
88
  inviteCardSubtext: (t = e.inviteCard) == null ? void 0 : t.subtext,
86
- inviteCardBtnLabel: (u = e.inviteCard) == null ? void 0 : u.buttonLabel,
89
+ inviteCardBtnLabel: (m = e.inviteCard) == null ? void 0 : m.buttonLabel,
87
90
  onClose: () => {
88
91
  var i;
89
92
  (i = o.close) == null || i.call(o);
90
93
  },
91
- gamification: p,
92
- sdk: d,
94
+ gamification: d,
95
+ sdk: c,
93
96
  inviterName: g
94
- }), I && /* @__PURE__ */ n(G, {})]
97
+ }), I && /* @__PURE__ */ n(U, {})]
95
98
  });
96
- }, te = ({
99
+ }, ie = ({
97
100
  sdk: l,
98
101
  notification: e,
99
102
  saveHeight: o,
100
- style: p,
103
+ style: d,
101
104
  appNode: s,
102
- sdkInDesktopView: d,
105
+ sdkInDesktopView: c,
103
106
  responsiveStore: I
104
107
  }) => {
105
- const c = M(null), r = e.data.onboarding, [k, g] = T(r == null ? void 0 : r.instantOpen), a = l.getFeature(W.GAMES), b = A(() => C == null ? void 0 : C.map(({
108
+ const u = M(null), r = e.data.onboarding, [S, g] = T(r == null ? void 0 : r.instantOpen), a = l.getFeature($.GAMES), b = A(() => C == null ? void 0 : C.map(({
106
109
  graphicSrc: t
107
110
  }) => t), []), {
108
111
  screen: h
@@ -111,16 +114,16 @@ const C = [{
111
114
  });
112
115
  R(() => {
113
116
  var t;
114
- o(((t = c.current) == null ? void 0 : t.getBoundingClientRect().height) || 0);
117
+ o(((t = u.current) == null ? void 0 : t.getBoundingClientRect().height) || 0);
115
118
  }, [o]);
116
119
  const {
117
120
  loading: f,
118
121
  throttled: v
119
122
  } = _(b);
120
- return k && a && r && s.current ? /* @__PURE__ */ n(j, {
123
+ return S && a && r && s.current ? /* @__PURE__ */ n(P, {
121
124
  container: s,
122
- useContainer: !d,
123
- children: /* @__PURE__ */ n(U, {
125
+ useContainer: !c,
126
+ children: /* @__PURE__ */ n(J, {
124
127
  throttled: v,
125
128
  notification: e,
126
129
  setOpened: g,
@@ -131,9 +134,9 @@ const C = [{
131
134
  renderToNode: s,
132
135
  sdk: l
133
136
  })
134
- }) : /* @__PURE__ */ w(O, {
137
+ }) : /* @__PURE__ */ k(O, {
135
138
  children: [/* @__PURE__ */ n(x, {
136
- ref: c,
139
+ ref: u,
137
140
  style: {
138
141
  position: "absolute",
139
142
  visibility: "hidden"
@@ -145,15 +148,15 @@ const C = [{
145
148
  },
146
149
  onboarding: r
147
150
  })
148
- }), /* @__PURE__ */ n(D, {
149
- style: p,
151
+ }), /* @__PURE__ */ n(G, {
152
+ style: d,
150
153
  hiding: e.hiding,
151
154
  children: /* @__PURE__ */ n(x, {
152
155
  children: /* @__PURE__ */ n(L, {
153
156
  close: e.close,
154
157
  action: () => {
155
- var u;
156
- g(!0), (((u = s.current) == null ? void 0 : u.getBoundingClientRect().y) || 0) < 0 && E(s, h.size, {
158
+ var m;
159
+ g(!0), (((m = s.current) == null ? void 0 : m.getBoundingClientRect().y) || 0) < 0 && E(s, h.size, {
157
160
  behavior: "smooth"
158
161
  });
159
162
  },
@@ -164,5 +167,5 @@ const C = [{
164
167
  });
165
168
  };
166
169
  export {
167
- te as Onboarding
170
+ ie as Onboarding
168
171
  };
@@ -1,36 +1,36 @@
1
- import { jsxs as i, jsx as t, Fragment as p } from "react/jsx-runtime";
2
- import { App as m } from "../index.js";
1
+ import { jsxs as i, jsx as t, Fragment as s } from "react/jsx-runtime";
2
+ import { App as p } from "../index.js";
3
3
  import { StreamLayerSDKAdvertisement as u } from "../Advertisement/index.js";
4
- import { StreamLayerSDKNotification as c } from "../InApp/index.js";
5
- import { Layout as l } from "../Layout/index.js";
6
- import { useState as f } from "react";
7
- import { StreamLayerProvider as S, StreamLayerSDKEvent as b, useStreamLayer as d, useStreamLayerUI as h } from "@streamlayer/react";
8
- import { useStreamLayerDebug as y } from "../../../utils/debug/index.js";
9
- import { Video as v } from "./video.js";
10
- import { VideoContainer as A, VideoMuteButton as L } from "./styles.js";
11
- const s = () => {
4
+ import { StreamLayerSDKNotification as m } from "../InApp/index.js";
5
+ import { Layout as c } from "../Layout/index.js";
6
+ import { d as l, e as f, u as d, a as S } from "../../../hooks-B0Qttldg.js";
7
+ import { useState as b } from "react";
8
+ import { useStreamLayerDebug as h } from "../../../utils/debug/index.js";
9
+ import { Video as y } from "./video.js";
10
+ import { VideoContainer as v, VideoMuteButton as A } from "./styles.js";
11
+ const L = () => {
12
12
  console.log("deep link handled cb");
13
13
  }, k = ({ withSidebarNotification: r }) => {
14
- const o = d(), e = h();
15
- return !o || !e.app && !e.appNotification && !e.appSidebar || !e.app && !e.appSidebar && e.appNotification && !r ? null : /* @__PURE__ */ t(m, { sdk: o, onDeepLinkHandled: s });
14
+ const o = d(), e = S();
15
+ return !o || !e.app && !e.appNotification && !e.appSidebar || !e.app && !e.appSidebar && e.appNotification && !r ? null : /* @__PURE__ */ t(p, { sdk: o });
16
16
  }, g = () => {
17
- const r = d(), [o, e] = f(!1);
17
+ const r = d(), [o, e] = b(!1);
18
18
  return r ? /* @__PURE__ */ t(
19
- l,
19
+ c,
20
20
  {
21
21
  sdk: r,
22
22
  banner: /* @__PURE__ */ t(u, { sdk: r, banner: "bottom", persistent: !0 }),
23
- sidebar: /* @__PURE__ */ i(p, { children: [
23
+ sidebar: /* @__PURE__ */ i(s, { children: [
24
24
  /* @__PURE__ */ t(u, { sdk: r, sidebar: "right", muted: !o, skipAutoClose: !0, externalAd: !0, persistent: !0 }),
25
25
  /* @__PURE__ */ t(k, { withSidebarNotification: !1 })
26
26
  ] }),
27
- notification: /* @__PURE__ */ i(p, { children: [
27
+ notification: /* @__PURE__ */ i(s, { children: [
28
28
  /* @__PURE__ */ t(u, { sdk: r, notification: !0, persistent: !0 }),
29
- /* @__PURE__ */ t(c, { sdk: r })
29
+ /* @__PURE__ */ t(m, { sdk: r })
30
30
  ] }),
31
- children: /* @__PURE__ */ i(A, { className: "divAnchor", children: [
32
- /* @__PURE__ */ t(v, { muted: o, toggleMute: e }),
33
- /* @__PURE__ */ t(L, { onClick: () => e((n) => !n), children: o ? "unmute" : "mute" })
31
+ children: /* @__PURE__ */ i(v, { className: "divAnchor", children: [
32
+ /* @__PURE__ */ t(y, { muted: o, toggleMute: e }),
33
+ /* @__PURE__ */ t(A, { onClick: () => e((n) => !n), children: o ? "unmute" : "mute" })
34
34
  ] })
35
35
  }
36
36
  ) : null;
@@ -40,20 +40,20 @@ const s = () => {
40
40
  production: e,
41
41
  friendsTab: n
42
42
  }) => {
43
- const a = y({ sdkKey: r, eventId: o, production: e });
43
+ const a = h({ sdkKey: r, eventId: o, production: e });
44
44
  return /* @__PURE__ */ i(
45
- S,
45
+ l,
46
46
  {
47
47
  sdkKey: a.sdkKey,
48
48
  production: a.env === "production",
49
49
  autoEnable: !0,
50
- onDeepLinkHandled: s,
50
+ onDeepLinkHandled: L,
51
51
  withAd: !0,
52
52
  withAdNotification: !0,
53
53
  friendsTab: n,
54
54
  children: [
55
55
  /* @__PURE__ */ t(g, {}),
56
- /* @__PURE__ */ t(b, { event: a.event })
56
+ /* @__PURE__ */ t(f, { event: a.event })
57
57
  ]
58
58
  }
59
59
  );
@@ -1,10 +1,10 @@
1
1
  import { jsx as r } from "react/jsx-runtime";
2
2
  import { styled as u } from "@linaria/react";
3
- import { StreamLayerProvider as p, useStreamLayer as c } from "@streamlayer/react";
3
+ import { d as p, u as c } from "../../../../hooks-B0Qttldg.js";
4
4
  import { StreamLayerSDKInsight as y } from "../../Insight/index.js";
5
5
  import { StreamLayerThemeProvider as f } from "../../../../ui/theme/index.js";
6
- import { useStreamLayerDebug as h } from "../../../../utils/debug/index.js";
7
- import { customTheme as l } from "./styles.js";
6
+ import { useStreamLayerDebug as l } from "../../../../utils/debug/index.js";
7
+ import { customTheme as h } from "./styles.js";
8
8
  import { Video as v } from "./video.js";
9
9
  const S = /* @__PURE__ */ u("div")({
10
10
  name: "Body",
@@ -16,7 +16,7 @@ const S = /* @__PURE__ */ u("div")({
16
16
  }) => {
17
17
  const e = c();
18
18
  return e ? /* @__PURE__ */ r(f, {
19
- customTheme: l,
19
+ customTheme: h,
20
20
  children: /* @__PURE__ */ r(y, {
21
21
  hideHeader: t,
22
22
  sdk: e,
@@ -28,30 +28,29 @@ const S = /* @__PURE__ */ u("div")({
28
28
  sdkKey: t,
29
29
  eventId: o,
30
30
  layoutMode: e,
31
- insightId: n,
32
- production: i,
33
- onlyInsight: a,
34
- skipAutoClose: s,
31
+ insightId: s,
32
+ production: n,
33
+ onlyInsight: i,
34
+ skipAutoClose: a,
35
35
  hideHeader: d
36
36
  }) => {
37
- const m = h({
37
+ const m = l({
38
38
  sdkKey: t,
39
39
  eventId: o,
40
- production: i
40
+ production: n
41
41
  });
42
42
  return /* @__PURE__ */ r(p, {
43
43
  sdkKey: m.sdkKey,
44
44
  event: m.event,
45
45
  production: m.env === "production",
46
46
  autoEnable: !0,
47
- children: a ? /* @__PURE__ */ r(L, {
48
- skipAutoClose: s,
49
- insightId: n,
47
+ children: i ? /* @__PURE__ */ r(L, {
48
+ insightId: s,
50
49
  hideHeader: d
51
50
  }) : /* @__PURE__ */ r(S, {
52
51
  children: /* @__PURE__ */ r(v, {
53
- skipAutoClose: s,
54
- insightId: n,
52
+ skipAutoClose: a,
53
+ insightId: s,
55
54
  layoutMode: e
56
55
  })
57
56
  })
@@ -1,11 +1,11 @@
1
1
  import { jsxs as i, Fragment as h, jsx as e } from "react/jsx-runtime";
2
- import { useRef as c } from "react";
3
- import { useStreamLayer as l } from "@streamlayer/react";
2
+ import { u as c } from "../../../../hooks-B0Qttldg.js";
3
+ import { useRef as l } from "react";
4
4
  import { StreamLayerSDKInsight as n } from "../../Insight/index.js";
5
5
  import { StreamLayerThemeProvider as s } from "../../../../ui/theme/index.js";
6
6
  import { VideoFrame as p, customTheme as a, VideoPlayerWrap as u, InsightContainerMobile as f, InsightContainerOverlay as g, InsightContainerLBar as v } from "./styles.js";
7
7
  const F = ({ insightId: t, layoutMode: m, skipAutoClose: o }) => {
8
- const r = l(), d = c(null);
8
+ const r = c(), d = l(null);
9
9
  return /* @__PURE__ */ i(h, { children: [
10
10
  /* @__PURE__ */ i(p, { ref: d, "data-testid": "video-frame", children: [
11
11
  /* @__PURE__ */ e(m === "cover" ? g : v, { children: r && /* @__PURE__ */ e(s, { customTheme: a, children: /* @__PURE__ */ e(n, { skipAutoClose: o, sdk: r, insightId: t, persistent: !0 }) }) }),
@@ -1,8 +1,8 @@
1
1
  import { jsxs as e, jsx as t } from "react/jsx-runtime";
2
2
  import { styled as r } from "@linaria/react";
3
- import { useStreamLayer as o } from "@streamlayer/react";
4
- import { StreamLayerSDKAdvertisement as i } from "../../Advertisement/index.js";
5
- import { theme as a } from "../../../../ui/theme/theme.js";
3
+ import { u as o } from "../../../../hooks-B0Qttldg.js";
4
+ import { StreamLayerSDKAdvertisement as a } from "../../Advertisement/index.js";
5
+ import { theme as i } from "../../../../ui/theme/theme.js";
6
6
  const d = /* @__PURE__ */ r("div")({
7
7
  name: "Container",
8
8
  class: "c1g3vhjc",
@@ -16,11 +16,11 @@ const d = /* @__PURE__ */ r("div")({
16
16
  }) => {
17
17
  const s = o();
18
18
  return s ? /* @__PURE__ */ e(d, {
19
- className: a,
19
+ className: i,
20
20
  "data-testid": "overlay",
21
21
  children: [/* @__PURE__ */ e(n, {
22
22
  children: ["Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ", /* @__PURE__ */ t("br", {}), "-------------"]
23
- }), /* @__PURE__ */ t(i, {
23
+ }), /* @__PURE__ */ t(a, {
24
24
  skipAutoClose: m,
25
25
  sdk: s,
26
26
  persistent: !0
@@ -7,4 +7,5 @@ export declare const PromotionStory: React.FC<{
7
7
  skipAutoClose?: boolean;
8
8
  sidebar: 'left' | 'right';
9
9
  banner: 'top' | 'bottom';
10
+ layoutMode?: 'cover' | 'side-by-side';
10
11
  }>;
@@ -1,47 +1,46 @@
1
- import { jsx as o } from "react/jsx-runtime";
1
+ import { jsx as e } from "react/jsx-runtime";
2
2
  import { styled as r } from "@linaria/react";
3
- import { StreamLayerProvider as l } from "@streamlayer/react";
3
+ import { d as l } from "../../../../hooks-B0Qttldg.js";
4
4
  import { useStreamLayerDebug as y } from "../../../../utils/debug/index.js";
5
5
  import { Video as u } from "./video.js";
6
- const v = /* @__PURE__ */ r("div")({
6
+ const f = /* @__PURE__ */ r("div")({
7
7
  name: "Body",
8
8
  class: "bqh4lcc",
9
9
  propsAsIs: !1
10
- }), f = /* @__PURE__ */ r("div")({
10
+ }), b = /* @__PURE__ */ r("div")({
11
11
  name: "Main",
12
12
  class: "mgga81b",
13
13
  propsAsIs: !1
14
14
  }), k = ({
15
- isMobileScreen: t,
16
- promotionId: s,
17
- sdkKey: n,
18
- eventId: i,
15
+ isMobileScreen: s,
16
+ promotionId: t,
17
+ sdkKey: i,
18
+ eventId: n,
19
19
  sidebar: d,
20
- skipAutoClose: m,
21
- production: a,
20
+ skipAutoClose: a,
21
+ production: m,
22
22
  banner: c,
23
23
  layoutMode: p = "side-by-side"
24
24
  }) => {
25
- const e = y({
26
- sdkKey: n,
27
- eventId: i,
28
- production: a
25
+ const o = y({
26
+ sdkKey: i,
27
+ eventId: n,
28
+ production: m
29
29
  });
30
- return /* @__PURE__ */ o(f, {
31
- children: /* @__PURE__ */ o(l, {
32
- sdkKey: e.sdkKey,
33
- event: e.event,
34
- production: e.env === "production",
30
+ return /* @__PURE__ */ e(b, {
31
+ children: /* @__PURE__ */ e(l, {
32
+ sdkKey: o.sdkKey,
33
+ event: o.event,
34
+ production: o.env === "production",
35
35
  autoEnable: !0,
36
- children: /* @__PURE__ */ o(v, {
37
- children: /* @__PURE__ */ o(u, {
38
- event: e.event,
36
+ children: /* @__PURE__ */ e(f, {
37
+ children: /* @__PURE__ */ e(u, {
39
38
  banner: c,
40
39
  sidebar: d,
41
40
  layoutMode: p,
42
- promotionId: s,
43
- skipAutoClose: m,
44
- isMobileScreen: t
41
+ promotionId: t,
42
+ skipAutoClose: a,
43
+ isMobileScreen: s
45
44
  })
46
45
  })
47
46
  })
@@ -4,6 +4,5 @@ export declare const Video: React.FC<{
4
4
  layoutMode: 'cover' | 'side-by-side';
5
5
  isMobileScreen?: boolean;
6
6
  skipAutoClose?: boolean;
7
- event?: string;
8
7
  promotionId?: string;
9
8
  }>;
@@ -1,71 +1,69 @@
1
- import { jsxs as d, Fragment as g, jsx as r } from "react/jsx-runtime";
2
- import { useRef as v, useState as y, useCallback as V, useEffect as x } from "react";
3
- import { useStreamLayer as P } from "@streamlayer/react";
4
- import { StreamLayerSDKAdvertisement as l } from "../../Advertisement/index.js";
5
- import { Layout as b } from "../../Layout/index.js";
6
- import { PromoButton as w, VideoFrame as F } from "./styles.js";
7
- const D = ({ isMobileScreen: o, skipAutoClose: a, sidebar: u, banner: p, event: m, promotionId: n, layoutMode: i }) => {
8
- const e = P(), c = v(null), [h, f] = y(!1), s = V(({ muted: t }) => {
9
- f(t);
1
+ import { jsxs as p, Fragment as y, jsx as t } from "react/jsx-runtime";
2
+ import { u as V } from "../../../../hooks-B0Qttldg.js";
3
+ import { useRef as x, useState as P, useCallback as b, useEffect as w } from "react";
4
+ import { StreamLayerSDKAdvertisement as i } from "../../Advertisement/index.js";
5
+ import { Layout as F } from "../../Layout/index.js";
6
+ import { PromoButton as L, VideoFrame as j } from "./styles.js";
7
+ const K = ({ isMobileScreen: a, skipAutoClose: n, sidebar: l, banner: h, promotionId: r, layoutMode: s }) => {
8
+ const e = V(), u = x(null), [g, v] = P(!1), m = b(({ muted: o }) => {
9
+ v(o ?? !1);
10
10
  }, []);
11
- return x(() => (e == null || e.addVideoPlayerController(s), () => {
12
- e == null || e.removeVideoPlayerController(s);
13
- }), [e, s]), /* @__PURE__ */ d(g, { children: [
14
- n && /* @__PURE__ */ d(w, { onClick: () => {
15
- var t;
16
- (t = c.current) == null || t.scrollIntoView({ behavior: "smooth" }), setTimeout(() => {
17
- e == null || e.getFeature(12).background.advertisement.show(n);
11
+ return w(() => (e == null || e.addVideoPlayerController(m), () => {
12
+ e == null || e.removeVideoPlayerController(m);
13
+ }), [e, m]), /* @__PURE__ */ p(y, { children: [
14
+ r && /* @__PURE__ */ p(L, { onClick: () => {
15
+ var o;
16
+ (o = u.current) == null || o.scrollIntoView({ behavior: "smooth" }), setTimeout(() => {
17
+ var c, d, f;
18
+ r && ((f = (d = (c = e == null ? void 0 : e.getFeature(12)) == null ? void 0 : c.background) == null ? void 0 : d.advertisement) == null || f.show(r));
18
19
  }, 200);
19
20
  }, children: [
20
21
  "open promotion: ",
21
- n
22
+ r
22
23
  ] }),
23
- /* @__PURE__ */ r(F, { ref: c, "data-testid": "video-frame", children: e && /* @__PURE__ */ r(
24
- b,
24
+ /* @__PURE__ */ t(j, { ref: u, "data-testid": "video-frame", children: e && /* @__PURE__ */ t(
25
+ F,
25
26
  {
26
27
  sdk: e,
27
- sidebar: /* @__PURE__ */ r(
28
- l,
28
+ sidebar: /* @__PURE__ */ t(
29
+ i,
29
30
  {
30
- isMobileScreen: o,
31
- event: m,
31
+ isMobileScreen: a,
32
32
  sdk: e,
33
- sidebar: u,
34
- layoutMode: i,
35
- skipAutoClose: a,
33
+ sidebar: l,
34
+ layoutMode: s,
35
+ skipAutoClose: n,
36
36
  externalAd: !0,
37
37
  persistent: !0
38
38
  }
39
39
  ),
40
- banner: /* @__PURE__ */ r(
41
- l,
40
+ banner: /* @__PURE__ */ t(
41
+ i,
42
42
  {
43
- isMobileScreen: o,
44
- event: m,
43
+ isMobileScreen: a,
45
44
  sdk: e,
46
- banner: p,
47
- layoutMode: i,
48
- skipAutoClose: a,
45
+ banner: h,
46
+ layoutMode: s,
47
+ skipAutoClose: n,
49
48
  persistent: !0
50
49
  }
51
50
  ),
52
- overlay: /* @__PURE__ */ r(
53
- l,
51
+ overlay: /* @__PURE__ */ t(
52
+ i,
54
53
  {
55
- isMobileScreen: o,
56
- event: m,
54
+ isMobileScreen: a,
57
55
  sdk: e,
58
- sidebar: u,
59
- layoutMode: i,
60
- skipAutoClose: a,
56
+ sidebar: l,
57
+ layoutMode: s,
58
+ skipAutoClose: n,
61
59
  persistent: !0
62
60
  }
63
61
  ),
64
- children: /* @__PURE__ */ r("div", { className: "divAnchor", children: /* @__PURE__ */ r(
62
+ children: /* @__PURE__ */ t("div", { className: "divAnchor", children: /* @__PURE__ */ t(
65
63
  "video",
66
64
  {
67
65
  src: "https://storage.googleapis.com/gvabox/media/samples/stock.mp4",
68
- muted: h,
66
+ muted: g,
69
67
  width: "100%",
70
68
  height: "100%",
71
69
  autoplay: "autoplay",
@@ -79,5 +77,5 @@ const D = ({ isMobileScreen: o, skipAutoClose: a, sidebar: u, banner: p, event:
79
77
  ] });
80
78
  };
81
79
  export {
82
- D as Video
80
+ K as Video
83
81
  };
@@ -1,38 +1,37 @@
1
1
  import { jsx as o } from "react/jsx-runtime";
2
- import { styled as r } from "@linaria/react";
3
- import { StreamLayerProvider as d } from "@streamlayer/react";
2
+ import { styled as e } from "@linaria/react";
3
+ import { d as m } from "../../../../hooks-B0Qttldg.js";
4
4
  import { useStreamLayerDebug as a } from "../../../../utils/debug/index.js";
5
5
  import { Video as p } from "./video.js";
6
- const c = /* @__PURE__ */ r("div")({
6
+ const c = /* @__PURE__ */ e("div")({
7
7
  name: "Body",
8
8
  class: "b1ql7fnw",
9
9
  propsAsIs: !1
10
- }), l = /* @__PURE__ */ r("div")({
10
+ }), l = /* @__PURE__ */ e("div")({
11
11
  name: "Main",
12
12
  class: "m18rqnzu",
13
13
  propsAsIs: !1
14
14
  }), h = ({
15
15
  isMobileScreen: t,
16
- promotionId: n,
17
- sdkKey: s,
16
+ promotionId: s,
17
+ sdkKey: n,
18
18
  eventId: i,
19
- production: m
19
+ production: d
20
20
  }) => {
21
- const e = a({
22
- sdkKey: s,
21
+ const r = a({
22
+ sdkKey: n,
23
23
  eventId: i,
24
- production: m
24
+ production: d
25
25
  });
26
26
  return /* @__PURE__ */ o(l, {
27
- children: /* @__PURE__ */ o(d, {
28
- sdkKey: e.sdkKey,
29
- event: e.event,
30
- production: e.env === "production",
27
+ children: /* @__PURE__ */ o(m, {
28
+ sdkKey: r.sdkKey,
29
+ event: r.event,
30
+ production: r.env === "production",
31
31
  autoEnable: !0,
32
32
  children: /* @__PURE__ */ o(c, {
33
33
  children: /* @__PURE__ */ o(p, {
34
- event: e.event,
35
- promotionId: n,
34
+ promotionId: s,
36
35
  isMobileScreen: t
37
36
  })
38
37
  })
@@ -1,5 +1,4 @@
1
1
  export declare const Video: React.FC<{
2
2
  isMobileScreen?: boolean;
3
- event?: string;
4
3
  promotionId?: string;
5
4
  }>;