@streamlayer/react 1.19.1 → 1.20.0

package/lib/es/index.js

@@ -1,4 +1,4 @@
-import { P as m, S, a3 as o, h as i, u as s, b as y, _ as L } from "./provider.js";
+import { Q as m, S, a4 as o, h as i, u as s, b as y, $ as L } from "./provider.js";
 import "react/jsx-runtime";
 import "react";
 import { StreamLayerSDKNotification as p, StreamLayerSDKNotificationUI as u } from "./notification.js";

package/lib/es/index2.js

@@ -1,5 +1,5 @@
 import { jsx as P, jsxs as F } from "react/jsx-runtime";
-import { s as _, B as te, c as ft, f as ht, a as Se, i as gt, j as vt, k as Ee } from "./provider.js";
+import { s as _, B as te, k as ft, l as ht, a as Se, n as gt, c as vt, j as Ee } from "./provider.js";
 import $, { forwardRef as Ae, useState as W, useRef as D, useEffect as X, useLayoutEffect as wt, createContext as Ve, useMemo as He, useCallback as Re, memo as bt } from "react";
 import { C as yt, a as St, S as qe } from "./useStreamLayerApp2.js";
 function _e(t) {

package/lib/es/masters2.js

@@ -1,5 +1,5 @@
 import { jsx as s, jsxs as h, Fragment as x } from "react/jsx-runtime";
-import { s as c, l as Y, a as m, A as N, i as V, F as a2, y as l2, n as d2, x as c2, o as p2, f as C2, t as u2, p as m2, z as f2, q as h2, R as j, r as P, k as A, B as X, I as g2, v as v2, w as E2, e as L2, N as w, C as M, D as S2, E as _2, G as T2, H as N2, J as b, K as z, L as J, M as e2, m as F, O as I2, P as b2, S as R2, Q as A2, U as y2 } from "./provider.js";
+import { s as c, i as Y, a as m, A as N, n as V, F as a2, y as l2, o as d2, x as c2, p as p2, l as C2, t as u2, q as m2, z as f2, r as h2, R as j, v as P, j as A, B as X, I as g2, w as v2, C as E2, e as L2, N as w, D as M, E as S2, G as _2, H as T2, J as N2, K as b, L as z, M as J, O as e2, m as F, P as I2, Q as b2, S as R2, U as A2, V as y2 } from "./provider.js";
 import { useRef as I, useState as _, useEffect as v, createContext as k2, useContext as n2, lazy as w2, useMemo as y, Suspense as x2, forwardRef as D2, useLayoutEffect as F2, useCallback as $, Component as O2 } from "react";
 import { n as B2 } from "./index2.js";
 import { Q as V2, S as k } from "./useStreamLayerApp2.js";

package/lib/es/notification.js

@@ -1,7 +1,7 @@
-import { s as n, B as A, $ as As, a0 as Is, a1 as _, G, a2 as hs, Y as $s, V as x, X as gs, d as ws, a as ys, e as Ts, N as R, u as bs, b as Cs, _ as fs, h as ks } from "./provider.js";
+import { s as n, B as A, a0 as As, a1 as Is, a2 as _, H as K, a3 as hs, Z as $s, W as x, Y as gs, d as ws, a as ys, e as Ts, N as R, u as bs, b as Cs, $ as fs, h as ks } from "./provider.js";
 import { jsxs as l, jsx as s } from "react/jsx-runtime";
-import { useState as w, useRef as K, useEffect as y, useCallback as Ns, useMemo as qs } from "react";
-import { l as v, Q as h, m as X, r as S, S as Ls, A as O } from "./useStreamLayerApp2.js";
+import { useState as w, useRef as G, useEffect as y, useCallback as Ns, useMemo as qs } from "react";
+import { l as v, Q as h, m as H, r as S, S as Ls, A as O } from "./useStreamLayerApp2.js";
 const b = /* @__PURE__ */ n("div")({
   name: "Media",
   class: "m1bcvojl",
@@ -64,7 +64,7 @@ const b = /* @__PURE__ */ n("div")({
   name: "NotificationContainer",
   class: "ns1nzpg",
   propsAsIs: !1
-}), H = /* @__PURE__ */ n("div")({
+}), Z = /* @__PURE__ */ n("div")({
   name: "Body",
   class: "b1j59nzs",
   propsAsIs: !1
@@ -76,7 +76,7 @@ const b = /* @__PURE__ */ n("div")({
   name: "Button",
   class: "b14ivj5k",
   propsAsIs: !1
-}), Ys = () => A, Ws = /* @__PURE__ */ n(Ys())({
+}), Ws = () => A, Ys = /* @__PURE__ */ n(Ws())({
   name: "StyledChevronRight",
   class: "s1atci8n",
   propsAsIs: !0
@@ -84,22 +84,22 @@ const b = /* @__PURE__ */ n("div")({
   name: "QuoteWrap",
   class: "q4w8jgs",
   propsAsIs: !1
-}), Gs = /* @__PURE__ */ n("blockquote")({
+}), Ks = /* @__PURE__ */ n("blockquote")({
   name: "Quote",
   class: "qaa0kez",
   propsAsIs: !1
-}), Ks = /* @__PURE__ */ n("div")({
+}), Gs = /* @__PURE__ */ n("div")({
   name: "Body",
   class: "b1wvd52w",
   propsAsIs: !1
-}), Xs = /* @__PURE__ */ n("div")({
+}), Hs = /* @__PURE__ */ n("div")({
   name: "Container",
   class: "ccvukea",
   propsAsIs: !1
-}), Hs = ({ image: e, tweet: i, account: t, accountVerified: o, body: a, title: p }) => {
+}), Zs = ({ image: e, tweet: i, account: t, accountVerified: o, body: a, title: p }) => {
   var d;
-  return /* @__PURE__ */ l(Xs, { children: [
-    p && /* @__PURE__ */ s(_s, { children: /* @__PURE__ */ s(Gs, { children: p }) }),
+  return /* @__PURE__ */ l(Hs, { children: [
+    p && /* @__PURE__ */ s(_s, { children: /* @__PURE__ */ s(Ks, { children: p }) }),
     /* @__PURE__ */ s(
       As,
       {
@@ -110,22 +110,22 @@ const b = /* @__PURE__ */ n("div")({
         createdTweet: i == null ? void 0 : i.date
       }
     ),
-    /* @__PURE__ */ s(Ks, { children: Is(a) })
+    /* @__PURE__ */ s(Gs, { children: Is(a) })
   ] });
-}, Js = ({ title: e, questionType: i, questionTypeData: t }) => /* @__PURE__ */ l(H, { children: [
+}, Js = ({ title: e, questionType: i, questionTypeData: t }) => /* @__PURE__ */ l(Z, { children: [
   /* @__PURE__ */ s(
     _,
     {
       questionTypeData: t,
       questionType: i,
-      questionStatus: X.UNSET
+      questionStatus: H.UNSET
     }
   ),
   e && /* @__PURE__ */ s(Fs, { children: e })
-] }), Zs = ({ tweet: e }) => e ? /* @__PURE__ */ s(H, { children: /* @__PURE__ */ s(Hs, { ...e, controlVideo: () => {
+] }), Xs = ({ tweet: e }) => e ? /* @__PURE__ */ s(Z, { children: /* @__PURE__ */ s(Zs, { ...e, controlVideo: () => {
 } }) }) : null, se = ({ action: e, questionType: i, inApp: t, insight: o, tweet: a }) => {
   var p;
-  const d = G[i], r = hs[i];
+  const d = K[i], r = hs[i];
   if (!d || !t || !t.notification)
     return null;
   const { title: u, image: m, imageMode: $ } = t.notification;
@@ -135,9 +135,9 @@ const b = /* @__PURE__ */ n("div")({
   return /* @__PURE__ */ s(Vs, { "data-a": "intr", className: "SL_InApp", onClick: e, children: /* @__PURE__ */ l(zs, { style: I ? {} : { paddingLeft: "1.5rem" }, children: [
     I && !g && /* @__PURE__ */ s(B, { src: I, imageMode: $, withVideo: !!c }),
     g && /* @__PURE__ */ s(B, { src: g, fromInsight: !0, withVideo: !!c }),
-    i === h.TWEET ? /* @__PURE__ */ s(Zs, { tweet: a }) : /* @__PURE__ */ s(Js, { questionTypeData: d, questionType: i, title: u }),
+    i === h.TWEET ? /* @__PURE__ */ s(Xs, { tweet: a }) : /* @__PURE__ */ s(Js, { questionTypeData: d, questionType: i, title: u }),
     /* @__PURE__ */ s(Qs, { name: "inapp-button", children: r || "Open" }),
-    /* @__PURE__ */ s(Ws, { name: "chevronRight" })
+    /* @__PURE__ */ s(Ys, { name: "chevronRight" })
   ] }) });
 }, ee = () => ({
   color: e
@@ -233,7 +233,7 @@ const b = /* @__PURE__ */ n("div")({
   name: "StyledChevronRight",
   class: "sx1hq4c",
   propsAsIs: !0
-}), Z = /* @__PURE__ */ n("div")({
+}), X = /* @__PURE__ */ n("div")({
   name: "NotificationContainer",
   class: "n1fcriet",
   propsAsIs: !1
@@ -283,7 +283,7 @@ const b = /* @__PURE__ */ n("div")({
   name: "LogoImg",
   class: "ln4a3eh",
   propsAsIs: !1
-}), xe = () => Z, De = /* @__PURE__ */ n(xe())({
+}), xe = () => X, De = /* @__PURE__ */ n(xe())({
   name: "NotificationInterstitialContainer",
   class: "no2k63v",
   propsAsIs: !0
@@ -309,7 +309,7 @@ const b = /* @__PURE__ */ n("div")({
     {
       questionTypeData: t,
       questionType: i,
-      questionStatus: X.UNSET
+      questionStatus: H.UNSET
     }
   ),
   e && /* @__PURE__ */ s(Le, { webos: p, children: e }),
@@ -328,11 +328,11 @@ const b = /* @__PURE__ */ n("div")({
   webos: d
 }) => {
   var r, u, m;
-  const [$, I] = w(!1), g = K();
+  const [$, I] = w(!1), g = G();
   y(() => (o != null && o.sponsorLogo && (I(!0), g.current = setTimeout(() => {
     I(!1);
   }, 5e3)), () => clearTimeout(g.current)), [o == null ? void 0 : o.sponsorLogo]);
-  const c = G[t];
+  const c = K[t];
   if (!c || !o || !o.notification)
     return null;
   const { title: ds, image: ps, imageMode: f, useContentMedia: k } = o.notification, us = t === h.FACTOID ? a == null ? void 0 : a.heading : ds, ms = t === h.FACTOID ? a == null ? void 0 : a.body : "", vs = ps, N = t === h.FACTOID && ((r = a == null ? void 0 : a.video) == null ? void 0 : r.url) && (o == null ? void 0 : o.isVideo) && k === S.ENABLED, q = k === S.ENABLED ? N ? (u = a == null ? void 0 : a.video) == null ? void 0 : u.url : a == null ? void 0 : a.image : "";
@@ -344,7 +344,7 @@ const b = /* @__PURE__ */ n("div")({
       onClick: () => I(!1)
     }
   ) : /* @__PURE__ */ l(
-    Z,
+    X,
     {
       "data-a": "intr",
       className: "SL_InApp",
@@ -400,7 +400,7 @@ const b = /* @__PURE__ */ n("div")({
       ]
     }
   );
-}, Ye = /* @__PURE__ */ n("div")({
+}, We = /* @__PURE__ */ n("div")({
   name: "NotificationContainer",
   class: "n11jcrxe",
   propsAsIs: !1
@@ -408,19 +408,19 @@ const b = /* @__PURE__ */ n("div")({
   name: "Icon",
   class: "i1vmpt6u",
   propsAsIs: !1
-}), We = /* @__PURE__ */ n("div")({
+}), Ye = /* @__PURE__ */ n("div")({
   name: "IconContainer",
   class: "i180665s",
   propsAsIs: !1
-}), _e = () => A, Ge = /* @__PURE__ */ n(_e())({
+}), _e = () => A, Ke = /* @__PURE__ */ n(_e())({
   name: "TitleIcon",
   class: "t16zzzei",
   propsAsIs: !0
-}), Ke = () => gs, Xe = /* @__PURE__ */ n(Ke())({
+}), Ge = () => gs, He = /* @__PURE__ */ n(Ge())({
   name: "Close",
   class: "c1sur0q2",
   propsAsIs: !0
-}), He = /* @__PURE__ */ n("div")({
+}), Ze = /* @__PURE__ */ n("div")({
   name: "Body",
   class: "bai9j52",
   propsAsIs: !1
@@ -428,7 +428,7 @@ const b = /* @__PURE__ */ n("div")({
   name: "Title",
   class: "t1bnt25p",
   propsAsIs: !1
-}), Ze = /* @__PURE__ */ n("div")({
+}), Xe = /* @__PURE__ */ n("div")({
   name: "Description",
   class: "dmixjec",
   propsAsIs: !1
@@ -443,14 +443,14 @@ const b = /* @__PURE__ */ n("div")({
 }) => {
   var o, a;
   return /* @__PURE__ */ l(
-    Ye,
+    We,
     {
       "data-a": "intr",
       onClick: () => {
         e == null || e(), t && t.markIstantOpen();
       },
       children: [
-        /* @__PURE__ */ l(We, { children: [
+        /* @__PURE__ */ l(Ye, { children: [
           /* @__PURE__ */ s(U, { className: "on-light", src: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/notification.png" }),
           /* @__PURE__ */ s(
             U,
@@ -460,18 +460,18 @@ const b = /* @__PURE__ */ n("div")({
             }
           )
         ] }),
-        /* @__PURE__ */ l(He, { children: [
+        /* @__PURE__ */ l(Ze, { children: [
           /* @__PURE__ */ l(Je, { children: [
-            /* @__PURE__ */ s(Ge, { name: "icon-trophy-solid" }),
+            /* @__PURE__ */ s(Ke, { name: "icon-trophy-solid" }),
             (o = t == null ? void 0 : t.titleCard) == null ? void 0 : o.title
           ] }),
-          /* @__PURE__ */ l(Ze, { children: [
+          /* @__PURE__ */ l(Xe, { children: [
             /* @__PURE__ */ s("span", { children: (a = t == null ? void 0 : t.titleCard) == null ? void 0 : a.subtitle }),
             /* @__PURE__ */ s(sn, { name: "inapp-button", children: "Play Now" })
           ] })
         ] }),
         /* @__PURE__ */ s(
-          Xe,
+          He,
           {
             close: (p) => {
               p == null || p.stopPropagation(), i == null || i();
@@ -727,11 +727,11 @@ const b = /* @__PURE__ */ n("div")({
   name: "BodyContainer",
   class: "b1xx7swj",
   propsAsIs: !1
-}), Yn = /* @__PURE__ */ n("div")({
+}), Wn = /* @__PURE__ */ n("div")({
   name: "Body",
   class: "b1a21en",
   propsAsIs: !1
-}), Wn = ({
+}), Yn = ({
   step: e,
   children: i,
   state: t = "pending"
@@ -756,7 +756,7 @@ const b = /* @__PURE__ */ n("div")({
       style: {
         minWidth: `${o}px`
       },
-      children: /* @__PURE__ */ s(Yn, {
+      children: /* @__PURE__ */ s(Wn, {
         children: i
       }, e)
     })
@@ -769,25 +769,25 @@ const b = /* @__PURE__ */ n("div")({
   name: "Line",
   class: "lgbipw0",
   propsAsIs: !1
-}), Gn = () => M, Kn = /* @__PURE__ */ n(Gn())({
+}), Kn = () => M, Gn = /* @__PURE__ */ n(Kn())({
   name: "Line1",
   class: "l1anth16",
   propsAsIs: !0
-}), Xn = () => M, Hn = /* @__PURE__ */ n(Xn())({
+}), Hn = () => M, Zn = /* @__PURE__ */ n(Hn())({
   name: "Line2",
   class: "l193yd7v",
   propsAsIs: !0
-}), Jn = () => M, Zn = /* @__PURE__ */ n(Jn())({
+}), Jn = () => M, Xn = /* @__PURE__ */ n(Jn())({
   name: "Line3",
   class: "lhbflsp",
   propsAsIs: !0
 }), so = () => /* @__PURE__ */ l(_n, {
-  children: [/* @__PURE__ */ s(Kn, {
-    children: /* @__PURE__ */ s("div", {})
-  }), /* @__PURE__ */ s(Hn, {
+  children: [/* @__PURE__ */ s(Gn, {
     children: /* @__PURE__ */ s("div", {})
   }), /* @__PURE__ */ s(Zn, {
     children: /* @__PURE__ */ s("div", {})
+  }), /* @__PURE__ */ s(Xn, {
+    children: /* @__PURE__ */ s("div", {})
   })]
 }), eo = /* @__PURE__ */ n("div")({
   name: "Container",
@@ -867,11 +867,11 @@ const b = /* @__PURE__ */ n("div")({
   name: "Container",
   class: "cmox3ot",
   propsAsIs: !1
-}), Y = /* @__PURE__ */ n("div")({
+}), W = /* @__PURE__ */ n("div")({
   name: "Body",
   class: "bqq1ix4",
   propsAsIs: !1
-}), W = {
+}), Y = {
   1: 3e3,
   2: 4e3,
   3: 4e3
@@ -879,8 +879,8 @@ const b = /* @__PURE__ */ n("div")({
   if (y(() => {
     if (t) {
       const m = setTimeout(() => {
-        W[r + 1] && (a || r < 3) ? t(r + 1) : e == null || e();
-      }, W[r]);
+        Y[r + 1] && (a || r < 3) ? t(r + 1) : e == null || e();
+      }, Y[r]);
       return () => {
         m && clearTimeout(m);
       };
@@ -888,11 +888,11 @@ const b = /* @__PURE__ */ n("div")({
     return () => {
     };
   }, [t, r, e, a]), r === 1)
-    return /* @__PURE__ */ s(Q, { children: /* @__PURE__ */ s(Y, { children: /* @__PURE__ */ s(io, {}) }) });
+    return /* @__PURE__ */ s(Q, { children: /* @__PURE__ */ s(W, { children: /* @__PURE__ */ s(io, {}) }) });
   let u = "pending";
-  return r === 3 && (u = a ? "correct" : "incorrect"), /* @__PURE__ */ s(Q, { "data-a": "intr", onClick: () => i == null ? void 0 : i(), children: /* @__PURE__ */ l(Y, { children: [
+  return r === 3 && (u = a ? "correct" : "incorrect"), /* @__PURE__ */ s(Q, { "data-a": "intr", onClick: () => i == null ? void 0 : i(), children: /* @__PURE__ */ l(W, { children: [
     r !== 1 && /* @__PURE__ */ s(so, {}, r),
-    /* @__PURE__ */ l(Wn, { state: u, step: r, children: [
+    /* @__PURE__ */ l(Yn, { state: u, step: r, children: [
       r === 2 && /* @__PURE__ */ s(po, { title: d || "unknown", answer: (o == null ? void 0 : o.title) || "unknown" }),
       r === 3 && a && /* @__PURE__ */ s(vo, { answer: (o == null ? void 0 : o.title) || "unknown" }),
       r === 3 && !a && /* @__PURE__ */ s(Ao, { title: p || "unknown", answer: (o == null ? void 0 : o.title) || "unknown" })
@@ -941,7 +941,7 @@ const b = /* @__PURE__ */ n("div")({
   propsAsIs: !1
 }), bo = ({ sponsorLogo: e, onClick: i }) => /* @__PURE__ */ s(yo, { onClick: i, children: /* @__PURE__ */ s(go, { withoutPadding: !0, children: /* @__PURE__ */ s(ls, { src: e }) }) }), Co = (e) => {
   var i, t, o, a, p;
-  const [d, r] = w(!1), u = K();
+  const [d, r] = w(!1), u = G();
   return y(() => {
     var m;
     return (m = e == null ? void 0 : e.inApp) != null && m.sponsorLogo && (r(!0), u.current = setTimeout(() => {

package/lib/es/pause-ad.js

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