@streamlayer/react-ui 1.31.7 → 1.32.0

package/lib/app/webos/ExposedPauseAd/PauseAd.d.ts

@@ -1,17 +1,20 @@
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 import { StreamLayerSDKTvOptions } from '..';
 export interface PauseAdProps {
     vastUrls: Array<{
         template?: 'default';
         url: string;
     }>;
-    onClose: () => void;
+    onClose?: () => void;
     title?: string;
     caption?: string;
-    onPlay?: () => void;
     showPauseAd?: boolean;
     onRender?: (params: {
         rendered: boolean;
     }) => void;
     options?: StreamLayerSDKTvOptions;
+    isDesktop?: boolean;
 }
-export declare const PauseAd: React.FC<PauseAdProps>;
+export declare const PauseAd: React.FC<PauseAdProps & {
+    sdk: StreamLayerSDK;
+}>;

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

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

package/lib/app/webos/index.d.ts

@@ -1,13 +1,16 @@
 import { Component } from 'react';
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-import { PauseAdProps } from './ExposedPauseAd/PauseAd';
+import { StreamLayerSDKAdvertisementWebOS } from './Advertisement';
+import { PauseAd, PauseAdProps } from './ExposedPauseAd/PauseAd';
+import { StreamLayerSDKQuestionWebOS } from './Question';
+export { StreamLayerSDKAdvertisementWebOS, StreamLayerSDKQuestionWebOS, PauseAd, type PauseAdProps };
 export type StreamLayerSDKTvOptions = {
     showPauseButton?: boolean;
     pauseAdDelay?: number;
 };
 export type StreamLayerSDKTvProps = {
     persistent?: boolean;
-    children: React.ReactNode;
+    children?: React.ReactNode;
     sdk: StreamLayerSDK;
     showPauseAd?: boolean;
     pauseAdVastUrl?: PauseAdProps['vastUrls'];

package/lib/app/webos/index.js

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