@streamlayer/react 1.23.1 → 1.24.0

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

@@ -1,10 +1,10 @@
-import { jsx as s, jsxs as w } from "react/jsx-runtime";
-import { h as N } from "./index7.js";
-import { s as d, u as j, c as q } from "./sl-types.js";
-import { d as V } from "./index11.js";
-import { useState as B, useRef as E, useCallback as _, useEffect as c, Component as z } from "react";
-import { e as C } from "./index5.js";
-import { B as K, z as G } from "./hooks-WfHlJH12.js";
+import { jsx as r, jsxs as D } from "react/jsx-runtime";
+import { h as M } from "./index8.js";
+import { s as d, u as q, c as V } from "./sl-types.js";
+import { d as j } from "./index10.js";
+import { useState as B, useRef as x, useCallback as _, useEffect as c, Component as K } from "react";
+import { e as T } from "./index4.js";
+import { Y as z, _ as G } from "./hooks-n9ax4LRT.js";
 const O = /* @__PURE__ */ d("div")({
   name: "PauseAdOverlay",
   class: "pw9gih8",
@@ -17,19 +17,19 @@ const O = /* @__PURE__ */ d("div")({
   name: "PauseAdTopLeft",
   class: "pv7u167",
   propsAsIs: !1
-}), H = /* @__PURE__ */ d("h2")({
+}), Y = /* @__PURE__ */ d("h2")({
   name: "PauseAdTitle",
   class: "p1kh2yb0",
   propsAsIs: !1
-}), J = /* @__PURE__ */ d("p")({
+}), H = /* @__PURE__ */ d("p")({
   name: "PauseAdCaption",
   class: "pl8f94x",
   propsAsIs: !1
-}), Q = /* @__PURE__ */ d("div")({
+}), J = /* @__PURE__ */ d("div")({
   name: "PauseAdBottomLeft",
   class: "p1m6zmrt",
   propsAsIs: !1
-}), Y = /* @__PURE__ */ d("button")({
+}), Q = /* @__PURE__ */ d("button")({
   name: "PauseAdPlayButton",
   class: "pm3vwfa",
   propsAsIs: !1
@@ -45,27 +45,27 @@ const O = /* @__PURE__ */ d("div")({
   name: "PauseAdTitleDescription",
   class: "p14estxv",
   propsAsIs: !1
-}), F = /* @__PURE__ */ d("img")({
+}), N = /* @__PURE__ */ d("img")({
   name: "ExternalAdContainer",
   class: "e1dpvfl1",
   propsAsIs: !1
 }), re = ({
   vastUrl: i,
-  isDesktop: n,
+  isDesktop: a,
   content: e
 }) => (c(() => {
-  e.imageSrc && e.id && C.emit("exposedPauseAd", {
+  e.imageSrc && e.id && T.emit("exposedPauseAd", {
     action: "rendered",
     payload: {
       id: e.id,
       parentId: e.parentId
     }
   });
-}, [e, i]), e != null && e.imageSrc ? !e.adUrl || !n ? /* @__PURE__ */ s(F, { src: e.imageSrc }) : /* @__PURE__ */ s(
+}, [e, i]), e?.imageSrc ? !e.adUrl || !a ? /* @__PURE__ */ r(N, { src: e.imageSrc }) : /* @__PURE__ */ r(
   "a",
   {
     onClick: () => {
-      C.emit("exposedPauseAd", {
+      T.emit("exposedPauseAd", {
         action: "navigated",
         payload: {
           id: e.id,
@@ -76,180 +76,180 @@ const O = /* @__PURE__ */ d("div")({
     href: e.adUrl,
     target: "_blank",
     rel: "noopener noreferrer",
-    children: /* @__PURE__ */ s(F, { src: e.imageSrc })
+    children: /* @__PURE__ */ r(N, { src: e.imageSrc })
   }
-) : null), te = ({ isClosing: i, content: n, externalPauseAdStore: e, title: I, caption: v, onPlay: u, onClose: a, vastUrl: t, options: f, isDesktop: l }) => {
-  const b = (f == null ? void 0 : f.showPauseButton) ?? !0, { ref: p, focusSelf: g } = V.useFocusable({
+) : null), te = ({ isClosing: i, content: a, externalPauseAdStore: e, title: y, caption: f, onPlay: l, onClose: u, vastUrl: t, options: h, isDesktop: n }) => {
+  const b = h?.showPauseButton ?? !0, { ref: p, focusSelf: I } = j.useFocusable({
     focusKey: "sl-pause-ad-play",
-    onEnterRelease: u,
+    onEnterRelease: l,
     isFocusBoundary: !0,
     forceFocus: !0
   });
   return c(() => () => {
     e.revalidate();
   }, [e]), c(() => {
-    p.current && g();
-  }, [p, g]), c(() => {
-    if (!a)
+    p.current && I();
+  }, [p, I]), c(() => {
+    if (!u)
       return () => {
       };
-    const T = (A) => {
-      const o = A.keyCode;
-      if (o === 461 || o === 10009 || o === 27 || o === 8) {
-        A.preventDefault(), A.stopPropagation(), A.stopImmediatePropagation(), a();
+    const C = (A) => {
+      const s = A.keyCode;
+      if (s === 461 || s === 10009 || s === 27 || s === 8) {
+        A.preventDefault(), A.stopPropagation(), A.stopImmediatePropagation(), u();
         return;
       }
     };
-    return window.addEventListener("keydown", T, { capture: !0 }), () => window.removeEventListener("keydown", T, { capture: !0 });
-  }, [a]), /* @__PURE__ */ s(O, { className: q("SL_PauseAd", i && "pause-ad-closing"), children: /* @__PURE__ */ w(W, { children: [
-    /* @__PURE__ */ w(X, { children: [
-      /* @__PURE__ */ s(H, { children: I }),
-      /* @__PURE__ */ s(J, { children: v })
+    return window.addEventListener("keydown", C, { capture: !0 }), () => window.removeEventListener("keydown", C, { capture: !0 });
+  }, [u]), /* @__PURE__ */ r(O, { className: V("SL_PauseAd", i && "pause-ad-closing"), children: /* @__PURE__ */ D(W, { children: [
+    /* @__PURE__ */ D(X, { children: [
+      /* @__PURE__ */ r(Y, { children: y }),
+      /* @__PURE__ */ r(H, { children: f })
     ] }),
-    b && /* @__PURE__ */ s(Q, { children: /* @__PURE__ */ s(
-      Y,
+    b && /* @__PURE__ */ r(J, { children: /* @__PURE__ */ r(
+      Q,
       {
         ref: p,
-        onClick: u,
+        onClick: l,
         onMouseEnter: () => p.current.focus(),
         "aria-label": "Resume playback"
       }
     ) }),
-    /* @__PURE__ */ s(Z, { className: "SL_PauseAdSidebar", children: /* @__PURE__ */ w($, { children: [
-      t && /* @__PURE__ */ s(re, { content: n, isDesktop: l, vastUrl: t }),
-      /* @__PURE__ */ s(ee, { children: "ADVERTISEMENT" })
+    /* @__PURE__ */ r(Z, { className: "SL_PauseAdSidebar", children: /* @__PURE__ */ D($, { children: [
+      t && /* @__PURE__ */ r(re, { content: a, isDesktop: n, vastUrl: t }),
+      /* @__PURE__ */ r(ee, { children: "ADVERTISEMENT" })
     ] }) })
   ] }) });
-}, se = ({ showPauseAd: i, vastUrls: n, title: e, caption: I, sdk: v, onClose: u, onRender: a, options: t, isDesktop: f }) => {
-  const l = (t == null ? void 0 : t.pauseAdDelay) ?? 0, b = (t == null ? void 0 : t.pauseAdRefetchInterval) ?? 1e3 * 60 * 50, [p, g] = B(!1), [T, A] = B(!1), o = E(), h = n == null ? void 0 : n[0].url, P = E(h), y = E(""), S = E("");
-  P.current = h;
-  const [m, R] = v.advertisement.getExternalPauseAd(h, {
+}, se = ({ showPauseAd: i, vastUrls: a, title: e, caption: y, sdk: f, onClose: l, onRender: u, options: t, isDesktop: h }) => {
+  const n = t?.pauseAdDelay ?? 0, b = t?.pauseAdRefetchInterval ?? 1e3 * 60 * 50, [p, I] = B(!1), [C, A] = B(!1), s = x(), v = a?.[0].url, P = x(v), g = x(""), S = x("");
+  P.current = v;
+  const [m, R] = f.advertisement.getExternalPauseAd(v, {
     refetchInterval: b,
-    $enabled: l === 0 || !!i,
-    prefetch: l === 0 && b > 0
-  }), k = j(m), x = _(() => {
-    if (u) {
+    $enabled: n === 0 || !!i,
+    prefetch: n === 0 && b > 0
+  }), k = q(m), E = _(() => {
+    if (l) {
       S.current = P.current;
-      const r = m.get().data;
-      C.emit("exposedPauseAd", {
+      const o = m.get().data;
+      T.emit("exposedPauseAd", {
         action: "closed",
-        payload: (r == null ? void 0 : r.url) === S.current ? {
-          id: r == null ? void 0 : r.id,
-          parentId: r == null ? void 0 : r.parentId
+        payload: o?.url === S.current ? {
+          id: o?.id,
+          parentId: o?.parentId
         } : {}
-      }), u();
+      }), l();
     }
-  }, [u, m]), M = _(() => {
-    v.controlVideoPlayer({ play: !0 });
-  }, [v]);
+  }, [l, m]), F = _(() => {
+    f.controlVideoPlayer({ play: !0 });
+  }, [f]);
   return c(() => {
-    R === P.current && k.error && (console.log("error", k.error), clearTimeout(o.current), x == null || x());
-  }, [k, x, R]), c(() => {
-    if (i && h) {
-      y.current = P.current, S.current = "";
-      const r = m.get().data;
-      C.emit("exposedPauseAd", {
+    R === P.current && k.error && (console.log("error", k.error), clearTimeout(s.current), E?.());
+  }, [k, E, R]), c(() => {
+    if (i && v) {
+      g.current = P.current, S.current = "";
+      const o = m.get().data;
+      T.emit("exposedPauseAd", {
         action: "enabled",
-        payload: (r == null ? void 0 : r.url) === y.current ? {
-          id: r == null ? void 0 : r.id,
-          parentId: r == null ? void 0 : r.parentId
+        payload: o?.url === g.current ? {
+          id: o?.id,
+          parentId: o?.parentId
         } : {}
       });
       const U = () => {
-        const L = m.get(), D = L.data;
-        (D == null ? void 0 : D.url) === P.current && (!L.loading && D != null && D.imageSrc ? (clearTimeout(o.current), A(!1), g(!0)) : L.loading && (o.current = setTimeout(() => {
-          console.log("checkAndAllowRender timeout"), U();
+        const w = m.get(), L = w.data;
+        (!L || L?.url === P.current) && (!w.loading && L?.imageSrc ? (clearTimeout(s.current), A(!1), I(!0)) : w.loading && (s.current = setTimeout(() => {
+          U();
         }, 200)));
       };
-      clearTimeout(o.current), o.current = setTimeout(() => {
+      clearTimeout(s.current), s.current = setTimeout(() => {
         U();
-      }, l);
+      }, n);
     } else {
       if (S.current !== P.current) {
-        const r = m.get().data;
-        S.current = "", y.current !== "" && (C.emit("exposedPauseAd", {
+        const o = m.get().data;
+        S.current = "", g.current !== "" && (T.emit("exposedPauseAd", {
           action: "disabled",
-          payload: y.current === (r == null ? void 0 : r.url) ? {
-            id: r == null ? void 0 : r.id,
-            parentId: r == null ? void 0 : r.parentId
+          payload: g.current === o?.url ? {
+            id: o?.id,
+            parentId: o?.parentId
           } : {}
-        }), y.current = "");
+        }), g.current = "");
       }
-      A(!0), o.current = setTimeout(() => {
-        g(!1);
+      A(!0), s.current = setTimeout(() => {
+        I(!1);
       }, 400);
     }
     return () => {
-      o.current && clearTimeout(o.current);
+      s.current && clearTimeout(s.current);
     };
-  }, [m, x, l, i, h]), c(() => {
-    a == null || a({ rendered: p });
-  }, [p, a]), c(() => () => {
-    a == null || a({ rendered: !1 });
-  }, [a]), !p || !k.data ? null : /* @__PURE__ */ s(
+  }, [m, E, n, i, v]), c(() => {
+    u?.({ rendered: p });
+  }, [p, u]), c(() => () => {
+    u?.({ rendered: !1 });
+  }, [u]), !p || !k.data ? null : /* @__PURE__ */ r(
     te,
     {
-      onClose: x,
-      isClosing: T,
+      onClose: E,
+      isClosing: C,
       title: e,
-      caption: I,
-      onPlay: M,
-      vastUrl: h,
+      caption: y,
+      onPlay: F,
+      vastUrl: v,
       options: t,
-      isDesktop: f,
+      isDesktop: h,
       externalPauseAdStore: m,
       content: k.data
     }
   );
-}, ne = ({
+}, ae = ({
   showPauseAd: i,
-  pauseAdVastUrl: n,
+  pauseAdVastUrl: a,
   videoPlayerController: e,
-  onRenderPauseAd: I,
-  onClosePauseAd: v,
-  children: u,
-  options: a
+  onRenderPauseAd: y,
+  onClosePauseAd: f,
+  children: l,
+  options: u
 }) => {
-  const t = K(), f = G(), l = E();
-  return c(() => t ? (e && (l.current = e, t.addVideoPlayerController(l.current)), () => {
-    l.current && t.removeVideoPlayerController(l.current);
+  const t = z(), h = G(), n = x();
+  return c(() => t ? (e && (n.current = e, t.addVideoPlayerController(n.current)), () => {
+    n.current && t.removeVideoPlayerController(n.current);
   }) : () => {
-  }, [t, e]), t ? /* @__PURE__ */ s("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ w(
-    N,
+  }, [t, e]), t ? /* @__PURE__ */ r("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ D(
+    M,
     {
-      style: u ? { position: "relative" } : {},
-      customTheme: f.theme,
-      themeMode: f.themeMode,
+      style: l ? { position: "relative" } : {},
+      customTheme: h.theme,
+      themeMode: h.themeMode,
       children: [
-        u,
-        n && /* @__PURE__ */ s(
+        l,
+        a && /* @__PURE__ */ r(
           se,
           {
             sdk: t,
             showPauseAd: i,
-            vastUrls: n,
-            onClose: v,
-            onRender: I,
-            options: a,
+            vastUrls: a,
+            onClose: f,
+            onRender: y,
+            options: u,
             isDesktop: !0
           }
         )
       ]
     }
-  ) }) : u;
+  ) }) : l;
 };
-class pe extends z {
-  constructor(n) {
-    super(n), this.state = { hasError: !1 };
+class pe extends K {
+  constructor(a) {
+    super(a), this.state = { hasError: !1 };
   }
   static getDerivedStateFromError() {
     return { hasError: !0 };
   }
-  componentDidCatch(n, e) {
-    console.error(n, e.componentStack);
+  componentDidCatch(a, e) {
+    console.error(a, e.componentStack);
   }
   render() {
-    return this.state.hasError ? this.props.children : /* @__PURE__ */ s(ne, { ...this.props });
+    return this.state.hasError ? this.props.children : /* @__PURE__ */ r(ae, { ...this.props });
   }
 }
 export {

package/lib/classic/es/points.js

@@ -1,13 +1,13 @@
-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 { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { m as c, h as u } from "./index8.js";
+import { useState as d, useEffect as f } from "react";
 import { s as o, u as h } from "./sl-types.js";
-import { e as a } from "./index5.js";
-import { d as S } from "./index3.js";
-import { B as v } from "./index4.js";
-import { F as c } from "./feature.js";
-import { S as g } from "./useStreamLayerApp2.js";
-import { B as k, z as A } from "./hooks-WfHlJH12.js";
+import { e as n } from "./index4.js";
+import { p as y } from "./index3.js";
+import { B as S } from "./index6.js";
+import { F as m } from "./feature.js";
+import { S as v } from "./useStreamLayerApp2.js";
+import { Y as g, _ as A } from "./hooks-n9ax4LRT.js";
 const I = /* @__PURE__ */ o("div")({
   name: "PointsContainer",
   class: "psiob9b",
@@ -16,7 +16,7 @@ const I = /* @__PURE__ */ o("div")({
   name: "PointsIcon",
   class: "p1gqe4lh",
   propsAsIs: !1
-}), b = () => v, B = /* @__PURE__ */ o(b())({
+}), b = () => S, k = /* @__PURE__ */ o(b())({
   name: "PointsSvg",
   class: "p15syg2y",
   propsAsIs: !0
@@ -32,47 +32,46 @@ const I = /* @__PURE__ */ o("div")({
   name: "PointsValue",
   class: "prj9b3v",
   propsAsIs: !1
-}), C = ({ points: s, onClick: t }) => /* @__PURE__ */ p(I, { className: u, onClick: t, children: [
-  /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(B, { name: "icon-trophy-solid" }) }),
+}), B = ({ points: s, onClick: e }) => /* @__PURE__ */ p(I, { className: c, onClick: e, children: [
+  /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(k, { name: "icon-trophy-solid" }) }),
   /* @__PURE__ */ p(F, { children: [
-    /* @__PURE__ */ e(T, { children: "Total points" }),
-    /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(S, { value: s }) })
+    /* @__PURE__ */ t(T, { children: "Total points" }),
+    /* @__PURE__ */ t(x, { children: /* @__PURE__ */ t(y, { value: s }) })
   ] })
-] }), j = ({ gamification: s }) => {
-  const t = s.userSummary.$store, [r, l] = f(0);
-  return y(() => {
-    const n = t.subscribe((i) => {
-      var m;
-      (m = i == null ? void 0 : i.summary) != null && m.points && l(i.summary.points);
+] }), C = ({ gamification: s }) => {
+  const e = s.userSummary.$store, [a, l] = d(0);
+  return f(() => {
+    const r = e.subscribe((i) => {
+      i?.summary?.points && l(i.summary.points);
     });
     return () => {
-      n();
+      r();
     };
-  }, [t]), /* @__PURE__ */ e(C, { points: r, onClick: () => {
-    const n = s.status.get();
-    n === c.Suspended ? (s.openFeature(), a.emit("app", {
+  }, [e]), /* @__PURE__ */ t(B, { points: a, onClick: () => {
+    const r = s.status.get();
+    r === m.Suspended ? (s.openFeature(), n.emit("app", {
       action: "open",
       payload: {}
-    }), a.emit("interactions", {
+    }), n.emit("interactions", {
       action: "tap",
       payload: {}
-    })) : n === c.Ready && (s.closeFeature(!1), a.emit("app", {
+    })) : r === m.Ready && (s.closeFeature(!1), n.emit("app", {
       action: "close",
       payload: {}
-    }), a.emit("interactions", {
+    }), n.emit("interactions", {
       action: "tap",
       payload: {}
     }));
   } });
-}, L = ({ sdk: s }) => {
+}, $ = ({ sdk: s }) => {
   if (!h(s.featuresList.getStore()))
     return null;
-  const t = s.getFeature(g.GAMES);
-  return t ? /* @__PURE__ */ e(j, { gamification: t }) : null;
-}, V = ({ theme: s }) => {
-  const t = k(), r = A();
-  return t ? /* @__PURE__ */ e("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ e(d, { customTheme: s ?? r.theme, themeMode: r.themeMode, children: /* @__PURE__ */ e(L, { sdk: t }) }) }) : null;
+  const e = s.getFeature(v.GAMES);
+  return e ? /* @__PURE__ */ t(C, { gamification: e }) : null;
+}, O = ({ theme: s }) => {
+  const e = g(), a = A();
+  return e ? /* @__PURE__ */ t("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ t(u, { customTheme: s ?? a.theme, themeMode: a.themeMode, children: /* @__PURE__ */ t($, { sdk: e }) }) }) : null;
 };
 export {
-  V as StreamLayerSDKPoints
+  O as StreamLayerSDKPoints
 };