@streamlayer/react 0.41.10 → 1.1.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 (40) hide show
  1. package/lib/app/advertisement.d.ts +1 -0
  2. package/lib/app/app.d.ts +5 -3
  3. package/lib/app/auth.d.ts +0 -1
  4. package/lib/app/masters.d.ts +2 -1
  5. package/lib/app/provider.d.ts +5 -4
  6. package/lib/app/useStreamLayerApp.d.ts +8 -7
  7. package/lib/cjs/app.js +1 -1
  8. package/lib/cjs/gamification-feature.js +1 -1
  9. package/lib/cjs/gamification-feature2.js +1 -0
  10. package/lib/cjs/index.js +1 -1
  11. package/lib/cjs/index2.js +182 -14
  12. package/lib/cjs/masters.js +1 -1
  13. package/lib/cjs/masters2.js +9 -164
  14. package/lib/cjs/points.js +1 -1
  15. package/lib/cjs/useStreamLayerApp.js +1 -1
  16. package/lib/cjs/useStreamLayerApp2.js +17 -0
  17. package/lib/dist/cjs/gamification-feature2.js +1 -0
  18. package/lib/dist/cjs/index.js +1 -1
  19. package/lib/dist/cjs/masters.js +92 -80
  20. package/lib/dist/es/gamification-feature2.js +115 -0
  21. package/lib/dist/es/index.js +7 -5
  22. package/lib/dist/es/masters.js +31532 -34905
  23. package/lib/dist/index.d.ts +234 -145
  24. package/lib/dist/style.css +1 -1
  25. package/lib/es/app.js +940 -11
  26. package/lib/es/gamification-feature.js +1 -1
  27. package/lib/es/gamification-feature2.js +4 -0
  28. package/lib/es/index.js +6 -14
  29. package/lib/es/index2.js +23159 -112
  30. package/lib/es/masters.js +1 -1
  31. package/lib/es/masters2.js +679 -23045
  32. package/lib/es/points.js +30 -33
  33. package/lib/es/useStreamLayerApp.js +3 -36
  34. package/lib/es/useStreamLayerApp2.js +17388 -0
  35. package/lib/index.d.ts +1 -1
  36. package/lib/masters.d.ts +2 -1
  37. package/lib/style.css +1 -1
  38. package/package.json +45 -40
  39. package/lib/cjs/index3.js +0 -1
  40. package/lib/es/index3.js +0 -246
package/lib/es/app.js CHANGED
@@ -1,16 +1,945 @@
1
- import { jsx as r } from "react/jsx-runtime";
2
- import { a as s, b as t, i as n } from "./index2.js";
3
- import { useContext as i } from "react";
4
- const o = () => null, d = () => {
5
- const { sdk: e } = i(s);
1
+ var ge = Object.defineProperty;
2
+ var me = (e, s, n) => s in e ? ge(e, s, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[s] = n;
3
+ var g = (e, s, n) => me(e, typeof s != "symbol" ? s + "" : s, n);
4
+ import { jsx as t, jsxs as m, Fragment as L } from "react/jsx-runtime";
5
+ import { a3 as V, u, F as fe, s as h, T as re, i as ke, x as ye, a as Ne, N as be, k as Se, M as Ie, b as Ee, e as we, C as Ae, f as Ce, O as ae, m as P, l as $e, g as Le, h as De, n as le, j as Te, o as xe, q as Oe, r as M, t as Re, v as de, w as U, y as Ve, z as Pe, I as Q, c as ce, B as Qe, D as _e, E as qe, G as Fe, H as x, J as G, K as Ke, L as Me, P as Ue, Q as ze, U as Be, V as We, W as _, _ as Ge, p as q, $ as He, a0 as je, X as Xe, Y as Ye, Z as Ze, a4 as Je, a1 as pe, a2 as H } from "./index2.js";
6
+ import { createContext as es, useContext as z, useRef as $, useState as E, useEffect as k, useTransition as ss, lazy as ns, useMemo as C, Suspense as ts, forwardRef as os, useLayoutEffect as is, useCallback as R } from "react";
7
+ import { C as A, c as j, Q as O, S as D } from "./useStreamLayerApp2.js";
8
+ window.dispatchEvent(new CustomEvent("grpc_devtools_loaded"));
9
+ function rs(e) {
10
+ return e instanceof DOMException && // everything except Firefox
11
+ (e.code === 22 || // Firefox
12
+ e.code === 1014 || // test name field too, because code might not be present
13
+ // everything except Firefox
14
+ e.name === "QuotaExceededError" || // Firefox
15
+ e.name === "NS_ERROR_DOM_QUOTA_REACHED");
16
+ }
17
+ class as {
18
+ constructor(s = "main", n = window.localStorage) {
19
+ g(this, "delimiter", ":");
20
+ g(this, "prefix");
21
+ g(this, "storage");
22
+ g(this, "clear", () => {
23
+ for (const s in window.localStorage)
24
+ s.startsWith(this.prefix) && this.storage.removeItem(s);
25
+ });
26
+ g(this, "generateKey", (s) => `${this.prefix}${this.delimiter}${s.join(this.delimiter)}`);
27
+ g(this, "write", (...s) => {
28
+ const n = s.pop() || "", o = this.generateKey(s);
29
+ try {
30
+ this.storage.setItem(o, n);
31
+ } catch (i) {
32
+ rs(i) && this.storage === window.sessionStorage && (window.sessionStorage.removeItem("slstreamlogs"), this.storage.setItem(o, n));
33
+ }
34
+ });
35
+ g(this, "read", (...s) => {
36
+ const n = this.storage.getItem(this.generateKey(s));
37
+ return n === null ? void 0 : n;
38
+ });
39
+ g(this, "remove", (...s) => {
40
+ this.storage.removeItem(this.generateKey(s));
41
+ });
42
+ this.prefix = `sl-sdk${this.delimiter}${s}`, this.storage = n;
43
+ }
44
+ }
45
+ var X;
46
+ (function(e) {
47
+ e.Init = "init", e.Ready = "ready", e.Connecting = "connecting", e.Connected = "connected", e.Disconnected = "disconnected", e.Failed = "failed", e.Reconnect = "reconnect", e.Reconnecting = "reconnecting";
48
+ })(X || (X = {}));
49
+ A.Unknown, A.Internal, A.DeadlineExceeded, A.ResourceExhausted, A.FailedPrecondition, A.Unavailable, A.DataLoss;
50
+ V("grpc:retry");
51
+ j(10, { description: "Number of attempts to retry" }), j(3e4, { description: "Max delay between retries in milliseconds" });
52
+ var I;
53
+ (function(e) {
54
+ e.SCHEMA = "schema", e.EXTERNAL_TOKEN = "eToken", e.TOKEN = "token";
55
+ })(I || (I = {}));
56
+ class ls extends as {
57
+ constructor() {
58
+ super("user");
59
+ // Schema
60
+ g(this, "setSchema", (n) => {
61
+ this.write(I.SCHEMA, n);
62
+ });
63
+ g(this, "getSchema", () => this.read(I.SCHEMA));
64
+ // Token
65
+ g(this, "setToken", (n) => {
66
+ this.write(I.TOKEN, n);
67
+ });
68
+ g(this, "getToken", () => this.read(I.TOKEN));
69
+ // External Token
70
+ g(this, "setExternalToken", (n) => {
71
+ this.write(I.EXTERNAL_TOKEN, n);
72
+ });
73
+ g(this, "getExternalToken", () => this.read(I.EXTERNAL_TOKEN));
74
+ g(this, "removeToken", () => {
75
+ this.remove(I.TOKEN);
76
+ });
77
+ }
78
+ }
79
+ var Y;
80
+ (function(e) {
81
+ e.DISABLED = "disabled", e.INITIALIZATION = "initialization", e.READY = "ready", e.FAILED = "failed", e.SUSPENDED = "suspended";
82
+ })(Y || (Y = {}));
83
+ V("deep_link");
84
+ V("bypass");
85
+ new ls();
86
+ V("video_player");
87
+ var Z;
88
+ (function(e) {
89
+ e.SHOWED = "showed";
90
+ })(Z || (Z = {}));
91
+ var J;
92
+ (function(e) {
93
+ e.ALLOWED = "allowed", e.DISALLOWED = "disallowed";
94
+ })(J || (J = {}));
95
+ var ee;
96
+ (function(e) {
97
+ e.UNKNOWN = "unknown", e.ALREADY_VOTED = "already_voted";
98
+ })(ee || (ee = {}));
99
+ var se;
100
+ (function(e) {
101
+ e.ONBOARDING = "onboarding", e.ONBOARDING_IO = "onboarding_io";
102
+ })(se || (se = {}));
103
+ var ne;
104
+ (function(e) {
105
+ e.Unset = "unset", e.Required = "required", e.Optional = "optional", e.Completed = "completed", e.Disabled = "disabled", e.Unavailable = "unavailable";
106
+ })(ne || (ne = {}));
107
+ O.POLL, O.PREDICTION, O.TRIVIA;
108
+ const ds = {
109
+ [D.GAMES]: !0
110
+ }, F = /* @__PURE__ */ h("div")({
111
+ name: "LoadingContainer",
112
+ class: "lclc0ej",
113
+ propsAsIs: !1
114
+ }), cs = ({
115
+ feature: e,
116
+ sdk: s,
117
+ children: n,
118
+ className: o,
119
+ noWait: i
120
+ }) => {
121
+ const a = u(e.status), l = u(s.sdkStore.slStreamId);
122
+ if (!i) {
123
+ if (l != null && l.loading && !l.data)
124
+ return /* @__PURE__ */ t(F, {
125
+ className: o,
126
+ children: "Event is loading..."
127
+ });
128
+ if (!(l != null && l.data))
129
+ return /* @__PURE__ */ t(F, {
130
+ className: o,
131
+ children: "Event is forbidden..."
132
+ });
133
+ if (a !== fe.Ready)
134
+ return /* @__PURE__ */ t(F, {
135
+ className: o,
136
+ children: "Wait feature..."
137
+ });
138
+ }
139
+ return n;
140
+ }, ue = es({
141
+ sdk: null
142
+ }), B = () => z(ue), ps = /* @__PURE__ */ h("div")({
143
+ name: "QuestionContainer",
144
+ class: "q14ckf9e",
145
+ propsAsIs: !1
146
+ }), us = ({
147
+ openedQuestion: e
148
+ }) => {
149
+ var s, n;
150
+ const {
151
+ sdk: o
152
+ } = B();
153
+ return ((s = e == null ? void 0 : e.attributes) == null ? void 0 : s.attributes.case) === "insight" ? /* @__PURE__ */ t(ye, {
154
+ ...e.attributes.attributes.value,
155
+ controlVideo: o == null ? void 0 : o.controlVideoPlayer
156
+ }) : ((n = e == null ? void 0 : e.attributes) == null ? void 0 : n.attributes.case) === "tweet" ? /* @__PURE__ */ t(Ne, {
157
+ ...e.attributes.attributes.value,
158
+ controlVideo: o == null ? void 0 : o.controlVideoPlayer
159
+ }) : null;
160
+ }, hs = ({
161
+ extendedQuestion: e,
162
+ vote: s,
163
+ close: n
164
+ }) => {
165
+ const {
166
+ loading: o,
167
+ data: i
168
+ } = e;
169
+ return i ? /* @__PURE__ */ t(be, {
170
+ vote: s,
171
+ close: n,
172
+ openedQuestion: i,
173
+ isLoading: !!o
174
+ }) : /* @__PURE__ */ t(Se, {});
175
+ }, vs = ({
176
+ gamification: e
177
+ }) => {
178
+ var s, n, o;
179
+ const i = u(e.openedQuestion.$store), a = u(e.openedQuestion.$extendedStore);
180
+ if (!i)
181
+ return null;
182
+ const l = i.type;
183
+ return /* @__PURE__ */ m(ps, {
184
+ children: [/* @__PURE__ */ t(re, {
185
+ close: e.closeQuestion,
186
+ type: ((s = i.attributes) == null ? void 0 : s.type) || O.UNSET
187
+ }), l === "question" && /* @__PURE__ */ t(hs, {
188
+ vote: e.submitAnswer,
189
+ close: e.closeQuestion,
190
+ extendedQuestion: a
191
+ }), l !== "question" && /* @__PURE__ */ t(us, {
192
+ openedQuestion: i
193
+ }), /* @__PURE__ */ t(ke, {
194
+ sponsorLogo: (o = (n = a.data) == null ? void 0 : n.sponsorship) == null ? void 0 : o.logo
195
+ })]
196
+ });
197
+ }, gs = /* @__PURE__ */ h("div")({
198
+ name: "InviteFriendsContainer",
199
+ class: "i1c9dygq",
200
+ propsAsIs: !1
201
+ }), ms = ({
202
+ deepLink: e
203
+ }) => /* @__PURE__ */ t(gs, {
204
+ children: /* @__PURE__ */ t(Ie, {
205
+ inviteLink: e,
206
+ inviteCardTitle: "It’s More Fun With Friends",
207
+ inviteCardSubtext: "Invite and compete against your friends for the top spot on the leaderboard."
208
+ })
209
+ }), fs = /* @__PURE__ */ h("div")({
210
+ name: "InviteLinkContainer",
211
+ class: "i1odbhm4",
212
+ propsAsIs: !1
213
+ }), ks = ({
214
+ gamification: e,
215
+ scrollNode: s,
216
+ scrollStore: n
217
+ }) => {
218
+ const o = $(null), {
219
+ data: i,
220
+ hasMore: a,
221
+ loading: l,
222
+ key: d
223
+ } = u(e.leaderboardList.$store), {
224
+ data: r
225
+ } = u(e.deepLink.$store), [p, c] = Ee(o);
226
+ return !i.length && !l ? /* @__PURE__ */ t(ms, {
227
+ deepLink: r
228
+ }) : /* @__PURE__ */ m(L, {
229
+ children: [/* @__PURE__ */ t(we, {
230
+ items: i,
231
+ scrollNode: s,
232
+ scrollStore: n,
233
+ fetchMore: e.leaderboardList.fetchMore,
234
+ hasMore: a,
235
+ openItemDetail: e.openUser,
236
+ currentUserId: e.currentUserId.get()
237
+ }, d), r && /* @__PURE__ */ t(fs, {
238
+ ref: o,
239
+ children: /* @__PURE__ */ t(Ae, {
240
+ onClick: () => p(r),
241
+ title: "Invite Friends",
242
+ description: "Challenge them now!"
243
+ })
244
+ }), c]
245
+ });
246
+ }, ys = ({ store: e, openQuestion: s }) => {
247
+ const { sdk: n } = B(), o = u(e);
248
+ return /* @__PURE__ */ t(Ce, { openQuestion: s, questions: o.data, controlVideo: n == null ? void 0 : n.controlVideoPlayer });
249
+ }, Ns = ({ userSummary: e }) => {
250
+ var s;
251
+ const [n, o] = E(void 0);
252
+ return k(() => {
253
+ const i = e.$store.subscribe((a) => {
254
+ a && o(a);
255
+ });
256
+ return () => {
257
+ i();
258
+ };
259
+ }, [e]), /* @__PURE__ */ t(ae, { loading: !(n != null && n.summary), ...n == null ? void 0 : n.summary, successRate: (s = n == null ? void 0 : n.percentage) == null ? void 0 : s.correct });
260
+ }, bs = ({ gamification: e, className: s, scrollStore: n, scrollNode: o, appNode: i, style: a, responsiveStore: l }) => {
261
+ const { tabsShown: d } = u(n, { keys: ["tabsShown"] }), [r, p] = E(P.HOME), [, c] = ss(), { sdkInDesktopView: v, screen: f } = u(l, { keys: ["sdkInDesktopView"] }), N = (S) => {
262
+ c(() => {
263
+ var y;
264
+ p(S), v === !1 && (((y = i.current) == null ? void 0 : y.getBoundingClientRect().y) || 0) < 0 && M(i, f.size, { behavior: "instant" });
265
+ });
266
+ };
267
+ k(() => n.subscribe((S) => {
268
+ if (S.scrollPosition === 0) {
269
+ n.setKey("tabsShown", !0);
270
+ return;
271
+ }
272
+ l.get().sdkInDesktopView ? n.setKey("tabsShown", S.scrollDirection === "backward") : n.setKey("tabsShown", S.scrollDirection === "forward");
273
+ }), [n, l]);
274
+ let b = "0px";
275
+ return v ? b = d ? "0px" : "calc(8px - var(--header-height) - var(--header-offset))" : b = d ? "calc(var(--header-height) + var(--header-offset) - 2px)" : "0px", /* @__PURE__ */ m($e, { className: s, style: a, children: [
276
+ /* @__PURE__ */ t(
277
+ Le,
278
+ {
279
+ style: {
280
+ top: b
281
+ },
282
+ children: /* @__PURE__ */ t(De, { activePage: r, toggleActivePage: N })
283
+ }
284
+ ),
285
+ r === P.HOME && /* @__PURE__ */ m(L, { children: [
286
+ /* @__PURE__ */ t(le, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ t(Te, { children: /* @__PURE__ */ t(Ns, { userSummary: e.userSummary }) }) }),
287
+ /* @__PURE__ */ t(xe, { style: { flex: 1 }, children: /* @__PURE__ */ t(ys, { openQuestion: e.openQuestion, store: e.feedList.getStore() }) })
288
+ ] }),
289
+ r === P.LEADERBOARD && /* @__PURE__ */ t(Oe, { children: /* @__PURE__ */ t(ks, { scrollStore: n, scrollNode: o, gamification: e }) })
290
+ ] });
291
+ }, Ss = () => U, te = /* @__PURE__ */ h(Ss())({
292
+ name: "OpenedContainer",
293
+ class: "ouvguos",
294
+ propsAsIs: !0
295
+ }), Is = /* @__PURE__ */ h("div")({
296
+ name: "UserContainer",
297
+ class: "u1eu4lbg",
298
+ propsAsIs: !1
299
+ }), Es = ({
300
+ correct: e,
301
+ incorrect: s
302
+ }) => {
303
+ const n = e + s;
304
+ return n === 0 ? 0 : Math.round(e / n * 100);
305
+ }, mn = ({
306
+ gamification: e,
307
+ scrollStore: s,
308
+ className: n,
309
+ appNode: o,
310
+ scrollNode: i,
311
+ responsiveStore: a
312
+ }) => /* @__PURE__ */ t(bs, {
313
+ appNode: o,
314
+ scrollStore: s,
315
+ scrollNode: i,
316
+ className: n,
317
+ gamification: e,
318
+ responsiveStore: a
319
+ }), ws = ({
320
+ gamification: e,
321
+ className: s,
322
+ appNode: n,
323
+ responsiveStore: o
324
+ }) => {
325
+ const i = u(e.openedQuestion.$store), a = u(e.openedUser), {
326
+ sdkInDesktopView: l
327
+ } = u(o, {
328
+ keys: ["sdkInDesktopView"]
329
+ }), {
330
+ hiding: d,
331
+ onAnimationEnd: r
332
+ } = Re();
333
+ if (!n.current || !i && !a)
334
+ return null;
335
+ const p = i ? /* @__PURE__ */ t(te, {
336
+ className: s,
337
+ hiding: d,
338
+ onAnimationEnd: r,
339
+ children: /* @__PURE__ */ t(vs, {
340
+ gamification: e
341
+ })
342
+ }) : a ? /* @__PURE__ */ t(te, {
343
+ className: s,
344
+ hiding: d,
345
+ onAnimationEnd: r,
346
+ children: /* @__PURE__ */ m(Is, {
347
+ children: [/* @__PURE__ */ t(re, {
348
+ label: "Friend's Rank",
349
+ close: e.closeUser
350
+ }), /* @__PURE__ */ t(le, {
351
+ children: /* @__PURE__ */ t(ae, {
352
+ ...a,
353
+ successRate: Es(a)
354
+ })
355
+ })]
356
+ })
357
+ }) : null;
358
+ return /* @__PURE__ */ t(de, {
359
+ container: n,
360
+ useContainer: !l,
361
+ children: p
362
+ });
363
+ }, As = ns(() => import("./gamification-feature.js")), Cs = ({ sdk: e, feature: s, className: n, scrollStore: o, appNode: i, scrollNode: a, responsiveStore: l }) => {
364
+ const d = C(() => s && s.featureConfig.get().type === D.GAMES ? /* @__PURE__ */ t(cs, { className: n, sdk: e, feature: s, children: /* @__PURE__ */ t(
365
+ As,
366
+ {
367
+ appNode: i,
368
+ scrollStore: o,
369
+ scrollNode: a,
370
+ className: n,
371
+ responsiveStore: l,
372
+ gamification: s
373
+ }
374
+ ) }) : null, [e, s, n, l, o, a, i]);
375
+ return /* @__PURE__ */ t(
376
+ ts,
377
+ {
378
+ fallback: /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
379
+ children: d
380
+ }
381
+ );
382
+ }, $s = ({ feature: e, className: s, appNode: n, responsiveStore: o }) => e && e.featureConfig.get().type === D.GAMES ? /* @__PURE__ */ t(
383
+ ws,
384
+ {
385
+ className: s,
386
+ appNode: n,
387
+ responsiveStore: o,
388
+ gamification: e
389
+ }
390
+ ) : null, Ls = () => ce, Ds = /* @__PURE__ */ h(Ls())({
391
+ name: "ButtonIcon",
392
+ class: "b11wpe79",
393
+ propsAsIs: !0
394
+ }), Ts = os(({
395
+ sdk: e,
396
+ className: s
397
+ }, n) => {
398
+ const o = u(e.sdkStore.organizationSettings), i = u(e.sdkStore.streamSettings), a = u(e.getActiveFeature()), l = C(() => {
399
+ const r = (i == null ? void 0 : i.data) || (o == null ? void 0 : o.data);
400
+ return r != null && r.overlays ? r.overlays : [];
401
+ }, [o, i]), d = C(() => [...l.filter(({
402
+ enableSdkButton: r
403
+ }) => r).map((r) => ({
404
+ id: r.type,
405
+ onClick: () => e.openFeature(r.type),
406
+ disabled: !(r.type in ds),
407
+ label: r.name,
408
+ icon: /* @__PURE__ */ t("img", {
409
+ src: r.icon,
410
+ alt: ""
411
+ }),
412
+ /** multiplied by 10 to add the ability to insert custom buttons between our buttons */
413
+ position: r.position * 10
414
+ }))].sort((r, p) => r.position - p.position), [l, e]);
415
+ return /* @__PURE__ */ m(Ve, {
416
+ className: s,
417
+ children: [/* @__PURE__ */ t(Pe, {
418
+ children: [/* @__PURE__ */ t(Q, {
419
+ id: "Channels",
420
+ onClick: () => e.closeFeature(),
421
+ label: "Channels",
422
+ active: a === 0
423
+ }, "Channels"), ...d.map((r) => r.id === D.GAMES ? /* @__PURE__ */ t(Q, {
424
+ ...r,
425
+ active: r.id === a,
426
+ label: "StreamLayer +",
427
+ id: "featuredGroups",
428
+ icon: /* @__PURE__ */ t(Ds, {
429
+ name: "icon-btn-feature-groups",
430
+ "data-selected": r.id === a
431
+ })
432
+ }, r.id) : /* @__PURE__ */ t(Q, {
433
+ ...r,
434
+ icon: void 0,
435
+ active: r.id === a
436
+ }, r.id))]
437
+ }), /* @__PURE__ */ t("div", {
438
+ ref: n
439
+ })]
440
+ });
441
+ }), xs = /* @__PURE__ */ h("div")({
442
+ name: "Container",
443
+ class: "c1qjj4d4",
444
+ propsAsIs: !1
445
+ }), Os = /* @__PURE__ */ h("div")({
446
+ name: "CloseIconWrap",
447
+ class: "c1lg6b8a",
448
+ propsAsIs: !1
449
+ }), Rs = () => ce, Vs = /* @__PURE__ */ h(Rs())({
450
+ name: "CloseIcon",
451
+ class: "c159el66",
452
+ propsAsIs: !0
453
+ }), Ps = /* @__PURE__ */ h("div")({
454
+ name: "Title",
455
+ class: "t16xmufv",
456
+ propsAsIs: !1
457
+ }), Qs = /* @__PURE__ */ h("img")({
458
+ name: "SponsorLogo",
459
+ class: "s83lc21",
460
+ propsAsIs: !1
461
+ }), _s = /* @__PURE__ */ h("div")({
462
+ name: "PresentsTitle",
463
+ class: "p1p7igia",
464
+ propsAsIs: !1
465
+ }), qs = /* @__PURE__ */ h("div")({
466
+ name: "Subtitle",
467
+ class: "s1eftsbu",
468
+ propsAsIs: !1
469
+ }), Fs = /* @__PURE__ */ h("div")({
470
+ name: "Description",
471
+ class: "d8uezec",
472
+ propsAsIs: !1
473
+ }), Ks = /* @__PURE__ */ h("button")({
474
+ name: "ActionButton",
475
+ class: "a1h1bk90",
476
+ propsAsIs: !1
477
+ }), oe = ({ close: e, action: s, onboarding: n }) => {
478
+ var o, i, a, l, d, r, p, c;
479
+ return /* @__PURE__ */ m(xs, { children: [
480
+ /* @__PURE__ */ t(Os, { onClick: e, children: /* @__PURE__ */ t(Vs, { name: "icon-cross" }) }),
481
+ ((i = (o = n == null ? void 0 : n.titleCard) == null ? void 0 : o.media) == null ? void 0 : i.sponsorLogo) && /* @__PURE__ */ m(Ps, { children: [
482
+ /* @__PURE__ */ t(Qs, { alt: "sponsor-logo", src: (l = (a = n == null ? void 0 : n.titleCard) == null ? void 0 : a.media) == null ? void 0 : l.sponsorLogo }),
483
+ /* @__PURE__ */ t(_s, { children: "PRESENTS" })
484
+ ] }),
485
+ ((d = n == null ? void 0 : n.titleCard) == null ? void 0 : d.title) && /* @__PURE__ */ t(qs, { children: (r = n == null ? void 0 : n.titleCard) == null ? void 0 : r.title }),
486
+ ((p = n == null ? void 0 : n.titleCard) == null ? void 0 : p.subtitle) && /* @__PURE__ */ t(Fs, { children: (c = n == null ? void 0 : n.titleCard) == null ? void 0 : c.subtitle }),
487
+ /* @__PURE__ */ t(Ks, { onClick: s, children: "Play Now" })
488
+ ] });
489
+ }, K = [{
490
+ graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_0.png",
491
+ tagline: "",
492
+ headline: /* @__PURE__ */ m(L, {
493
+ children: ["Welcome to ", /* @__PURE__ */ t("br", {}), " StreamLayer +"]
494
+ })
495
+ }, {
496
+ graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_2.png",
497
+ headline: "Get real-time insights"
498
+ }, {
499
+ graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_3.png",
500
+ headline: "Predictions, trivia & polls synced to match play"
501
+ }, {
502
+ graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_4.png",
503
+ headline: "Win points for every answer you get right"
504
+ }, {
505
+ graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_5.png",
506
+ headline: "Compete against friends on the leaderboard"
507
+ }], Ms = /* @__PURE__ */ h("div")({
508
+ name: "OnboardingContainer",
509
+ class: "o1xni1kr",
510
+ propsAsIs: !1
511
+ }), Us = () => U, zs = /* @__PURE__ */ h(Us())({
512
+ name: "OnboardingNotificationContainer",
513
+ class: "o1vnouv7",
514
+ propsAsIs: !0
515
+ }), ie = /* @__PURE__ */ h("div")({
516
+ name: "InnerContainer",
517
+ class: "i59uefw",
518
+ propsAsIs: !1
519
+ }), Bs = ({
520
+ deepLink: e,
521
+ onboardingOpts: s,
522
+ notification: n,
523
+ gamification: o,
524
+ loading: i,
525
+ sdk: a
526
+ }) => {
527
+ var l, d, r, p, c, v, f;
528
+ const N = u(o.friends.getStore()), [b, S] = E(void 0), y = C(() => {
529
+ var w, T;
530
+ const W = a.getInviter();
531
+ return W ? (T = (w = N.data) == null ? void 0 : w.find(({
532
+ slId: ve
533
+ }) => ve === W)) == null ? void 0 : T.name : "";
534
+ }, [N.data, a]);
535
+ return k(() => {
536
+ const w = e.$store.subscribe((T) => {
537
+ T && S(T.data);
538
+ });
539
+ return () => {
540
+ w();
541
+ };
542
+ }, [e.$store]), /* @__PURE__ */ t(Ms, {
543
+ children: /* @__PURE__ */ t(_e, {
544
+ loading: i,
545
+ rules: [{
546
+ label: "Answer as many questions as you like.",
547
+ icon: "icon-btn-feature-groups"
548
+ }, {
549
+ label: "Win points for each correct trivia or prediction answer.",
550
+ icon: "icon-thumb-up"
551
+ }, {
552
+ label: "Top the leader board and best your friends.",
553
+ icon: "icon-trophy"
554
+ }],
555
+ rulesBtnLabel: (l = s.rules) == null ? void 0 : l.buttonLabel,
556
+ rulesTitle: (d = s.rules) == null ? void 0 : d.heading,
557
+ termsTitle: "Terms and Conditions",
558
+ termsText: (r = s.rules) == null ? void 0 : r.terms,
559
+ steps: K,
560
+ primaryColor: (p = s.inviteCard) == null ? void 0 : p.iconColor,
561
+ inviteLink: b,
562
+ inviteCardTitle: (c = s.inviteCard) == null ? void 0 : c.heading,
563
+ inviteCardSubtext: (v = s.inviteCard) == null ? void 0 : v.subtext,
564
+ inviteCardBtnLabel: (f = s.inviteCard) == null ? void 0 : f.buttonLabel,
565
+ onClose: () => {
566
+ var w;
567
+ (w = n.close) == null || w.call(n);
568
+ },
569
+ gamification: o,
570
+ sdk: a,
571
+ inviterName: y
572
+ })
573
+ });
574
+ }, Ws = ({
575
+ sdk: e,
576
+ notification: s,
577
+ saveHeight: n,
578
+ style: o,
579
+ appNode: i,
580
+ sdkInDesktopView: a,
581
+ responsiveStore: l
582
+ }) => {
583
+ const d = $(null), r = s.data.onboarding, [p, c] = E(r == null ? void 0 : r.instantOpen), v = e.getFeature(D.GAMES), f = C(() => K == null ? void 0 : K.map(({
584
+ graphicSrc: y
585
+ }) => y), []), {
586
+ screen: N
587
+ } = u(l, {
588
+ keys: ["screen"]
589
+ });
590
+ is(() => {
591
+ var y;
592
+ n(((y = d.current) == null ? void 0 : y.getBoundingClientRect().height) || 0);
593
+ }, [n]);
594
+ const {
595
+ loading: b,
596
+ throttled: S
597
+ } = Qe(f);
598
+ return p && v && r && i.current && !S ? /* @__PURE__ */ t(de, {
599
+ container: i,
600
+ useContainer: !a,
601
+ children: /* @__PURE__ */ t(Bs, {
602
+ notification: s,
603
+ setOpened: c,
604
+ gamification: v,
605
+ onboardingOpts: r,
606
+ deepLink: v.deepLink,
607
+ loading: b,
608
+ renderToNode: i,
609
+ sdk: e
610
+ })
611
+ }) : /* @__PURE__ */ m(L, {
612
+ children: [/* @__PURE__ */ t(ie, {
613
+ ref: d,
614
+ style: {
615
+ position: "absolute",
616
+ visibility: "hidden"
617
+ },
618
+ children: /* @__PURE__ */ t(oe, {
619
+ close: () => {
620
+ },
621
+ action: () => {
622
+ },
623
+ onboarding: r
624
+ })
625
+ }), /* @__PURE__ */ t(zs, {
626
+ style: o,
627
+ hiding: s.hiding,
628
+ children: /* @__PURE__ */ t(ie, {
629
+ children: /* @__PURE__ */ t(oe, {
630
+ close: s.close,
631
+ action: () => {
632
+ var y;
633
+ c(!0), (((y = i.current) == null ? void 0 : y.getBoundingClientRect().y) || 0) < 0 && M(i, N.size, {
634
+ behavior: "smooth"
635
+ });
636
+ },
637
+ onboarding: r
638
+ })
639
+ })
640
+ })]
641
+ });
642
+ }, Gs = () => U, Hs = /* @__PURE__ */ h(Gs())({
643
+ name: "Container",
644
+ class: "c8ol1ve",
645
+ propsAsIs: !0
646
+ }), he = /* @__PURE__ */ h("div")({
647
+ name: "InnerContainer",
648
+ class: "iqfywam",
649
+ propsAsIs: !1
650
+ }), js = () => he, Xs = /* @__PURE__ */ h(js())({
651
+ name: "HiddenContainer",
652
+ class: "hokmtod",
653
+ propsAsIs: !0
654
+ }), Ys = /* @__PURE__ */ h("div")({
655
+ name: "NotificationRefreshing",
656
+ class: "n192d1q8",
657
+ propsAsIs: !1
658
+ }), Zs = () => qe, Js = /* @__PURE__ */ h(Zs())({
659
+ name: "Pill",
660
+ class: "p1lha68t",
661
+ propsAsIs: !0
662
+ }), en = (e) => {
663
+ const [s, n] = E(0), o = $(null), i = R((l) => {
664
+ o.current = l;
665
+ }, []);
666
+ k(() => {
667
+ var l;
668
+ const d = (l = o.current) == null ? void 0 : l.getBoundingClientRect();
669
+ d && n(d.height);
670
+ }, [e]);
671
+ const a = R((l) => {
672
+ n(l);
673
+ }, []);
674
+ return [i, s, a];
675
+ }, sn = ({
676
+ sdk: e,
677
+ notification: s,
678
+ appNode: n,
679
+ responsiveStore: o
680
+ }) => {
681
+ var i, a;
682
+ const {
683
+ sdkInDesktopView: l
684
+ } = u(o, {
685
+ keys: ["sdkInDesktopView"]
686
+ }), {
687
+ sdk: d
688
+ } = B(), [r, p, c] = en(s.id);
689
+ return s.type === x.QUESTION ? /* @__PURE__ */ m(L, {
690
+ children: [/* @__PURE__ */ t(Xs, {
691
+ ref: r,
692
+ children: /* @__PURE__ */ t(G, {
693
+ ...s
694
+ })
695
+ }), /* @__PURE__ */ m(Hs, {
696
+ style: {
697
+ height: s.hiding ? 0 : p
698
+ },
699
+ hiding: s.hiding,
700
+ children: [/* @__PURE__ */ t(he, {
701
+ style: {
702
+ height: "100%"
703
+ },
704
+ children: /* @__PURE__ */ t(G, {
705
+ ...s,
706
+ controlVideo: d == null ? void 0 : d.controlVideoPlayer
707
+ })
708
+ }), /* @__PURE__ */ t(Ys, {}, s.id)]
709
+ })]
710
+ }) : s.type === x.QUESTION_RESOLVED && (a = (i = s.data) == null ? void 0 : i.question) != null && a.predictionResult ? /* @__PURE__ */ t(Ke, {
711
+ style: {
712
+ height: s.hiding ? 0 : p
713
+ },
714
+ saveHeight: c,
715
+ close: s.close,
716
+ hiding: s.hiding,
717
+ ...s.data.question
718
+ }) : s.type === x.ONBOARDING ? /* @__PURE__ */ t(Ws, {
719
+ style: {
720
+ height: s.hiding ? 0 : p
721
+ },
722
+ saveHeight: c,
723
+ sdk: e,
724
+ notification: s,
725
+ sdkInDesktopView: l,
726
+ appNode: n,
727
+ responsiveStore: o
728
+ }) : null;
729
+ }, nn = "p7vfi6t", tn = ({
730
+ pill: e,
731
+ setPill: s,
732
+ appNode: n,
733
+ headerNode: o,
734
+ scrollNode: i,
735
+ responsiveStore: a,
736
+ scrollStore: l
737
+ }) => {
738
+ var d, r;
739
+ const {
740
+ screen: p
741
+ } = u(a, {
742
+ keys: ["screen"]
743
+ }), {
744
+ tabsShown: c,
745
+ scrollPosition: v
746
+ } = u(l, {
747
+ keys: ["tabsShown", "scrollPosition"]
748
+ });
749
+ k(() => {
750
+ a.get().sdkInDesktopView ? v < 50 && s(null) : v > -50 && s(null);
751
+ }, [v, a, s]);
752
+ const f = a.get().sdkInDesktopView ? n : o;
753
+ return !e || !f.current ? null : Me.createPortal(/* @__PURE__ */ t(Js, {
754
+ title: e.type === x.QUESTION_RESOLVED ? "Prediction result" : `New ${((r = Ue[(d = e.data) == null ? void 0 : d.questionType]) == null ? void 0 : r.label) || "notification"}`,
755
+ onClick: () => {
756
+ var N;
757
+ a.get().sdkInDesktopView ? (N = i.current) == null || N.scrollTo({
758
+ top: 0,
759
+ behavior: "smooth"
760
+ }) : M(n, p.size, {
761
+ behavior: "smooth"
762
+ }), s(null);
763
+ },
764
+ className: ze(c && nn, "sl-pill-button")
765
+ }), f.current);
766
+ }, on = ({
767
+ sdk: e,
768
+ headerNode: s,
769
+ scrollNode: n,
770
+ responsiveStore: o,
771
+ appNode: i,
772
+ scrollStore: a
773
+ }) => {
774
+ const [l] = E(e.getNotificationsStore()), d = u(l), [r, p] = E(null), c = C(() => e.getActiveNotification(), [e, d]);
775
+ return k(() => {
776
+ c && Fe.emit("notification", {
777
+ action: "rendered",
778
+ payload: {
779
+ questionId: c.data.questionId,
780
+ questionType: c.data.questionType
781
+ }
782
+ });
783
+ }, [c]), k(() => {
784
+ c && (o.get().sdkInDesktopView || o.get().sdkInView) && (!o.get().sdkInDesktopView && o.get().sdkInView && p(c), o.get().sdkInDesktopView && window.requestAnimationFrame(() => {
785
+ a.get().scrollPosition !== 0 && p(c);
786
+ }));
787
+ }, [c]), k(() => {
788
+ c || p(null);
789
+ }, [c]), /* @__PURE__ */ m(L, {
790
+ children: [!r && c && /* @__PURE__ */ t(sn, {
791
+ headerNode: s,
792
+ appNode: i,
793
+ sdk: e,
794
+ notification: c,
795
+ responsiveStore: o
796
+ }), r && /* @__PURE__ */ t(tn, {
797
+ pill: r,
798
+ setPill: p,
799
+ appNode: i,
800
+ notification: c,
801
+ headerNode: s,
802
+ scrollNode: n,
803
+ scrollStore: a,
804
+ responsiveStore: o
805
+ })]
806
+ });
807
+ }, rn = (e) => {
808
+ const s = $(""), [n, o] = E(!1), i = u(e.status), a = u(e.sdkStore.slStreamId), l = u(e.userId()), d = u(e.getActiveFeature()), r = i === "ready" && !!a.data;
809
+ k(() => {
810
+ const v = e.getFeature(D.GAMES);
811
+ v && (v.closeQuestion(), v.closeUser());
812
+ }, [d, e]);
813
+ const p = R(
814
+ (v) => {
815
+ s.current = v, o(!0), e.initializeApp({ skipOrganizationSettings: !0 }).then(({ enabled: f, err: N }) => {
816
+ if (!N && f) {
817
+ e.isUserAuthorized().then((b) => {
818
+ b || e.disableApp();
819
+ });
820
+ return;
821
+ }
822
+ });
823
+ },
824
+ [e]
825
+ ), c = R(() => {
826
+ o(!1), e.disableApp();
827
+ }, [e]);
828
+ return k(() => {
829
+ if (!l) {
830
+ r && e.disableApp();
831
+ return;
832
+ }
833
+ if (l && s.current && n) {
834
+ e.initializeApp({ skipOrganizationSettings: !0 }).then(() => {
835
+ e.createEventSession(s.current);
836
+ });
837
+ return;
838
+ }
839
+ }, [l]), k(() => () => {
840
+ o(!1), e.disableApp();
841
+ }, [o, e]), {
842
+ sdkEnabled: n,
843
+ sdkReady: r,
844
+ activateEventWithId: p,
845
+ deactivate: c,
846
+ isLogged: !!l
847
+ };
848
+ }, an = ({ sdk: e, className: s, scrollStore: n, appNode: o, scrollNode: i, responsiveStore: a }) => {
849
+ const [, l] = je(e);
850
+ return /* @__PURE__ */ t(
851
+ Cs,
852
+ {
853
+ className: s,
854
+ scrollNode: i,
855
+ appNode: o,
856
+ scrollStore: n,
857
+ feature: l,
858
+ responsiveStore: a,
859
+ sdk: e
860
+ }
861
+ );
862
+ }, ln = ({ sdk: e, className: s, appNode: n, responsiveStore: o }) => {
863
+ const i = u(e.featuresList.getStore());
864
+ return i ? Array.from(i, (a) => {
865
+ const l = e.getFeature(a);
866
+ return l ? /* @__PURE__ */ t(
867
+ $s,
868
+ {
869
+ className: s,
870
+ appNode: n,
871
+ feature: l,
872
+ responsiveStore: o,
873
+ sdk: e
874
+ },
875
+ a
876
+ ) : null;
877
+ }) : null;
878
+ }, dn = ({ sdk: e, event: s }) => {
879
+ const n = $(null), o = $(null), [i] = Be(n), [a, l] = We(n, i), { sdkEnabled: d, sdkReady: r, activateEventWithId: p, deactivate: c, isLogged: v } = rn(e);
880
+ k(() => {
881
+ s ? (e.createEventSession(s), p(s)) : c();
882
+ }, [s, p, c, e]), _(n, { enabled: d, event: "click", listener: Xe }), _(a, {
883
+ enabled: d,
884
+ event: "scrollend",
885
+ listener: Ye,
886
+ useDomNode: !0
887
+ }), _(a, {
888
+ enabled: d,
889
+ event: "click",
890
+ listener: Ze,
891
+ useDomNode: !0
892
+ });
893
+ const f = C(() => ({ sdk: e }), [e]);
894
+ return k(() => {
895
+ import("./gamification-feature.js");
896
+ }, []), /* @__PURE__ */ t(ue.Provider, { value: f, children: /* @__PURE__ */ m(Ge, { ref: n, children: [
897
+ d && /* @__PURE__ */ t(Ts, { className: q, sdk: e, ref: o }),
898
+ /* @__PURE__ */ m(He, { className: "sl-hide-on-modal", ref: a, "data-nav": d.toString(), children: [
899
+ r && /* @__PURE__ */ t(
900
+ on,
901
+ {
902
+ sdk: e,
903
+ scrollNode: a,
904
+ headerNode: o,
905
+ appNode: n,
906
+ scrollStore: l,
907
+ responsiveStore: i
908
+ }
909
+ ),
910
+ r && /* @__PURE__ */ t(
911
+ an,
912
+ {
913
+ scrollStore: l,
914
+ responsiveStore: i,
915
+ scrollNode: a,
916
+ appNode: n,
917
+ className: q,
918
+ sdk: e
919
+ }
920
+ ),
921
+ r && /* @__PURE__ */ t(ln, { responsiveStore: i, appNode: n, className: q, sdk: e })
922
+ ] }),
923
+ d && !v && /* @__PURE__ */ t(
924
+ "div",
925
+ {
926
+ style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" },
927
+ children: "You are not logged in."
928
+ }
929
+ )
930
+ ] }) });
931
+ }, cn = ({ children: e, style: s }) => /* @__PURE__ */ t("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ t("div", { className: Je, style: s, children: e }) }), fn = () => {
932
+ const { sdk: e } = z(pe);
6
933
  return e;
7
- }, l = () => {
8
- const { sdk: e, status: a } = i(s);
9
- if (a === t.UNSET)
934
+ }, kn = ({ event: e }) => {
935
+ const { sdk: s, status: n } = z(pe);
936
+ if (n === H.UNSET)
10
937
  throw new Error("Wrap app in `StreamLayerProvider`");
11
- return a === t.CONNECTED ? /* @__PURE__ */ r("div", { className: "StreamLayerSDK", children: "wait" }) : e === null ? /* @__PURE__ */ r("div", { className: "StreamLayerSDK", children: "sdk not initialized" }) : /* @__PURE__ */ r("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(o, { sdk: e }) }) });
938
+ return n === H.CONNECTED ? /* @__PURE__ */ t("div", { className: "StreamLayerSDK", children: "wait" }) : s === null ? /* @__PURE__ */ t("div", { className: "StreamLayerSDK", children: "sdk not initialized" }) : /* @__PURE__ */ t("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ t(cn, { children: /* @__PURE__ */ t(dn, { sdk: s, event: e }) }) });
12
939
  };
13
940
  export {
14
- l as S,
15
- d as u
941
+ mn as E,
942
+ kn as S,
943
+ cn as i,
944
+ fn as u
16
945
  };