@ssgc/hls-player 0.1.1

package/dist/index.es.js

@@ -0,0 +1,936 @@
+import { jsxs as C, jsx as b } from "react/jsx-runtime";
+import { useRef as k, useState as L, useEffect as x, useCallback as J, useMemo as ae } from "react";
+import { Pause as De, Play as Ie } from "lucide-react";
+import M from "hls.js";
+function Ne({
+  enabled: e,
+  label: r,
+  hint: n,
+  live: t = !1,
+  onGoLive: i
+}) {
+  return /* @__PURE__ */ C(
+    "button",
+    {
+      type: "button",
+      onClick: (a) => {
+        a.stopPropagation(), i();
+      },
+      onMouseDown: (a) => a.stopPropagation(),
+      disabled: !e,
+      title: n,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "5px 10px",
+        background: e && !t ? "rgba(211,47,47,0.85)" : "rgba(0,0,0,0.55)",
+        color: e ? "#fff" : "rgba(255,255,255,0.45)",
+        border: "1px solid rgba(255,255,255,0.22)",
+        borderRadius: 6,
+        cursor: e ? "pointer" : "default",
+        fontSize: 12,
+        fontWeight: 600,
+        letterSpacing: "0.02em",
+        whiteSpace: "nowrap",
+        backdropFilter: "blur(4px)",
+        WebkitBackdropFilter: "blur(4px)"
+      },
+      children: [
+        !t && /* @__PURE__ */ b(
+          "span",
+          {
+            style: {
+              width: 7,
+              height: 7,
+              borderRadius: "50%",
+              background: e ? "#fff" : "rgba(255,255,255,0.45)"
+            }
+          }
+        ),
+        r
+      ]
+    }
+  );
+}
+const Ae = [1, 2, 3, 5, 10], Be = 30, Fe = 600;
+function pe(e) {
+  return Math.min(Be * e, Fe);
+}
+const Ce = 60 * 1e3 * 1e3, Oe = 600 * 1e3 * 1e3;
+function ge(e) {
+  return Math.min(Ce * e, Oe);
+}
+const He = 5, se = 2, le = 250;
+function Ue(e) {
+  const r = e.currentTime;
+  for (let n = 0; n < e.buffered.length; n += 1)
+    if (e.buffered.start(n) <= r + 0.01 && r <= e.buffered.end(n))
+      return Math.max(0, e.buffered.end(n) - r);
+  return 0;
+}
+function me(e) {
+  return e.seekable.length === 0 ? null : e.seekable.end(e.seekable.length - 1);
+}
+function ce(e) {
+  const r = me(e);
+  return r === null ? null : Math.max(0, r - e.currentTime);
+}
+function V(e) {
+  const r = me(e);
+  r !== null && (e.currentTime = Math.max(0, r - 1));
+}
+function We() {
+  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
+function Q(e) {
+  if (!e || !isFinite(e) || e <= 0)
+    return "0:00";
+  const r = Math.floor(e), n = Math.floor(r / 60), t = r % 60;
+  return `${n}:${t.toString().padStart(2, "0")}`;
+}
+function ue(e) {
+  return `${e.replace(/#reload\d*$/, "")}#reload${Date.now()}`;
+}
+function $e(e) {
+  return e.replace(/#reload\d*$/, "");
+}
+const de = 300, je = 210;
+function ze({
+  videoRef: e,
+  isPlaying: r,
+  currentTime: n,
+  duration: t,
+  isLive: i,
+  goLive: l
+}) {
+  const a = k(null), [p, d] = L(0);
+  x(() => {
+    const u = a.current;
+    if (!u || typeof ResizeObserver > "u")
+      return;
+    const o = new ResizeObserver(([g]) => {
+      d(g.contentRect.width);
+    });
+    return o.observe(u), () => o.disconnect();
+  }, []);
+  const c = t > 0, f = p > 0, m = !f || p >= de, y = !f || p >= je, h = () => {
+    const u = e.current;
+    u && (u.paused ? u.play().catch(() => {
+    }) : u.pause());
+  }, S = (u) => {
+    const o = e.current;
+    !o || !isFinite(o.duration) || (o.currentTime = Math.max(0, Math.min(1, u)) * o.duration);
+  };
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      ref: a,
+      style: {
+        position: "absolute",
+        left: 12,
+        right: 12,
+        bottom: 12,
+        display: "flex",
+        alignItems: "center",
+        gap: f && p < de ? 8 : 12,
+        minWidth: 0,
+        pointerEvents: "auto"
+      },
+      children: [
+        /* @__PURE__ */ b(
+          "button",
+          {
+            type: "button",
+            onClick: (u) => {
+              u.stopPropagation(), h();
+            },
+            onMouseDown: (u) => u.stopPropagation(),
+            style: {
+              display: "flex",
+              flex: "0 0 auto",
+              background: "rgba(0,0,0,0.6)",
+              color: "#fff",
+              border: "none",
+              padding: "6px 10px",
+              borderRadius: 6,
+              cursor: "pointer"
+            },
+            "aria-label": r ? "Pause" : "Play",
+            title: r ? "Pause" : "Play",
+            children: r ? /* @__PURE__ */ b(De, { size: 16 }) : /* @__PURE__ */ b(Ie, { size: 16 })
+          }
+        ),
+        c ? /* @__PURE__ */ b(
+          "div",
+          {
+            onClick: (u) => {
+              u.stopPropagation();
+              const o = u.currentTarget.getBoundingClientRect();
+              S((u.clientX - o.left) / o.width);
+            },
+            onMouseDown: (u) => u.stopPropagation(),
+            onKeyDown: (u) => {
+              const o = e.current;
+              if (!o || !isFinite(o.duration))
+                return;
+              const g = o.duration > 0 ? o.duration * 0.02 : 5;
+              u.key === "ArrowRight" ? (u.stopPropagation(), o.currentTime = Math.min(
+                o.duration,
+                o.currentTime + g
+              )) : u.key === "ArrowLeft" && (u.stopPropagation(), o.currentTime = Math.max(0, o.currentTime - g));
+            },
+            role: "slider",
+            tabIndex: 0,
+            "aria-label": "Seek",
+            "aria-valuemin": 0,
+            "aria-valuemax": t,
+            "aria-valuenow": n,
+            style: {
+              // Basis of zero with no minimum, so the bar gives up its width to
+              // the buttons and the clock instead of pushing them off the edge.
+              flex: "1 1 0",
+              minWidth: 0,
+              height: 8,
+              background: "rgba(255,255,255,0.12)",
+              borderRadius: 6,
+              position: "relative",
+              overflow: "hidden",
+              cursor: "pointer"
+            },
+            title: "Seek",
+            children: /* @__PURE__ */ b(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  left: 0,
+                  top: 0,
+                  bottom: 0,
+                  // Live streams can report a position a shade past the duration;
+                  // clamped so the fill never runs past its track.
+                  width: `${t > 0 ? Math.min(100, Math.max(0, n / t * 100)) : 0}%`,
+                  background: "rgba(66,153,225,0.85)",
+                  borderRadius: 6
+                }
+              }
+            )
+          }
+        ) : /* @__PURE__ */ b("span", { style: { flex: "1 1 0", minWidth: 0 } }),
+        (y || !c && i) && /* @__PURE__ */ b(
+          "div",
+          {
+            style: {
+              flex: "0 0 auto",
+              color: "#fff",
+              fontSize: 12,
+              fontVariantNumeric: "tabular-nums",
+              whiteSpace: "nowrap"
+            },
+            children: c ? m ? `${Q(n)}` : Q(n) : i ? "Live" : Q(n)
+          }
+        ),
+        l && /* @__PURE__ */ b("div", { style: { display: "flex", flex: "0 0 auto" }, children: l })
+      ]
+    }
+  );
+}
+function Ge() {
+  return /* @__PURE__ */ C(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ b("path", { d: "M5 16a7 7 0 0 1 14 0" }),
+        /* @__PURE__ */ b("line", { x1: "12", y1: "16", x2: "9", y2: "9" }),
+        /* @__PURE__ */ b("circle", { cx: "12", cy: "16", r: "1.5", fill: "currentColor", stroke: "none" })
+      ]
+    }
+  );
+}
+function Xe({
+  speed: e,
+  setSpeed: r,
+  showSpeedMenu: n,
+  setShowSpeedMenu: t,
+  speedMenuRef: i,
+  options: l = Ae,
+  disabled: a = !1,
+  disabledHint: p = "Speed is not available on a live stream"
+}) {
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      ref: i,
+      style: { position: "absolute", top: 10, right: 10, zIndex: 2 },
+      onMouseDown: (d) => d.stopPropagation(),
+      children: [
+        /* @__PURE__ */ C(
+          "button",
+          {
+            type: "button",
+            onClick: (d) => {
+              d.stopPropagation(), t((c) => !c);
+            },
+            disabled: a,
+            title: a ? p : "Playback speed",
+            "aria-haspopup": "menu",
+            "aria-expanded": n && !a,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 5,
+              padding: "5px 10px",
+              background: "rgba(0,0,0,0.60)",
+              color: a ? "rgba(255,255,255,0.40)" : "#fff",
+              border: "1px solid rgba(255,255,255,0.22)",
+              borderRadius: 6,
+              cursor: a ? "default" : "pointer",
+              fontSize: 13,
+              fontWeight: 600,
+              backdropFilter: "blur(4px)",
+              WebkitBackdropFilter: "blur(4px)"
+            },
+            children: [
+              /* @__PURE__ */ b(Ge, {}),
+              e,
+              "×"
+            ]
+          }
+        ),
+        n && !a && /* @__PURE__ */ b(
+          "div",
+          {
+            role: "menu",
+            style: {
+              position: "absolute",
+              top: "calc(100% + 6px)",
+              right: 0,
+              background: "rgba(18,18,18,0.92)",
+              border: "1px solid rgba(255,255,255,0.14)",
+              borderRadius: 8,
+              padding: "4px 0",
+              minWidth: 90,
+              backdropFilter: "blur(10px)",
+              WebkitBackdropFilter: "blur(10px)",
+              boxShadow: "0 4px 16px rgba(0,0,0,0.45)"
+            },
+            children: l.map((d) => /* @__PURE__ */ C(
+              "button",
+              {
+                type: "button",
+                role: "menuitemradio",
+                "aria-checked": d === e,
+                onClick: (c) => {
+                  c.stopPropagation(), r(d), t(!1);
+                },
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  width: "100%",
+                  padding: "7px 14px",
+                  background: d === e ? "rgba(26,115,232,0.55)" : "transparent",
+                  border: "none",
+                  color: d === e ? "#fff" : "rgba(255,255,255,0.75)",
+                  fontWeight: d === e ? 700 : 400,
+                  fontSize: 13,
+                  cursor: "pointer",
+                  textAlign: "left"
+                },
+                children: [
+                  /* @__PURE__ */ b("span", { style: { width: 12, fontSize: 10, color: "#4caf50" }, children: d === e ? "✓" : "" }),
+                  d,
+                  "×"
+                ]
+              },
+              d
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+function Je({
+  src: e,
+  videoRef: r,
+  hlsRef: n,
+  engineRef: t,
+  speedRef: i,
+  applyPlaybackSpeed: l,
+  clearJumpScan: a,
+  autoPlay: p,
+  onError: d,
+  debug: c = !1
+}) {
+  const f = k(c);
+  f.current = c;
+  const m = (...s) => {
+    f.current && console.warn(...s);
+  }, y = (...s) => {
+    f.current && console.error(...s);
+  }, [h, S] = L(e ?? ""), [u, o] = L(null), [g, w] = L(null), _ = k(null), O = k(!1), P = k(d);
+  return P.current = d, x(() => {
+    S(e ?? "");
+  }, [e]), x(() => {
+    const s = r.current;
+    if (!s || !h)
+      return;
+    const N = (E) => {
+      _.current = E, o(E);
+    }, U = (E) => {
+      t.current = E, w(E);
+    };
+    N(null), t.current = null, w(null), a(), n.current && (n.current.destroy(), n.current = null);
+    const W = () => {
+      t.current === "Native HLS" && _.current === null && N(!isFinite(s.duration)), l(s, i.current);
+    };
+    s.addEventListener("loadedmetadata", W);
+    const H = () => {
+      s.removeEventListener("loadedmetadata", W);
+    }, $ = $e(h);
+    if (!O.current && We() && s.canPlayType("application/vnd.apple.mpegurl")) {
+      U("Native HLS"), s.src = $, s.playbackRate = i.current, s.play().catch(() => {
+      });
+      let E = 0, T = 0, D = 0;
+      const A = setInterval(() => {
+        s.paused || (s.currentTime === E && s.readyState >= 2 ? (T += 1, T >= 2 && (_.current === !0 ? (m("[HlsPlayer/Native] Stall — jumping to live edge"), V(s)) : m("[HlsPlayer/Native] Stall — resuming recorded playback"), s.playbackRate = i.current, s.play().catch(() => {
+        }), T = 0)) : T = 0, E = s.currentTime);
+      }, 3e3), B = () => {
+        if (s.error?.code === 4 && /empty src/i.test(s.error?.message || "")) {
+          m("[HlsPlayer/Native] Ignoring spurious empty-src error", s.error);
+          return;
+        }
+        if (D += 1, m("[HlsPlayer/Native] Media error", s.error), P.current?.(s.error), D > 5) {
+          m(
+            "[HlsPlayer/Native] Giving up after repeated errors — canPlayType claimed HLS support but playback never worked. Falling back to HLS.js."
+          ), O.current = !0, clearInterval(A), s.removeEventListener("error", B), S((F) => ue(F));
+          return;
+        }
+        const R = s.src;
+        s.src = "", setTimeout(() => {
+          s.src = R, _.current === !0 && V(s), s.playbackRate = i.current, s.play().catch(() => {
+          });
+        }, 1500);
+      };
+      return s.addEventListener("error", B), () => {
+        clearInterval(A), s.removeEventListener("error", B), H(), s.src = "";
+      };
+    }
+    if (M.isSupported()) {
+      U("HLS.js");
+      let E = 0, T = null;
+      const D = (F) => {
+        T || (m("[HlsPlayer/HLS.js] Hard reload:", F), T = setTimeout(() => {
+          T = null, S((v) => ue(v));
+        }, 1500));
+      }, A = pe(i.current), B = {
+        enableWorker: !0,
+        lowLatencyMode: !1,
+        liveSyncDurationCount: 3,
+        liveMaxLatencyDurationCount: 6,
+        fragLoadingMaxRetry: 2,
+        fragLoadingRetryDelay: 500,
+        fragLoadingMaxRetryTimeout: 4e3,
+        manifestLoadingMaxRetry: 3,
+        levelLoadingMaxRetry: 3,
+        maxBufferLength: A,
+        maxMaxBufferLength: A,
+        maxBufferSize: ge(i.current)
+      }, R = new M(B);
+      return n.current = R, R.loadSource($), R.attachMedia(s), R.on(M.Events.LEVEL_LOADED, (F, v) => {
+        N(v.details.live);
+      }), R.on(M.Events.MANIFEST_PARSED, () => {
+        l(s, i.current), p && s.play().catch(() => {
+        });
+      }), R.on(M.Events.ERROR, (F, v) => {
+        if ((v.details === M.ErrorDetails.FRAG_LOAD_ERROR || v.details === M.ErrorDetails.FRAG_LOAD_TIMEOUT) && !v.fatal) {
+          setTimeout(() => {
+            _.current === !0 && V(s), l(s, i.current), s.play().catch(() => {
+            });
+          }, 500);
+          return;
+        }
+        if (v.fatal)
+          switch (y("[HlsPlayer/HLS.js] Fatal error", v.type, v.details), P.current?.(v), v.type) {
+            case M.ErrorTypes.MEDIA_ERROR:
+              E < 3 ? (E += 1, R.recoverMediaError()) : D("repeated media errors");
+              break;
+            case M.ErrorTypes.NETWORK_ERROR:
+              v.details === M.ErrorDetails.MANIFEST_LOAD_ERROR || v.details === M.ErrorDetails.MANIFEST_LOAD_TIMEOUT ? D("manifest unreachable") : setTimeout(() => R.startLoad(), 2e3);
+              break;
+            default:
+              D("unrecoverable error");
+              break;
+          }
+      }), () => {
+        T && clearTimeout(T), a(), H(), R.destroy(), n.current = null;
+      };
+    }
+    return m("[HlsPlayer] HLS is not supported in this browser"), P.current?.(new Error("HLS playback is not supported in this browser.")), () => {
+      H();
+    };
+  }, [h]), { url: h, isLive: u, engine: g };
+}
+const he = 5, Ve = 1e3;
+function Ke(e, r, n = he) {
+  const [t, i] = L(null);
+  x(() => {
+    if (r !== !0) {
+      i(null);
+      return;
+    }
+    const a = () => {
+      const d = e.current;
+      i(d ? ce(d) : null);
+    };
+    a();
+    const p = setInterval(a, Ve);
+    return () => clearInterval(p);
+  }, [r, e]);
+  const l = J(() => {
+    const a = e.current;
+    a && (V(a), a.play().catch(() => {
+    }), i(ce(a)));
+  }, [e]);
+  return {
+    secondsBehind: t,
+    behindLiveEdge: t !== null && t > n,
+    goLive: l
+  };
+}
+function Ye(e, r, n) {
+  const t = k(n);
+  x(() => {
+    t.current = n;
+  }), x(() => {
+    if (!r)
+      return;
+    const i = (l) => {
+      e.current && !e.current.contains(l.target) && t.current();
+    };
+    return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
+  }, [r, e]);
+}
+function Ze({
+  videoRef: e,
+  hlsRef: r,
+  engineRef: n,
+  initialSpeed: t = 1,
+  onSpeedChange: i
+}) {
+  const [l, a] = L(t), [p, d] = L(!1), c = k(t), f = k(null), m = k(null), y = k(i);
+  y.current = i;
+  const h = J(() => {
+    m.current && (clearInterval(m.current), m.current = null);
+  }, []), S = J(
+    (o, g) => {
+      if (h(), n.current !== "HLS.js" || g < He) {
+        o.playbackRate = g;
+        return;
+      }
+      o.playbackRate = se;
+      const w = (g - se) * (le / 1e3);
+      m.current = setInterval(() => {
+        if (o.paused || o.seeking)
+          return;
+        const O = Math.max(0, Ue(o) - 2), P = Math.min(w, O);
+        if (P <= 0)
+          return;
+        const s = o.seekable.length > 0 ? o.seekable.end(o.seekable.length - 1) : o.duration, N = o.currentTime + P;
+        if (isFinite(s) && N >= s - 0.5) {
+          h();
+          return;
+        }
+        o.currentTime = N;
+      }, le);
+    },
+    [h, n]
+  ), u = J((o) => {
+    a(o);
+  }, []);
+  return x(() => {
+    c.current = l, y.current?.(l);
+  }, [l]), x(() => {
+    const o = e.current;
+    if (!o)
+      return;
+    S(o, l);
+    const g = r.current;
+    if (g) {
+      const w = pe(l);
+      g.config.maxBufferLength = w, g.config.maxMaxBufferLength = w, g.config.maxBufferSize = ge(l);
+    }
+    return () => h();
+  }, [l, S, h, r, e]), Ye(f, p, () => d(!1)), {
+    speed: l,
+    setSpeed: u,
+    showSpeedMenu: p,
+    setShowSpeedMenu: d,
+    speedMenuRef: f,
+    speedRef: c,
+    applyPlaybackSpeed: S,
+    clearJumpScan: h
+  };
+}
+const ee = 120, qe = /^#EXTINF:([\d.]+),?/, Qe = /seg_(\d{8})_(\d{6})_/;
+function et(e) {
+  const r = Qe.exec(e);
+  if (!r)
+    return null;
+  const [, n, t] = r, i = Number(n.slice(0, 4)), l = Number(n.slice(4, 6)), a = Number(n.slice(6, 8)), p = Number(t.slice(0, 2)), d = Number(t.slice(2, 4)), c = Number(t.slice(4, 6)), f = new Date(i, l - 1, a, p, d, c);
+  return Number.isNaN(f.getTime()) || f.getFullYear() !== i || f.getMonth() !== l - 1 || f.getDate() !== a || f.getHours() !== p || f.getMinutes() !== d || f.getSeconds() !== c ? null : f.getTime();
+}
+function tt(e) {
+  const r = (e ?? "").split(/\r?\n/).filter((a) => a.trim() !== ""), n = [], t = [];
+  let i = null, l = !1;
+  for (const a of r) {
+    const p = qe.exec(a);
+    if (p) {
+      l = !0, i = Number(p[1]);
+      continue;
+    }
+    if (a.startsWith("#")) {
+      l || n.push(a);
+      continue;
+    }
+    i !== null && (t.push({
+      durationSec: i,
+      uri: a,
+      timestamp: et(a)
+    }), i = null);
+  }
+  return { headerLines: n, segments: t };
+}
+function rt(e, r = ee) {
+  const n = [];
+  let t = [], i = 0;
+  for (const l of e)
+    t.push(l), i += l.durationSec, i >= r && (n.push(t), t = [], i = 0);
+  return t.length > 0 && n.push(t), n;
+}
+function nt(e, r) {
+  const n = [...e];
+  for (const t of r)
+    n.push(`#EXTINF:${t.durationSec},`, t.uri);
+  return n.push("#EXT-X-ENDLIST"), `${n.join(`
+`)}
+`;
+}
+const fe = (e) => e === null ? "--:--" : new Date(e).toTimeString().slice(0, 5);
+function ot(e, r = ee) {
+  return (e ?? []).flatMap((t, i) => {
+    const { spaceId: l, cameraId: a, feed: p } = t, { headerLines: d, segments: c } = tt(p);
+    return c.length === 0 ? [] : rt(c, r).map(
+      (f, m) => {
+        const y = f[0].timestamp, h = f.reduce(
+          (u, o) => u + o.durationSec,
+          0
+        ), S = y === null ? null : y + h * 1e3;
+        return {
+          // The result index is part of the id because one camera can appear
+          // in the response more than once, over different time ranges — and
+          // then space + camera + chunk index alone is not unique.
+          id: `${l}-${a}-${i}-${m}`,
+          spaceId: l,
+          cameraId: a,
+          startTime: y,
+          endTime: S,
+          durationSec: h,
+          startLabel: fe(y),
+          endLabel: fe(S),
+          segmentCount: f.length,
+          playlistText: nt(d, f)
+        };
+      }
+    );
+  }).sort((t, i) => t.startTime === null || i.startTime === null ? 0 : t.startTime - i.startTime);
+}
+function it(e) {
+  const r = new Blob([new TextEncoder().encode(e)], {
+    type: "application/vnd.apple.mpegurl"
+  });
+  return URL.createObjectURL(r);
+}
+function at(e, r) {
+  return e.length === 0 ? null : r == null ? e[0] : e.find(
+    (t) => t.startTime !== null && t.endTime !== null && r >= t.startTime && r < t.endTime
+  ) ?? e[0];
+}
+function st({
+  search: e,
+  at: r,
+  chunkSeconds: n = ee,
+  onError: t
+}) {
+  const [i, l] = L([]), [a, p] = L(!1), [d, c] = L(null), [f, m] = L(null), y = k(t);
+  y.current = t, x(() => {
+    if (!e) {
+      l([]), p(!1), c(null);
+      return;
+    }
+    let o = !0;
+    return p(!0), c(null), e().then((g) => {
+      o && l(Array.isArray(g) ? g : []);
+    }).catch((g) => {
+      o && (l([]), c(g), y.current?.(g));
+    }).finally(() => {
+      o && p(!1);
+    }), () => {
+      o = !1;
+    };
+  }, [e]);
+  const h = ae(
+    () => ot(i, n),
+    [i, n]
+  ), S = ae(() => at(h, r), [h, r]), u = S?.playlistText ?? null;
+  return x(() => {
+    if (u === null) {
+      m(null);
+      return;
+    }
+    const o = it(u);
+    return m(o), () => {
+      URL.revokeObjectURL(o), m(null);
+    };
+  }, [u]), { chunks: h, chunk: S, url: f, loading: a, error: d };
+}
+function lt(e, r, n) {
+  const [t, i] = L(n), [l, a] = L(0), [p, d] = L(0);
+  return x(() => {
+    const c = e.current;
+    if (!c)
+      return;
+    const f = () => a(c.currentTime || 0), m = () => d(isFinite(c.duration) ? c.duration : 0), y = () => i(!0), h = () => i(!1);
+    return c.addEventListener("timeupdate", f), c.addEventListener("loadedmetadata", m), c.addEventListener("playing", y), c.addEventListener("pause", h), a(c.currentTime || 0), d(isFinite(c.duration) ? c.duration : 0), () => {
+      c.removeEventListener("timeupdate", f), c.removeEventListener("loadedmetadata", m), c.removeEventListener("playing", y), c.removeEventListener("pause", h);
+    };
+  }, [r]), { isPlaying: t, currentTime: l, duration: p };
+}
+function gt({
+  src: e,
+  emptyMessage: r = "No video to display",
+  recordingSearch: n,
+  recordingAt: t,
+  recordingChunkSeconds: i,
+  onRecordingChunks: l,
+  loadingMessage: a = "Loading recording…",
+  autoPlay: p = !0,
+  muted: d = !0,
+  height: c = 480,
+  className: f,
+  showControls: m = !0,
+  showSpeedMenu: y = !0,
+  speedOptions: h,
+  initialSpeed: S = 1,
+  showGoLive: u = !1,
+  goLiveMode: o = "source",
+  goLiveLabel: g = "Go Live",
+  exitLiveLabel: w = "Back to recording",
+  onExitLive: _,
+  allowSpeedWhenLive: O = !1,
+  liveEdgeToleranceSeconds: P = he,
+  onGoLive: s,
+  onSpeedChange: N,
+  onError: U,
+  onLiveChange: W,
+  onEngineChange: H,
+  debug: $ = !1
+}) {
+  const E = k(null), T = k(null), D = k(null), A = typeof e == "string" && e.trim() !== "", {
+    chunks: B,
+    url: R,
+    loading: F
+  } = st({
+    search: A ? void 0 : n,
+    at: t,
+    chunkSeconds: i,
+    onError: U
+  }), v = k(l);
+  v.current = l, x(() => {
+    v.current?.(B);
+  }, [B]);
+  const j = A ? e : R ?? void 0, {
+    speed: be,
+    setSpeed: K,
+    showSpeedMenu: ye,
+    setShowSpeedMenu: Ee,
+    speedMenuRef: Se,
+    speedRef: Y,
+    applyPlaybackSpeed: ve,
+    clearJumpScan: ke
+  } = Ze({
+    videoRef: E,
+    hlsRef: T,
+    engineRef: D,
+    initialSpeed: S,
+    onSpeedChange: N
+  }), { url: xe, isLive: I, engine: te } = Je({
+    src: j,
+    videoRef: E,
+    hlsRef: T,
+    engineRef: D,
+    speedRef: Y,
+    applyPlaybackSpeed: ve,
+    clearJumpScan: ke,
+    autoPlay: p,
+    onError: U,
+    debug: $
+  }), { isPlaying: Le, currentTime: Te, duration: Re } = lt(
+    E,
+    xe,
+    p
+  ), { secondsBehind: re, behindLiveEdge: Me, goLive: we } = Ke(
+    E,
+    I,
+    P
+  ), ne = k(W);
+  ne.current = W, x(() => {
+    ne.current?.(I);
+  }, [I]);
+  const oe = k(H);
+  oe.current = H, x(() => {
+    oe.current?.(te);
+  }, [te]);
+  const Z = o === "source" && I === !0;
+  let z = !1, G = !1, X = g, ie = g;
+  u && (o === "source" ? Z ? (z = !!_, G = !0, ie = w, X = `${w} — leave the live stream`) : (z = !0, G = I === !1, X = I === null ? "Checking the stream…" : `${g} — switch to the live stream`) : (z = I === !0, G = Me, X = re === null ? g : `${g} — ${Math.round(re)}s behind`));
+  const _e = () => {
+    if (Z) {
+      _?.();
+      return;
+    }
+    o === "seek" && we(), s?.();
+  }, q = !O && I === !0;
+  return x(() => {
+    q && Y.current !== 1 && K(1);
+  }, [q, K, Y]), typeof j == "string" && j.trim() !== "" ? /* @__PURE__ */ C(
+    "div",
+    {
+      className: f,
+      style: { position: "relative", width: "100%" },
+      "data-testid": "hls-player",
+      children: [
+        /* @__PURE__ */ b(
+          "video",
+          {
+            ref: E,
+            controls: !1,
+            autoPlay: p,
+            muted: d,
+            playsInline: !0,
+            onContextMenu: (Pe) => Pe.preventDefault(),
+            controlsList: "nodownload nofullscreen noremoteplayback noplaybackrate",
+            disablePictureInPicture: !0,
+            disableRemotePlayback: !0,
+            style: { width: "100%", height: c, display: "block", background: "#000" },
+            children: /* @__PURE__ */ b("track", { kind: "captions" })
+          }
+        ),
+        m && /* @__PURE__ */ b(
+          ze,
+          {
+            videoRef: E,
+            isPlaying: Le,
+            currentTime: Te,
+            duration: Re,
+            isLive: I === !0,
+            goLive: z ? /* @__PURE__ */ b(
+              Ne,
+              {
+                enabled: G,
+                label: ie,
+                hint: X,
+                live: Z,
+                onGoLive: _e
+              }
+            ) : void 0
+          }
+        ),
+        y && /* @__PURE__ */ b(
+          Xe,
+          {
+            speed: be,
+            setSpeed: K,
+            showSpeedMenu: ye,
+            setShowSpeedMenu: Ee,
+            speedMenuRef: Se,
+            options: h,
+            disabled: q
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ b(
+    "div",
+    {
+      className: f,
+      style: { position: "relative", width: "100%" },
+      "data-testid": "hls-player",
+      children: /* @__PURE__ */ b(
+        "div",
+        {
+          "data-testid": F ? "hls-player-loading" : "hls-player-empty",
+          style: {
+            width: "100%",
+            height: c,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: "#000",
+            color: "#94a3b8",
+            fontSize: 14,
+            textAlign: "center",
+            padding: 16,
+            boxSizing: "border-box"
+          },
+          children: F ? a : r
+        }
+      )
+    }
+  );
+}
+export {
+  ee as CHUNK_DURATION_SECONDS,
+  he as DEFAULT_LIVE_EDGE_TOLERANCE_SECONDS,
+  Ne as GoLiveButton,
+  gt as HlsPlayer,
+  se as JUMP_SCAN_BASE_RATE,
+  le as JUMP_SCAN_INTERVAL_MS,
+  He as JUMP_SCAN_THRESHOLD,
+  ze as PlaybackControls,
+  Ae as SPEED_OPTIONS,
+  Xe as SpeedMenu,
+  nt as buildChunkPlaylistText,
+  ot as buildRecordingChunks,
+  at as chunkAt,
+  rt as chunkSegments,
+  Q as formatTime,
+  Ue as getBufferedAhead,
+  me as getLiveEdge,
+  pe as getScaledBufferSeconds,
+  ge as getScaledBufferSizeBytes,
+  ce as getSecondsBehindLive,
+  We as isSafariBrowser,
+  V as jumpToLiveEdge,
+  it as makeBlobUrl,
+  tt as parseM3u8,
+  et as parseSegmentTimestamp,
+  Ye as useClickOutside,
+  Je as useHlsEngine,
+  Ke as useLiveEdge,
+  Ze as usePlaybackSpeed,
+  st as useRecordingSearch,
+  lt as useVideoPlaybackState,
+  ue as withReloadMarker,
+  $e as withoutReloadMarker
+};
+//# sourceMappingURL=index.es.js.map