@streamlayer/react 1.21.4 → 1.22.1

package/lib/classic/es/pause-ad.js

@@ -1,130 +1,131 @@
-import { jsx as l, jsxs as L } from "react/jsx-runtime";
-import { j as K, k as M, i as k, s as m, l as _, n as $, e as F, u as N, d as j, h as q } from "./provider.js";
-import "nanostores";
-import { useRef as D, useCallback as I, useState as R, useEffect as T, Component as O } from "react";
-import "lodash.throttle";
-import "react-dom";
-import "react-countup";
-import { c as z } from "./vast-client.min-B0NUra1B.js";
-const G = {}, J = new z(), w = M(G), E = K("ui:gam-static"), U = (e) => new Promise((s, t) => {
-  const o = new Image();
-  o.onload = () => s(e), o.onerror = () => t(), o.src = e;
-}), V = () => {
-  const e = D(0);
-  return [I(async (s) => {
-    var t, o, r, c, d, n, h, i, y, g, f;
+import { jsx as l, jsxs as D } from "react/jsx-runtime";
+import { h as F } from "./index7.js";
+import { s as v, c as V, u as M } from "./sl-types.js";
+import { d as N } from "./index11.js";
+import { useRef as x, useCallback as L, useState as U, useEffect as k, Component as j } from "react";
+import { c as q, e as S } from "./index3.js";
+import { _ as $ } from "./vast-client.min.js";
+import { i as z } from "./index-DSi8Qgfs.js";
+import { B as O, z as G } from "./hooks-B0Qttldg.js";
+const Q = {}, W = new $(), w = z(Q), E = q("ui:gam-static"), B = (e) => new Promise((s, t) => {
+  const n = new Image();
+  n.onload = () => s(e), n.onerror = () => t(), n.src = e;
+}), _ = () => {
+  const e = x(0);
+  return [L(async (s) => {
+    var t, n, r, u, c, a, h, i, y, P, A;
     if ((t = w.get()[s]) != null && t.imageSrc)
       return { success: !0 };
-    const v = Date.now();
-    e.current = v, w.setKey(s, { id: "", url: s });
+    const f = Date.now();
+    e.current = f, w.setKey(s, { id: "", url: s });
     try {
-      k.emit("exposedPauseAd", {
+      S.emit("exposedPauseAd", {
         action: "load",
         payload: {}
       });
-      const u = await J.get(s);
-      if (E.debug(u, "parsedVAST"), e.current === v && w.get()[s].url) {
-        const a = u.ads.find((p) => p.creatives.length > 0);
-        if (a) {
-          E.debug(a, "validAd");
-          const p = a.creatives.find((A) => A.type === "nonlinear");
-          if (p) {
-            E.debug(p, "nonlinear");
-            const A = (r = (o = p.variations) == null ? void 0 : o[0]) == null ? void 0 : r.staticResource, C = (d = (c = p.variations) == null ? void 0 : c[0]) == null ? void 0 : d.nonlinearClickThroughURLTemplate;
-            if (A)
-              return await U(A), w.setKey(s, {
-                id: a.id || "",
+      const p = await W.get(s);
+      if (E.debug(p, "parsedVAST"), e.current === f && w.get()[s].url) {
+        const o = p.ads.find((m) => m.creatives.length > 0);
+        if (o) {
+          E.debug(o, "validAd");
+          const m = o.creatives.find((d) => d.type === "nonlinear");
+          if (m) {
+            E.debug(m, "nonlinear");
+            const d = (r = (n = m.variations) == null ? void 0 : n[0]) == null ? void 0 : r.staticResource, I = (c = (u = m.variations) == null ? void 0 : u[0]) == null ? void 0 : c.nonlinearClickThroughURLTemplate;
+            if (d)
+              return await B(d), w.setKey(s, {
+                id: o.id || "",
                 url: s,
-                imageSrc: A,
-                adUrl: C
-              }), k.emit("exposedPauseAd", {
+                imageSrc: d,
+                adUrl: I
+              }), S.emit("exposedPauseAd", {
                 action: "loaded",
                 payload: {
-                  id: a.id || ""
+                  id: o.id || ""
                 }
               }), { success: !0 };
           }
-          const P = a.creatives.find((A) => A.type === "companion");
-          E.debug(P, "companion");
-          const b = (y = (i = (h = (n = P == null ? void 0 : P.variations) == null ? void 0 : n[0]) == null ? void 0 : h.staticResources) == null ? void 0 : i[0]) == null ? void 0 : y.url, S = (f = (g = P == null ? void 0 : P.variations) == null ? void 0 : g[0]) == null ? void 0 : f.companionClickThroughURLTemplate;
-          if (b)
-            return await U(b), w.setKey(s, {
-              id: a.id || "",
+          const g = o.creatives.find((d) => d.type === "companion");
+          E.debug(g, "companion");
+          const T = (y = (i = (h = (a = g == null ? void 0 : g.variations) == null ? void 0 : a[0]) == null ? void 0 : h.staticResources) == null ? void 0 : i[0]) == null ? void 0 : y.url, C = (A = (P = g == null ? void 0 : g.variations) == null ? void 0 : P[0]) == null ? void 0 : A.companionClickThroughURLTemplate;
+          if (T)
+            return await B(T), w.setKey(s, {
+              id: o.id || "",
               url: s,
-              imageSrc: b,
-              adUrl: S
-            }), k.emit("exposedPauseAd", {
+              imageSrc: T,
+              adUrl: C
+            }), S.emit("exposedPauseAd", {
               action: "loaded",
               payload: {
-                id: a.id || ""
+                id: o.id || ""
               }
             }), { success: !0 };
         }
       }
-    } catch (u) {
-      console.error("Error parsing VAST", u);
+    } catch (p) {
+      console.error("Error parsing VAST", p);
     }
     return { success: !1 };
   }, []), w];
-}, Q = /* @__PURE__ */ m("div")({
+}, H = /* @__PURE__ */ v("div")({
   name: "PauseAdOverlay",
   class: "pw9gih8",
   propsAsIs: !1
-}), H = /* @__PURE__ */ m("div")({
+}), J = /* @__PURE__ */ v("div")({
   name: "PauseAdContent",
   class: "p8lpomy",
   propsAsIs: !1
-}), W = /* @__PURE__ */ m("div")({
+}), X = /* @__PURE__ */ v("div")({
   name: "PauseAdTopLeft",
   class: "pv7u167",
   propsAsIs: !1
-}), X = /* @__PURE__ */ m("h2")({
+}), Y = /* @__PURE__ */ v("h2")({
   name: "PauseAdTitle",
   class: "p1kh2yb0",
   propsAsIs: !1
-}), Y = /* @__PURE__ */ m("p")({
+}), Z = /* @__PURE__ */ v("p")({
   name: "PauseAdCaption",
   class: "pl8f94x",
   propsAsIs: !1
-}), Z = /* @__PURE__ */ m("div")({
+}), ee = /* @__PURE__ */ v("div")({
   name: "PauseAdBottomLeft",
   class: "p1m6zmrt",
   propsAsIs: !1
-}), ee = /* @__PURE__ */ m("button")({
+}), se = /* @__PURE__ */ v("button")({
   name: "PauseAdPlayButton",
   class: "pm3vwfa",
   propsAsIs: !1
-}), se = /* @__PURE__ */ m("div")({
+}), re = /* @__PURE__ */ v("div")({
   name: "PauseAdSidebarGradient",
   class: "p1tibuhw",
   propsAsIs: !1
-}), re = /* @__PURE__ */ m("div")({
+}), te = /* @__PURE__ */ v("div")({
   name: "PauseAdSidebar",
   class: "ptqqrqd",
   propsAsIs: !1
-}), te = /* @__PURE__ */ m("span")({
+}), oe = /* @__PURE__ */ v("span")({
   name: "PauseAdTitleDescription",
   class: "p14estxv",
   propsAsIs: !1
-}), B = /* @__PURE__ */ m("img")({
+}), K = /* @__PURE__ */ v("img")({
   name: "ExternalAdContainer",
   class: "e1dpvfl1",
   propsAsIs: !1
-}), ae = ({ vastUrl: e, isDesktop: s }) => {
+}), ne = ({ vastUrl: e, isDesktop: s }) => {
   var t;
-  const [, o] = V(), r = F(o, { keys: [e] });
-  return T(() => {
-    r && r[e] && r[e].imageSrc && r[e].id && k.emit("exposedPauseAd", {
+  const [, n] = _(), r = M(n, { keys: [e] });
+  return k(() => {
+    r && r[e] && r[e].imageSrc && r[e].id && S.emit("exposedPauseAd", {
       action: "rendered",
       payload: {
         id: r[e].id
       }
     });
-  }, [r, e]), (t = r == null ? void 0 : r[e]) != null && t.imageSrc ? !r[e].adUrl || !s ? /* @__PURE__ */ l(B, { src: r[e].imageSrc }) : /* @__PURE__ */ l(
+  }, [r, e]), (t = r == null ? void 0 : r[e]) != null && t.imageSrc ? !r[e].adUrl || !s ? /* @__PURE__ */ l(K, { src: r[e].imageSrc }) : /* @__PURE__ */ l(
     "a",
     {
       onClick: () => {
-        k.emit("exposedPauseAd", {
+        S.emit("exposedPauseAd", {
           action: "navigated",
           payload: {
             id: r[e].id
@@ -134,144 +135,144 @@ const G = {}, J = new z(), w = M(G), E = K("ui:gam-static"), U = (e) => new Prom
       href: r[e].adUrl,
       target: "_blank",
       rel: "noopener noreferrer",
-      children: /* @__PURE__ */ l(B, { src: r[e].imageSrc })
+      children: /* @__PURE__ */ l(K, { src: r[e].imageSrc })
     }
   ) : null;
-}, oe = ({ isClosing: e, title: s, caption: t, onPlay: o, onClose: r, vastUrl: c, options: d, isDesktop: n }) => {
-  const h = (d == null ? void 0 : d.showPauseButton) ?? !0, { ref: i, focusSelf: y } = _.useFocusable({
+}, ae = ({ isClosing: e, title: s, caption: t, onPlay: n, onClose: r, vastUrl: u, options: c, isDesktop: a }) => {
+  const h = (c == null ? void 0 : c.showPauseButton) ?? !0, { ref: i, focusSelf: y } = N.useFocusable({
     focusKey: "sl-pause-ad-play",
-    onEnterRelease: o,
+    onEnterRelease: n,
     isFocusBoundary: !0,
     forceFocus: !0
   });
-  return T(() => {
+  return k(() => {
     i.current && y();
-  }, [i, y]), T(() => {
+  }, [i, y]), k(() => {
     if (!r)
       return () => {
       };
-    const g = (f) => {
-      const v = f.keyCode;
-      if (v === 461 || v === 10009 || v === 27 || v === 8) {
-        f.preventDefault(), f.stopPropagation(), f.stopImmediatePropagation(), r();
+    const P = (A) => {
+      const f = A.keyCode;
+      if (f === 461 || f === 10009 || f === 27 || f === 8) {
+        A.preventDefault(), A.stopPropagation(), A.stopImmediatePropagation(), r();
         return;
       }
     };
-    return window.addEventListener("keydown", g, { capture: !0 }), () => window.removeEventListener("keydown", g, { capture: !0 });
-  }, [r]), /* @__PURE__ */ l(Q, { className: $("SL_PauseAdOverlay", e && "pause-ad-closing"), children: /* @__PURE__ */ L(H, { children: [
-    /* @__PURE__ */ L(W, { children: [
-      /* @__PURE__ */ l(X, { children: s }),
-      /* @__PURE__ */ l(Y, { children: t })
+    return window.addEventListener("keydown", P, { capture: !0 }), () => window.removeEventListener("keydown", P, { capture: !0 });
+  }, [r]), /* @__PURE__ */ l(H, { className: V("SL_PauseAdOverlay", e && "pause-ad-closing"), children: /* @__PURE__ */ D(J, { children: [
+    /* @__PURE__ */ D(X, { children: [
+      /* @__PURE__ */ l(Y, { children: s }),
+      /* @__PURE__ */ l(Z, { children: t })
     ] }),
-    h && /* @__PURE__ */ l(Z, { children: /* @__PURE__ */ l(
-      ee,
+    h && /* @__PURE__ */ l(ee, { children: /* @__PURE__ */ l(
+      se,
       {
         ref: i,
-        onClick: o,
+        onClick: n,
         onMouseEnter: () => i.current.focus(),
         "aria-label": "Resume playback"
       }
     ) }),
-    /* @__PURE__ */ l(se, { className: "SL_PauseAdSidebar", children: /* @__PURE__ */ L(re, { children: [
-      c && /* @__PURE__ */ l(ae, { isDesktop: n, vastUrl: c }),
-      /* @__PURE__ */ l(te, { children: "ADVERTISEMENT" })
+    /* @__PURE__ */ l(re, { className: "SL_PauseAdSidebar", children: /* @__PURE__ */ D(te, { children: [
+      u && /* @__PURE__ */ l(ne, { isDesktop: a, vastUrl: u }),
+      /* @__PURE__ */ l(oe, { children: "ADVERTISEMENT" })
     ] }) })
   ] }) });
-}, ne = ({ showPauseAd: e, vastUrls: s, title: t, caption: o, sdk: r, onClose: c, onRender: d, options: n, isDesktop: h }) => {
-  const i = (n == null ? void 0 : n.pauseAdDelay) ?? 5e3, [y, g] = R(!1), [f, v] = R(!1), u = D(), a = s == null ? void 0 : s[0].url, p = D(a);
-  p.current = a;
-  const [P, b] = V(), S = I(() => {
-    c && (k.emit("exposedPauseAd", {
+}, ie = ({ showPauseAd: e, vastUrls: s, title: t, caption: n, sdk: r, onClose: u, onRender: c, options: a, isDesktop: h }) => {
+  const i = (a == null ? void 0 : a.pauseAdDelay) ?? 5e3, [y, P] = U(!1), [A, f] = U(!1), p = x(), o = s == null ? void 0 : s[0].url, m = x(o), g = x("");
+  m.current = o;
+  const [T, C] = _(), d = L(() => {
+    u && (g.current = m.current, S.emit("exposedPauseAd", {
       action: "closed",
       payload: {}
-    }), c());
-  }, [c]), A = I(() => {
+    }), u());
+  }, [u]), I = L(() => {
     r.controlVideoPlayer({ play: !0 });
   }, [r]);
-  return T(() => {
-    if (e && a) {
-      k.emit("exposedPauseAd", {
+  return k(() => {
+    if (e && o) {
+      S.emit("exposedPauseAd", {
         action: "enabled",
         payload: {}
-      }), P(a).then((x) => {
-        p.current === a && (x == null ? void 0 : x.success) !== !0 && (clearTimeout(u.current), S == null || S());
+      }), T(o).then((b) => {
+        m.current === o && (b == null ? void 0 : b.success) !== !0 && (clearTimeout(p.current), d == null || d());
       }).catch(() => {
-        p.current === a && (clearTimeout(u.current), S == null || S());
+        m.current === o && (clearTimeout(p.current), d == null || d());
       });
-      const C = () => {
-        const x = b.get()[p.current];
-        x != null && x.imageSrc ? (clearTimeout(u.current), v(!1), g(!0)) : u.current = setTimeout(() => {
-          C();
+      const R = () => {
+        const b = C.get()[m.current];
+        b != null && b.imageSrc ? (clearTimeout(p.current), f(!1), P(!0)) : p.current = setTimeout(() => {
+          R();
         }, 200);
       };
-      u.current = setTimeout(() => {
-        C();
+      p.current = setTimeout(() => {
+        R();
       }, i);
     } else
-      k.emit("exposedPauseAd", {
+      g.current !== m.current && (g.current = "", S.emit("exposedPauseAd", {
         action: "disabled",
         payload: {}
-      }), v(!0), u.current = setTimeout(() => {
-        g(!1);
+      })), f(!0), p.current = setTimeout(() => {
+        P(!1);
       }, 400);
     return () => {
-      u.current && clearTimeout(u.current);
+      p.current && clearTimeout(p.current);
     };
-  }, [b, P, S, i, e, a]), T(() => {
-    d == null || d({ rendered: y });
-  }, [y, d]), T(() => () => {
-    d == null || d({ rendered: !1 });
-  }, [d]), y ? /* @__PURE__ */ l(
-    oe,
+  }, [C, T, d, i, e, o]), k(() => {
+    c == null || c({ rendered: y });
+  }, [y, c]), k(() => () => {
+    c == null || c({ rendered: !1 });
+  }, [c]), y ? /* @__PURE__ */ l(
+    ae,
     {
-      onClose: S,
-      isClosing: f,
+      onClose: d,
+      isClosing: A,
       title: t,
-      caption: o,
-      onPlay: A,
-      vastUrl: a,
-      options: n,
+      caption: n,
+      onPlay: I,
+      vastUrl: o,
+      options: a,
       isDesktop: h
     }
   ) : null;
-}, ie = ({
+}, le = ({
   showPauseAd: e,
   pauseAdVastUrl: s,
   videoPlayerController: t,
-  onRenderPauseAd: o,
+  onRenderPauseAd: n,
   onClosePauseAd: r,
-  children: c,
-  options: d
+  children: u,
+  options: c
 }) => {
-  const n = N(), h = j(), i = D();
-  return T(() => n ? (t && (i.current = t, n.addVideoPlayerController(i.current)), () => {
-    i.current && n.removeVideoPlayerController(i.current);
+  const a = O(), h = G(), i = x();
+  return k(() => a ? (t && (i.current = t, a.addVideoPlayerController(i.current)), () => {
+    i.current && a.removeVideoPlayerController(i.current);
   }) : () => {
-  }, [n, t]), n ? /* @__PURE__ */ l("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ L(
-    q,
+  }, [a, t]), a ? /* @__PURE__ */ l("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ D(
+    F,
     {
-      style: c ? { position: "relative" } : {},
+      style: u ? { position: "relative" } : {},
       customTheme: h.theme,
       themeMode: h.themeMode,
       children: [
-        c,
+        u,
         s && /* @__PURE__ */ l(
-          ne,
+          ie,
           {
-            sdk: n,
+            sdk: a,
             showPauseAd: e,
             vastUrls: s,
             onClose: r,
-            onRender: o,
-            options: d,
+            onRender: n,
+            options: c,
             isDesktop: !0
           }
         )
       ]
     }
-  ) }) : c;
+  ) }) : u;
 };
-class ye extends O {
+class Ae extends j {
   constructor(s) {
     super(s), this.state = { hasError: !1 };
   }
@@ -282,9 +283,9 @@ class ye extends O {
     console.error(s, t.componentStack);
   }
   render() {
-    return this.state.hasError ? this.props.children : /* @__PURE__ */ l(ie, { ...this.props });
+    return this.state.hasError ? this.props.children : /* @__PURE__ */ l(le, { ...this.props });
   }
 }
 export {
-  ye as StreamLayerPauseAd
+  Ae as StreamLayerPauseAd
 };

package/lib/classic/es/points.js

@@ -1,75 +1,76 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { useState as u, useEffect as d } from "react";
-import { s as a, B as y, m as h, f as S, e as f, F as c, i as r, u as v, d as g, h as k } from "./provider.js";
-import "nanostores";
-import "lodash.throttle";
-import "react-dom";
-import "react-countup";
-import { S as A } from "./useStreamLayerApp2.js";
-const I = /* @__PURE__ */ a("div")({
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { m as u, h as d } from "./index7.js";
+import { useState as f, useEffect as y } from "react";
+import { s as o, u as h } from "./sl-types.js";
+import { F as c, e as a } from "./index3.js";
+import { d as S } from "./index4.js";
+import { B as v } from "./index5.js";
+import { S as g } from "./useStreamLayerApp2.js";
+import { B as k, z as A } from "./hooks-B0Qttldg.js";
+const I = /* @__PURE__ */ o("div")({
   name: "PointsContainer",
   class: "psiob9b",
   propsAsIs: !1
-}), P = /* @__PURE__ */ a("div")({
+}), P = /* @__PURE__ */ o("div")({
   name: "PointsIcon",
   class: "p1gqe4lh",
   propsAsIs: !1
-}), b = () => y, T = /* @__PURE__ */ a(b())({
+}), b = () => v, B = /* @__PURE__ */ o(b())({
   name: "PointsSvg",
   class: "p15syg2y",
   propsAsIs: !0
-}), F = /* @__PURE__ */ a("div")({
+}), F = /* @__PURE__ */ o("div")({
   name: "PointsBody",
   class: "p12n4f2h",
   propsAsIs: !1
-}), L = /* @__PURE__ */ a("div")({
+}), T = /* @__PURE__ */ o("div")({
   name: "PointsTitle",
   class: "poqmx89",
   propsAsIs: !1
-}), x = /* @__PURE__ */ a("div")({
+}), x = /* @__PURE__ */ o("div")({
   name: "PointsValue",
   class: "prj9b3v",
   propsAsIs: !1
-}), B = ({ points: s, onClick: e }) => /* @__PURE__ */ m(I, { className: h, onClick: e, children: [
-  /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(T, { name: "icon-trophy-solid" }) }),
-  /* @__PURE__ */ m(F, { children: [
-    /* @__PURE__ */ t(L, { children: "Total points" }),
-    /* @__PURE__ */ t(x, { children: /* @__PURE__ */ t(S, { value: s }) })
+}), C = ({ points: s, onClick: t }) => /* @__PURE__ */ p(I, { className: u, onClick: t, children: [
+  /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(B, { name: "icon-trophy-solid" }) }),
+  /* @__PURE__ */ p(F, { children: [
+    /* @__PURE__ */ e(T, { children: "Total points" }),
+    /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(S, { value: s }) })
   ] })
-] }), C = ({ gamification: s }) => {
-  const e = s.userSummary.$store, [o, l] = u(0);
-  return d(() => {
-    const n = e.subscribe((i) => {
-      var p;
-      (p = i == null ? void 0 : i.summary) != null && p.points && l(i.summary.points);
+] }), j = ({ gamification: s }) => {
+  const t = s.userSummary.$store, [n, l] = f(0);
+  return y(() => {
+    const r = t.subscribe((i) => {
+      var m;
+      (m = i == null ? void 0 : i.summary) != null && m.points && l(i.summary.points);
     });
     return () => {
-      n();
+      r();
     };
-  }, [e]), /* @__PURE__ */ t(B, { points: o, onClick: () => {
-    const n = s.status.get();
-    n === c.Suspended ? (s.openFeature(), r.emit("app", {
+  }, [t]), /* @__PURE__ */ e(C, { points: n, onClick: () => {
+    const r = s.status.get();
+    r === c.Suspended ? (s.openFeature(), a.emit("app", {
       action: "open",
       payload: {}
-    }), r.emit("interactions", {
+    }), a.emit("interactions", {
       action: "tap",
       payload: {}
-    })) : n === c.Ready && (s.closeFeature(!1), r.emit("app", {
+    })) : r === c.Ready && (s.closeFeature(!1), a.emit("app", {
       action: "close",
       payload: {}
-    }), r.emit("interactions", {
+    }), a.emit("interactions", {
       action: "tap",
       payload: {}
     }));
   } });
-}, j = ({ sdk: s }) => {
-  if (!f(s.featuresList.getStore()))
+}, L = ({ sdk: s }) => {
+  if (!h(s.featuresList.getStore()))
     return null;
-  const e = s.getFeature(A.GAMES);
-  return e ? /* @__PURE__ */ t(C, { gamification: e }) : null;
+  const t = s.getFeature(g.GAMES);
+  return t ? /* @__PURE__ */ e(j, { gamification: t }) : null;
 }, R = ({ theme: s }) => {
-  const e = v(), o = g();
-  return e ? /* @__PURE__ */ t("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ t(k, { customTheme: s ?? o.theme, themeMode: o.themeMode, children: /* @__PURE__ */ t(j, { sdk: e }) }) }) : null;
+  const t = k(), n = A();
+  return t ? /* @__PURE__ */ e("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ e(d, { customTheme: s ?? n.theme, themeMode: n.themeMode, children: /* @__PURE__ */ e(L, { sdk: t }) }) }) : null;
 };
 export {
   R as StreamLayerSDKPoints