npm - @streamlayer/react-ui - Versions diffs - 1.32.0 → 1.32.1 - Mend

@streamlayer/react-ui 1.32.0 → 1.32.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/lib/app/webos/ExposedPauseAd/PauseAd.js +50 -52
package/lib/app/webos/ExposedPauseAd/styles.d.ts +1 -2
package/lib/app/webos/ExposedPauseAd/styles.js +26 -31
package/lib/assets/style.css +1 -1
package/package.json +15 -15

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

@@ -1,40 +1,40 @@
-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 { 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 g } from "@streamlayer/sdk-web-interfaces";
+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 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 }) => {
+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: [t] });
+  const [, y] = C(), e = I(y, { keys: [r] });
   return P(() => {
-    e && e[t] && e[t].imageSrc && e[t].id && g.emit("exposedPauseAd", {
+    e && e[r] && e[r].imageSrc && e[r].id && S.emit("exposedPauseAd", {
       action: "rendered",
       payload: {
-        id: e[t].id
+        id: e[r].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(
+  }, [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: () => {
-        g.emit("exposedPauseAd", {
+        S.emit("exposedPauseAd", {
           action: "navigated",
           payload: {
-            id: e[t].id
+            id: e[r].id
           }
         });
       },
-      href: e[t].adUrl,
+      href: e[r].adUrl,
       target: "_blank",
       rel: "noopener noreferrer",
-      children: /* @__PURE__ */ r(L, { src: e[t].imageSrc })
+      children: /* @__PURE__ */ a(D, { src: e[r].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({
+}, 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: e,
     isFocusBoundary: !0,
@@ -54,15 +54,13 @@ const W = ({ vastUrl: t, isDesktop: n }) => {
       }
     };
     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 })
+  }, [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 })
     ] }),
-    T && /* @__PURE__ */ r(z, { children: /* @__PURE__ */ r(
-      H,
+    T && /* @__PURE__ */ a($, { children: /* @__PURE__ */ a(
+      _,
       {
         ref: d,
         onClick: e,
@@ -70,43 +68,43 @@ const W = ({ vastUrl: t, isDesktop: n }) => {
         "aria-label": "Resume playback"
       }
     ) }),
-    /* @__PURE__ */ x(J, { children: [
-      f && /* @__PURE__ */ r(W, { isDesktop: m, vastUrl: f }),
-      /* @__PURE__ */ r(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" })
+    ] }) })
   ] }) });
-}, 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", {
+}, 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]), G = D(() => {
+  }, [f]), M = B(() => {
     u.controlVideoPlayer({ play: !0 });
   }, [u]);
   return P(() => {
-    if (t && i) {
-      g.emit("exposedPauseAd", {
+    if (r && i) {
+      S.emit("exposedPauseAd", {
         action: "enabled",
         payload: {}
-      }), E(i).then((l) => {
-        S.current === i && (l == null ? void 0 : l.success) !== !0 && (clearTimeout(c.current), o == null || o());
+      }), b(i).then((l) => {
+        g.current === i && (l == null ? void 0 : l.success) !== !0 && (clearTimeout(c.current), o == null || o());
       }).catch(() => {
-        S.current === i && (clearTimeout(c.current), o == null || o());
+        g.current === i && (clearTimeout(c.current), o == null || o());
       });
-      const w = () => {
-        const l = k.get()[S.current];
+      const k = () => {
+        const l = E.get()[g.current];
         l != null && l.imageSrc ? (clearTimeout(c.current), s(!1), h(!0)) : c.current = setTimeout(() => {
-          w();
+          k();
         }, 200);
       };
       c.current = setTimeout(() => {
-        w();
+        k();
       }, d);
     } else
-      g.emit("exposedPauseAd", {
+      S.emit("exposedPauseAd", {
         action: "disabled",
         payload: {}
       }), s(!0), c.current = setTimeout(() => {
@@ -115,18 +113,18 @@ const W = ({ vastUrl: t, isDesktop: n }) => {
     return () => {
       c.current && clearTimeout(c.current);
     };
-  }, [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,
+  }, [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: o,
       isClosing: A,
       title: y,
       caption: e,
-      onPlay: G,
+      onPlay: M,
       vastUrl: i,
       options: m,
       isDesktop: T

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

@@ -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 CHANGED Viewed

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