@streamlayer/react-ui 1.31.4 → 1.31.6

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

@@ -1,66 +1,65 @@
 import { jsx as e, jsxs as g } from "react/jsx-runtime";
-import { cx as L } from "@linaria/core";
-import { useFocusable as D } from "@noriginmedia/norigin-spatial-navigation";
+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, PauseAdGradientLeft as I, PauseAdGradientRight as j, PauseAdGradientBottom as K, PauseAdTopLeft as N, PauseAdTitle as $, PauseAdCaption as O, PauseAdBottomLeft as V, PauseAdPlayButton as _, PauseAdSidebar as q, ExternalAdContainer as b } from "./styles.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 n;
+  var s;
   const [, d] = B(), u = G(d, { keys: [t] });
-  return (n = u == null ? void 0 : u[t]) != null && n.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: n, onClose: o, vastUrl: a, options: r }) => {
-  const f = (r == null ? void 0 : r.showPauseButton) ?? !0, { ref: s, focusSelf: m } = D({
+  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({
     focusKey: "sl-pause-ad-play",
-    onEnterRelease: n,
+    onEnterRelease: s,
     isFocusBoundary: !0,
     forceFocus: !0
   });
   return h(() => {
-    s.current && m();
-  }, [s, m]), h(() => {
-    const P = (l) => {
-      const p = l.keyCode;
-      if (p === 461 || p === 10009 || p === 27) {
-        l.preventDefault(), l.stopPropagation(), l.stopImmediatePropagation(), o == null || o();
+    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;
       }
     };
     return window.addEventListener("keydown", P, { capture: !0 }), () => window.removeEventListener("keydown", P, { capture: !0 });
-  }, [o]), /* @__PURE__ */ e(M, { className: L(t && "pause-ad-closing"), children: /* @__PURE__ */ g(F, { children: [
+  }, [f]), /* @__PURE__ */ e(M, { className: D(t && "pause-ad-closing"), children: /* @__PURE__ */ g(F, { children: [
     /* @__PURE__ */ e(I, {}),
     /* @__PURE__ */ e(j, {}),
-    /* @__PURE__ */ e(K, {}),
-    /* @__PURE__ */ g(N, { children: [
-      /* @__PURE__ */ e($, { children: d }),
-      /* @__PURE__ */ e(O, { children: u })
+    /* @__PURE__ */ g(K, { children: [
+      /* @__PURE__ */ e(N, { children: d }),
+      /* @__PURE__ */ e($, { children: u })
     ] }),
-    f && /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e(
-      _,
+    m && /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(
+      V,
       {
-        ref: s,
-        onClick: n,
-        onMouseEnter: () => s.current.focus(),
+        ref: n,
+        onClick: s,
+        onMouseEnter: () => n.current.focus(),
         "aria-label": "Resume playback"
       }
     ) }),
-    /* @__PURE__ */ g(q, { children: [
+    /* @__PURE__ */ g(_, { children: [
       a && /* @__PURE__ */ e(z, { vastUrl: a }),
-      /* @__PURE__ */ e("span", { children: "ADVERTISEMENT" })
+      /* @__PURE__ */ e(q, { children: "ADVERTISEMENT" })
     ] })
   ] }) });
 }, U = ({
   showPauseAd: t,
   vastUrls: d,
   title: u,
-  caption: n,
-  onPlay: o,
+  caption: s,
+  onPlay: f,
   onClose: a,
   onRender: r,
-  options: f
+  options: m
 }) => {
-  const s = (f == null ? void 0 : f.pauseAdDelay) ?? 5e3, [m, P] = x(!1), [l, p] = x(!1), c = k(), i = d == null ? void 0 : d[0].url, y = k(i);
+  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(() => {
@@ -75,7 +74,7 @@ const z = ({ vastUrl: t }) => {
       });
       const w = () => {
         var A;
-        (A = E.get()[y.current]) != null && A.imageSrc ? (clearTimeout(c.current), p(!1), P(!0), S.emit("exposedPauseAd", {
+        (A = E.get()[y.current]) != null && A.imageSrc ? (clearTimeout(c.current), o(!1), P(!0), S.emit("exposedPauseAd", {
           action: "rendered",
           payload: {}
         })) : c.current = setTimeout(() => {
@@ -84,31 +83,31 @@ const z = ({ vastUrl: t }) => {
       };
       c.current = setTimeout(() => {
         w();
-      }, s);
+      }, n);
     } else
       S.emit("exposedPauseAd", {
         action: "disabled",
         payload: {}
-      }), p(!0), c.current = setTimeout(() => {
+      }), o(!0), c.current = setTimeout(() => {
         P(!1);
       }, 400);
     return () => {
       c.current && clearTimeout(c.current);
     };
-  }, [E, T, a, s, t, i]), h(() => {
-    r == null || r({ rendered: m });
-  }, [m, r]), h(() => () => {
+  }, [E, T, a, n, t, i]), h(() => {
+    r == null || r({ rendered: l });
+  }, [l, r]), h(() => () => {
     r == null || r({ rendered: !1 });
-  }, [r]), m ? /* @__PURE__ */ e(
+  }, [r]), l ? /* @__PURE__ */ e(
     H,
     {
       onClose: a,
-      isClosing: l,
+      isClosing: p,
       title: u,
-      caption: n,
-      onPlay: o,
+      caption: s,
+      onPlay: f,
       vastUrl: i,
-      options: f
+      options: m
     }
   ) : null;
 };

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

@@ -1,6 +1,5 @@
 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 PauseAdGradientLeft: 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>>;
@@ -9,4 +8,5 @@ export declare const PauseAdCaption: import('@linaria/react').StyledComponent<im
 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 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

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

package/lib/app/webos/ui/Sidebar/index.js

@@ -3,10 +3,10 @@ import { updateAllLayouts as ee } from "@noriginmedia/norigin-spatial-navigation
 import { withFocusable as oe } from "../../useTvButton.js";
 import { useRef as k, useState as I, useEffect as h } from "react";
 import { eventBus as p } from "@streamlayer/sdk-web-interfaces";
-import { PromotionType as r, AutoPlayVideo as te, PlayVideoMuted as de } from "@streamlayer/sdk-web-types";
+import { PromotionType as i, AutoPlayVideo as te, PlayVideoMuted as de } from "@streamlayer/sdk-web-types";
 import { SvgIcon as T } from "../../../../ui/icons/index.js";
 import { PromoAction as ae } from "./PromoAction.js";
-import { Wrap as ne, Container as ie, Header as re, BrandBlock as le, LogoIcon as pe, BrandText as se, BrandNameContainer as ce, BrandName as ye, Sponsored as me, CloseIcon as ue, VideoBlock as he, VideoWrapper as Ae, FocusableVideo as Be, VideoStatus as O, Title as Ie, Description as be, CloseButton as Me } from "./styles.js";
+import { Wrap as ne, Container as re, Header as ie, BrandBlock as le, LogoIcon as pe, BrandText as se, BrandNameContainer as ce, BrandName as ye, Sponsored as ue, CloseIcon as me, VideoBlock as he, VideoWrapper as Ae, FocusableVideo as Be, VideoStatus as O, Title as Ie, Description as be, CloseButton as Me } from "./styles.js";
 const Re = oe(Me, {
   isFocusBoundary: !0
 }), Ce = (j) => {
@@ -16,19 +16,19 @@ const Re = oe(Me, {
     open: c,
     togglePause: a,
     controlVideo: s,
-    promotionId: i,
+    promotionId: r,
     onClose: b,
     markAsViewed: A,
     advertisementPaused: H,
     isEventFired: o,
     fireEvent: t,
     muted: $
-  } = j, q = k(null), B = k(null), [M, z] = I(0), K = e.type === r.INGAME_IAB11_LBAR ? M : M / 2, R = !!((_ = (N = e.banner) == null ? void 0 : N.video) != null && _.url), y = e.autoPlayVideo === te.ENABLED, V = e.playVideoMuted === de.ENABLED, Q = V && y, J = e.type === r.INGAME_IAB11_LBAR || e.type === r.INGAME_IAB11 || e.type === r.INGAME_IAB11_SIDEBAR, [f, X] = I(!0), [Y, Z] = I(void 0);
-  let m = (w = e.banner) == null ? void 0 : w.url;
-  return m && !m.startsWith("http") && (m = `https://${m}`), h(() => {
+  } = j, q = k(null), B = k(null), [M, z] = I(0), K = e.type === i.INGAME_IAB11_LBAR ? M : M / 2, R = !!((_ = (N = e.banner) == null ? void 0 : N.video) != null && _.url), y = e.autoPlayVideo === te.ENABLED, V = e.playVideoMuted === de.ENABLED, Q = V && y, J = e.type === i.INGAME_IAB11_LBAR || e.type === i.INGAME_IAB11 || e.type === i.INGAME_IAB11_SIDEBAR, [f, X] = I(!0), [Y, Z] = I(void 0);
+  let u = (w = e.banner) == null ? void 0 : w.url;
+  return u && !u.startsWith("http") && (u = `https://${u}`), h(() => {
     if (!B.current) return;
-    const n = new ResizeObserver(([u]) => {
-      const E = u.contentRect.width;
+    const n = new ResizeObserver(([m]) => {
+      const E = m.contentRect.width;
       z(E);
     });
     return n.observe(B.current), ee(), () => {
@@ -37,22 +37,32 @@ const Re = oe(Me, {
   }, []), h(() => {
     a == null || a(R || y), c == null || c();
   }, [R, y, c, a]), h(() => {
-    i && e.type && A && A();
-  }, [i, e.type, A]), h(() => () => {
+    r && e.type && A && A();
+  }, [r, e.type, A]), h(() => () => {
     s == null || s({ muted: !1 });
-  }, [s]), /* @__PURE__ */ d(ne, { children: /* @__PURE__ */ l(ie, { ref: B, children: [
-    /* @__PURE__ */ l(re, { children: [
+  }, [s]), /* @__PURE__ */ d(ne, { children: /* @__PURE__ */ l(re, { ref: B, children: [
+    /* @__PURE__ */ l(ie, { children: [
       e.logoMode === 1 && /* @__PURE__ */ l(le, { children: [
         /* @__PURE__ */ d(pe, { src: (P = e.sponsor) == null ? void 0 : P.logo, alt: "Logo" }),
         /* @__PURE__ */ l(se, { children: [
           /* @__PURE__ */ d(ce, { children: /* @__PURE__ */ d(ye, { children: (S = e.sponsor) == null ? void 0 : S.name }) }),
-          /* @__PURE__ */ d(me, { children: "SPONSORED" })
+          /* @__PURE__ */ d(ue, { children: "SPONSORED" })
         ] })
       ] }),
-      e.logoMode === 2 && e.type === r.INGAME_IAB11_LBAR && /* @__PURE__ */ d("img", { src: (g = e.sponsor) == null ? void 0 : g.logo, alt: "Video paused preview", style: { height: "56px" } }),
-      /* @__PURE__ */ d(Re, { options: { focusKey: "close-ad-button" }, webos: !0, onClick: b, "data-close-btn": "true", children: /* @__PURE__ */ d(ue, {}) })
+      e.logoMode === 2 && e.type === i.INGAME_IAB11_LBAR && /* @__PURE__ */ d("img", { src: (g = e.sponsor) == null ? void 0 : g.logo, alt: "Video paused preview", style: { height: "56px" } }),
+      /* @__PURE__ */ d(
+        Re,
+        {
+          autoFocus: !0,
+          options: { focusKey: "close-ad-button" },
+          webos: !0,
+          onClick: b,
+          "data-close-btn": "true",
+          children: /* @__PURE__ */ d(me, {})
+        }
+      )
     ] }),
-    e.logoMode === 2 && e.type !== r.INGAME_IAB11_LBAR && /* @__PURE__ */ d(
+    e.logoMode === 2 && e.type !== i.INGAME_IAB11_LBAR && /* @__PURE__ */ d(
       "img",
       {
         src: (L = e.sponsor) == null ? void 0 : L.logo,
@@ -86,7 +96,7 @@ const Re = oe(Me, {
             o != null && o("video-rendered") || (p.emit("advertisement", {
               action: "videoRendered",
               payload: {
-                id: i,
+                id: r,
                 type: e.type
               }
             }), t == null || t("video-rendered"));
@@ -95,21 +105,21 @@ const Re = oe(Me, {
             o != null && o(`video-quartile-${n}`) || (p.emit("advertisement", {
               action: "quartileCompleted",
               payload: {
-                id: i,
+                id: r,
                 type: e.type,
                 quartile: n
               }
             }), t == null || t(`video-quartile-${n}`));
           },
           onMute: (n) => {
-            const u = n ? "muted" : "unmuted";
-            o != null && o(u) || (p.emit("advertisement", {
+            const m = n ? "muted" : "unmuted";
+            o != null && o(m) || (p.emit("advertisement", {
               action: n ? "videoMuted" : "videoUnmuted",
               payload: {
-                id: i,
+                id: r,
                 type: e.type
               }
-            }), t == null || t(u)), Z(n);
+            }), t == null || t(m)), Z(n);
           },
           onPause: () => {
             a == null || a(!0), X(!1);
@@ -118,7 +128,7 @@ const Re = oe(Me, {
             o != null && o("replayed") || (p.emit("advertisement", {
               action: "videoReplayed",
               payload: {
-                id: i,
+                id: r,
                 type: e.type
               }
             }), t == null || t("replayed"));
@@ -127,13 +137,13 @@ const Re = oe(Me, {
             o != null && o("played") || (p.emit("advertisement", {
               action: "videoPlay",
               payload: {
-                id: i,
+                id: r,
                 type: e.type
               }
             }), t == null || t("played")), a == null || a(!1), o != null && o("played") && (o != null && o("ended")) && !(o != null && o("replayed")) && (p.emit("advertisement", {
               action: "videoReplayed",
               payload: {
-                id: i,
+                id: r,
                 type: e.type
               }
             }), t == null || t("replayed"));
@@ -142,7 +152,7 @@ const Re = oe(Me, {
             o != null && o("ended") || (p.emit("advertisement", {
               action: "videoEnd",
               payload: {
-                id: i,
+                id: r,
                 type: e.type
               }
             }), t == null || t("ended"));
@@ -163,7 +173,7 @@ const Re = oe(Me, {
         "MUTED"
       ] })
     ] }),
-    e.type !== r.INGAME_IAB11 && e.type !== r.INGAME_IAB11_LBAR && e.type !== r.INGAME_IAB11_SIDEBAR && /* @__PURE__ */ l(F, { children: [
+    e.type !== i.INGAME_IAB11 && e.type !== i.INGAME_IAB11_LBAR && e.type !== i.INGAME_IAB11_SIDEBAR && /* @__PURE__ */ l(F, { children: [
       /* @__PURE__ */ d(Ie, { children: (v = e.banner) == null ? void 0 : v.title }),
       /* @__PURE__ */ d(be, { children: (W = e.banner) == null ? void 0 : W.body })
     ] }),