@streamlayer/react-ui 1.28.1 → 1.28.3

package/lib/app/webos/Advertisement/AdvertisementUI.d.ts

@@ -17,6 +17,5 @@ export declare const AdvertisementUI: React.FC<{
     fireEvent: Advertisement['fireEvent'];
     muted?: boolean;
     toggleMute: (flag: boolean) => void;
-    isMuted?: boolean;
     isNotification?: boolean;
 }>;

package/lib/app/webos/Advertisement/AdvertisementUI.js

@@ -1,9 +1,9 @@
 import { jsx as r } from "react/jsx-runtime";
-import { TVSidebar as S } from "../ui/Sidebar/index.js";
-import { Banner as b } from "../../../ui/advertisement/banner/index.js";
-import { Notification as g } from "../../../ui/advertisement/notification/index.js";
-import { Sidebar as s } from "../../../ui/advertisement/sidebar/index.js";
-const B = ({
+import { TVSidebar as N } from "../ui/Sidebar/index.js";
+import { Banner as S } from "../../../ui/advertisement/banner/index.js";
+import { Notification as b } from "../../../ui/advertisement/notification/index.js";
+import { Sidebar as g } from "../../../ui/advertisement/sidebar/index.js";
+const A = ({
   advertisement: o,
   close: t,
   skipAutoClose: p,
@@ -18,10 +18,9 @@ const B = ({
   fireEvent: u,
   muted: I,
   toggleMute: h,
-  isMuted: q,
-  isNotification: N
-}) => o.promotion ? N && o.notification ? /* @__PURE__ */ r(
-  g,
+  isNotification: q
+}) => o.promotion ? q && o.notification ? /* @__PURE__ */ r(
+  b,
   {
     open: () => i == null ? void 0 : i({ fromNotification: !0 }),
     notification: o.notification,
@@ -29,8 +28,8 @@ const B = ({
     close: t,
     webos: !0
   }
-) : n ? /* @__PURE__ */ r(s, { className: "PromoSidebarContainer", direction: n, hiding: !1, children: /* @__PURE__ */ r(
-  S,
+) : n ? /* @__PURE__ */ r(g, { className: "PromoSidebarContainer", direction: n, hiding: !1, children: /* @__PURE__ */ r(
+  N,
   {
     markAsViewed: c,
     promotionId: o.question.id,
@@ -44,11 +43,10 @@ const B = ({
     isEventFired: m,
     fireEvent: u,
     muted: I,
-    toggleMute: h,
-    isMuted: q
+    toggleMute: h
   }
 ) }) : f ? /* @__PURE__ */ r(
-  b,
+  S,
   {
     promotionId: o.question.id,
     hiding: !1,
@@ -59,5 +57,5 @@ const B = ({
   }
 ) : null : null;
 export {
-  B as AdvertisementUI
+  A as AdvertisementUI
 };

package/lib/app/webos/Advertisement/index.js

@@ -1,15 +1,15 @@
-import { jsxs as M, jsx as P } from "react/jsx-runtime";
-import { cx as T } from "@linaria/core";
-import { styled as V } from "@linaria/react";
-import { useAnalyticsListener as x } from "../../../hooks/analytics.js";
-import { useHideTransition as F } from "../../../hooks/showIn.js";
+import { jsxs as T, jsx as P } from "react/jsx-runtime";
+import { cx as V } from "@linaria/core";
+import { styled as x } from "@linaria/react";
+import { useAnalyticsListener as F } from "../../../hooks/analytics.js";
+import { useHideTransition as M } from "../../../hooks/showIn.js";
 import { forwardRef as O, useEffect as B, useRef as j } from "react";
 import { useStore as u } from "@streamlayer/react-polyfills";
 import { eventBus as E } from "@streamlayer/sdk-web-interfaces";
 import { PromotionType as q, FeatureType as D } from "@streamlayer/sdk-web-types";
 import { useAdvertisementBackground as H } from "../../../ui/theme/utils.js";
 import { AdvertisementUI as K } from "./AdvertisementUI.js";
-const N = /* @__PURE__ */ V("div")({
+const N = /* @__PURE__ */ x("div")({
   name: "AdvertisementUIWrap",
   class: "a17b2u9w",
   propsAsIs: !1
@@ -45,8 +45,8 @@ const N = /* @__PURE__ */ V("div")({
   var p, f, g, v, A, b, S, y, U, I;
   const e = u(t.advertisement.$store), {
     finished: c
-  } = F();
-  x(d, {
+  } = M();
+  F(d, {
     enabled: !!e.data,
     event: "click",
     listener: R
@@ -59,12 +59,12 @@ const N = /* @__PURE__ */ V("div")({
     landscapeUrl: W,
     portraitUrl: h
   });
-  return e.data === void 0 || !m && e.isViewed ? null : /* @__PURE__ */ M(N, {
+  return e.data === void 0 || !m && e.isViewed ? null : /* @__PURE__ */ T(N, {
     ref: d,
     style: {
       height: k ? "auto" : "100%"
     },
-    className: T("SL-AdvertisementUIWrap", "SL-AdvertisementWebOs", "SL-AdvertisementUIWrap--lower-third"),
+    className: V("SL-AdvertisementUIWrap", "SL-AdvertisementWebOs", "SL-AdvertisementUIWrap--lower-third"),
     children: [!n && w, /* @__PURE__ */ P(K, {
       sidebar: s,
       banner: i,
@@ -74,7 +74,6 @@ const N = /* @__PURE__ */ V("div")({
       }),
       toggleMute: e.toggleMute || (() => {
       }),
-      isMuted: e.isMuted,
       close: e.close,
       isEventFired: e.isEventFired,
       fireEvent: e.fireEvent,

package/lib/app/webos/story.js

@@ -1,32 +1,33 @@
-import { jsx as n } from "react/jsx-runtime";
-import i from "hls.js";
+import { jsx as a, jsxs as p, Fragment as f } from "react/jsx-runtime";
+import c from "hls.js";
 import { useRef as m, useState as d, useEffect as u } from "react";
-import { StreamLayerProvider as p, useStreamLayer as l, useStreamLayerUI as f } from "@streamlayer/react";
-import { useStreamLayerDebug as y } from "../../utils/debug/index.js";
-import { StreamLayerSDKTv as S } from "./index.js";
-const h = ({ src: r }) => {
-  const e = m(), s = m(), [t, o] = d(r);
+import { StreamLayerProvider as y, useStreamLayer as l, useStreamLayerUI as S } from "@streamlayer/react";
+import { anonymous as h } from "@streamlayer/sdk-web-anonymous-auth";
+import { useStreamLayerDebug as b } from "../../utils/debug/index.js";
+import { StreamLayerSDKTv as g } from "./index.js";
+const w = ({ src: t }) => {
+  const e = m(), n = m(), [r, o] = d(t);
   return u(() => {
-    o(r);
-  }, [r]), u(() => () => {
-    s.current && clearTimeout(s.current);
+    o(t);
+  }, [t]), u(() => () => {
+    n.current && clearTimeout(n.current);
   }, []), u(() => {
-    if (t && t.includes("m3u8"))
-      if (i.isSupported() && e.current) {
-        const a = new i({
+    if (r && r.includes("m3u8"))
+      if (c.isSupported() && e.current) {
+        const s = new c({
           debug: !1
         });
-        a.loadSource(t), a.attachMedia(e.current);
+        s.loadSource(r), s.attachMedia(e.current);
       } else
         o("");
-    e.current && (e.current.volume = 0.1, e.current.play().catch((a) => {
-      var c;
-      console.error(a), (c = e.current) == null || c.play();
+    e.current && (e.current.volume = 0.1, e.current.play().catch((s) => {
+      var i;
+      console.error(s), (i = e.current) == null || i.play();
     }));
-  }, [t]), /* @__PURE__ */ n(
+  }, [r]), /* @__PURE__ */ a(
     "video",
     {
-      src: t || "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4",
+      src: r || "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4",
       ref: e,
       style: { width: "100%", height: "100%", borderRadius: 10, objectFit: "contain" },
       autoPlay: !0,
@@ -37,38 +38,44 @@ const h = ({ src: r }) => {
       controls: !0
     }
   );
-}, b = () => {
-  const r = l(), [e, s] = d("");
-  return u(() => r ? r.streamSummary().subscribe((t) => {
-    var o, a;
-    (a = (o = t.data) == null ? void 0 : o.summary) != null && a.stream && s(t.data.summary.stream);
+}, v = () => {
+  const t = l(), [e, n] = d("");
+  return u(() => t ? t.streamSummary().subscribe((r) => {
+    var o, s;
+    (s = (o = r.data) == null ? void 0 : o.summary) != null && s.stream && n(r.data.summary.stream);
   }) : () => {
-  }, [r]), /* @__PURE__ */ n(
-    h,
+  }, [t]), /* @__PURE__ */ a(
+    w,
     {
       src: e || "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4"
     }
   );
-}, g = ({ persistent: r }) => {
-  const e = l(), s = f();
-  return e ? /* @__PURE__ */ n(S, { sdk: e, persistent: r, uiState: s, children: /* @__PURE__ */ n(b, {}) }) : null;
-}, T = ({ sdkKey: r, eventId: e, persistent: s, production: t }) => {
-  const o = y({ sdkKey: r, eventId: e, production: t });
-  return /* @__PURE__ */ n(
-    p,
+}, L = ({ sdk: t }) => (u(() => {
+  t.anonymousAuthorization();
+}, [t]), null), k = ({ persistent: t }) => {
+  const e = l(), n = S();
+  return e ? /* @__PURE__ */ p(f, { children: [
+    /* @__PURE__ */ a(L, { sdk: e }),
+    /* @__PURE__ */ a(g, { sdk: e, persistent: t, uiState: n, children: /* @__PURE__ */ a(v, {}) })
+  ] }) : null;
+}, R = /* @__PURE__ */ new Set([h]), P = ({ sdkKey: t, eventId: e, persistent: n, production: r }) => {
+  const o = b({ sdkKey: t, eventId: e, production: r });
+  return /* @__PURE__ */ a(
+    y,
     {
       event: o.event,
       sdkKey: o.sdkKey,
       production: o.env === "production",
+      plugins: R,
       autoEnable: !0,
       withAd: !0,
       withAdNotification: !0,
       webOS: !0,
-      children: /* @__PURE__ */ n(g, { persistent: s })
+      children: /* @__PURE__ */ a(k, { persistent: n })
     }
   );
 };
 export {
-  h as Player,
-  T as WebOSStory
+  w as Player,
+  P as WebOSStory
 };

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

@@ -16,6 +16,5 @@ export type OverlayProps = {
     fireEvent: Advertisement['fireEvent'];
     muted?: boolean;
     toggleMute: (flag: boolean) => void;
-    isMuted?: boolean;
 };
 export declare const TVSidebar: React.FC<OverlayProps>;

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

@@ -1,57 +1,56 @@
-import { jsx as d, jsxs as l, Fragment as X } from "react/jsx-runtime";
-import { updateAllLayouts as Y } from "@noriginmedia/norigin-spatial-navigation";
-import { withFocusable as Z } from "../../useTvButton.js";
-import { useRef as k, useState as E, useEffect as h } from "react";
+import { jsx as d, jsxs as l, Fragment as F } from "react/jsx-runtime";
+import { updateAllLayouts as ee } from "@noriginmedia/norigin-spatial-navigation";
+import { withFocusable as oe } from "../../useTvButton.js";
+import { useRef as T, useState as I, useEffect as h } from "react";
 import { eventBus as p } from "@streamlayer/sdk-web-interfaces";
-import { PromotionType as r, AutoPlayVideo as F, PlayVideoMuted as ee } from "@streamlayer/sdk-web-types";
-import { SvgIcon as T } from "../../../../ui/icons/index.js";
-import { PromoAction as oe } from "./PromoAction.js";
-import { Container as te, Header as de, BrandBlock as ae, LogoIcon as ne, BrandText as ie, BrandNameContainer as re, BrandName as le, Sponsored as pe, CloseIcon as ce, VideoBlock as se, VideoWrapper as ye, FocusableVideo as me, VideoStatus as W, Title as ue, Description as he, CloseButton as Ae } from "./styles.js";
-const Be = Z(Ae, {
+import { PromotionType as r, AutoPlayVideo as te, PlayVideoMuted as de } from "@streamlayer/sdk-web-types";
+import { SvgIcon as W } from "../../../../ui/icons/index.js";
+import { PromoAction as ae } from "./PromoAction.js";
+import { Container as ne, Header as ie, BrandBlock as re, LogoIcon as le, BrandText as pe, BrandNameContainer as se, BrandName as ce, Sponsored as ye, CloseIcon as me, VideoBlock as ue, VideoWrapper as he, FocusableVideo as Ae, VideoStatus as O, Title as Be, Description as Ie, CloseButton as be } from "./styles.js";
+const Me = oe(be, {
   isFocusBoundary: !0
-}), Se = (O) => {
-  var _, V, N, w, S, g, L, P, C, G, D, v, x, U;
+}), Le = (j) => {
+  var N, _, w, P, S, g, L, C, G, D, v, x, U, k;
   const {
     promotion: e,
-    open: y,
+    open: c,
     togglePause: a,
-    controlVideo: c,
-    promotionId: n,
+    controlVideo: s,
+    promotionId: i,
     onClose: b,
     markAsViewed: A,
-    advertisementPaused: j,
+    advertisementPaused: H,
     isEventFired: o,
     fireEvent: t,
-    muted: $,
-    isMuted: I
-  } = O, H = k(null), B = k(null), [M, q] = E(0), z = e.type === r.INGAME_IAB11_LBAR ? M : M / 2, R = !!((V = (_ = e.banner) == null ? void 0 : _.video) != null && V.url), s = e.autoPlayVideo === F.ENABLED, f = e.playVideoMuted === ee.ENABLED, K = f && s, Q = e.type === r.INGAME_IAB11_LBAR || e.type === r.INGAME_IAB11 || e.type === r.INGAME_IAB11_SIDEBAR;
-  let m = (N = e.banner) == null ? void 0 : N.url;
+    muted: $
+  } = j, q = T(null), B = T(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(() => {
     if (!B.current) return;
-    const i = new ResizeObserver(([u]) => {
-      const J = u.contentRect.width;
-      q(J);
+    const n = new ResizeObserver(([u]) => {
+      const E = u.contentRect.width;
+      z(E);
     });
-    return i.observe(B.current), Y(), () => {
-      i.disconnect();
+    return n.observe(B.current), ee(), () => {
+      n.disconnect();
     };
   }, []), h(() => {
-    a == null || a(R || s), y == null || y();
-  }, [R, s, y, a]), h(() => {
-    n && e.type && A && A();
-  }, [n, e.type, A]), h(() => () => {
-    c == null || c({ muted: !1 });
-  }, [c]), /* @__PURE__ */ d("div", { children: /* @__PURE__ */ l(te, { ref: B, children: [
-    /* @__PURE__ */ l(de, { children: [
-      e.logoMode === 1 && /* @__PURE__ */ l(ae, { children: [
-        /* @__PURE__ */ d(ne, { src: (w = e.sponsor) == null ? void 0 : w.logo, alt: "Logo" }),
-        /* @__PURE__ */ l(ie, { children: [
-          /* @__PURE__ */ d(re, { children: /* @__PURE__ */ d(le, { children: (S = e.sponsor) == null ? void 0 : S.name }) }),
-          /* @__PURE__ */ d(pe, { children: "SPONSORED" })
+    a == null || a(R || y), c == null || c();
+  }, [R, y, c, a]), h(() => {
+    i && e.type && A && A();
+  }, [i, e.type, A]), h(() => () => {
+    s == null || s({ muted: !1 });
+  }, [s]), /* @__PURE__ */ d("div", { children: /* @__PURE__ */ l(ne, { ref: B, children: [
+    /* @__PURE__ */ l(ie, { children: [
+      e.logoMode === 1 && /* @__PURE__ */ l(re, { children: [
+        /* @__PURE__ */ d(le, { src: (P = e.sponsor) == null ? void 0 : P.logo, alt: "Logo" }),
+        /* @__PURE__ */ l(pe, { children: [
+          /* @__PURE__ */ d(se, { children: /* @__PURE__ */ d(ce, { children: (S = e.sponsor) == null ? void 0 : S.name }) }),
+          /* @__PURE__ */ d(ye, { 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(Be, { options: { focusKey: "close-ad-button" }, webos: !0, onClick: b, "data-close-btn": "true", children: /* @__PURE__ */ d(ce, {}) })
+      /* @__PURE__ */ d(Me, { 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(
       "img",
@@ -66,60 +65,60 @@ const Be = Z(Ae, {
         }
       }
     ),
-    ((P = e.banner) == null ? void 0 : P.imageUrl) && /* @__PURE__ */ d(se, { style: { height: z }, children: /* @__PURE__ */ d(
+    ((C = e.banner) == null ? void 0 : C.imageUrl) && /* @__PURE__ */ d(ue, { style: { height: K }, children: /* @__PURE__ */ d(
       "img",
       {
-        src: (C = e.banner) == null ? void 0 : C.imageUrl,
+        src: (G = e.banner) == null ? void 0 : G.imageUrl,
         alt: "Video paused preview",
         style: { width: "100%", height: "100%", objectFit: "cover" }
       }
     ) }),
-    ((G = e.banner) == null ? void 0 : G.video) && /* @__PURE__ */ l(ye, { children: [
+    ((D = e.banner) == null ? void 0 : D.video) && /* @__PURE__ */ l(he, { children: [
       /* @__PURE__ */ d(
-        me,
+        Ae,
         {
           source: e.banner.video.url,
-          poster: (v = (D = e.banner) == null ? void 0 : D.video) == null ? void 0 : v.thumbnailUrl,
+          poster: (x = (v = e.banner) == null ? void 0 : v.video) == null ? void 0 : x.thumbnailUrl,
           webos: !0,
-          aspectRatio: Q ? "1/1" : "2/1",
-          ref: H,
+          aspectRatio: J ? "1/1" : "2/1",
+          ref: q,
           onRender: () => {
             o != null && o("video-rendered") || (p.emit("advertisement", {
               action: "videoRendered",
               payload: {
-                id: n,
+                id: i,
                 type: e.type
               }
             }), t == null || t("video-rendered"));
           },
-          onQuartile: (i) => {
-            o != null && o(`video-quartile-${i}`) || (p.emit("advertisement", {
+          onQuartile: (n) => {
+            o != null && o(`video-quartile-${n}`) || (p.emit("advertisement", {
               action: "quartileCompleted",
               payload: {
-                id: n,
+                id: i,
                 type: e.type,
-                quartile: i
+                quartile: n
               }
-            }), t == null || t(`video-quartile-${i}`));
+            }), t == null || t(`video-quartile-${n}`));
           },
-          onMute: (i) => {
-            const u = i ? "muted" : "unmuted";
+          onMute: (n) => {
+            const u = n ? "muted" : "unmuted";
             o != null && o(u) || (p.emit("advertisement", {
-              action: i ? "videoMuted" : "videoUnmuted",
+              action: n ? "videoMuted" : "videoUnmuted",
               payload: {
-                id: n,
+                id: i,
                 type: e.type
               }
-            }), t == null || t(u));
+            }), t == null || t(u)), Z(n);
           },
           onPause: () => {
-            s && (a == null || a(!0));
+            a == null || a(!0), X(!1);
           },
           onReplay: () => {
             o != null && o("replayed") || (p.emit("advertisement", {
               action: "videoReplayed",
               payload: {
-                id: n,
+                id: i,
                 type: e.type
               }
             }), t == null || t("replayed"));
@@ -128,13 +127,13 @@ const Be = Z(Ae, {
             o != null && o("played") || (p.emit("advertisement", {
               action: "videoPlay",
               payload: {
-                id: n,
+                id: i,
                 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: n,
+                id: i,
                 type: e.type
               }
             }), t == null || t("replayed"));
@@ -143,34 +142,34 @@ const Be = Z(Ae, {
             o != null && o("ended") || (p.emit("advertisement", {
               action: "videoEnd",
               payload: {
-                id: n,
+                id: i,
                 type: e.type
               }
             }), t == null || t("ended"));
           },
           muted: $,
-          autoPlay: s,
-          playMuted: f,
-          controlVideo: c
+          autoPlay: y,
+          playMuted: V,
+          controlVideo: s,
+          hasNotPausedVideo: f
         }
       ),
-      j && /* @__PURE__ */ l(W, { children: [
-        /* @__PURE__ */ d(T, { name: "icon-pause" }),
+      H && !f && /* @__PURE__ */ l(O, { children: [
+        /* @__PURE__ */ d(W, { name: "icon-pause" }),
         "PAUSED"
       ] }),
-      (I || K && I === void 0) && /* @__PURE__ */ l(W, { children: [
-        /* @__PURE__ */ d(T, { name: "iconMute" }),
+      Y && Q && /* @__PURE__ */ l(O, { children: [
+        /* @__PURE__ */ d(W, { name: "iconMute" }),
         "MUTED"
-      ] }),
-      " "
+      ] })
     ] }),
-    e.type !== r.INGAME_IAB11 && e.type !== r.INGAME_IAB11_LBAR && e.type !== r.INGAME_IAB11_SIDEBAR && /* @__PURE__ */ l(X, { children: [
-      /* @__PURE__ */ d(ue, { children: (x = e.banner) == null ? void 0 : x.title }),
-      /* @__PURE__ */ d(he, { children: (U = e.banner) == null ? void 0 : U.body })
+    e.type !== r.INGAME_IAB11 && e.type !== r.INGAME_IAB11_LBAR && e.type !== r.INGAME_IAB11_SIDEBAR && /* @__PURE__ */ l(F, { children: [
+      /* @__PURE__ */ d(Be, { children: (U = e.banner) == null ? void 0 : U.title }),
+      /* @__PURE__ */ d(Ie, { children: (k = e.banner) == null ? void 0 : k.body })
     ] }),
-    /* @__PURE__ */ d(oe, { promotion: e, onClose: b })
+    /* @__PURE__ */ d(ae, { promotion: e, onClose: b })
   ] }) });
 };
 export {
-  Se as TVSidebar
+  Le as TVSidebar
 };

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

@@ -1,100 +1,66 @@
-import { jsxs as a, jsx as c } from "react/jsx-runtime";
-import { useKeyboardNavigation as Q } from "../../../../hooks/useKeyboardNavigation.js";
-import { useRef as T, useState as b, useCallback as A, useEffect as W } from "react";
-import { PlayVideoMuted as z, AutoPlayVideo as v, QuestionImages as G } from "@streamlayer/sdk-web-types";
-import { SvgIcon as D } from "../../../../ui/icons/index.js";
-import { Container as H, VideoWrapper as J, FocusableVideo as X, contentContainerClassName as S, VideoStatus as U, ImageContainer as Y, Image as Z, Content as _, Title as $, Description as n } from "./styles.js";
-const ue = ({
-  instantView: e,
-  isDetail: d,
-  notification: l,
-  controlVideo: k,
-  muted: x
+import { jsxs as l, jsx as d } from "react/jsx-runtime";
+import { useRef as j, useState as c } from "react";
+import { PlayVideoMuted as F, AutoPlayVideo as P, QuestionImages as H } from "@streamlayer/sdk-web-types";
+import { SvgIcon as v } from "../../../../ui/icons/index.js";
+import { Container as O, VideoWrapper as Q, FocusableVideo as W, contentContainerClassName as C, VideoStatus as A, ImageContainer as k, Image as q, Content as s, Title as z, Description as G } from "./styles.js";
+const _ = ({
+  instantView: o,
+  isDetail: u,
+  notification: r,
+  controlVideo: B,
+  muted: D
 }) => {
-  var I, P;
-  const p = T(null), [L, o] = b(!1), [f, M] = b(void 0), [R, N] = b(!1), m = (e == null ? void 0 : e.playVideoMuted) === z.ENABLED, s = d && (e == null ? void 0 : e.autoPlayVideo) === v.ENABLED, F = m && s, E = T(), g = e == null ? void 0 : e.heading, B = e == null ? void 0 : e.body, C = g || B, O = l == null ? void 0 : l.title, j = l == null ? void 0 : l.body, y = A(() => {
-    const r = [];
-    p.current && r.push(p.current);
-    const t = document.querySelector(".webos"), h = t == null ? void 0 : t.querySelector('[data-close-btn="true"]');
-    return h && r.push(h), r;
-  }, []), q = A(
-    (r) => {
-      const t = document.activeElement;
-      if (y().includes(t))
-        switch (r.tagName) {
-          case "BUTTON":
-            r.click();
-            break;
-          case "VIDEO":
-            E.current = setTimeout(() => {
-              const u = r;
-              m && s ? u.muted ? (M(!1), u.muted = !1) : (M(!0), u.muted = !0) : u.paused || u.ended ? (o(!1), N(!0), u.play().then(() => {
-              }).catch((K) => console.warn("⛔ start failed:", K))) : (o(!0), u.pause(), N(!0));
-            }, 0);
-            break;
-        }
-    },
-    [s, m, y]
-  );
-  return W(() => () => {
-    E.current && clearTimeout(E.current);
-  }, []), Q({
-    containerSelector: ".webos",
-    getElements: y,
-    onEscape: () => {
-    },
-    onEnter: q,
-    initialFocusPriority: s ? 0 : 1,
-    enabled: !0,
-    dependencies: [s, m]
-  }), /* @__PURE__ */ a(H, { children: [
-    ((I = e == null ? void 0 : e.video) == null ? void 0 : I.url) && /* @__PURE__ */ a(J, { children: [
-      /* @__PURE__ */ c(
-        X,
+  var E, N;
+  const I = j(null), [b, e] = c(!1), [f, g] = c(void 0), m = (o == null ? void 0 : o.playVideoMuted) === F.ENABLED, T = u && (o == null ? void 0 : o.autoPlayVideo) === P.ENABLED, S = m && T, p = o == null ? void 0 : o.heading, y = o == null ? void 0 : o.body, h = p || y, [M, U] = c(!0), x = r == null ? void 0 : r.title, L = r == null ? void 0 : r.body;
+  return /* @__PURE__ */ l(O, { children: [
+    ((E = o == null ? void 0 : o.video) == null ? void 0 : E.url) && /* @__PURE__ */ l(Q, { children: [
+      /* @__PURE__ */ d(
+        W,
         {
-          className: S,
-          source: e.video.url,
-          poster: e.video.thumbnailUrl,
-          controlVideo: k,
-          muted: x,
-          autoPlay: d && e.autoPlayVideo === v.ENABLED,
-          tabIndex: 0,
-          ref: p,
+          className: C,
+          source: o.video.url,
+          poster: o.video.thumbnailUrl,
+          controlVideo: B,
+          muted: D,
+          autoPlay: u && o.autoPlayVideo === P.ENABLED,
+          ref: I,
           onPause: () => {
-            d && e.autoPlayVideo === v.ENABLED && (o == null || o(!0));
+            e == null || e(!0), U(!1);
+          },
+          onMute: (R) => {
+            g(R);
           },
           onPlay: () => {
-            o == null || o(!1);
+            e == null || e(!1);
           },
           playMuted: m,
-          noControlsButtons: !0,
-          isMutedMediaVideo: f,
+          hasNotPausedVideo: M,
           webos: !0
         }
       ),
-      L && R && /* @__PURE__ */ a(U, { children: [
-        /* @__PURE__ */ c(D, { name: "icon-pause" }),
+      b && !M && /* @__PURE__ */ l(A, { children: [
+        /* @__PURE__ */ d(v, { name: "icon-pause" }),
         "PAUSED"
       ] }),
-      (f || F && f === void 0) && /* @__PURE__ */ a(U, { children: [
-        /* @__PURE__ */ c(D, { name: "iconMute" }),
+      f && S && /* @__PURE__ */ l(A, { children: [
+        /* @__PURE__ */ d(v, { name: "iconMute" }),
         "MUTED"
       ] })
     ] }),
-    (e == null ? void 0 : e.image) && !((P = e == null ? void 0 : e.video) != null && P.url) && /* @__PURE__ */ c(
-      Y,
+    (o == null ? void 0 : o.image) && !((N = o == null ? void 0 : o.video) != null && N.url) && /* @__PURE__ */ d(
+      k,
       {
-        className: S,
-        "data-rounded": e.imageMode === G.ROUNDED,
-        children: /* @__PURE__ */ c(Z, { src: e == null ? void 0 : e.image })
+        className: C,
+        "data-rounded": o.imageMode === H.ROUNDED,
+        children: /* @__PURE__ */ d(q, { src: o == null ? void 0 : o.image })
       }
     ),
-    /* @__PURE__ */ a(_, { children: [
-      /* @__PURE__ */ c($, { children: d && C ? g : O }),
-      /* @__PURE__ */ c(n, { children: d && C ? B : j })
+    /* @__PURE__ */ l(s, { children: [
+      /* @__PURE__ */ d(z, { children: u && h ? p : x }),
+      /* @__PURE__ */ d(G, { children: u && h ? y : L })
     ] })
   ] });
 };
 export {
-  ue as InsightContentTV
+  _ as InsightContentTV
 };