@streamlayer/react 1.23.1 → 1.23.2

package/lib/es/index13.js

@@ -1,319 +1,321 @@
-import { jsxs as S, jsx as e, Fragment as re } from "react/jsx-runtime";
-import { s as o, c as X } from "./sl-types.js";
-import { useState as I, useEffect as b, useCallback as w, forwardRef as ce, useRef as L } from "react";
-import { B as f } from "./index6.js";
-import { G as ie, d as ue, O as de } from "./index14.js";
-import { C as pe } from "./useStreamLayerApp2.js";
-const me = /* @__PURE__ */ o("div")({
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { s as styled_default, c as cx_default } from "./sl-types.js";
+import { useState, useEffect, useCallback, forwardRef, useRef } from "react";
+import { B as B1 } from "./index6.js";
+import { G, d as d$1, O as O$1 } from "./index14.js";
+import { C as CloseTimerAuto } from "./useStreamLayerApp2.js";
+const g = /* @__PURE__ */ styled_default("div")({
   name: "CloseIconWrap",
   class: "c3v6bv6",
-  propsAsIs: !1
-}), ye = /* @__PURE__ */ o("div")({
+  propsAsIs: false
+}), h = /* @__PURE__ */ styled_default("div")({
   name: "TimerWrap",
   class: "teuhmro",
-  propsAsIs: !1
-}), he = () => f, fe = /* @__PURE__ */ o(he())({
+  propsAsIs: false
+}), A$1 = () => B1, C$1 = /* @__PURE__ */ styled_default(A$1())({
   name: "Icon",
   class: "i17rfxv5",
-  propsAsIs: !0
-}), Ye = ({
-  close: n,
-  className: a,
-  timerClassName: s,
-  skipIcon: l,
-  isPlaying: u = !0,
-  duration: i = 0,
-  autoClose: d
+  propsAsIs: true
+}), y$1 = ({
+  close: r2,
+  className: a2,
+  timerClassName: m,
+  skipIcon: o2,
+  isPlaying: c2 = true,
+  duration: e2 = 0,
+  autoClose: n2
 }) => {
-  const [p, m] = I(i === 0);
-  b(() => {
-    m(!i);
-  }, [i]);
-  const P = w(() => {
-    d === pe.ENABLED ? n == null || n() : m(!0);
-  }, [d, n]);
-  return p ? /* @__PURE__ */ S(me, {
+  const [p2, i2] = useState(e2 === 0);
+  useEffect(() => {
+    i2(!e2);
+  }, [e2]);
+  const l2 = useCallback(() => {
+    n2 === CloseTimerAuto.ENABLED ? r2 == null || r2() : i2(true);
+  }, [n2, r2]);
+  return p2 ? /* @__PURE__ */ jsxs(g, {
     "data-a": "intr",
-    onClick: n,
-    className: a,
-    style: l ? {
+    onClick: r2,
+    className: a2,
+    style: o2 ? {
       width: "auto"
     } : {},
-    children: [l && /* @__PURE__ */ e("span", {
+    children: [o2 && /* @__PURE__ */ jsx("span", {
       "data-a": "intr",
       children: "Skip"
-    }), /* @__PURE__ */ e(fe, {
+    }), /* @__PURE__ */ jsx(C$1, {
       "data-a": "intr",
-      name: l ? "iconSkip" : "icon-cross"
+      name: o2 ? "iconSkip" : "icon-cross"
     })]
-  }) : /* @__PURE__ */ e(ye, {
-    children: /* @__PURE__ */ e(ie, {
-      className: s,
-      isPlaying: u,
-      duration: i,
-      onTimerExpired: P
+  }) : /* @__PURE__ */ jsx(h, {
+    children: /* @__PURE__ */ jsx(G, {
+      className: m,
+      isPlaying: c2,
+      duration: e2,
+      onTimerExpired: l2
     })
   });
-}, ge = /* @__PURE__ */ o("div")({
+};
+const i = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "c1bgb86j",
-  propsAsIs: !1
-}), Ie = /* @__PURE__ */ o("video")({
+  propsAsIs: false
+}), A = /* @__PURE__ */ styled_default("video")({
   name: "Player",
   class: "p6703cq",
-  propsAsIs: !1
-}), be = /* @__PURE__ */ o("img")({
+  propsAsIs: false
+}), b = /* @__PURE__ */ styled_default("img")({
   name: "Poster",
   class: "p12ow7zo",
-  propsAsIs: !1
-}), R = /* @__PURE__ */ o("div")({
+  propsAsIs: false
+}), B = /* @__PURE__ */ styled_default("div")({
   name: "Control",
   class: "cdpal9o",
-  propsAsIs: !1
-}), Pe = "t1xke4ml", ve = "h1yzxv57", Ae = /* @__PURE__ */ o("div")({
+  propsAsIs: false
+}), x = "t1xke4ml", y = "h1yzxv57", P = /* @__PURE__ */ styled_default("div")({
   name: "VideoControls",
   class: "vxo8xch",
-  propsAsIs: !1
-}), $ = /* @__PURE__ */ o("button")({
+  propsAsIs: false
+}), n = /* @__PURE__ */ styled_default("button")({
   name: "ControlBtn",
   class: "coyuzu0",
-  propsAsIs: !1
-}), Ce = () => $, we = /* @__PURE__ */ o(Ce())({
+  propsAsIs: false
+}), t = () => n, O = /* @__PURE__ */ styled_default(t())({
   name: "MuteIcon",
   class: "musmi9a",
-  propsAsIs: !0
-}), Me = () => $, ke = /* @__PURE__ */ o(Me())({
+  propsAsIs: true
+}), e = () => n, S = /* @__PURE__ */ styled_default(e())({
   name: "PauseIcon",
   class: "p1qe7rum",
-  propsAsIs: !0
-}), Ee = () => $, xe = /* @__PURE__ */ o(Ee())({
+  propsAsIs: true
+}), c = () => n, W = /* @__PURE__ */ styled_default(c())({
   name: "PlayIcon",
   class: "psevery",
-  propsAsIs: !0
-}), Y = /* @__PURE__ */ o("button")({
+  propsAsIs: true
+}), a = /* @__PURE__ */ styled_default("button")({
   name: "WebOSIconButton",
   class: "w1q3u7py",
-  propsAsIs: !1
-}), Be = () => Y, T = /* @__PURE__ */ o(Be())({
+  propsAsIs: false
+}), p = () => a, o = /* @__PURE__ */ styled_default(p())({
   name: "WebOSIconButtonAnimation",
   class: "wdlqvum",
-  propsAsIs: !0
-}), Oe = () => T, We = /* @__PURE__ */ o(Oe())({
+  propsAsIs: true
+}), l = () => o, d = /* @__PURE__ */ styled_default(l())({
   name: "WebOSIconButtonPlay",
   class: "w1ylz9ea",
-  propsAsIs: !0
-}), Ne = () => T, Ve = /* @__PURE__ */ o(Ne())({
+  propsAsIs: true
+}), r = () => o, C = /* @__PURE__ */ styled_default(r())({
   name: "WebOSIconButtonPause",
   class: "w1iylt55",
-  propsAsIs: !0
-}), Le = () => T, Re = /* @__PURE__ */ o(Le())({
+  propsAsIs: true
+}), u = () => o, f = /* @__PURE__ */ styled_default(u())({
   name: "WebOSIconButtonMute",
   class: "w8h4h7",
-  propsAsIs: !0
-}), Se = () => T, Te = /* @__PURE__ */ o(Se())({
+  propsAsIs: true
+}), I = () => o, v = /* @__PURE__ */ styled_default(I())({
   name: "WebOSIconButtonUnmute",
   class: "w12l12kt",
-  propsAsIs: !0
-}), Ue = (n) => {
-  for (const a of n)
-    a.isIntersecting ? a.target instanceof HTMLVideoElement && a.target.autoplay && a.target.play() : a.target instanceof HTMLVideoElement && !a.target.paused && a.target.pause();
-}, Z = new IntersectionObserver(Ue, { threshold: 0.5 }), D = /* @__PURE__ */ new Set(), je = (n) => {
-  Z.observe(n), D.add(n);
-}, qe = (n) => {
-  Z.unobserve(n), D.delete(n);
-}, ze = () => {
-  for (const n of D)
-    n instanceof HTMLVideoElement && !n.paused && n.pause();
+  propsAsIs: true
+});
+const It = (r2) => {
+  for (const s of r2)
+    s.isIntersecting ? s.target instanceof HTMLVideoElement && s.target.autoplay && s.target.play() : s.target instanceof HTMLVideoElement && !s.target.paused && s.target.pause();
+}, $ = new IntersectionObserver(It, { threshold: 0.5 }), D = /* @__PURE__ */ new Set(), Bt = (r2) => {
+  $.observe(r2), D.add(r2);
+}, Ot = (r2) => {
+  $.unobserve(r2), D.delete(r2);
+}, wt = () => {
+  for (const r2 of D)
+    r2 instanceof HTMLVideoElement && !r2.paused && r2.pause();
 };
-function He(...n) {
-  return w(
+function yt(...r2) {
+  return useCallback(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (a) => {
-      for (const s of n)
-        s !== null && (typeof s == "function" ? s(a) : s && (s.current = a));
+    (s) => {
+      for (const c2 of r2)
+        c2 !== null && (typeof c2 == "function" ? c2(s) : c2 && (c2.current = s));
     },
     // Re-run the callback if the array of refs changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [...n]
+    [...r2]
   );
 }
-const $e = de(ge), De = ({ loading: n, autoPlay: a, played: s, playing: l, isMuted: u, unmute: i, mute: d, togglePlaying: p }) => !n && !a && !s ? /* @__PURE__ */ e(R, { children: l ? /* @__PURE__ */ e(f, { name: "icon-pause" }) : /* @__PURE__ */ e(f, { name: "icon-play" }) }) : s ? /* @__PURE__ */ S(Ae, { children: [
-  l ? /* @__PURE__ */ e(ke, { onClick: p }) : /* @__PURE__ */ e(xe, { onClick: p }),
-  /* @__PURE__ */ e(we, { className: X(!u && "muted"), onClick: u ? i : d })
-] }) : null, Fe = ({
-  loading: n,
-  autoPlay: a,
-  playMuted: s,
-  playing: l,
-  played: u,
-  unmute: i,
-  mute: d,
-  isMuted: p,
-  hasNotPausedVideo: m,
-  hasInteractedWithAudio: P
-}) => /* @__PURE__ */ S(re, { children: [
-  !n && !(a && s) && /* @__PURE__ */ e(R, { "data-control-btn": "true", children: l ? m ? null : /* @__PURE__ */ e(We, { children: /* @__PURE__ */ e(f, { name: "icon-play" }) }) : u ? /* @__PURE__ */ e(Ve, { children: /* @__PURE__ */ e(f, { name: "icon-pause" }) }) : /* @__PURE__ */ e(Y, { "data-control-icon": "true", children: /* @__PURE__ */ e(f, { name: "icon-play" }) }) }),
-  !n && a && s && P && /* @__PURE__ */ e(R, { children: p ? /* @__PURE__ */ e(Re, { onClick: i, children: /* @__PURE__ */ e(f, { name: "iconMute" }) }) : /* @__PURE__ */ e(Te, { onClick: d, children: /* @__PURE__ */ e(f, { name: "iconUnMute" }) }) })
-] }), Ze = ce(
+const Lt = O$1(i), Pt = ({ loading: r2, autoPlay: s, played: c2, playing: i2, isMuted: f2, unmute: d2, mute: h2, togglePlaying: l2 }) => !r2 && !s && !c2 ? /* @__PURE__ */ jsx(B, { children: i2 ? /* @__PURE__ */ jsx(B1, { name: "icon-pause" }) : /* @__PURE__ */ jsx(B1, { name: "icon-play" }) }) : c2 ? /* @__PURE__ */ jsxs(P, { children: [
+  i2 ? /* @__PURE__ */ jsx(S, { onClick: l2 }) : /* @__PURE__ */ jsx(W, { onClick: l2 }),
+  /* @__PURE__ */ jsx(O, { className: cx_default(!f2 && "muted"), onClick: f2 ? d2 : h2 })
+] }) : null, Tt = ({
+  loading: r2,
+  autoPlay: s,
+  playMuted: c2,
+  playing: i2,
+  played: f$1,
+  unmute: d$12,
+  mute: h2,
+  isMuted: l2,
+  hasNotPausedVideo: p2,
+  hasInteractedWithAudio: w
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  !r2 && !(s && c2) && /* @__PURE__ */ jsx(B, { "data-control-btn": "true", children: i2 ? p2 ? null : /* @__PURE__ */ jsx(d, { children: /* @__PURE__ */ jsx(B1, { name: "icon-play" }) }) : f$1 ? /* @__PURE__ */ jsx(C, { children: /* @__PURE__ */ jsx(B1, { name: "icon-pause" }) }) : /* @__PURE__ */ jsx(a, { "data-control-icon": "true", children: /* @__PURE__ */ jsx(B1, { name: "icon-play" }) }) }),
+  !r2 && s && c2 && w && /* @__PURE__ */ jsx(B, { children: l2 ? /* @__PURE__ */ jsx(f, { onClick: d$12, children: /* @__PURE__ */ jsx(B1, { name: "iconMute" }) }) : /* @__PURE__ */ jsx(v, { onClick: h2, children: /* @__PURE__ */ jsx(B1, { name: "iconUnMute" }) }) })
+] }), Et = forwardRef(
   ({
-    poster: n,
-    source: a,
-    aspectRatio: s,
-    controlVideo: l,
-    onReplay: u,
-    onPlay: i,
-    onPause: d,
-    onEnd: p,
-    onRender: m,
-    onMute: P,
-    onQuartile: v,
-    autoPlay: M,
-    playMuted: k,
-    className: ee,
-    muted: E,
-    webos: B,
-    hasNotPausedVideo: ne
-  }, te) => {
-    const c = L(null), ae = He(c, te), U = L(!1), j = L(!1), y = L(/* @__PURE__ */ new Set()), [F, G] = I(!1), [O, W] = I(!1), [q, Q] = I(!1), [_, N] = I(!0), [z, V] = I(k), [H, oe] = I(!1);
-    b(() => {
-      a && (V(k), G(!1));
-    }, [a]);
-    const A = w(() => {
-      l == null || l({ muted: !1 });
-    }, [l]), J = w(() => {
-      l == null || l({ muted: !0 });
-    }, [l]), C = w((t) => {
-      t == null || t.stopPropagation(), c.current && (c.current.muted = !0), V(!0);
-    }, []), x = w(
-      (t) => {
-        t == null || t.stopPropagation(), c.current && (c.current.muted = !1), V(!1), H || oe(!0);
+    poster: r2,
+    source: s,
+    aspectRatio: c2,
+    controlVideo: i2,
+    onReplay: f2,
+    onPlay: d2,
+    onPause: h2,
+    onEnd: l2,
+    onRender: p2,
+    onMute: w,
+    onQuartile: u2,
+    autoPlay: v2,
+    playMuted: S2,
+    className: K,
+    muted: y$12,
+    webos: T,
+    hasNotPausedVideo: V
+  }, R) => {
+    const n2 = useRef(null), Q = yt(n2, R), x$1 = useRef(false), E = useRef(false), m = useRef(/* @__PURE__ */ new Set()), [z, G2] = useState(false), [W2, k] = useState(false), [j, J] = useState(false), [X, H] = useState(true), [A$12, U] = useState(S2), [q, tt] = useState(false);
+    useEffect(() => {
+      s && (U(S2), G2(false));
+    }, [s]);
+    const C2 = useCallback(() => {
+      i2 == null || i2({ muted: false });
+    }, [i2]), Y = useCallback(() => {
+      i2 == null || i2({ muted: true });
+    }, [i2]), I2 = useCallback((t2) => {
+      t2 == null || t2.stopPropagation(), n2.current && (n2.current.muted = true), U(true);
+    }, []), L = useCallback(
+      (t2) => {
+        t2 == null || t2.stopPropagation(), n2.current && (n2.current.muted = false), U(false), q || tt(true);
       },
-      [H]
+      [q]
     );
-    b(() => {
-      E !== void 0 && (E ? C() : x());
-    }, [C, E, x]);
-    const K = (t) => {
-      var r;
-      (r = t.stopPropagation) == null || r.call(t);
-      const g = c == null ? void 0 : c.current;
-      if (g)
-        if (O)
-          g.pause();
+    useEffect(() => {
+      y$12 !== void 0 && (y$12 ? I2() : L());
+    }, [I2, y$12, L]);
+    const Z = (t2) => {
+      var b2;
+      (b2 = t2.stopPropagation) == null || b2.call(t2);
+      const o2 = n2 == null ? void 0 : n2.current;
+      if (o2)
+        if (W2)
+          o2.pause();
         else {
-          const h = c == null ? void 0 : c.current;
-          if (!h)
+          const a2 = n2 == null ? void 0 : n2.current;
+          if (!a2)
             return;
-          ze(), h.play().catch((le) => console.log(le)), N(!1);
+          wt(), a2.play().catch((rt) => console.log(rt)), H(false);
         }
-    }, se = () => {
-      var t;
-      (t = c == null ? void 0 : c.current) == null || t.load(), N(!0);
+    }, et = () => {
+      var t2;
+      (t2 = n2 == null ? void 0 : n2.current) == null || t2.load(), H(true);
     };
-    return b(() => () => {
-      A();
-    }, [A]), b(() => {
-      const t = c.current;
-      return t ? (j.current = t.muted, V(t.muted), je(t), () => {
-        qe(t);
+    return useEffect(() => () => {
+      C2();
+    }, [C2]), useEffect(() => {
+      const t2 = n2.current;
+      return t2 ? (E.current = t2.muted, U(t2.muted), Bt(t2), () => {
+        Ot(t2);
       }) : () => {
       };
-    }, []), b(() => {
-      m == null || m();
-    }, [m]), b(() => {
-      y.current.clear(), U.current = !1;
-    }, [a]), /* @__PURE__ */ S(
-      $e,
+    }, []), useEffect(() => {
+      p2 == null || p2();
+    }, [p2]), useEffect(() => {
+      m.current.clear(), x$1.current = false;
+    }, [s]), /* @__PURE__ */ jsxs(
+      Lt,
       {
-        webos: B,
-        onClick: M && k ? z ? x : C : K,
+        webos: T,
+        onClick: v2 && S2 ? A$12 ? L : I2 : Z,
         "data-a": "intr",
-        autoFocus: !0,
+        autoFocus: true,
         options: { focusKey: "video-play-btn" },
-        className: X(O && !B && Pe, M && ve, ee),
-        style: s ? { aspectRatio: s } : {},
+        className: cx_default(W2 && !T && x, v2 && y, K),
+        style: c2 ? { aspectRatio: c2 } : {},
         children: [
-          /* @__PURE__ */ e(
-            Ie,
+          /* @__PURE__ */ jsx(
+            A,
             {
-              ref: ae,
-              src: a,
-              autoPlay: M,
+              ref: Q,
+              src: s,
+              autoPlay: v2,
               onPlay: () => {
-                G(!0), U.current && (u == null || u(), y.current.clear()), W(!0), N(!1), i == null || i(), k ? C() : J();
+                G2(true), x$1.current && (f2 == null || f2(), m.current.clear()), k(true), H(false), d2 == null || d2(), S2 ? I2() : Y();
               },
-              onTimeUpdate: (t) => {
-                const r = t.target.duration, g = t.target.currentTime;
-                if (r && g) {
-                  const h = Math.floor(g / r * 100);
-                  h >= 25 && h < 50 && !y.current.has(25) ? (v == null || v(25), y.current.add(25)) : h >= 50 && h < 75 && !y.current.has(50) ? (v == null || v(50), y.current.add(50)) : h >= 75 && !y.current.has(75) && (v == null || v(75), y.current.add(75));
+              onTimeUpdate: (t2) => {
+                const o2 = t2.target.duration, b2 = t2.target.currentTime;
+                if (o2 && b2) {
+                  const a2 = Math.floor(b2 / o2 * 100);
+                  a2 >= 25 && a2 < 50 && !m.current.has(25) ? (u2 == null || u2(25), m.current.add(25)) : a2 >= 50 && a2 < 75 && !m.current.has(50) ? (u2 == null || u2(50), m.current.add(50)) : a2 >= 75 && !m.current.has(75) && (u2 == null || u2(75), m.current.add(75));
                 }
               },
-              onVolumeChange: (t) => {
-                const r = t.target.muted;
-                j.current !== r && (P == null || P(r), j.current = r, (r !== E || E === void 0) && (r ? A() : J()));
+              onVolumeChange: (t2) => {
+                const o2 = t2.target.muted;
+                E.current !== o2 && (w == null || w(o2), E.current = o2, (o2 !== y$12 || y$12 === void 0) && (o2 ? C2() : Y()));
               },
-              onError: async (t) => {
+              onError: async (t2) => {
                 try {
-                  if (t.target instanceof HTMLVideoElement) {
-                    Q(!0);
-                    const r = await (await fetch(t.target.src)).blob(), g = URL.createObjectURL(r);
-                    t.target.src = g;
+                  if (t2.target instanceof HTMLVideoElement) {
+                    J(true);
+                    const b2 = await (await fetch(t2.target.src)).blob(), a2 = URL.createObjectURL(b2);
+                    t2.target.src = a2;
                   }
-                } catch (r) {
-                  console.error("video fallback fetch failed", r), W(!0), N(!0);
+                } catch (o2) {
+                  console.error("video fallback fetch failed", o2), k(true), H(true);
                 } finally {
-                  Q(!1), A();
+                  J(false), C2();
                 }
               },
               onPause: () => {
-                W(!1), d == null || d(), A();
+                k(false), h2 == null || h2(), C2();
               },
               onEnded: () => {
-                W(!1), U.current = !0, se(), p == null || p(), A();
+                k(false), x$1.current = true, et(), l2 == null || l2(), C2();
               },
-              style: { visibility: _ ? "hidden" : "visible" },
-              controls: !1,
-              playsInline: !0
+              style: { visibility: X ? "hidden" : "visible" },
+              controls: false,
+              playsInline: true
             }
           ),
-          /* @__PURE__ */ e(be, { src: n, style: { visibility: _ ? "visible" : "hidden" } }),
-          !B && /* @__PURE__ */ e(
-            De,
+          /* @__PURE__ */ jsx(b, { src: r2, style: { visibility: X ? "visible" : "hidden" } }),
+          !T && /* @__PURE__ */ jsx(
+            Pt,
             {
-              loading: q,
-              autoPlay: M,
-              played: F,
-              playing: O,
-              isMuted: z,
-              unmute: x,
-              mute: C,
-              togglePlaying: K
+              loading: j,
+              autoPlay: v2,
+              played: z,
+              playing: W2,
+              isMuted: A$12,
+              unmute: L,
+              mute: I2,
+              togglePlaying: Z
             }
           ),
-          B && /* @__PURE__ */ e(
-            Fe,
+          T && /* @__PURE__ */ jsx(
+            Tt,
             {
-              loading: q,
-              autoPlay: M,
-              playMuted: k,
-              playing: O,
-              played: F,
-              unmute: x,
-              mute: C,
-              isMuted: z,
-              hasNotPausedVideo: ne,
-              hasInteractedWithAudio: H
+              loading: j,
+              autoPlay: v2,
+              playMuted: S2,
+              playing: W2,
+              played: z,
+              unmute: L,
+              mute: I2,
+              isMuted: A$12,
+              hasNotPausedVideo: V,
+              hasInteractedWithAudio: q
             }
           ),
-          q && /* @__PURE__ */ e(R, { children: /* @__PURE__ */ e(ue, {}) })
+          j && /* @__PURE__ */ jsx(B, { children: /* @__PURE__ */ jsx(d$1, {}) })
         ]
       }
     );
   }
 );
 export {
-  Ze as E,
-  ze as w,
-  Ye as y
+  Et as E,
+  wt as w,
+  y$1 as y
 };