@streamlayer/react-ui 1.28.2 → 1.29.0

package/lib/ui/gamification/question/inapp/notification/AdNotification/index.js

@@ -1,93 +1,103 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { withFocusable as I } from "../../../../../../app/webos/useTvButton.js";
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import { withFocusable as D } from "../../../../../../app/webos/useTvButton.js";
 import { useState as Q, useRef as x, useEffect as R } from "react";
-import { QuestionType as u, NotificationUseContentMedia as F, QuestionStatus as W } from "@streamlayer/sdk-web-types";
+import { QuestionType as d, NotificationUseContentMedia as w, QuestionStatus as W } from "@streamlayer/sdk-web-types";
 import { QuestionTypeData as j } from "../../../../constants.js";
-import { QuestionTypeHeader as y } from "../../../index.js";
-import { NotificationMedia as w } from "./NotificationMedia/index.js";
-import { NotificationContainer as H, LogoImgContainer as P, LogoImg as O, NotificationContent as S, MainContent as _, StyledChevronRight as h, TVButtons as z, Body as G, Title as J, Description as K, DismissButton as X, AnswerButton as Y, NotificationInterstitialContainer as Z } from "./styles.js";
-const $ = ({ title: a, questionType: c, questionTypeData: r, description: o, imageMode: t, webos: n }) => /* @__PURE__ */ l(G, { imageMode: t, questionType: c, webos: n, children: [
-  /* @__PURE__ */ e(
-    y,
+import { QuestionTypeHeader as P } from "../../../index.js";
+import { NotificationMedia as O } from "./NotificationMedia/index.js";
+import { NotificationContainer as y, LogoImgContainer as H, LogoImg as S, NotificationContent as E, MainContent as _, StyledChevronRight as h, TVButtons as z, Body as G, Title as J, Description as K, DismissButton as X, AnswerButton as Y, NotificationInterstitialContainer as Z } from "./styles.js";
+const $ = ({ title: a, questionType: c, questionTypeData: e, description: o, imageMode: t, webos: n }) => /* @__PURE__ */ u(G, { imageMode: t, questionType: c, webos: n, children: [
+  /* @__PURE__ */ r(
+    P,
     {
-      questionTypeData: r,
+      questionTypeData: e,
       questionType: c,
       questionStatus: W.UNSET
     }
   ),
-  a && /* @__PURE__ */ e(J, { webos: n, children: a }),
-  o && /* @__PURE__ */ e(K, { children: o })
-] }), q = I(Z), g = I(X), A = I(Y), p = ({
+  a && /* @__PURE__ */ r(J, { webos: n, children: a }),
+  o && /* @__PURE__ */ r(K, { children: o })
+] }), q = D(Z), g = D(X), A = D(Y), p = ({
   sponsorLogo: a,
   onClick: c,
-  webos: r
-}) => /* @__PURE__ */ e(q, { autoFocus: !0, webos: r, onClick: c, "data-webos": r, children: /* @__PURE__ */ e(S, { withoutPadding: !0, children: /* @__PURE__ */ e(O, { src: a }) }) }), lo = ({
+  webos: e
+}) => /* @__PURE__ */ r(q, { autoFocus: !0, webos: e, onClick: c, "data-webos": e, children: /* @__PURE__ */ r(E, { withoutPadding: !0, children: /* @__PURE__ */ r(S, { src: a }) }) }), uo = ({
   action: a,
   close: c,
-  questionType: r,
+  questionType: e,
   inApp: o,
   insight: t,
   color: n,
   webos: s
 }) => {
-  var N, T, B;
-  const [E, d] = Q(!1), D = x();
-  R(() => (o != null && o.sponsorLogo && (d(!0), D.current = setTimeout(() => {
-    d(!1);
-  }, 5e3)), () => clearTimeout(D.current)), [o == null ? void 0 : o.sponsorLogo]);
-  const L = j[r];
-  if (!L || !o || !o.notification)
+  var T, B, F;
+  const [b, m] = Q(!1), L = x();
+  R(() => (o != null && o.sponsorLogo && (m(!0), L.current = setTimeout(() => {
+    m(!1);
+  }, 5e3)), () => clearTimeout(L.current)), [o == null ? void 0 : o.sponsorLogo]);
+  const N = j[e];
+  if (!N || !o || !o.notification)
     return null;
-  const { title: b, image: v, imageMode: m, useContentMedia: f } = o.notification, M = r === u.FACTOID ? t == null ? void 0 : t.heading : b, U = r === u.FACTOID ? t == null ? void 0 : t.body : "", V = v, i = r === u.FACTOID && ((N = t == null ? void 0 : t.video) == null ? void 0 : N.url) && (o == null ? void 0 : o.isVideo) && f === F.ENABLED, C = f === F.ENABLED ? i ? (T = t == null ? void 0 : t.video) == null ? void 0 : T.url : t == null ? void 0 : t.image : "";
-  return o != null && o.sponsorLogo && E ? /* @__PURE__ */ e(
+  const { title: v, image: M, imageMode: i, useContentMedia: f } = o.notification, U = e === d.FACTOID ? t == null ? void 0 : t.heading : v, V = e === d.FACTOID ? t == null ? void 0 : t.body : "", k = M, C = e === d.FACTOID && ((T = t == null ? void 0 : t.video) == null ? void 0 : T.url) && (o == null ? void 0 : o.isVideo) && f === w.ENABLED, I = f === w.ENABLED ? C ? (B = t == null ? void 0 : t.video) == null ? void 0 : B.url : t == null ? void 0 : t.image : "";
+  return o != null && o.sponsorLogo && b ? /* @__PURE__ */ r(
     p,
     {
       sponsorLogo: o == null ? void 0 : o.sponsorLogo,
       webos: s,
-      onClick: () => d(!1)
+      onClick: () => m(!1)
     }
-  ) : /* @__PURE__ */ l(
-    H,
+  ) : /* @__PURE__ */ u(
+    y,
     {
       "data-a": "intr",
       className: "SL_InApp",
-      onClick: (k) => {
-        s && (a == null || a(k));
+      onClick: (l) => {
+        s || a == null || a(l);
       },
-      "data-is-insight": r === u.FACTOID,
+      "data-is-insight": e === d.FACTOID,
       "data-webos": s,
       children: [
-        (o == null ? void 0 : o.sponsorLogo) && /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(O, { src: o == null ? void 0 : o.sponsorLogo }) }),
-        /* @__PURE__ */ l(S, { children: [
-          /* @__PURE__ */ l(_, { children: [
-            !C && /* @__PURE__ */ e(w, { src: V, imageMode: m, withVideo: !!i, color: n }),
-            C && /* @__PURE__ */ e(
-              w,
+        (o == null ? void 0 : o.sponsorLogo) && /* @__PURE__ */ r(H, { children: /* @__PURE__ */ r(S, { src: o == null ? void 0 : o.sponsorLogo }) }),
+        /* @__PURE__ */ u(E, { children: [
+          /* @__PURE__ */ u(_, { children: [
+            !I && /* @__PURE__ */ r(O, { src: k, imageMode: i, withVideo: !!C, color: n }),
+            I && /* @__PURE__ */ r(
+              O,
               {
-                src: C,
-                imageMode: m,
-                withVideo: !!i,
+                src: I,
+                imageMode: i,
+                withVideo: !!C,
                 color: n,
                 useContentMedia: f,
-                thumbnailUrl: (B = t == null ? void 0 : t.video) == null ? void 0 : B.thumbnailUrl
+                thumbnailUrl: (F = t == null ? void 0 : t.video) == null ? void 0 : F.thumbnailUrl
               }
             ),
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ r(
               $,
               {
-                questionTypeData: L,
-                questionType: r,
-                title: M,
-                description: U,
-                imageMode: m,
+                questionTypeData: N,
+                questionType: e,
+                title: U,
+                description: V,
+                imageMode: i,
                 webos: s
               }
             )
           ] }),
-          !s && /* @__PURE__ */ e(h, { name: "chevronRight" }),
-          s && /* @__PURE__ */ l(z, { children: [
-            /* @__PURE__ */ e(g, { webos: !0, "data-close-btn": "true", onClick: c, children: "Dismiss" }),
-            /* @__PURE__ */ e(A, { webos: !0, autoFocus: !0, onClick: a, children: "Answer" })
+          !s && /* @__PURE__ */ r(h, { name: "chevronRight" }),
+          s && /* @__PURE__ */ u(z, { children: [
+            /* @__PURE__ */ r(
+              g,
+              {
+                webos: !0,
+                "data-close-btn": "true",
+                onClick: (l) => {
+                  l.stopPropagation(), c == null || c(l);
+                },
+                children: "Dismiss"
+              }
+            ),
+            /* @__PURE__ */ r(A, { webos: !0, autoFocus: !0, onClick: a, children: "Answer" })
           ] })
         ] })
       ]
@@ -95,5 +105,5 @@ const $ = ({ title: a, questionType: c, questionTypeData: r, description: o, ima
   );
 };
 export {
-  lo as InAppNotification
+  uo as InAppNotification
 };

package/lib/ui/video-player/index.d.ts

@@ -19,6 +19,7 @@ export type VideoPlayerProps = {
     muted?: boolean;
     webos?: boolean;
     className?: string;
+    hasNotPausedVideo?: boolean;
 };
 export type ControlVideoCb = VideoPlayerProps['controlVideo'];
 export declare const pauseAllVideos: () => void;

package/lib/ui/video-player/index.js

@@ -1,23 +1,23 @@
-import { jsxs as N, jsx as t, Fragment as te } from "react/jsx-runtime";
-import { cx as Z } from "@linaria/core";
-import { withFocusable as re } from "../../app/webos/useTvButton.js";
-import { forwardRef as se, useRef as W, useState as L, useEffect as v, useCallback as T } from "react";
-import { SvgIcon as C } from "../icons/index.js";
-import { Loader as ne } from "../loader/index.js";
-import { ToggleIconPause as ce, HideControls as ie, Player as oe, Poster as ae, Control as P, Container as fe, VideoControls as ue, PauseIcon as le, PlayIcon as me, MuteIcon as de, WebOSIconButtonPlay as Y, WebOSIconButtonPause as be, WebOSIconButtonMute as ge, WebOSIconButtonUnmute as he } from "./styles.js";
-const pe = (r) => {
+import { jsxs as q, jsx as e, Fragment as st } from "react/jsx-runtime";
+import { cx as _ } from "@linaria/core";
+import { withFocusable as nt } from "../../app/webos/useTvButton.js";
+import { forwardRef as ct, useRef as F, useState as B, useEffect as O, useCallback as P } from "react";
+import { SvgIcon as g } from "../icons/index.js";
+import { Loader as ot } from "../loader/index.js";
+import { ToggleIconPause as it, HideControls as ut, Player as at, Poster as ft, Control as M, Container as lt, VideoControls as mt, PauseIcon as dt, PlayIcon as ht, MuteIcon as bt, WebOSIconButtonMute as gt, WebOSIconButtonUnmute as pt, WebOSIconButtonPlay as vt, WebOSIconButton as St, WebOSIconButtonPause as Ct } from "./styles.js";
+const It = (r) => {
   for (const s of r)
     s.isIntersecting ? s.target instanceof HTMLVideoElement && s.target.autoplay && s.target.play() : s.target instanceof HTMLVideoElement && !s.target.paused && s.target.pause();
-}, _ = new IntersectionObserver(pe, { threshold: 0.5 }), A = /* @__PURE__ */ new Set(), ve = (r) => {
-  _.observe(r), A.add(r);
-}, Ce = (r) => {
-  _.unobserve(r), A.delete(r);
-}, Se = () => {
-  for (const r of A)
+}, $ = new IntersectionObserver(It, { threshold: 0.5 }), N = /* @__PURE__ */ new Set(), Bt = (r) => {
+  $.observe(r), N.add(r);
+}, Ot = (r) => {
+  $.unobserve(r), N.delete(r);
+}, wt = () => {
+  for (const r of N)
     r instanceof HTMLVideoElement && !r.paused && r.pause();
 };
-function Ie(...r) {
-  return T(
+function yt(...r) {
+  return P(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (s) => {
       for (const c of r)
@@ -28,166 +28,179 @@ function Ie(...r) {
     [...r]
   );
 }
-const Oe = re(fe), Le = ({ loading: r, autoPlay: s, played: c, playing: o, isMuted: l, unmute: m, mute: d, togglePlaying: f }) => !r && !s && !c ? /* @__PURE__ */ t(P, { children: o ? /* @__PURE__ */ t(C, { name: "icon-pause" }) : /* @__PURE__ */ t(C, { name: "icon-play" }) }) : c ? /* @__PURE__ */ N(ue, { children: [
-  o ? /* @__PURE__ */ t(le, { onClick: f }) : /* @__PURE__ */ t(me, { onClick: f }),
-  /* @__PURE__ */ t(de, { className: Z(!l && "muted"), onClick: l ? m : d })
-] }) : null, Te = ({ loading: r, autoPlay: s, playMuted: c, playing: o, played: l, isMutedMediaVideo: m, unmute: d, mute: f, isMuted: g }) => /* @__PURE__ */ N(te, { children: [
-  !r && !(s && c) && /* @__PURE__ */ t(P, { "data-control-btn": "true", children: o ? /* @__PURE__ */ t(Y, { children: /* @__PURE__ */ t(C, { name: "icon-play" }) }) : l ? /* @__PURE__ */ t(be, { children: /* @__PURE__ */ t(C, { name: "icon-pause" }) }) : /* @__PURE__ */ t(Y, { name: "icon-play", "data-control-icon": "true" }) }),
-  !r && s && c && m !== void 0 && /* @__PURE__ */ t(P, { children: m ? /* @__PURE__ */ t(ge, { onClick: g ? d : f, children: /* @__PURE__ */ t(C, { name: "iconMute" }) }) : /* @__PURE__ */ t(he, { onClick: g ? d : f, children: /* @__PURE__ */ t(C, { name: "iconUnMute" }) }) })
-] }), Pe = se(
+const Lt = nt(lt), Pt = ({ loading: r, autoPlay: s, played: c, playing: i, isMuted: f, unmute: d, mute: h, togglePlaying: l }) => !r && !s && !c ? /* @__PURE__ */ e(M, { children: i ? /* @__PURE__ */ e(g, { name: "icon-pause" }) : /* @__PURE__ */ e(g, { name: "icon-play" }) }) : c ? /* @__PURE__ */ q(mt, { children: [
+  i ? /* @__PURE__ */ e(dt, { onClick: l }) : /* @__PURE__ */ e(ht, { onClick: l }),
+  /* @__PURE__ */ e(bt, { className: _(!f && "muted"), onClick: f ? d : h })
+] }) : null, Tt = ({
+  loading: r,
+  autoPlay: s,
+  playMuted: c,
+  playing: i,
+  played: f,
+  unmute: d,
+  mute: h,
+  isMuted: l,
+  hasNotPausedVideo: p,
+  hasInteractedWithAudio: w
+}) => /* @__PURE__ */ q(st, { children: [
+  !r && !(s && c) && /* @__PURE__ */ e(M, { "data-control-btn": "true", children: i ? p ? null : /* @__PURE__ */ e(vt, { children: /* @__PURE__ */ e(g, { name: "icon-play" }) }) : f ? /* @__PURE__ */ e(Ct, { children: /* @__PURE__ */ e(g, { name: "icon-pause" }) }) : /* @__PURE__ */ e(St, { "data-control-icon": "true", children: /* @__PURE__ */ e(g, { name: "icon-play" }) }) }),
+  !r && s && c && w && /* @__PURE__ */ e(M, { children: l ? /* @__PURE__ */ e(gt, { onClick: d, children: /* @__PURE__ */ e(g, { name: "iconMute" }) }) : /* @__PURE__ */ e(pt, { onClick: h, children: /* @__PURE__ */ e(g, { name: "iconUnMute" }) }) })
+] }), Et = ct(
   ({
     poster: r,
     source: s,
     aspectRatio: c,
-    controlVideo: o,
-    onReplay: l,
-    onPlay: m,
-    onPause: d,
-    onEnd: f,
-    onRender: g,
-    onMute: x,
+    controlVideo: i,
+    onReplay: f,
+    onPlay: d,
+    onPause: h,
+    onEnd: l,
+    onRender: p,
+    onMute: w,
     onQuartile: u,
-    autoPlay: S,
-    playMuted: k,
-    className: $,
-    muted: I,
-    webos: B
-  }, V) => {
-    const n = W(null), R = Ie(n, V), E = W(!1), j = W(!1), b = W(/* @__PURE__ */ new Set()), [D, K] = L(!1), [w, y] = L(!1), [M, z] = L(!1), [G, H] = L(!0), [q, F] = L(k);
-    v(() => {
-      s && (F(k), K(!1));
+    autoPlay: v,
+    playMuted: S,
+    className: D,
+    muted: y,
+    webos: T,
+    hasNotPausedVideo: V
+  }, R) => {
+    const n = F(null), Q = yt(n, R), x = F(!1), E = F(!1), m = F(/* @__PURE__ */ new Set()), [K, z] = B(!1), [W, k] = B(!1), [j, G] = B(!1), [J, H] = B(!0), [A, U] = B(S), [X, tt] = B(!1);
+    O(() => {
+      s && (U(S), z(!1));
     }, [s]);
-    const p = T(() => {
-      o == null || o({ muted: !1 });
-    }, [o]), J = T(() => {
-      o == null || o({ muted: !0 });
-    }, [o]), O = T((e) => {
-      e == null || e.stopPropagation(), n.current && (n.current.muted = !0), F(!0);
-    }, []), U = T((e) => {
-      e == null || e.stopPropagation(), n.current && (n.current.muted = !1), F(!1);
+    const C = P(() => {
+      i == null || i({ muted: !1 });
+    }, [i]), Y = P(() => {
+      i == null || i({ muted: !0 });
+    }, [i]), I = P((t) => {
+      t == null || t.stopPropagation(), n.current && (n.current.muted = !0), U(!0);
+    }, []), L = P((t) => {
+      t == null || t.stopPropagation(), n.current && (n.current.muted = !1), U(!1), X || tt(!0);
     }, []);
-    v(() => {
-      I !== void 0 && (I ? O() : U());
-    }, [O, I, U]);
-    const X = (e) => {
-      var h;
-      (h = e.stopPropagation) == null || h.call(e);
-      const i = n == null ? void 0 : n.current;
-      if (i)
-        if (w)
-          i.pause();
+    O(() => {
+      y !== void 0 && (y ? I() : L());
+    }, [I, y, L]);
+    const Z = (t) => {
+      var b;
+      (b = t.stopPropagation) == null || b.call(t);
+      const o = n == null ? void 0 : n.current;
+      if (o)
+        if (W)
+          o.pause();
         else {
           const a = n == null ? void 0 : n.current;
           if (!a)
             return;
-          Se(), a.play().catch((ee) => console.log(ee)), H(!1);
+          wt(), a.play().catch((rt) => console.log(rt)), H(!1);
         }
-    }, Q = () => {
-      var e;
-      (e = n == null ? void 0 : n.current) == null || e.load(), H(!0);
+    }, et = () => {
+      var t;
+      (t = n == null ? void 0 : n.current) == null || t.load(), H(!0);
     };
-    return v(() => () => {
-      p();
-    }, [p]), v(() => {
-      const e = n.current;
-      return e ? (j.current = e.muted, F(e.muted), ve(e), () => {
-        Ce(e);
+    return O(() => () => {
+      C();
+    }, [C]), O(() => {
+      const t = n.current;
+      return t ? (E.current = t.muted, U(t.muted), Bt(t), () => {
+        Ot(t);
       }) : () => {
       };
-    }, []), v(() => {
-      g == null || g();
-    }, [g]), v(() => {
-      b.current.clear(), E.current = !1;
-    }, [s]), /* @__PURE__ */ N(
-      Oe,
+    }, []), O(() => {
+      p == null || p();
+    }, [p]), O(() => {
+      m.current.clear(), x.current = !1;
+    }, [s]), /* @__PURE__ */ q(
+      Lt,
       {
-        webos: B,
-        onClick: S ? void 0 : X,
+        webos: T,
+        onClick: v && S ? A ? L : I : Z,
         "data-a": "intr",
         autoFocus: !0,
         options: { focusKey: "video-play-btn" },
-        className: Z(w && ce, S && ie, $),
+        className: _(W && !T && it, v && ut, D),
         style: c ? { aspectRatio: c } : {},
         children: [
-          /* @__PURE__ */ t(
-            oe,
+          /* @__PURE__ */ e(
+            at,
             {
-              ref: R,
+              ref: Q,
               src: s,
-              autoPlay: S,
+              autoPlay: v,
               onPlay: () => {
-                K(!0), E.current && (l == null || l(), b.current.clear()), y(!0), H(!1), m == null || m(), k ? O() : J();
+                z(!0), x.current && (f == null || f(), m.current.clear()), k(!0), H(!1), d == null || d(), S ? I() : Y();
               },
-              onTimeUpdate: (e) => {
-                const i = e.target.duration, h = e.target.currentTime;
-                if (i && h) {
-                  const a = Math.floor(h / i * 100);
-                  a >= 25 && a < 50 && !b.current.has(25) ? (u == null || u(25), b.current.add(25)) : a >= 50 && a < 75 && !b.current.has(50) ? (u == null || u(50), b.current.add(50)) : a >= 75 && !b.current.has(75) && (u == null || u(75), b.current.add(75));
+              onTimeUpdate: (t) => {
+                const o = t.target.duration, b = t.target.currentTime;
+                if (o && b) {
+                  const a = Math.floor(b / o * 100);
+                  a >= 25 && a < 50 && !m.current.has(25) ? (u == null || u(25), m.current.add(25)) : a >= 50 && a < 75 && !m.current.has(50) ? (u == null || u(50), m.current.add(50)) : a >= 75 && !m.current.has(75) && (u == null || u(75), m.current.add(75));
                 }
               },
-              onVolumeChange: (e) => {
-                const i = e.target.muted;
-                j.current !== i && (x == null || x(i), j.current = i, (i !== I || I === void 0) && (i ? p() : J()));
+              onVolumeChange: (t) => {
+                const o = t.target.muted;
+                E.current !== o && (w == null || w(o), E.current = o, (o !== y || y === void 0) && (o ? C() : Y()));
               },
-              onError: async (e) => {
+              onError: async (t) => {
                 try {
-                  if (e.target instanceof HTMLVideoElement) {
-                    z(!0);
-                    const h = await (await fetch(e.target.src)).blob(), a = URL.createObjectURL(h);
-                    e.target.src = a;
+                  if (t.target instanceof HTMLVideoElement) {
+                    G(!0);
+                    const b = await (await fetch(t.target.src)).blob(), a = URL.createObjectURL(b);
+                    t.target.src = a;
                   }
-                } catch (i) {
-                  console.error("video fallback fetch failed", i), y(!0), H(!0);
+                } catch (o) {
+                  console.error("video fallback fetch failed", o), k(!0), H(!0);
                 } finally {
-                  z(!1), p();
+                  G(!1), C();
                 }
               },
               onPause: () => {
-                y(!1), d == null || d(), p();
+                k(!1), h == null || h(), C();
               },
               onEnded: () => {
-                y(!1), E.current = !0, Q(), f == null || f(), p();
+                k(!1), x.current = !0, et(), l == null || l(), C();
               },
-              style: { visibility: G ? "hidden" : "visible" },
+              style: { visibility: J ? "hidden" : "visible" },
               controls: !1,
               playsInline: !0
             }
           ),
-          /* @__PURE__ */ t(ae, { src: r, style: { visibility: G ? "visible" : "hidden" } }),
-          !B && /* @__PURE__ */ t(
-            Le,
+          /* @__PURE__ */ e(ft, { src: r, style: { visibility: J ? "visible" : "hidden" } }),
+          !T && /* @__PURE__ */ e(
+            Pt,
             {
-              loading: M,
-              autoPlay: S,
-              played: D,
-              playing: w,
-              isMuted: q,
-              unmute: U,
-              mute: O,
-              togglePlaying: X
+              loading: j,
+              autoPlay: v,
+              played: K,
+              playing: W,
+              isMuted: A,
+              unmute: L,
+              mute: I,
+              togglePlaying: Z
             }
           ),
-          B && /* @__PURE__ */ t(
-            Te,
+          T && /* @__PURE__ */ e(
+            Tt,
             {
-              loading: M,
-              autoPlay: S,
-              playMuted: k,
-              playing: w,
-              played: D,
-              isMutedMediaVideo: q,
-              unmute: U,
-              mute: O,
-              isMuted: q
+              loading: j,
+              autoPlay: v,
+              playMuted: S,
+              playing: W,
+              played: K,
+              unmute: L,
+              mute: I,
+              isMuted: A,
+              hasNotPausedVideo: V,
+              hasInteractedWithAudio: X
             }
           ),
-          M && /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(ne, {}) })
+          j && /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(ot, {}) })
         ]
       }
     );
   }
 );
 export {
-  Pe as VideoPlayer,
-  Se as pauseAllVideos
+  Et as VideoPlayer,
+  wt as pauseAllVideos
 };

package/lib/ui/video-player/styles.d.ts

@@ -20,6 +20,7 @@ export declare const PlayIcon: {
 } & import('react').FunctionComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown> & {
     as?: React.ElementType;
 }>;
+export declare const WebOSIconButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
 export declare const WebOSIconButtonPlay: {
     __wyw_meta: unknown;
 } & import('react').FunctionComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown> & {

package/lib/ui/video-player/styles.js

@@ -1,9 +1,9 @@
 import { styled as s } from "@linaria/react";
-const I = /* @__PURE__ */ s("div")({
+const i = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1bgb86j",
   propsAsIs: !1
-}), m = /* @__PURE__ */ s("video")({
+}), A = /* @__PURE__ */ s("video")({
   name: "Player",
   class: "p6703cq",
   propsAsIs: !1
@@ -11,11 +11,11 @@ const I = /* @__PURE__ */ s("div")({
   name: "Poster",
   class: "p12ow7zo",
   propsAsIs: !1
-}), A = /* @__PURE__ */ s("div")({
+}), B = /* @__PURE__ */ s("div")({
   name: "Control",
   class: "cdpal9o",
   propsAsIs: !1
-}), i = "t1xke4ml", y = "h1yzxv57", P = /* @__PURE__ */ s("div")({
+}), x = "t1xke4ml", y = "h1yzxv57", P = /* @__PURE__ */ s("div")({
   name: "VideoControls",
   class: "vxo8xch",
   propsAsIs: !1
@@ -23,52 +23,57 @@ const I = /* @__PURE__ */ s("div")({
   name: "ControlBtn",
   class: "coyuzu0",
   propsAsIs: !1
-}), t = () => n, x = /* @__PURE__ */ s(t())({
+}), t = () => n, O = /* @__PURE__ */ s(t())({
   name: "MuteIcon",
   class: "musmi9a",
   propsAsIs: !0
-}), e = () => n, B = /* @__PURE__ */ s(e())({
+}), e = () => n, S = /* @__PURE__ */ s(e())({
   name: "PauseIcon",
   class: "p1qe7rum",
   propsAsIs: !0
-}), c = () => n, d = /* @__PURE__ */ s(c())({
+}), c = () => n, W = /* @__PURE__ */ s(c())({
   name: "PlayIcon",
   class: "psevery",
   propsAsIs: !0
-}), o = /* @__PURE__ */ s("button")({
+}), a = /* @__PURE__ */ s("button")({
   name: "WebOSIconButton",
   class: "w1q3u7py",
   propsAsIs: !1
-}), a = () => o, O = /* @__PURE__ */ s(a())({
-  name: "WebOSIconButtonPlay",
+}), p = () => a, o = /* @__PURE__ */ s(p())({
+  name: "WebOSIconButtonAnimation",
   class: "wdlqvum",
   propsAsIs: !0
-}), p = () => o, S = /* @__PURE__ */ s(p())({
-  name: "WebOSIconButtonPause",
+}), l = () => o, d = /* @__PURE__ */ s(l())({
+  name: "WebOSIconButtonPlay",
   class: "w1ylz9ea",
   propsAsIs: !0
-}), l = () => o, W = /* @__PURE__ */ s(l())({
-  name: "WebOSIconButtonMute",
+}), r = () => o, C = /* @__PURE__ */ s(r())({
+  name: "WebOSIconButtonPause",
   class: "w1iylt55",
   propsAsIs: !0
-}), r = () => o, C = /* @__PURE__ */ s(r())({
-  name: "WebOSIconButtonUnmute",
+}), u = () => o, f = /* @__PURE__ */ s(u())({
+  name: "WebOSIconButtonMute",
   class: "w8h4h7",
   propsAsIs: !0
+}), I = () => o, v = /* @__PURE__ */ s(I())({
+  name: "WebOSIconButtonUnmute",
+  class: "w12l12kt",
+  propsAsIs: !0
 });
 export {
-  I as Container,
-  A as Control,
+  i as Container,
+  B as Control,
   y as HideControls,
-  x as MuteIcon,
-  B as PauseIcon,
-  d as PlayIcon,
-  m as Player,
+  O as MuteIcon,
+  S as PauseIcon,
+  W as PlayIcon,
+  A as Player,
   b as Poster,
-  i as ToggleIconPause,
+  x as ToggleIconPause,
   P as VideoControls,
-  W as WebOSIconButtonMute,
-  S as WebOSIconButtonPause,
-  O as WebOSIconButtonPlay,
-  C as WebOSIconButtonUnmute
+  a as WebOSIconButton,
+  f as WebOSIconButtonMute,
+  C as WebOSIconButtonPause,
+  d as WebOSIconButtonPlay,
+  v as WebOSIconButtonUnmute
 };