@streamlayer/react-ui 1.31.7 → 1.32.1

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,136 @@
-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 { 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 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 { 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", {
+      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(
+    "a",
+    {
+      onClick: () => {
+        S.emit("exposedPauseAd", {
+          action: "navigated",
+          payload: {
+            id: e[r].id
+          }
+        });
+      },
+      href: e[r].adUrl,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children: /* @__PURE__ */ a(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({
     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__ */ 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 })
     ] }),
-    m && /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(
-      V,
+    T && /* @__PURE__ */ a($, { children: /* @__PURE__ */ a(
+      _,
       {
-        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__ */ a(q, { className: "SL_PauseAdSidebar", children: /* @__PURE__ */ x(z, { children: [
+      f && /* @__PURE__ */ a(J, { isDesktop: m, vastUrl: f }),
+      /* @__PURE__ */ a(H, { 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(() => {
-    if (t && i) {
+}, 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", {
+      action: "closed",
+      payload: {}
+    }), f());
+  }, [f]), M = B(() => {
+    u.controlVideoPlayer({ play: !0 });
+  }, [u]);
+  return P(() => {
+    if (r && i) {
       S.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());
+      }), b(i).then((l) => {
+        g.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());
+        g.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(() => {
-          w();
+      const k = () => {
+        const l = E.get()[g.current];
+        l != null && l.imageSrc ? (clearTimeout(c.current), s(!1), h(!0)) : c.current = setTimeout(() => {
+          k();
         }, 200);
       };
       c.current = setTimeout(() => {
-        w();
-      }, n);
+        k();
+      }, d);
     } else
       S.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,
+  }, [E, b, o, d, r, i]), P(() => {
+    t == null || t({ rendered: p });
+  }, [p, t]), P(() => () => {
+    t == null || t({ rendered: !1 });
+  }, [t]), p ? /* @__PURE__ */ a(
+    Q,
     {
-      onClose: a,
-      isClosing: p,
-      title: u,
-      caption: s,
-      onPlay: f,
+      onClose: o,
+      isClosing: A,
+      title: y,
+      caption: e,
+      onPlay: M,
       vastUrl: i,
-      options: m
+      options: m,
+      isDesktop: T
     }
   ) : null;
 };
 export {
-  U as PauseAd
+  re as PauseAd
 };

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

@@ -1,12 +1,11 @@
 export declare const PauseAdOverlay: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const PauseAdContent: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const PauseAdGradientRight: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const PauseAdGradientBottom: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const PauseAdTopLeft: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const PauseAdTitle: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLHeadingElement> & import('react').HTMLAttributes<HTMLHeadingElement> & Record<never, unknown>>;
 export declare const PauseAdCaption: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLParagraphElement> & import('react').HTMLAttributes<HTMLParagraphElement> & Record<never, unknown>>;
 export declare const PauseAdBottomLeft: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const PauseAdPlayButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const PauseAdSidebarGradient: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const PauseAdSidebar: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const PauseAdTitleDescription: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 export declare const ExternalAdContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;

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

@@ -7,58 +7,53 @@ const e = /* @__PURE__ */ s("div")({
   name: "PauseAdContent",
   class: "p8lpomy",
   propsAsIs: !1
-}), o = /* @__PURE__ */ s("div")({
-  name: "PauseAdGradientRight",
+}), p = /* @__PURE__ */ s("div")({
+  name: "PauseAdTopLeft",
   class: "pv7u167",
   propsAsIs: !1
-}), p = /* @__PURE__ */ s("div")({
-  name: "PauseAdGradientBottom",
+}), o = /* @__PURE__ */ s("h2")({
+  name: "PauseAdTitle",
   class: "p1kh2yb0",
   propsAsIs: !1
-}), n = /* @__PURE__ */ s("div")({
-  name: "PauseAdTopLeft",
+}), n = /* @__PURE__ */ s("p")({
+  name: "PauseAdCaption",
   class: "pl8f94x",
   propsAsIs: !1
-}), d = /* @__PURE__ */ s("h2")({
-  name: "PauseAdTitle",
+}), d = /* @__PURE__ */ s("div")({
+  name: "PauseAdBottomLeft",
   class: "p1m6zmrt",
   propsAsIs: !1
-}), l = /* @__PURE__ */ s("p")({
-  name: "PauseAdCaption",
+}), l = /* @__PURE__ */ s("button")({
+  name: "PauseAdPlayButton",
   class: "pm3vwfa",
   propsAsIs: !1
 }), A = /* @__PURE__ */ s("div")({
-  name: "PauseAdBottomLeft",
+  name: "PauseAdSidebarGradient",
   class: "p1tibuhw",
   propsAsIs: !1
-}), r = /* @__PURE__ */ s("button")({
-  name: "PauseAdPlayButton",
-  class: "ptqqrqd",
-  propsAsIs: !1
-}), i = /* @__PURE__ */ s("div")({
+}), r = /* @__PURE__ */ s("div")({
   name: "PauseAdSidebar",
-  class: "p14estxv",
+  class: "ptqqrqd",
   propsAsIs: !1
-}), u = /* @__PURE__ */ s("span")({
+}), i = /* @__PURE__ */ s("span")({
   name: "PauseAdTitleDescription",
-  class: "p1dpvfl1",
+  class: "p14estxv",
   propsAsIs: !1
-}), c = /* @__PURE__ */ s("img")({
+}), u = /* @__PURE__ */ s("img")({
   name: "ExternalAdContainer",
-  class: "ezfmabr",
+  class: "e1dpvfl1",
   propsAsIs: !1
 });
 export {
-  c as ExternalAdContainer,
-  A as PauseAdBottomLeft,
-  l as PauseAdCaption,
+  u as ExternalAdContainer,
+  d as PauseAdBottomLeft,
+  n as PauseAdCaption,
   t as PauseAdContent,
-  p as PauseAdGradientBottom,
-  o as PauseAdGradientRight,
   e as PauseAdOverlay,
-  r as PauseAdPlayButton,
-  i as PauseAdSidebar,
-  d as PauseAdTitle,
-  u as PauseAdTitleDescription,
-  n as PauseAdTopLeft
+  l as PauseAdPlayButton,
+  r as PauseAdSidebar,
+  A as PauseAdSidebarGradient,
+  o as PauseAdTitle,
+  i as PauseAdTitleDescription,
+  p as PauseAdTopLeft
 };

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
 };