@streamlayer/react 1.22.3 → 1.23.1

package/lib/es/pause-ad.js

@@ -1,270 +1,236 @@
-import { jsx as l, jsxs as D } from "react/jsx-runtime";
-import { h as F } from "./index8.js";
-import { s as v, c as V, u as M } from "./sl-types.js";
-import { d as N } from "./index15.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 f = Date.now();
-    e.current = f, w.setKey(s, { id: "", url: s });
-    try {
-      S.emit("exposedPauseAd", {
-        action: "load",
-        payload: {}
-      });
-      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: d,
-                adUrl: I
-              }), S.emit("exposedPauseAd", {
-                action: "loaded",
-                payload: {
-                  id: o.id || ""
-                }
-              }), { success: !0 };
-          }
-          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: T,
-              adUrl: C
-            }), S.emit("exposedPauseAd", {
-              action: "loaded",
-              payload: {
-                id: o.id || ""
-              }
-            }), { success: !0 };
-        }
-      }
-    } catch (p) {
-      console.error("Error parsing VAST", p);
-    }
-    return { success: !1 };
-  }, []), w];
-}, H = /* @__PURE__ */ v("div")({
+import { jsx as s, jsxs as w } from "react/jsx-runtime";
+import { h as N } from "./index8.js";
+import { s as d, u as j, c as q } from "./sl-types.js";
+import { d as V } from "./index15.js";
+import { useState as B, useRef as E, useCallback as _, useEffect as c, Component as z } from "react";
+import { e as C } from "./index3.js";
+import { B as K, z as G } from "./hooks-WfHlJH12.js";
+const O = /* @__PURE__ */ d("div")({
   name: "PauseAdOverlay",
   class: "pw9gih8",
   propsAsIs: !1
-}), J = /* @__PURE__ */ v("div")({
+}), W = /* @__PURE__ */ d("div")({
   name: "PauseAdContent",
   class: "p8lpomy",
   propsAsIs: !1
-}), X = /* @__PURE__ */ v("div")({
+}), X = /* @__PURE__ */ d("div")({
   name: "PauseAdTopLeft",
   class: "pv7u167",
   propsAsIs: !1
-}), Y = /* @__PURE__ */ v("h2")({
+}), H = /* @__PURE__ */ d("h2")({
   name: "PauseAdTitle",
   class: "p1kh2yb0",
   propsAsIs: !1
-}), Z = /* @__PURE__ */ v("p")({
+}), J = /* @__PURE__ */ d("p")({
   name: "PauseAdCaption",
   class: "pl8f94x",
   propsAsIs: !1
-}), ee = /* @__PURE__ */ v("div")({
+}), Q = /* @__PURE__ */ d("div")({
   name: "PauseAdBottomLeft",
   class: "p1m6zmrt",
   propsAsIs: !1
-}), se = /* @__PURE__ */ v("button")({
+}), Y = /* @__PURE__ */ d("button")({
   name: "PauseAdPlayButton",
   class: "pm3vwfa",
   propsAsIs: !1
-}), re = /* @__PURE__ */ v("div")({
+}), Z = /* @__PURE__ */ d("div")({
   name: "PauseAdSidebarGradient",
   class: "p1tibuhw",
   propsAsIs: !1
-}), te = /* @__PURE__ */ v("div")({
+}), $ = /* @__PURE__ */ d("div")({
   name: "PauseAdSidebar",
   class: "ptqqrqd",
   propsAsIs: !1
-}), oe = /* @__PURE__ */ v("span")({
+}), ee = /* @__PURE__ */ d("span")({
   name: "PauseAdTitleDescription",
   class: "p14estxv",
   propsAsIs: !1
-}), K = /* @__PURE__ */ v("img")({
+}), F = /* @__PURE__ */ d("img")({
   name: "ExternalAdContainer",
   class: "e1dpvfl1",
   propsAsIs: !1
-}), ne = ({ vastUrl: e, isDesktop: s }) => {
-  var t;
-  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(K, { src: r[e].imageSrc }) : /* @__PURE__ */ l(
-    "a",
-    {
-      onClick: () => {
-        S.emit("exposedPauseAd", {
-          action: "navigated",
-          payload: {
-            id: r[e].id
-          }
-        });
-      },
-      href: r[e].adUrl,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      children: /* @__PURE__ */ l(K, { src: r[e].imageSrc })
+}), re = ({
+  vastUrl: i,
+  isDesktop: n,
+  content: e
+}) => (c(() => {
+  e.imageSrc && e.id && C.emit("exposedPauseAd", {
+    action: "rendered",
+    payload: {
+      id: e.id,
+      parentId: e.parentId
     }
-  ) : null;
-}, 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({
+  });
+}, [e, i]), e != null && e.imageSrc ? !e.adUrl || !n ? /* @__PURE__ */ s(F, { src: e.imageSrc }) : /* @__PURE__ */ s(
+  "a",
+  {
+    onClick: () => {
+      C.emit("exposedPauseAd", {
+        action: "navigated",
+        payload: {
+          id: e.id,
+          parentId: e.parentId
+        }
+      });
+    },
+    href: e.adUrl,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    children: /* @__PURE__ */ s(F, { 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({
     focusKey: "sl-pause-ad-play",
-    onEnterRelease: n,
+    onEnterRelease: u,
     isFocusBoundary: !0,
     forceFocus: !0
   });
-  return k(() => {
-    i.current && y();
-  }, [i, y]), k(() => {
-    if (!r)
+  return c(() => () => {
+    e.revalidate();
+  }, [e]), c(() => {
+    p.current && g();
+  }, [p, g]), c(() => {
+    if (!a)
       return () => {
       };
-    const P = (A) => {
-      const f = A.keyCode;
-      if (f === 461 || f === 10009 || f === 27 || f === 8) {
-        A.preventDefault(), A.stopPropagation(), A.stopImmediatePropagation(), r();
+    const T = (A) => {
+      const o = A.keyCode;
+      if (o === 461 || o === 10009 || o === 27 || o === 8) {
+        A.preventDefault(), A.stopPropagation(), A.stopImmediatePropagation(), a();
         return;
       }
     };
-    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 })
+    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 })
     ] }),
-    h && /* @__PURE__ */ l(ee, { children: /* @__PURE__ */ l(
-      se,
+    b && /* @__PURE__ */ s(Q, { children: /* @__PURE__ */ s(
+      Y,
       {
-        ref: i,
-        onClick: n,
-        onMouseEnter: () => i.current.focus(),
+        ref: p,
+        onClick: u,
+        onMouseEnter: () => p.current.focus(),
         "aria-label": "Resume playback"
       }
     ) }),
-    /* @__PURE__ */ l(re, { className: "SL_PauseAdSidebar", children: /* @__PURE__ */ D(te, { children: [
-      u && /* @__PURE__ */ l(ne, { isDesktop: a, vastUrl: u }),
-      /* @__PURE__ */ l(oe, { children: "ADVERTISEMENT" })
+    /* @__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" })
     ] }) })
   ] }) });
-}, 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: {}
-    }), u());
-  }, [u]), I = L(() => {
-    r.controlVideoPlayer({ play: !0 });
-  }, [r]);
-  return k(() => {
-    if (e && o) {
-      S.emit("exposedPauseAd", {
+}, 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, {
+    refetchInterval: b,
+    $enabled: l === 0 || !!i,
+    prefetch: l === 0 && b > 0
+  }), k = j(m), x = _(() => {
+    if (u) {
+      S.current = P.current;
+      const r = m.get().data;
+      C.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
+        } : {}
+      }), u();
+    }
+  }, [u, m]), M = _(() => {
+    v.controlVideoPlayer({ play: !0 });
+  }, [v]);
+  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", {
         action: "enabled",
-        payload: {}
-      }), T(o).then((b) => {
-        m.current === o && (b == null ? void 0 : b.success) !== !0 && (clearTimeout(p.current), d == null || d());
-      }).catch(() => {
-        m.current === o && (clearTimeout(p.current), d == null || d());
+        payload: (r == null ? void 0 : r.url) === y.current ? {
+          id: r == null ? void 0 : r.id,
+          parentId: r == null ? void 0 : r.parentId
+        } : {}
       });
-      const R = () => {
-        const b = C.get()[m.current];
-        b != null && b.imageSrc ? (clearTimeout(p.current), f(!1), P(!0)) : p.current = setTimeout(() => {
-          R();
-        }, 200);
+      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();
+        }, 200)));
       };
-      p.current = setTimeout(() => {
-        R();
-      }, i);
-    } else
-      g.current !== m.current && (g.current = "", S.emit("exposedPauseAd", {
-        action: "disabled",
-        payload: {}
-      })), f(!0), p.current = setTimeout(() => {
-        P(!1);
+      clearTimeout(o.current), o.current = setTimeout(() => {
+        U();
+      }, l);
+    } else {
+      if (S.current !== P.current) {
+        const r = m.get().data;
+        S.current = "", y.current !== "" && (C.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
+          } : {}
+        }), y.current = "");
+      }
+      A(!0), o.current = setTimeout(() => {
+        g(!1);
       }, 400);
+    }
     return () => {
-      p.current && clearTimeout(p.current);
+      o.current && clearTimeout(o.current);
     };
-  }, [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,
+  }, [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(
+    te,
     {
-      onClose: d,
-      isClosing: A,
-      title: t,
-      caption: n,
-      onPlay: I,
-      vastUrl: o,
-      options: a,
-      isDesktop: h
+      onClose: x,
+      isClosing: T,
+      title: e,
+      caption: I,
+      onPlay: M,
+      vastUrl: h,
+      options: t,
+      isDesktop: f,
+      externalPauseAdStore: m,
+      content: k.data
     }
-  ) : null;
-}, le = ({
-  showPauseAd: e,
-  pauseAdVastUrl: s,
-  videoPlayerController: t,
-  onRenderPauseAd: n,
-  onClosePauseAd: r,
+  );
+}, ne = ({
+  showPauseAd: i,
+  pauseAdVastUrl: n,
+  videoPlayerController: e,
+  onRenderPauseAd: I,
+  onClosePauseAd: v,
   children: u,
-  options: c
+  options: a
 }) => {
-  const a = O(), h = G(), i = x();
-  return k(() => a ? (t && (i.current = t, a.addVideoPlayerController(i.current)), () => {
-    i.current && a.removeVideoPlayerController(i.current);
+  const t = K(), f = G(), l = E();
+  return c(() => t ? (e && (l.current = e, t.addVideoPlayerController(l.current)), () => {
+    l.current && t.removeVideoPlayerController(l.current);
   }) : () => {
-  }, [a, t]), a ? /* @__PURE__ */ l("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ D(
-    F,
+  }, [t, e]), t ? /* @__PURE__ */ s("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ w(
+    N,
     {
       style: u ? { position: "relative" } : {},
-      customTheme: h.theme,
-      themeMode: h.themeMode,
+      customTheme: f.theme,
+      themeMode: f.themeMode,
       children: [
         u,
-        s && /* @__PURE__ */ l(
-          ie,
+        n && /* @__PURE__ */ s(
+          se,
           {
-            sdk: a,
-            showPauseAd: e,
-            vastUrls: s,
-            onClose: r,
-            onRender: n,
-            options: c,
+            sdk: t,
+            showPauseAd: i,
+            vastUrls: n,
+            onClose: v,
+            onRender: I,
+            options: a,
             isDesktop: !0
           }
         )
@@ -272,20 +238,20 @@ const Q = {}, W = new $(), w = z(Q), E = q("ui:gam-static"), B = (e) => new Prom
     }
   ) }) : u;
 };
-class Ae extends j {
-  constructor(s) {
-    super(s), this.state = { hasError: !1 };
+class pe extends z {
+  constructor(n) {
+    super(n), this.state = { hasError: !1 };
   }
   static getDerivedStateFromError() {
     return { hasError: !0 };
   }
-  componentDidCatch(s, t) {
-    console.error(s, t.componentStack);
+  componentDidCatch(n, e) {
+    console.error(n, e.componentStack);
   }
   render() {
-    return this.state.hasError ? this.props.children : /* @__PURE__ */ l(le, { ...this.props });
+    return this.state.hasError ? this.props.children : /* @__PURE__ */ s(ne, { ...this.props });
   }
 }
 export {
-  Ae as StreamLayerPauseAd
+  pe as StreamLayerPauseAd
 };

package/lib/es/points.js

@@ -2,12 +2,13 @@ import { jsxs as p, jsx as e } from "react/jsx-runtime";
 import { h as u } from "./index8.js";
 import { useState as d, useEffect as f } from "react";
 import { s as o, u as y } from "./sl-types.js";
-import { F as c, e as a } from "./index3.js";
+import { e as a } from "./index3.js";
 import { d as h } from "./index5.js";
 import { m as S } from "./theme.js";
 import { B as v } from "./index6.js";
+import { F as c } from "./feature.js";
 import { S as g } from "./useStreamLayerApp2.js";
-import { B as k, z as A } from "./hooks-B0Qttldg.js";
+import { B as k, z as A } from "./hooks-WfHlJH12.js";
 const I = /* @__PURE__ */ o("div")({
   name: "PointsContainer",
   class: "psiob9b",
@@ -69,10 +70,10 @@ const I = /* @__PURE__ */ o("div")({
     return null;
   const t = s.getFeature(g.GAMES);
   return t ? /* @__PURE__ */ e(j, { gamification: t }) : null;
-}, V = ({ theme: s }) => {
+}, _ = ({ theme: s }) => {
   const t = k(), r = A();
   return t ? /* @__PURE__ */ e("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ e(u, { customTheme: s ?? r.theme, themeMode: r.themeMode, children: /* @__PURE__ */ e(L, { sdk: t }) }) }) : null;
 };
 export {
-  V as StreamLayerSDKPoints
+  _ as StreamLayerSDKPoints
 };