@streamlayer/web-os 0.3.7 → 0.3.8

package/lib/classic/es/index3.js

@@ -17787,7 +17787,7 @@ const Re = O$9(tt, {
     open: c2,
     togglePause: a2,
     controlVideo: s2,
-    promotionId: i4,
+    promotionId: r2,
     onClose: b2,
     markAsViewed: A2,
     advertisementPaused: H2,
@@ -17795,11 +17795,11 @@ const Re = O$9(tt, {
     fireEvent: t2,
     muted: $2
   } = j2, q2 = useRef(null), B2 = useRef(null), [M2, z2] = useState$1(0), K2 = e2.type === PromotionType.INGAME_IAB11_LBAR ? M2 : M2 / 2, R2 = !!((_3 = (N2 = e2.banner) == null ? void 0 : N2.video) != null && _3.url), y3 = e2.autoPlayVideo === AutoPlayVideo.ENABLED, V2 = e2.playVideoMuted === PlayVideoMuted.ENABLED, Q2 = V2 && y3, J2 = e2.type === PromotionType.INGAME_IAB11_LBAR || e2.type === PromotionType.INGAME_IAB11 || e2.type === PromotionType.INGAME_IAB11_SIDEBAR, [f2, X2] = useState$1(true), [Y2, Z2] = useState$1(void 0);
-  let m2 = (w2 = e2.banner) == null ? void 0 : w2.url;
-  return m2 && !m2.startsWith("http") && (m2 = `https://${m2}`), useEffect$1(() => {
+  let u2 = (w2 = e2.banner) == null ? void 0 : w2.url;
+  return u2 && !u2.startsWith("http") && (u2 = `https://${u2}`), useEffect$1(() => {
     if (!B2.current) return;
-    const n2 = new ResizeObserver(([u2]) => {
-      const E2 = u2.contentRect.width;
+    const n2 = new ResizeObserver(([m2]) => {
+      const E2 = m2.contentRect.width;
       z2(E2);
     });
     return n2.observe(B2.current), updateAllLayouts(), () => {
@@ -17808,8 +17808,8 @@ const Re = O$9(tt, {
   }, []), useEffect$1(() => {
     a2 == null || a2(R2 || y3), c2 == null || c2();
   }, [R2, y3, c2, a2]), useEffect$1(() => {
-    i4 && e2.type && A2 && A2();
-  }, [i4, e2.type, A2]), useEffect$1(() => () => {
+    r2 && e2.type && A2 && A2();
+  }, [r2, e2.type, A2]), useEffect$1(() => () => {
     s2 == null || s2({ muted: false });
   }, [s2]), /* @__PURE__ */ jsx(Ge, { children: /* @__PURE__ */ jsxs(We, { ref: B2, children: [
     /* @__PURE__ */ jsxs(Ke, { children: [
@@ -17821,7 +17821,17 @@ const Re = O$9(tt, {
         ] })
       ] }),
       e2.logoMode === 2 && e2.type === PromotionType.INGAME_IAB11_LBAR && /* @__PURE__ */ jsx("img", { src: (g2 = e2.sponsor) == null ? void 0 : g2.logo, alt: "Video paused preview", style: { height: "56px" } }),
-      /* @__PURE__ */ jsx(Re, { options: { focusKey: "close-ad-button" }, webos: true, onClick: b2, "data-close-btn": "true", children: /* @__PURE__ */ jsx(et, {}) })
+      /* @__PURE__ */ jsx(
+        Re,
+        {
+          autoFocus: true,
+          options: { focusKey: "close-ad-button" },
+          webos: true,
+          onClick: b2,
+          "data-close-btn": "true",
+          children: /* @__PURE__ */ jsx(et, {})
+        }
+      )
     ] }),
     e2.logoMode === 2 && e2.type !== PromotionType.INGAME_IAB11_LBAR && /* @__PURE__ */ jsx(
       "img",
@@ -17857,7 +17867,7 @@ const Re = O$9(tt, {
             o2 != null && o2("video-rendered") || (eventBus.emit("advertisement", {
               action: "videoRendered",
               payload: {
-                id: i4,
+                id: r2,
                 type: e2.type
               }
             }), t2 == null || t2("video-rendered"));
@@ -17866,21 +17876,21 @@ const Re = O$9(tt, {
             o2 != null && o2(`video-quartile-${n2}`) || (eventBus.emit("advertisement", {
               action: "quartileCompleted",
               payload: {
-                id: i4,
+                id: r2,
                 type: e2.type,
                 quartile: n2
               }
             }), t2 == null || t2(`video-quartile-${n2}`));
           },
           onMute: (n2) => {
-            const u2 = n2 ? "muted" : "unmuted";
-            o2 != null && o2(u2) || (eventBus.emit("advertisement", {
+            const m2 = n2 ? "muted" : "unmuted";
+            o2 != null && o2(m2) || (eventBus.emit("advertisement", {
               action: n2 ? "videoMuted" : "videoUnmuted",
               payload: {
-                id: i4,
+                id: r2,
                 type: e2.type
               }
-            }), t2 == null || t2(u2)), Z2(n2);
+            }), t2 == null || t2(m2)), Z2(n2);
           },
           onPause: () => {
             a2 == null || a2(true), X2(false);
@@ -17889,7 +17899,7 @@ const Re = O$9(tt, {
             o2 != null && o2("replayed") || (eventBus.emit("advertisement", {
               action: "videoReplayed",
               payload: {
-                id: i4,
+                id: r2,
                 type: e2.type
               }
             }), t2 == null || t2("replayed"));
@@ -17898,13 +17908,13 @@ const Re = O$9(tt, {
             o2 != null && o2("played") || (eventBus.emit("advertisement", {
               action: "videoPlay",
               payload: {
-                id: i4,
+                id: r2,
                 type: e2.type
               }
             }), t2 == null || t2("played")), a2 == null || a2(false), o2 != null && o2("played") && (o2 != null && o2("ended")) && !(o2 != null && o2("replayed")) && (eventBus.emit("advertisement", {
               action: "videoReplayed",
               payload: {
-                id: i4,
+                id: r2,
                 type: e2.type
               }
             }), t2 == null || t2("replayed"));
@@ -17913,7 +17923,7 @@ const Re = O$9(tt, {
             o2 != null && o2("ended") || (eventBus.emit("advertisement", {
               action: "videoEnd",
               payload: {
-                id: i4,
+                id: r2,
                 type: e2.type
               }
             }), t2 == null || t2("ended"));
@@ -19250,39 +19260,39 @@ const e$3 = /* @__PURE__ */ styled_default("div")({
   class: "p8lpomy",
   propsAsIs: false
 }), o$4 = /* @__PURE__ */ styled_default("div")({
-  name: "PauseAdGradientLeft",
-  class: "pv7u167",
-  propsAsIs: false
-}), n$3 = /* @__PURE__ */ styled_default("div")({
   name: "PauseAdGradientRight",
-  class: "p1kh2yb0",
+  class: "pv7u167",
   propsAsIs: false
 }), p$9 = /* @__PURE__ */ styled_default("div")({
   name: "PauseAdGradientBottom",
-  class: "pl8f94x",
+  class: "p1kh2yb0",
   propsAsIs: false
-}), d$2 = /* @__PURE__ */ styled_default("div")({
+}), n$3 = /* @__PURE__ */ styled_default("div")({
   name: "PauseAdTopLeft",
-  class: "p1m6zmrt",
+  class: "pl8f94x",
   propsAsIs: false
-}), l$7 = /* @__PURE__ */ styled_default("h2")({
+}), d$2 = /* @__PURE__ */ styled_default("h2")({
   name: "PauseAdTitle",
-  class: "pm3vwfa",
+  class: "p1m6zmrt",
   propsAsIs: false
-}), A$4 = /* @__PURE__ */ styled_default("p")({
+}), l$7 = /* @__PURE__ */ styled_default("p")({
   name: "PauseAdCaption",
-  class: "p1tibuhw",
+  class: "pm3vwfa",
   propsAsIs: false
-}), r$7 = /* @__PURE__ */ styled_default("div")({
+}), A$4 = /* @__PURE__ */ styled_default("div")({
   name: "PauseAdBottomLeft",
-  class: "ptqqrqd",
+  class: "p1tibuhw",
   propsAsIs: false
-}), i$8 = /* @__PURE__ */ styled_default("button")({
+}), r$7 = /* @__PURE__ */ styled_default("button")({
   name: "PauseAdPlayButton",
-  class: "p14estxv",
+  class: "ptqqrqd",
   propsAsIs: false
-}), u$4 = /* @__PURE__ */ styled_default("div")({
+}), i$8 = /* @__PURE__ */ styled_default("div")({
   name: "PauseAdSidebar",
+  class: "p14estxv",
+  propsAsIs: false
+}), u$4 = /* @__PURE__ */ styled_default("span")({
+  name: "PauseAdTitleDescription",
   class: "p1dpvfl1",
   propsAsIs: false
 }), c$8 = /* @__PURE__ */ styled_default("img")({
@@ -19291,62 +19301,61 @@ const e$3 = /* @__PURE__ */ styled_default("div")({
   propsAsIs: false
 });
 const z$1 = ({ vastUrl: t2 }) => {
-  var n2;
+  var s2;
   const [, d2] = _$2(), u2 = useStore(d2, { keys: [t2] });
-  return (n2 = u2 == null ? void 0 : u2[t2]) != null && n2.imageSrc ? u2[t2].adUrl ? /* @__PURE__ */ jsx("a", { href: u2[t2].adUrl, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx(c$8, { src: u2[t2].imageSrc }) }) : /* @__PURE__ */ jsx(c$8, { src: u2[t2].imageSrc }) : null;
-}, H = ({ isClosing: t2, title: d2, caption: u2, onPlay: n2, onClose: o2, vastUrl: a2, options: r2 }) => {
+  return (s2 = u2 == null ? void 0 : u2[t2]) != null && s2.imageSrc ? u2[t2].adUrl ? /* @__PURE__ */ jsx("a", { href: u2[t2].adUrl, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx(c$8, { src: u2[t2].imageSrc }) }) : /* @__PURE__ */ jsx(c$8, { src: u2[t2].imageSrc }) : null;
+}, H = ({ isClosing: t2, title: d2, caption: u2, onPlay: s2, onClose: f2, vastUrl: a2, options: r2 }) => {
   var _a;
-  const f2 = (_a = r2 == null ? void 0 : r2.showPauseButton) != null ? _a : true, { ref: s2, focusSelf: m2 } = useFocusable({
+  const m2 = (_a = r2 == null ? void 0 : r2.showPauseButton) != null ? _a : true, { ref: n2, focusSelf: l2 } = useFocusable({
     focusKey: "sl-pause-ad-play",
-    onEnterRelease: n2,
+    onEnterRelease: s2,
     isFocusBoundary: true,
     forceFocus: true
   });
   return useEffect$1(() => {
-    s2.current && m2();
-  }, [s2, m2]), useEffect$1(() => {
-    const P2 = (l2) => {
-      const p2 = l2.keyCode;
-      if (p2 === 461 || p2 === 10009 || p2 === 27) {
-        l2.preventDefault(), l2.stopPropagation(), l2.stopImmediatePropagation(), o2 == null || o2();
+    n2.current && l2();
+  }, [n2, l2]), useEffect$1(() => {
+    const P2 = (p2) => {
+      const o2 = p2.keyCode;
+      if (o2 === 461 || o2 === 10009 || o2 === 27 || o2 === 8) {
+        p2.preventDefault(), p2.stopPropagation(), p2.stopImmediatePropagation(), f2 == null || f2();
         return;
       }
     };
     return window.addEventListener("keydown", P2, { capture: true }), () => window.removeEventListener("keydown", P2, { capture: true });
-  }, [o2]), /* @__PURE__ */ jsx(e$3, { className: cx_default(t2 && "pause-ad-closing"), children: /* @__PURE__ */ jsxs(t$a, { children: [
+  }, [f2]), /* @__PURE__ */ jsx(e$3, { className: cx_default(t2 && "pause-ad-closing"), children: /* @__PURE__ */ jsxs(t$a, { children: [
     /* @__PURE__ */ jsx(o$4, {}),
-    /* @__PURE__ */ jsx(n$3, {}),
     /* @__PURE__ */ jsx(p$9, {}),
-    /* @__PURE__ */ jsxs(d$2, { children: [
-      /* @__PURE__ */ jsx(l$7, { children: d2 }),
-      /* @__PURE__ */ jsx(A$4, { children: u2 })
+    /* @__PURE__ */ jsxs(n$3, { children: [
+      /* @__PURE__ */ jsx(d$2, { children: d2 }),
+      /* @__PURE__ */ jsx(l$7, { children: u2 })
     ] }),
-    f2 && /* @__PURE__ */ jsx(r$7, { children: /* @__PURE__ */ jsx(
-      i$8,
+    m2 && /* @__PURE__ */ jsx(A$4, { children: /* @__PURE__ */ jsx(
+      r$7,
       {
-        ref: s2,
-        onClick: n2,
-        onMouseEnter: () => s2.current.focus(),
+        ref: n2,
+        onClick: s2,
+        onMouseEnter: () => n2.current.focus(),
         "aria-label": "Resume playback"
       }
     ) }),
-    /* @__PURE__ */ jsxs(u$4, { children: [
+    /* @__PURE__ */ jsxs(i$8, { children: [
       a2 && /* @__PURE__ */ jsx(z$1, { vastUrl: a2 }),
-      /* @__PURE__ */ jsx("span", { children: "ADVERTISEMENT" })
+      /* @__PURE__ */ jsx(u$4, { children: "ADVERTISEMENT" })
     ] })
   ] }) });
 }, U = ({
   showPauseAd: t2,
   vastUrls: d2,
   title: u2,
-  caption: n2,
-  onPlay: o2,
+  caption: s2,
+  onPlay: f2,
   onClose: a2,
   onRender: r2,
-  options: f2
+  options: m2
 }) => {
   var _a;
-  const s2 = (_a = f2 == null ? void 0 : f2.pauseAdDelay) != null ? _a : 5e3, [m2, P2] = useState$1(false), [l2, p2] = useState$1(false), c2 = useRef(), i4 = d2 == null ? void 0 : d2[0].url, y3 = useRef(i4);
+  const n2 = (_a = m2 == null ? void 0 : m2.pauseAdDelay) != null ? _a : 5e3, [l2, P2] = useState$1(false), [p2, o2] = useState$1(false), c2 = useRef(), i4 = d2 == null ? void 0 : d2[0].url, y3 = useRef(i4);
   y3.current = i4;
   const [T2, E2] = _$2();
   return useEffect$1(() => {
@@ -19361,7 +19370,7 @@ const z$1 = ({ vastUrl: t2 }) => {
       });
       const w2 = () => {
         var A2;
-        (A2 = E2.get()[y3.current]) != null && A2.imageSrc ? (clearTimeout(c2.current), p2(false), P2(true), eventBus.emit("exposedPauseAd", {
+        (A2 = E2.get()[y3.current]) != null && A2.imageSrc ? (clearTimeout(c2.current), o2(false), P2(true), eventBus.emit("exposedPauseAd", {
           action: "rendered",
           payload: {}
         })) : c2.current = setTimeout(() => {
@@ -19370,31 +19379,31 @@ const z$1 = ({ vastUrl: t2 }) => {
       };
       c2.current = setTimeout(() => {
         w2();
-      }, s2);
+      }, n2);
     } else
       eventBus.emit("exposedPauseAd", {
         action: "disabled",
         payload: {}
-      }), p2(true), c2.current = setTimeout(() => {
+      }), o2(true), c2.current = setTimeout(() => {
         P2(false);
       }, 400);
     return () => {
       c2.current && clearTimeout(c2.current);
     };
-  }, [E2, T2, a2, s2, t2, i4]), useEffect$1(() => {
-    r2 == null || r2({ rendered: m2 });
-  }, [m2, r2]), useEffect$1(() => () => {
+  }, [E2, T2, a2, n2, t2, i4]), useEffect$1(() => {
+    r2 == null || r2({ rendered: l2 });
+  }, [l2, r2]), useEffect$1(() => () => {
     r2 == null || r2({ rendered: false });
-  }, [r2]), m2 ? /* @__PURE__ */ jsx(
+  }, [r2]), l2 ? /* @__PURE__ */ jsx(
     H,
     {
       onClose: a2,
-      isClosing: l2,
+      isClosing: p2,
       title: u2,
-      caption: n2,
-      onPlay: o2,
+      caption: s2,
+      onPlay: f2,
       vastUrl: i4,
-      options: f2
+      options: m2
     }
   ) : null;
 };