@streamlayer/react 1.20.7 → 1.21.1

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

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