@streamlayer/react-ui 1.32.4 → 1.33.2

package/lib/app/webos/ExposedPauseAd/PauseAd.js

@@ -1,26 +1,26 @@
-import { jsx as a, jsxs as x } from "react/jsx-runtime";
-import { cx as F } from "@linaria/core";
-import { useFocusable as G } from "@noriginmedia/norigin-spatial-navigation";
-import { useState as w, useRef as L, useCallback as B, useEffect as P } from "react";
-import { useStore as I } from "@streamlayer/react-polyfills";
-import { eventBus as S } from "@streamlayer/sdk-web-interfaces";
-import { useLoadGAMStatic as C } from "../../../ui/advertisement/overlay/externalAd/vast-player/useGAMStatic.js";
-import { PauseAdOverlay as N, PauseAdContent as j, PauseAdTopLeft as K, PauseAdTitle as O, PauseAdCaption as V, PauseAdBottomLeft as $, PauseAdPlayButton as _, PauseAdSidebarGradient as q, PauseAdSidebar as z, PauseAdTitleDescription as H, ExternalAdContainer as D } from "./styles.js";
-const J = ({ vastUrl: r, isDesktop: n }) => {
-  var u;
-  const [, y] = C(), e = I(y, { keys: [r] });
-  return P(() => {
-    e && e[r] && e[r].imageSrc && e[r].id && S.emit("exposedPauseAd", {
+import { jsx as u, jsxs as b } from "react/jsx-runtime";
+import { cx as G } from "@linaria/core";
+import { useFocusable as I } from "@noriginmedia/norigin-spatial-navigation";
+import { useState as B, useRef as E, useCallback as C, useEffect as y } from "react";
+import { useStore as N } from "@streamlayer/react-polyfills";
+import { eventBus as g } from "@streamlayer/sdk-web-interfaces";
+import { useLoadGAMStatic as M } from "../../../ui/advertisement/overlay/externalAd/vast-player/useGAMStatic.js";
+import { PauseAdOverlay as j, PauseAdContent as K, PauseAdTopLeft as O, PauseAdTitle as V, PauseAdCaption as $, PauseAdBottomLeft as _, PauseAdPlayButton as q, PauseAdSidebarGradient as z, PauseAdSidebar as H, PauseAdTitleDescription as J, ExternalAdContainer as D } from "./styles.js";
+const Q = ({ vastUrl: r, isDesktop: o }) => {
+  var a;
+  const [, h] = M(), e = N(h, { keys: [r] });
+  return y(() => {
+    e && e[r] && e[r].imageSrc && e[r].id && g.emit("exposedPauseAd", {
       action: "rendered",
       payload: {
         id: e[r].id
       }
     });
-  }, [e, r]), (u = e == null ? void 0 : e[r]) != null && u.imageSrc ? !e[r].adUrl || !n ? /* @__PURE__ */ a(D, { src: e[r].imageSrc }) : /* @__PURE__ */ a(
+  }, [e, r]), (a = e == null ? void 0 : e[r]) != null && a.imageSrc ? !e[r].adUrl || !o ? /* @__PURE__ */ u(D, { src: e[r].imageSrc }) : /* @__PURE__ */ u(
     "a",
     {
       onClick: () => {
-        S.emit("exposedPauseAd", {
+        g.emit("exposedPauseAd", {
           action: "navigated",
           payload: {
             id: e[r].id
@@ -30,101 +30,101 @@ const J = ({ vastUrl: r, isDesktop: n }) => {
       href: e[r].adUrl,
       target: "_blank",
       rel: "noopener noreferrer",
-      children: /* @__PURE__ */ a(D, { src: e[r].imageSrc })
+      children: /* @__PURE__ */ u(D, { src: e[r].imageSrc })
     }
   ) : null;
-}, Q = ({ isClosing: r, title: n, caption: y, onPlay: e, onClose: u, vastUrl: f, options: t, isDesktop: m }) => {
-  const T = (t == null ? void 0 : t.showPauseButton) ?? !0, { ref: d, focusSelf: p } = G({
+}, W = ({ isClosing: r, title: o, caption: h, onPlay: e, onClose: a, vastUrl: f, options: t, isDesktop: m }) => {
+  const T = (t == null ? void 0 : t.showPauseButton) ?? !0, { ref: s, focusSelf: p } = I({
     focusKey: "sl-pause-ad-play",
     onEnterRelease: e,
     isFocusBoundary: !0,
     forceFocus: !0
   });
-  return P(() => {
-    d.current && p();
-  }, [d, p]), P(() => {
-    if (!u)
+  return y(() => {
+    s.current && p();
+  }, [s, p]), y(() => {
+    if (!a)
       return () => {
       };
-    const h = (A) => {
-      const s = A.keyCode;
-      if (s === 461 || s === 10009 || s === 27 || s === 8) {
-        A.preventDefault(), A.stopPropagation(), A.stopImmediatePropagation(), u();
+    const S = (A) => {
+      const d = A.keyCode;
+      if (d === 461 || d === 10009 || d === 27 || d === 8) {
+        A.preventDefault(), A.stopPropagation(), A.stopImmediatePropagation(), a();
         return;
       }
     };
-    return window.addEventListener("keydown", h, { capture: !0 }), () => window.removeEventListener("keydown", h, { capture: !0 });
-  }, [u]), /* @__PURE__ */ a(N, { className: F("SL_PauseAdOverlay", r && "pause-ad-closing"), children: /* @__PURE__ */ x(j, { children: [
-    /* @__PURE__ */ x(K, { children: [
-      /* @__PURE__ */ a(O, { children: n }),
-      /* @__PURE__ */ a(V, { children: y })
+    return window.addEventListener("keydown", S, { capture: !0 }), () => window.removeEventListener("keydown", S, { capture: !0 });
+  }, [a]), /* @__PURE__ */ u(j, { className: G("SL_PauseAdOverlay", r && "pause-ad-closing"), children: /* @__PURE__ */ b(K, { children: [
+    /* @__PURE__ */ b(O, { children: [
+      /* @__PURE__ */ u(V, { children: o }),
+      /* @__PURE__ */ u($, { children: h })
     ] }),
-    T && /* @__PURE__ */ a($, { children: /* @__PURE__ */ a(
-      _,
+    T && /* @__PURE__ */ u(_, { children: /* @__PURE__ */ u(
+      q,
       {
-        ref: d,
+        ref: s,
         onClick: e,
-        onMouseEnter: () => d.current.focus(),
+        onMouseEnter: () => s.current.focus(),
         "aria-label": "Resume playback"
       }
     ) }),
-    /* @__PURE__ */ a(q, { className: "SL_PauseAdSidebar", children: /* @__PURE__ */ x(z, { children: [
-      f && /* @__PURE__ */ a(J, { isDesktop: m, vastUrl: f }),
-      /* @__PURE__ */ a(H, { children: "ADVERTISEMENT" })
+    /* @__PURE__ */ u(z, { className: "SL_PauseAdSidebar", children: /* @__PURE__ */ b(H, { children: [
+      f && /* @__PURE__ */ u(Q, { isDesktop: m, vastUrl: f }),
+      /* @__PURE__ */ u(J, { children: "ADVERTISEMENT" })
     ] }) })
   ] }) });
-}, re = ({ showPauseAd: r, vastUrls: n, title: y, caption: e, sdk: u, onClose: f, onRender: t, options: m, isDesktop: T }) => {
-  const d = (m == null ? void 0 : m.pauseAdDelay) ?? 5e3, [p, h] = w(!1), [A, s] = w(!1), c = L(), i = n == null ? void 0 : n[0].url, g = L(i);
-  g.current = i;
-  const [b, E] = C(), o = B(() => {
-    f && (S.emit("exposedPauseAd", {
+}, te = ({ showPauseAd: r, vastUrls: o, title: h, caption: e, sdk: a, onClose: f, onRender: t, options: m, isDesktop: T }) => {
+  const s = (m == null ? void 0 : m.pauseAdDelay) ?? 5e3, [p, S] = B(!1), [A, d] = B(!1), c = E(), i = o == null ? void 0 : o[0].url, P = E(i), x = E("");
+  P.current = i;
+  const [k, w] = M(), n = C(() => {
+    f && (x.current = P.current, g.emit("exposedPauseAd", {
       action: "closed",
       payload: {}
     }), f());
-  }, [f]), M = B(() => {
-    u.controlVideoPlayer({ play: !0 });
-  }, [u]);
-  return P(() => {
+  }, [f]), F = C(() => {
+    a.controlVideoPlayer({ play: !0 });
+  }, [a]);
+  return y(() => {
     if (r && i) {
-      S.emit("exposedPauseAd", {
+      g.emit("exposedPauseAd", {
         action: "enabled",
         payload: {}
-      }), b(i).then((l) => {
-        g.current === i && (l == null ? void 0 : l.success) !== !0 && (clearTimeout(c.current), o == null || o());
+      }), k(i).then((l) => {
+        P.current === i && (l == null ? void 0 : l.success) !== !0 && (clearTimeout(c.current), n == null || n());
       }).catch(() => {
-        g.current === i && (clearTimeout(c.current), o == null || o());
+        P.current === i && (clearTimeout(c.current), n == null || n());
       });
-      const k = () => {
-        const l = E.get()[g.current];
-        l != null && l.imageSrc ? (clearTimeout(c.current), s(!1), h(!0)) : c.current = setTimeout(() => {
-          k();
+      const L = () => {
+        const l = w.get()[P.current];
+        l != null && l.imageSrc ? (clearTimeout(c.current), d(!1), S(!0)) : c.current = setTimeout(() => {
+          L();
         }, 200);
       };
       c.current = setTimeout(() => {
-        k();
-      }, d);
+        L();
+      }, s);
     } else
-      S.emit("exposedPauseAd", {
+      x.current !== P.current && (x.current = "", g.emit("exposedPauseAd", {
         action: "disabled",
         payload: {}
-      }), s(!0), c.current = setTimeout(() => {
-        h(!1);
+      })), d(!0), c.current = setTimeout(() => {
+        S(!1);
       }, 400);
     return () => {
       c.current && clearTimeout(c.current);
     };
-  }, [E, b, o, d, r, i]), P(() => {
+  }, [w, k, n, s, r, i]), y(() => {
     t == null || t({ rendered: p });
-  }, [p, t]), P(() => () => {
+  }, [p, t]), y(() => () => {
     t == null || t({ rendered: !1 });
-  }, [t]), p ? /* @__PURE__ */ a(
-    Q,
+  }, [t]), p ? /* @__PURE__ */ u(
+    W,
     {
-      onClose: o,
+      onClose: n,
       isClosing: A,
-      title: y,
+      title: h,
       caption: e,
-      onPlay: M,
+      onPlay: F,
       vastUrl: i,
       options: m,
       isDesktop: T
@@ -132,5 +132,5 @@ const J = ({ vastUrl: r, isDesktop: n }) => {
   ) : null;
 };
 export {
-  re as PauseAd
+  te as PauseAd
 };

package/lib/app/webos/story.js

@@ -1,16 +1,16 @@
-import { jsx as a, jsxs as p, Fragment as f } from "react/jsx-runtime";
+import { jsx as n, jsxs as p, Fragment as f } from "react/jsx-runtime";
+import { d as y, u as d } from "../../hooks-B0Qttldg.js";
 import c from "hls.js";
-import { useRef as m, useState as d, useEffect as i } from "react";
-import { StreamLayerProvider as y, useStreamLayer as l, useStreamLayerUI as S } from "@streamlayer/react";
-import { anonymous as h } from "@streamlayer/sdk-web-anonymous-auth";
-import { useStreamLayerDebug as b } from "../../utils/debug/index.js";
-import { StreamLayerSDKTv as g } from "./index.js";
-const w = ({ src: r }) => {
-  const e = m(), n = m(), [t, o] = d(r);
+import { useRef as m, useState as l, useEffect as i } from "react";
+import { anonymous as S } from "@streamlayer/sdk-web-anonymous-auth";
+import { useStreamLayerDebug as h } from "../../utils/debug/index.js";
+import { StreamLayerSDKTv as b } from "./index.js";
+const g = ({ src: r }) => {
+  const e = m(), a = m(), [t, o] = l(r);
   return i(() => {
     o(r);
   }, [r]), i(() => () => {
-    n.current && clearTimeout(n.current);
+    a.current && clearTimeout(a.current);
   }, []), i(() => {
     if (t && t.includes("m3u8"))
       if (c.isSupported() && e.current) {
@@ -24,7 +24,7 @@ const w = ({ src: r }) => {
       var u;
       console.error(s), (u = e.current) == null || u.play();
     }));
-  }, [t]), /* @__PURE__ */ a(
+  }, [t]), /* @__PURE__ */ n(
     "video",
     {
       src: t || "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4",
@@ -39,35 +39,35 @@ const w = ({ src: r }) => {
     }
   );
 }, v = () => {
-  const r = l(), [e, n] = d("");
+  const r = d(), [e, a] = l("");
   return i(() => r ? r.streamSummary().subscribe((t) => {
     var o, s;
-    (s = (o = t.data) == null ? void 0 : o.summary) != null && s.stream && n(t.data.summary.stream);
+    (s = (o = t.data) == null ? void 0 : o.summary) != null && s.stream && a(t.data.summary.stream);
   }) : () => {
-  }, [r]), /* @__PURE__ */ a(
-    w,
+  }, [r]), /* @__PURE__ */ n(
+    g,
     {
       src: e || "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4"
     }
   );
-}, k = ({ sdk: r }) => (i(() => {
+}, w = ({ sdk: r }) => (i(() => {
   r.anonymousAuthorization();
-}, [r]), null), L = ({ persistent: r }) => {
-  const e = l(), n = S();
+}, [r]), null), k = ({ persistent: r }) => {
+  const e = d();
   return e ? /* @__PURE__ */ p(f, { children: [
-    /* @__PURE__ */ a(k, { sdk: e }),
-    /* @__PURE__ */ a(g, { sdk: e, persistent: r, uiState: n, children: /* @__PURE__ */ a(v, {}) })
+    /* @__PURE__ */ n(w, { sdk: e }),
+    /* @__PURE__ */ n(b, { sdk: e, persistent: r, children: /* @__PURE__ */ n(v, {}) })
   ] }) : null;
-}, R = /* @__PURE__ */ new Set([h]), P = ({ sdkKey: r, eventId: e, persistent: n, production: t }) => {
-  const o = b({ sdkKey: r, eventId: e, production: t });
-  return /* @__PURE__ */ a(
+}, L = /* @__PURE__ */ new Set([S]), K = ({ sdkKey: r, eventId: e, persistent: a, production: t }) => {
+  const o = h({ sdkKey: r, eventId: e, production: t });
+  return /* @__PURE__ */ n(
     y,
     {
       event: o.event,
       sdkKey: o.sdkKey,
       production: o.env === "production",
       themeMode: "dark",
-      plugins: R,
+      plugins: L,
       autoEnable: !0,
       withAd: !0,
       skipOnboarding: !0,
@@ -75,11 +75,11 @@ const w = ({ src: r }) => {
       friendsTab: "disabled",
       hideFriends: !0,
       webOS: !0,
-      children: /* @__PURE__ */ a(L, { persistent: n })
+      children: /* @__PURE__ */ n(k, { persistent: a })
     }
   );
 };
 export {
-  w as Player,
-  P as WebOSStory
+  g as Player,
+  K as WebOSStory
 };