@streamlayer/react-ui 1.27.3 → 1.28.1

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

@@ -1,93 +1,95 @@
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
 import { cx as E } from "@linaria/core";
 import { useFocusable as x } from "@noriginmedia/norigin-spatial-navigation";
-import { useState as A, useRef as y, useEffect as l } from "react";
+import { useState as A, useRef as y, useEffect as d } from "react";
 import { eventBus as P } from "@streamlayer/sdk-web-interfaces";
 import { useGAMPlayer as T } from "../../../ui/advertisement/overlay/externalAd/vast-player/useGAMPlayer.js";
-import { PauseAdOverlay as b, PauseAdContent as g, PauseAdGradientLeft as w, PauseAdGradientRight as k, PauseAdGradientBottom as B, PauseAdTopLeft as L, PauseAdTitle as S, PauseAdCaption as C, PauseAdBottomLeft as G, PauseAdPlayButton as R, PauseAdSidebar as D, ExternalAdContainer as F } from "./styles.js";
-const I = ({ vastUrl: n }) => {
-  const r = y(null), [, , u] = T(r, n);
-  return l(() => {
+import { PauseAdOverlay as b, PauseAdContent as g, PauseAdGradientLeft as w, PauseAdGradientRight as k, PauseAdGradientBottom as B, PauseAdTopLeft as L, PauseAdTitle as S, PauseAdCaption as C, PauseAdBottomLeft as G, PauseAdPlayButton as D, PauseAdSidebar as F, ExternalAdContainer as I } from "./styles.js";
+const M = ({ vastUrl: a }) => {
+  const r = y(null), [, , u] = T(r, a);
+  return d(() => {
     u && u();
-  }, [u]), /* @__PURE__ */ e(F, { ref: r });
-}, M = ({ isClosing: n, title: r, caption: u, onPlay: f, onClose: o, vastUrl: m }) => {
-  const { ref: t, focusSelf: a } = x({
+  }, [u]), /* @__PURE__ */ t(I, { ref: r });
+}, j = ({ isClosing: a, title: r, caption: u, onPlay: f, onClose: s, vastUrl: m }) => {
+  const { ref: e, focusSelf: o } = x({
     focusKey: "sl-pause-ad-play",
     onEnterRelease: f,
     isFocusBoundary: !0,
     forceFocus: !0
   });
-  return l(() => {
-    t.current && a();
-  }, [t, a]), l(() => {
-    const d = (s) => {
-      const i = s.keyCode;
+  return d(() => {
+    e.current && o();
+  }, [e, o]), d(() => {
+    const l = (n) => {
+      const i = n.keyCode;
       if (i === 461 || i === 10009 || i === 27) {
-        s.preventDefault(), s.stopPropagation(), s.stopImmediatePropagation(), o == null || o();
+        n.preventDefault(), n.stopPropagation(), n.stopImmediatePropagation(), s == null || s();
         return;
       }
     };
-    return window.addEventListener("keydown", d, { capture: !0 }), () => window.removeEventListener("keydown", d, { capture: !0 });
-  }, [o]), /* @__PURE__ */ e(b, { className: E(n && "pause-ad-closing"), children: /* @__PURE__ */ p(g, { children: [
-    /* @__PURE__ */ e(w, {}),
-    /* @__PURE__ */ e(k, {}),
-    /* @__PURE__ */ e(B, {}),
+    return window.addEventListener("keydown", l, { capture: !0 }), () => window.removeEventListener("keydown", l, { capture: !0 });
+  }, [s]), /* @__PURE__ */ t(b, { className: E(a && "pause-ad-closing"), children: /* @__PURE__ */ p(g, { children: [
+    /* @__PURE__ */ t(w, {}),
+    /* @__PURE__ */ t(k, {}),
+    /* @__PURE__ */ t(B, {}),
     /* @__PURE__ */ p(L, { children: [
-      /* @__PURE__ */ e(S, { children: r }),
-      /* @__PURE__ */ e(C, { children: u })
+      /* @__PURE__ */ t(S, { children: r }),
+      /* @__PURE__ */ t(C, { children: u })
     ] }),
-    /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(
-      R,
+    /* @__PURE__ */ t(G, { children: /* @__PURE__ */ t(
+      D,
       {
-        ref: t,
+        ref: e,
         onClick: f,
-        onMouseEnter: () => t.current.focus(),
+        onMouseEnter: () => e.current.focus(),
         "aria-label": "Resume playback"
       }
     ) }),
-    /* @__PURE__ */ p(D, { children: [
-      m && /* @__PURE__ */ e(I, { vastUrl: m }),
-      /* @__PURE__ */ e("span", { children: "ADVERTISEMENT" })
+    /* @__PURE__ */ p(F, { children: [
+      m && /* @__PURE__ */ t(M, { vastUrl: m }),
+      /* @__PURE__ */ t("span", { children: "ADVERTISEMENT" })
     ] })
   ] }) });
-}, z = ({
-  showPauseAd: n,
+}, H = ({
+  showPauseAd: a,
   vastUrls: r,
   title: u,
   caption: f,
-  onPlay: o,
+  onPlay: s,
   onClose: m,
-  onRender: t
+  onRender: e
 }) => {
-  const [a, d] = A(!1), [s, i] = A(!1), c = y();
-  l(() => (c.current && clearTimeout(c.current), n ? (P.emit("exposedPauseAd", {
+  const [o, l] = A(!1), [n, i] = A(!1), c = y();
+  d(() => (c.current && clearTimeout(c.current), a ? (P.emit("exposedPauseAd", {
     action: "enabled",
     payload: {}
   }), c.current = setTimeout(() => {
-    i(!1), d(!0);
+    i(!1), l(!0);
   }, 5e3)) : (P.emit("exposedPauseAd", {
     action: "disabled",
     payload: {}
   }), i(!0), c.current = setTimeout(() => {
-    d(!1);
+    l(!1);
   }, 400)), () => {
     c.current && clearTimeout(c.current);
-  }), [n]), l(() => {
-    t == null || t({ rendered: a });
-  }, [a, t]);
+  }), [a]), d(() => {
+    e == null || e({ rendered: o });
+  }, [o, e]), d(() => () => {
+    e == null || e({ rendered: !1 });
+  }, [e]);
   const h = r == null ? void 0 : r[0].url;
-  return a ? /* @__PURE__ */ e(
-    M,
+  return o ? /* @__PURE__ */ t(
+    j,
     {
       onClose: m,
-      isClosing: s,
+      isClosing: n,
       title: u,
       caption: f,
-      onPlay: o,
+      onPlay: s,
       vastUrl: h
     }
   ) : null;
 };
 export {
-  z as PauseAd
+  H as PauseAd
 };

package/lib/app/webos/index.js

@@ -1,65 +1,66 @@
-import { jsx as t, jsxs as l } from "react/jsx-runtime";
-import { init as p } from "@noriginmedia/norigin-spatial-navigation";
-import { Layout as y } from "../app/Layout/index.js";
-import { Component as b, useCallback as c } from "react";
-import { StreamLayerSDKAdvertisementWebOS as i } from "./Advertisement/index.js";
-import { PauseAd as D } from "./ExposedPauseAd/PauseAd.js";
-import { StreamLayerSDKQuestionWebOS as u } from "./Question/index.js";
-p({
+import { jsx as t, jsxs as b } from "react/jsx-runtime";
+import { init as y } from "@noriginmedia/norigin-spatial-navigation";
+import { Layout as v } from "../app/Layout/index.js";
+import { Component as D, useCallback as u } from "react";
+import { useStore as d } from "@streamlayer/react-polyfills";
+import { StreamLayerSDKAdvertisementWebOS as m } from "./Advertisement/index.js";
+import { PauseAd as L } from "./ExposedPauseAd/PauseAd.js";
+import { StreamLayerSDKQuestionWebOS as S } from "./Question/index.js";
+y({
   shouldFocusDOMNode: !0
 });
-const v = ({
-  persistent: e,
-  children: o,
+const K = ({
+  persistent: o,
+  children: e,
   sdk: r,
-  showPauseAd: f,
-  pauseAdVastUrl: m,
+  showPauseAd: p,
+  pauseAdVastUrl: c,
   onClosePauseAd: a,
-  onRenderPauseAd: h
+  onRenderPauseAd: s
 }) => {
-  const S = c(() => {
+  const i = d(r.uiState), f = u(() => {
     a == null || a();
-  }, [a]), s = c(() => {
+  }, [a]), h = u(() => {
     r.controlVideoPlayer({ play: !0 });
-  }, [r]);
-  return /* @__PURE__ */ l(
-    y,
+  }, [r]), l = i.appSidebar || i.promotionSidebar || i.promotionOverlay;
+  return /* @__PURE__ */ b(
+    v,
     {
       sdk: r,
-      sidebar: ({ promo: n }) => n ? /* @__PURE__ */ t(i, { sdk: r, persistent: e, sidebar: "right" }) : /* @__PURE__ */ t(u, { sdk: r, persistent: e }),
-      notification: ({ promo: n }) => n ? /* @__PURE__ */ t(i, { sdk: r, notification: !0, persistent: e }) : /* @__PURE__ */ t(u, { notification: !0, sdk: r, persistent: e }),
-      banner: /* @__PURE__ */ t(i, { sdk: r, persistent: e, banner: "bottom" }),
+      sidebar: ({ promo: n }) => n ? /* @__PURE__ */ t(m, { sdk: r, persistent: o, sidebar: "right" }) : /* @__PURE__ */ t(S, { sdk: r, persistent: o }),
+      notification: ({ promo: n }) => n ? /* @__PURE__ */ t(m, { sdk: r, notification: !0, persistent: o }) : /* @__PURE__ */ t(S, { notification: !0, sdk: r, persistent: o }),
+      banner: /* @__PURE__ */ t(m, { sdk: r, persistent: o, banner: "bottom" }),
       webos: !0,
       children: [
-        o,
-        m && /* @__PURE__ */ t(
-          D,
+        e,
+        c && !l && /* @__PURE__ */ t(
+          L,
           {
-            showPauseAd: f,
-            vastUrls: m,
-            onClose: S,
-            onRender: h,
-            onPlay: s
+            showPauseAd: p,
+            vastUrls: c,
+            onClose: f,
+            onRender: s,
+            onPlay: h
           }
         )
       ]
     }
   );
 };
-class g extends b {
-  constructor(o) {
-    super(o), this.state = { hasError: !1 };
+class W extends D {
+  constructor(e) {
+    super(e), this.state = { hasError: !1 };
   }
   static getDerivedStateFromError() {
     return { hasError: !0 };
   }
-  componentDidCatch(o, r) {
-    console.error("StreamLayerSDKTv error:", o, r.componentStack);
+  componentDidCatch(e, r) {
+    console.error("StreamLayerSDKTv error:", e, r.componentStack);
   }
   render() {
-    return this.state.hasError ? this.props.children : /* @__PURE__ */ t(v, { ...this.props });
+    return this.state.hasError ? this.props.children : /* @__PURE__ */ t(K, { ...this.props });
   }
 }
 export {
-  g as StreamLayerSDKTv
+  W as StreamLayerSDKTv
 };