@streamlayer/react 1.23.0 → 1.23.2

package/lib/es/index13.js

@@ -1,87 +1,321 @@
-import { jsx as n } from "react/jsx-runtime";
-import { d as x } from "./index14.js";
-import { useEffect as h, useState as d, useCallback as p } from "react";
-import { s as f, N as O, I as k, O as y, S as E } from "./sl-types.js";
-import { CountdownCircleTimer as g } from "react-countdown-circle-timer";
-import { B as P } from "./index6.js";
-const v = (i) => {
-  const { Component: o, options: t, customOptions: s, autoFocus: r, ...l } = i, e = x.useFocusable({
-    ...t,
-    ...s,
-    onEnterPress: () => {
-      var a;
-      return (a = i.onClick) == null ? void 0 : a.call(i, { currentTarget: e.ref.current, stopPropagation: () => {
-      } });
-    }
+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: false
+}), h = /* @__PURE__ */ styled_default("div")({
+  name: "TimerWrap",
+  class: "teuhmro",
+  propsAsIs: false
+}), A$1 = () => B1, C$1 = /* @__PURE__ */ styled_default(A$1())({
+  name: "Icon",
+  class: "i17rfxv5",
+  propsAsIs: true
+}), y$1 = ({
+  close: r2,
+  className: a2,
+  timerClassName: m,
+  skipIcon: o2,
+  isPlaying: c2 = true,
+  duration: e2 = 0,
+  autoClose: n2
+}) => {
+  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: r2,
+    className: a2,
+    style: o2 ? {
+      width: "auto"
+    } : {},
+    children: [o2 && /* @__PURE__ */ jsx("span", {
+      "data-a": "intr",
+      children: "Skip"
+    }), /* @__PURE__ */ jsx(C$1, {
+      "data-a": "intr",
+      name: o2 ? "iconSkip" : "icon-cross"
+    })]
+  }) : /* @__PURE__ */ jsx(h, {
+    children: /* @__PURE__ */ jsx(G, {
+      className: m,
+      isPlaying: c2,
+      duration: e2,
+      onTimerExpired: l2
+    })
   });
-  return h(() => {
-    r && e.focusSelf();
-  }, []), /* @__PURE__ */ n(o, { ...l, ...e, "data-is-with-focus": "true" });
 };
-function B(i, o) {
-  return ({ webos: t, options: s, ...r }) => t ? /* @__PURE__ */ n(v, { Component: i, options: o, customOptions: s, ...r }) : /* @__PURE__ */ n(i, { ...r });
+const i = /* @__PURE__ */ styled_default("div")({
+  name: "Container",
+  class: "c1bgb86j",
+  propsAsIs: false
+}), A = /* @__PURE__ */ styled_default("video")({
+  name: "Player",
+  class: "p6703cq",
+  propsAsIs: false
+}), b = /* @__PURE__ */ styled_default("img")({
+  name: "Poster",
+  class: "p12ow7zo",
+  propsAsIs: false
+}), B = /* @__PURE__ */ styled_default("div")({
+  name: "Control",
+  class: "cdpal9o",
+  propsAsIs: false
+}), x = "t1xke4ml", y = "h1yzxv57", P = /* @__PURE__ */ styled_default("div")({
+  name: "VideoControls",
+  class: "vxo8xch",
+  propsAsIs: false
+}), n = /* @__PURE__ */ styled_default("button")({
+  name: "ControlBtn",
+  class: "coyuzu0",
+  propsAsIs: false
+}), t = () => n, O = /* @__PURE__ */ styled_default(t())({
+  name: "MuteIcon",
+  class: "musmi9a",
+  propsAsIs: true
+}), e = () => n, S = /* @__PURE__ */ styled_default(e())({
+  name: "PauseIcon",
+  class: "p1qe7rum",
+  propsAsIs: true
+}), c = () => n, W = /* @__PURE__ */ styled_default(c())({
+  name: "PlayIcon",
+  class: "psevery",
+  propsAsIs: true
+}), a = /* @__PURE__ */ styled_default("button")({
+  name: "WebOSIconButton",
+  class: "w1q3u7py",
+  propsAsIs: false
+}), p = () => a, o = /* @__PURE__ */ styled_default(p())({
+  name: "WebOSIconButtonAnimation",
+  class: "wdlqvum",
+  propsAsIs: true
+}), l = () => o, d = /* @__PURE__ */ styled_default(l())({
+  name: "WebOSIconButtonPlay",
+  class: "w1ylz9ea",
+  propsAsIs: true
+}), r = () => o, C = /* @__PURE__ */ styled_default(r())({
+  name: "WebOSIconButtonPause",
+  class: "w1iylt55",
+  propsAsIs: true
+}), u = () => o, f = /* @__PURE__ */ styled_default(u())({
+  name: "WebOSIconButtonMute",
+  class: "w8h4h7",
+  propsAsIs: true
+}), I = () => o, v = /* @__PURE__ */ styled_default(I())({
+  name: "WebOSIconButtonUnmute",
+  class: "w12l12kt",
+  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 yt(...r2) {
+  return useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (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
+    [...r2]
+  );
 }
-const w = [10, 10, 1, 0], I = /* @__PURE__ */ f("div")({
-  name: "RemainingTimeCircle",
-  class: "r165427",
-  propsAsIs: !1
-}), S = /* @__PURE__ */ f("div")({
-  name: "RemainingTime",
-  class: "r17garf3",
-  propsAsIs: !1
-}), b = y, c = O, u = E, F = ({
-  className: i,
-  duration: o = 30,
-  onTimerExpired: t,
-  isPlaying: s = !0
-}) => /* @__PURE__ */ n(g, {
-  isPlaying: s,
-  strokeWidth: 0,
-  duration: o,
-  colors: c,
-  size: 24,
-  onComplete: t,
-  children: ({
-    remainingTime: r
-  }) => /* @__PURE__ */ n(S, {
-    className: i,
-    children: o === 0 ? 0 : r
-  })
-}), j = ({
-  isPlaying: i = !0,
-  duration: o = 30,
-  onTimerExpired: t
-}) => {
-  const [s, r] = d(o > 10 ? b : c), [l, e] = d(2);
-  h(() => {
-    o === 0 && (e(0), r(u));
-  }, [o]);
-  const a = ({
-    remainingTime: m
-  }) => /* @__PURE__ */ n(I, {
-    children: o === 0 ? 0 : m
-  }), C = p(() => {
-    t == null || t(), r(u);
-  }, [t, r]), T = p((m) => {
-    m === 10 && r(c);
-  }, [r]);
-  return /* @__PURE__ */ n(g, {
-    isPlaying: i,
-    duration: o,
-    colors: k,
-    colorsTime: w,
-    size: 32,
-    strokeWidth: l,
-    trailStrokeWidth: 2,
-    trailColor: s,
-    onComplete: C,
-    onUpdate: T,
-    children: a
-  });
-}, G = ({ height: i = "37px", width: o = "37px" }) => /* @__PURE__ */ n("div", { style: { height: i, width: o }, children: /* @__PURE__ */ n(P, { name: "loader" }) });
+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: 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);
+      },
+      [q]
+    );
+    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 a2 = n2 == null ? void 0 : n2.current;
+          if (!a2)
+            return;
+          wt(), a2.play().catch((rt) => console.log(rt)), H(false);
+        }
+    }, et = () => {
+      var t2;
+      (t2 = n2 == null ? void 0 : n2.current) == null || t2.load(), H(true);
+    };
+    return useEffect(() => () => {
+      C2();
+    }, [C2]), useEffect(() => {
+      const t2 = n2.current;
+      return t2 ? (E.current = t2.muted, U(t2.muted), Bt(t2), () => {
+        Ot(t2);
+      }) : () => {
+      };
+    }, []), useEffect(() => {
+      p2 == null || p2();
+    }, [p2]), useEffect(() => {
+      m.current.clear(), x$1.current = false;
+    }, [s]), /* @__PURE__ */ jsxs(
+      Lt,
+      {
+        webos: T,
+        onClick: v2 && S2 ? A$12 ? L : I2 : Z,
+        "data-a": "intr",
+        autoFocus: true,
+        options: { focusKey: "video-play-btn" },
+        className: cx_default(W2 && !T && x, v2 && y, K),
+        style: c2 ? { aspectRatio: c2 } : {},
+        children: [
+          /* @__PURE__ */ jsx(
+            A,
+            {
+              ref: Q,
+              src: s,
+              autoPlay: v2,
+              onPlay: () => {
+                G2(true), x$1.current && (f2 == null || f2(), m.current.clear()), k(true), H(false), d2 == null || d2(), S2 ? I2() : Y();
+              },
+              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: (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 (t2) => {
+                try {
+                  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 (o2) {
+                  console.error("video fallback fetch failed", o2), k(true), H(true);
+                } finally {
+                  J(false), C2();
+                }
+              },
+              onPause: () => {
+                k(false), h2 == null || h2(), C2();
+              },
+              onEnded: () => {
+                k(false), x$1.current = true, et(), l2 == null || l2(), C2();
+              },
+              style: { visibility: X ? "hidden" : "visible" },
+              controls: false,
+              playsInline: true
+            }
+          ),
+          /* @__PURE__ */ jsx(b, { src: r2, style: { visibility: X ? "visible" : "hidden" } }),
+          !T && /* @__PURE__ */ jsx(
+            Pt,
+            {
+              loading: j,
+              autoPlay: v2,
+              played: z,
+              playing: W2,
+              isMuted: A$12,
+              unmute: L,
+              mute: I2,
+              togglePlaying: Z
+            }
+          ),
+          T && /* @__PURE__ */ jsx(
+            Tt,
+            {
+              loading: j,
+              autoPlay: v2,
+              playMuted: S2,
+              playing: W2,
+              played: z,
+              unmute: L,
+              mute: I2,
+              isMuted: A$12,
+              hasNotPausedVideo: V,
+              hasInteractedWithAudio: q
+            }
+          ),
+          j && /* @__PURE__ */ jsx(B, { children: /* @__PURE__ */ jsx(d$1, {}) })
+        ]
+      }
+    );
+  }
+);
 export {
-  F as G,
-  j as L,
-  B as O,
-  G as d
+  Et as E,
+  wt as w,
+  y$1 as y
 };