@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.
- package/lib/app/app/Advertisement/index.js +14 -15
- package/lib/app/app/Features/Gamification/Leaderboard.js +46 -36
- package/lib/app/app/Features/Gamification/Question.js +42 -42
- package/lib/app/app/Features/Gamification/QuestionAdvertisement.js +19 -25
- package/lib/app/app/Features/Gamification/index.js +29 -28
- package/lib/app/app/Notifications/Onboarding/index.js +45 -42
- package/lib/app/app/story/index.js +24 -24
- package/lib/app/app/story/insight/index.js +14 -15
- package/lib/app/app/story/insight/video.js +3 -3
- package/lib/app/app/story/promotion/content.js +5 -5
- package/lib/app/app/story/promotion/index.d.ts +1 -0
- package/lib/app/app/story/promotion/index.js +24 -25
- package/lib/app/app/story/promotion/video.d.ts +0 -1
- package/lib/app/app/story/promotion/video.js +41 -43
- package/lib/app/app/story/promotion-notification/index.js +15 -16
- package/lib/app/app/story/promotion-notification/video.d.ts +0 -1
- package/lib/app/app/story/promotion-notification/video.js +22 -30
- package/lib/app/app/story/settings/index.js +6 -6
- package/lib/app/app/story/settings/login.js +1 -1
- package/lib/app/app/story/video.js +28 -28
- package/lib/app/login/demo.js +19 -18
- package/lib/app/masters/BetPack/BetPackContent/EndScreen/index.d.ts +0 -1
- package/lib/app/masters/BetPack/BetPackContent/EndScreen/index.js +17 -17
- package/lib/app/masters/Notifications/Onboarding/index.js +42 -39
- package/lib/app/masters/masters.d.ts +1 -0
- package/lib/app/masters/masters.js +34 -32
- package/lib/app/masters/provider.d.ts +4 -0
- package/lib/app/masters/provider.js +23 -0
- package/lib/app/masters/story/components.js +48 -52
- package/lib/app/masters/story/index.js +16 -15
- package/lib/app/tgl/index.d.ts +1 -0
- package/lib/app/tgl/index.js +19 -20
- package/lib/app/tgl/video.d.ts +0 -1
- package/lib/app/tgl/video.js +40 -42
- package/lib/app/webos/ExposedPauseAd/PauseAd.js +68 -68
- package/lib/app/webos/story.js +26 -26
- package/lib/app/webos/ui/Sidebar/styles.js +82 -888
- package/lib/assets/style.css +1 -1
- package/lib/core/app.d.ts +7 -0
- package/lib/core/app.js +14 -0
- package/lib/core/event.d.ts +6 -0
- package/lib/core/event.js +5 -0
- package/lib/core/hooks.d.ts +16 -0
- package/lib/core/hooks.js +8 -0
- package/lib/core/provider.d.ts +49 -0
- package/lib/core/provider.js +9 -0
- package/lib/hooks-B0Qttldg.js +99 -0
- package/lib/index.d.ts +0 -1
- package/lib/index.js +2 -4
- package/lib/ui/advertisement/banner/index.d.ts +2 -2
- package/lib/ui/advertisement/notification/lower-third/index.js +34 -30
- package/lib/ui/advertisement/overlay/externalAd/vast-player/useGAMPlayer.js +100 -33212
- package/lib/ui/advertisement/overlay/externalAd/vast-player/useGAMStatic.js +13 -13
- package/lib/ui/advertisement/overlay/externalAd/vast-player/useVastAds.js +63 -204
- package/lib/ui/gamification/leaderboard/static.d.ts +1 -1
- package/lib/ui/gamification/question/inapp/notification/AdNotification/NotificationMedia/index.d.ts +1 -1
- package/lib/ui/gamification/question/inapp/notification/AdNotification/NotificationMedia/index.js +1 -1
- package/lib/ui/icons/index.d.ts +198 -66
- package/lib/ui/video-player/index.js +26 -23
- package/lib/useStreamLayerApp.d.ts +23 -0
- package/lib/useStreamLayerApp.js +167 -0
- package/lib/utils/debug/index.js +8 -8
- package/package.json +42 -35
- package/lib/index-l-eyvmpL.js +0 -3758
- package/lib/utils/createDemo.d.ts +0 -12
- package/lib/utils/createDemo.js +0 -49
- package/lib/vast-client.min-B0NUra1B.js +0 -1060
|
@@ -1,18 +1,19 @@
|
|
|
1
|
-
import { jsx as n, jsxs as
|
|
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 {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
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__ */
|
|
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
|
-
}],
|
|
25
|
+
}], z = /* @__PURE__ */ y("div")({
|
|
25
26
|
name: "OnboardingContainer",
|
|
26
27
|
class: "o1xni1kr",
|
|
27
28
|
propsAsIs: !1
|
|
28
|
-
}),
|
|
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
|
-
}),
|
|
37
|
+
}), U = /* @__PURE__ */ y("div")({
|
|
37
38
|
name: "OnboardingOverlap",
|
|
38
39
|
class: "ovnr8ov",
|
|
39
40
|
propsAsIs: !1
|
|
40
|
-
}),
|
|
41
|
+
}), J = ({
|
|
41
42
|
deepLink: l,
|
|
42
43
|
onboardingOpts: e,
|
|
43
44
|
notification: o,
|
|
44
|
-
gamification:
|
|
45
|
+
gamification: d,
|
|
45
46
|
loading: s,
|
|
46
|
-
sdk:
|
|
47
|
+
sdk: c,
|
|
47
48
|
throttled: I
|
|
48
49
|
}) => {
|
|
49
|
-
var a, b, h, f, v, t,
|
|
50
|
-
const
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
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 :
|
|
56
|
-
}, [
|
|
58
|
+
}) => B === i)) == null ? void 0 : w.name : "";
|
|
59
|
+
}, [u.data, c]);
|
|
57
60
|
return V(() => {
|
|
58
|
-
const i = l.$store.subscribe((
|
|
59
|
-
|
|
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__ */
|
|
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: (
|
|
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:
|
|
92
|
-
sdk:
|
|
94
|
+
gamification: d,
|
|
95
|
+
sdk: c,
|
|
93
96
|
inviterName: g
|
|
94
|
-
}), I && /* @__PURE__ */ n(
|
|
97
|
+
}), I && /* @__PURE__ */ n(U, {})]
|
|
95
98
|
});
|
|
96
|
-
},
|
|
99
|
+
}, ie = ({
|
|
97
100
|
sdk: l,
|
|
98
101
|
notification: e,
|
|
99
102
|
saveHeight: o,
|
|
100
|
-
style:
|
|
103
|
+
style: d,
|
|
101
104
|
appNode: s,
|
|
102
|
-
sdkInDesktopView:
|
|
105
|
+
sdkInDesktopView: c,
|
|
103
106
|
responsiveStore: I
|
|
104
107
|
}) => {
|
|
105
|
-
const
|
|
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 =
|
|
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
|
|
123
|
+
return S && a && r && s.current ? /* @__PURE__ */ n(P, {
|
|
121
124
|
container: s,
|
|
122
|
-
useContainer: !
|
|
123
|
-
children: /* @__PURE__ */ n(
|
|
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__ */
|
|
137
|
+
}) : /* @__PURE__ */ k(O, {
|
|
135
138
|
children: [/* @__PURE__ */ n(x, {
|
|
136
|
-
ref:
|
|
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(
|
|
149
|
-
style:
|
|
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
|
|
156
|
-
g(!0), (((
|
|
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
|
-
|
|
170
|
+
ie as Onboarding
|
|
168
171
|
};
|
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
import { jsxs as i, jsx as t, Fragment as
|
|
2
|
-
import { App as
|
|
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
|
|
5
|
-
import { Layout as
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import { useStreamLayerDebug as
|
|
9
|
-
import { Video as
|
|
10
|
-
import { VideoContainer as
|
|
11
|
-
const
|
|
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 =
|
|
15
|
-
return !o || !e.app && !e.appNotification && !e.appSidebar || !e.app && !e.appSidebar && e.appNotification && !r ? null : /* @__PURE__ */ t(
|
|
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] =
|
|
17
|
+
const r = d(), [o, e] = b(!1);
|
|
18
18
|
return r ? /* @__PURE__ */ t(
|
|
19
|
-
|
|
19
|
+
c,
|
|
20
20
|
{
|
|
21
21
|
sdk: r,
|
|
22
22
|
banner: /* @__PURE__ */ t(u, { sdk: r, banner: "bottom", persistent: !0 }),
|
|
23
|
-
sidebar: /* @__PURE__ */ i(
|
|
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(
|
|
27
|
+
notification: /* @__PURE__ */ i(s, { children: [
|
|
28
28
|
/* @__PURE__ */ t(u, { sdk: r, notification: !0, persistent: !0 }),
|
|
29
|
-
/* @__PURE__ */ t(
|
|
29
|
+
/* @__PURE__ */ t(m, { sdk: r })
|
|
30
30
|
] }),
|
|
31
|
-
children: /* @__PURE__ */ i(
|
|
32
|
-
/* @__PURE__ */ t(
|
|
33
|
-
/* @__PURE__ */ t(
|
|
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 =
|
|
43
|
+
const a = h({ sdkKey: r, eventId: o, production: e });
|
|
44
44
|
return /* @__PURE__ */ i(
|
|
45
|
-
|
|
45
|
+
l,
|
|
46
46
|
{
|
|
47
47
|
sdkKey: a.sdkKey,
|
|
48
48
|
production: a.env === "production",
|
|
49
49
|
autoEnable: !0,
|
|
50
|
-
onDeepLinkHandled:
|
|
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(
|
|
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 {
|
|
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
|
|
7
|
-
import { customTheme as
|
|
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:
|
|
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:
|
|
32
|
-
production:
|
|
33
|
-
onlyInsight:
|
|
34
|
-
skipAutoClose:
|
|
31
|
+
insightId: s,
|
|
32
|
+
production: n,
|
|
33
|
+
onlyInsight: i,
|
|
34
|
+
skipAutoClose: a,
|
|
35
35
|
hideHeader: d
|
|
36
36
|
}) => {
|
|
37
|
-
const m =
|
|
37
|
+
const m = l({
|
|
38
38
|
sdkKey: t,
|
|
39
39
|
eventId: o,
|
|
40
|
-
production:
|
|
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:
|
|
48
|
-
|
|
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:
|
|
54
|
-
insightId:
|
|
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 {
|
|
3
|
-
import {
|
|
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 =
|
|
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 {
|
|
4
|
-
import { StreamLayerSDKAdvertisement as
|
|
5
|
-
import { theme as
|
|
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:
|
|
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(
|
|
23
|
+
}), /* @__PURE__ */ t(a, {
|
|
24
24
|
skipAutoClose: m,
|
|
25
25
|
sdk: s,
|
|
26
26
|
persistent: !0
|
|
@@ -1,47 +1,46 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { styled as r } from "@linaria/react";
|
|
3
|
-
import {
|
|
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
|
|
6
|
+
const f = /* @__PURE__ */ r("div")({
|
|
7
7
|
name: "Body",
|
|
8
8
|
class: "bqh4lcc",
|
|
9
9
|
propsAsIs: !1
|
|
10
|
-
}),
|
|
10
|
+
}), b = /* @__PURE__ */ r("div")({
|
|
11
11
|
name: "Main",
|
|
12
12
|
class: "mgga81b",
|
|
13
13
|
propsAsIs: !1
|
|
14
14
|
}), k = ({
|
|
15
|
-
isMobileScreen:
|
|
16
|
-
promotionId:
|
|
17
|
-
sdkKey:
|
|
18
|
-
eventId:
|
|
15
|
+
isMobileScreen: s,
|
|
16
|
+
promotionId: t,
|
|
17
|
+
sdkKey: i,
|
|
18
|
+
eventId: n,
|
|
19
19
|
sidebar: d,
|
|
20
|
-
skipAutoClose:
|
|
21
|
-
production:
|
|
20
|
+
skipAutoClose: a,
|
|
21
|
+
production: m,
|
|
22
22
|
banner: c,
|
|
23
23
|
layoutMode: p = "side-by-side"
|
|
24
24
|
}) => {
|
|
25
|
-
const
|
|
26
|
-
sdkKey:
|
|
27
|
-
eventId:
|
|
28
|
-
production:
|
|
25
|
+
const o = y({
|
|
26
|
+
sdkKey: i,
|
|
27
|
+
eventId: n,
|
|
28
|
+
production: m
|
|
29
29
|
});
|
|
30
|
-
return /* @__PURE__ */
|
|
31
|
-
children: /* @__PURE__ */
|
|
32
|
-
sdkKey:
|
|
33
|
-
event:
|
|
34
|
-
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__ */
|
|
37
|
-
children: /* @__PURE__ */
|
|
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:
|
|
43
|
-
skipAutoClose:
|
|
44
|
-
isMobileScreen:
|
|
41
|
+
promotionId: t,
|
|
42
|
+
skipAutoClose: a,
|
|
43
|
+
isMobileScreen: s
|
|
45
44
|
})
|
|
46
45
|
})
|
|
47
46
|
})
|
|
@@ -1,71 +1,69 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import { StreamLayerSDKAdvertisement as
|
|
5
|
-
import { Layout as
|
|
6
|
-
import { PromoButton as
|
|
7
|
-
const
|
|
8
|
-
const e =
|
|
9
|
-
|
|
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
|
|
12
|
-
e == null || e.removeVideoPlayerController(
|
|
13
|
-
}), [e,
|
|
14
|
-
|
|
15
|
-
var
|
|
16
|
-
(
|
|
17
|
-
|
|
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
|
-
|
|
22
|
+
r
|
|
22
23
|
] }),
|
|
23
|
-
/* @__PURE__ */
|
|
24
|
-
|
|
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__ */
|
|
28
|
-
|
|
28
|
+
sidebar: /* @__PURE__ */ t(
|
|
29
|
+
i,
|
|
29
30
|
{
|
|
30
|
-
isMobileScreen:
|
|
31
|
-
event: m,
|
|
31
|
+
isMobileScreen: a,
|
|
32
32
|
sdk: e,
|
|
33
|
-
sidebar:
|
|
34
|
-
layoutMode:
|
|
35
|
-
skipAutoClose:
|
|
33
|
+
sidebar: l,
|
|
34
|
+
layoutMode: s,
|
|
35
|
+
skipAutoClose: n,
|
|
36
36
|
externalAd: !0,
|
|
37
37
|
persistent: !0
|
|
38
38
|
}
|
|
39
39
|
),
|
|
40
|
-
banner: /* @__PURE__ */
|
|
41
|
-
|
|
40
|
+
banner: /* @__PURE__ */ t(
|
|
41
|
+
i,
|
|
42
42
|
{
|
|
43
|
-
isMobileScreen:
|
|
44
|
-
event: m,
|
|
43
|
+
isMobileScreen: a,
|
|
45
44
|
sdk: e,
|
|
46
|
-
banner:
|
|
47
|
-
layoutMode:
|
|
48
|
-
skipAutoClose:
|
|
45
|
+
banner: h,
|
|
46
|
+
layoutMode: s,
|
|
47
|
+
skipAutoClose: n,
|
|
49
48
|
persistent: !0
|
|
50
49
|
}
|
|
51
50
|
),
|
|
52
|
-
overlay: /* @__PURE__ */
|
|
53
|
-
|
|
51
|
+
overlay: /* @__PURE__ */ t(
|
|
52
|
+
i,
|
|
54
53
|
{
|
|
55
|
-
isMobileScreen:
|
|
56
|
-
event: m,
|
|
54
|
+
isMobileScreen: a,
|
|
57
55
|
sdk: e,
|
|
58
|
-
sidebar:
|
|
59
|
-
layoutMode:
|
|
60
|
-
skipAutoClose:
|
|
56
|
+
sidebar: l,
|
|
57
|
+
layoutMode: s,
|
|
58
|
+
skipAutoClose: n,
|
|
61
59
|
persistent: !0
|
|
62
60
|
}
|
|
63
61
|
),
|
|
64
|
-
children: /* @__PURE__ */
|
|
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:
|
|
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
|
-
|
|
80
|
+
K as Video
|
|
83
81
|
};
|
|
@@ -1,38 +1,37 @@
|
|
|
1
1
|
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import { styled as
|
|
3
|
-
import {
|
|
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__ */
|
|
6
|
+
const c = /* @__PURE__ */ e("div")({
|
|
7
7
|
name: "Body",
|
|
8
8
|
class: "b1ql7fnw",
|
|
9
9
|
propsAsIs: !1
|
|
10
|
-
}), l = /* @__PURE__ */
|
|
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:
|
|
17
|
-
sdkKey:
|
|
16
|
+
promotionId: s,
|
|
17
|
+
sdkKey: n,
|
|
18
18
|
eventId: i,
|
|
19
|
-
production:
|
|
19
|
+
production: d
|
|
20
20
|
}) => {
|
|
21
|
-
const
|
|
22
|
-
sdkKey:
|
|
21
|
+
const r = a({
|
|
22
|
+
sdkKey: n,
|
|
23
23
|
eventId: i,
|
|
24
|
-
production:
|
|
24
|
+
production: d
|
|
25
25
|
});
|
|
26
26
|
return /* @__PURE__ */ o(l, {
|
|
27
|
-
children: /* @__PURE__ */ o(
|
|
28
|
-
sdkKey:
|
|
29
|
-
event:
|
|
30
|
-
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
|
-
|
|
35
|
-
promotionId: n,
|
|
34
|
+
promotionId: s,
|
|
36
35
|
isMobileScreen: t
|
|
37
36
|
})
|
|
38
37
|
})
|