@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/dist/enhanced-components-B_l3cist.js

@@ -1,1142 +0,0 @@
-import { u as K, a as L, b, j as e, M as p } from "./context-BYwDoSRX.js";
-import r, { useMemo as U } from "react";
-import { c as m, f as D } from "./utils-Dzpl2ArK.js";
-function $(...d) {
-  return (l) => {
-    d.forEach((s) => {
-      typeof s == "function" ? s(l) : s && (s.current = l);
-    });
-  };
-}
-function X(d, l, s, n) {
-  const [t, o] = r.useState(!0), [a, i] = r.useState(!1), [c, x] = r.useState(!1), u = r.useRef(null), w = r.useCallback(() => {
-    u.current && clearTimeout(u.current), d && (u.current = setTimeout(() => {
-      !a && !c && o(!1);
-    }, l));
-  }, [d, l, a, c]), C = r.useCallback(() => {
-    o(!0), w();
-  }, [w]);
-  r.useEffect(() => (d ? w() : o(!0), () => {
-    u.current && clearTimeout(u.current);
-  }), [d, w]);
-  const g = r.useCallback(() => {
-    s && (i(!0), o(!0));
-  }, [s]), y = r.useCallback(() => {
-    s && (i(!1), w());
-  }, [s, w]), h = r.useCallback(() => {
-    n && (x(!0), C());
-  }, [n, C]), N = r.useCallback(() => {
-    n && (x(!1), w());
-  }, [n, w]);
-  return {
-    showControls: t,
-    showControlsTemporarily: C,
-    handleMouseEnter: g,
-    handleMouseLeave: y,
-    handleTouchStart: h,
-    handleTouchEnd: N
-  };
-}
-function G(d) {
-  const l = L(), s = b((g) => g.isPlaying), n = b((g) => g.currentTime), t = b((g) => g.duration), o = b((g) => g.volume), [a, i] = r.useState(
-    null
-  ), [c, x] = r.useState(!1), u = r.useCallback(
-    (g) => {
-      if (!d) return;
-      const y = g.touches[0];
-      if (!y) return;
-      const h = Date.now();
-      a && h - a.time < 300 ? (x(!0), l({
-        type: s ? p.PAUSE : p.PLAY
-      })) : (i({
-        x: y.clientX,
-        y: y.clientY,
-        time: h
-      }), x(!1));
-    },
-    [d, a, s, l]
-  ), w = r.useCallback(
-    (g) => {
-      if (!d || !a || c) return;
-      const y = g.touches[0];
-      if (!y) return;
-      const h = y.clientX - a.x, N = y.clientY - a.y;
-      if (Math.abs(h) > Math.abs(N) && Math.abs(h) > 50) {
-        const E = h / window.innerWidth * 30, T = Math.max(0, Math.min(t, n + E));
-        l({
-          type: p.SEEK,
-          detail: T
-        });
-      }
-      if (Math.abs(N) > Math.abs(h) && Math.abs(N) > 50 && a.x > window.innerWidth / 2) {
-        const E = -(N / window.innerHeight) * 1, T = Math.max(0, Math.min(1, o + E));
-        l({
-          type: p.SET_VOLUME,
-          detail: T
-        });
-      }
-    },
-    [d, a, c, t, n, o, l]
-  ), C = r.useCallback(() => {
-    d && setTimeout(() => {
-      i(null), x(!1);
-    }, 300);
-  }, [d]);
-  return {
-    handleTouchStart: u,
-    handleTouchMove: w,
-    handleTouchEnd: C
-  };
-}
-const Y = function({
-  children: l,
-  className: s,
-  autoHide: n = !0,
-  autoHideDelay: t = 3e3,
-  showControlsOnHover: o = !0,
-  showControlsOnTouch: a = !0,
-  enableKeyboardControls: i = !0,
-  enableTouchGestures: c = !0,
-  onPlay: x,
-  onPause: u,
-  onTimeUpdate: w,
-  onVolumeChange: C,
-  onFullscreenChange: g
-}) {
-  const y = K(), h = L(), N = b(r.useCallback((k) => k.isPlaying, [])), E = b(r.useCallback((k) => k.isFullscreen, [])), T = b(r.useCallback((k) => k.currentTime, [])), S = b(r.useCallback((k) => k.volume, [])), f = b(r.useCallback((k) => k.error, [])), {
-    showControls: v,
-    showControlsTemporarily: B,
-    handleMouseEnter: z,
-    handleMouseLeave: A,
-    handleTouchStart: j,
-    handleTouchEnd: M
-  } = X(n, t, o, a), {
-    handleTouchStart: F,
-    handleTouchMove: V,
-    handleTouchEnd: R
-  } = G(c), I = r.useCallback(
-    (k) => {
-      j(), F(k);
-    },
-    [j, F]
-  ), H = r.useCallback(() => {
-    M(), R();
-  }, [M, R]), O = r.useCallback(() => {
-    B();
-  }, [B]);
-  return r.useEffect(() => {
-    if (!i) return;
-    const k = (P) => {
-      if (!(P.target instanceof HTMLInputElement || P.target instanceof HTMLTextAreaElement))
-        switch (P.code) {
-          case "Space":
-          case "KeyK":
-            P.preventDefault(), h({
-              type: N ? p.PAUSE : p.PLAY
-            });
-            break;
-          case "KeyF":
-            P.preventDefault(), h({
-              type: E ? p.EXIT_FULLSCREEN : p.ENTER_FULLSCREEN
-            });
-            break;
-          case "KeyM":
-            P.preventDefault(), h({ type: p.TOGGLE_MUTE });
-            break;
-          case "ArrowLeft":
-            P.preventDefault(), h({
-              type: p.SEEK,
-              detail: Math.max(0, T - 10)
-            });
-            break;
-          case "ArrowRight":
-            P.preventDefault(), h({
-              type: p.SEEK,
-              detail: T + 10
-            });
-            break;
-          case "ArrowUp":
-            P.preventDefault(), h({
-              type: p.SET_VOLUME,
-              detail: Math.min(1, S + 0.1)
-            });
-            break;
-          case "ArrowDown":
-            P.preventDefault(), h({
-              type: p.SET_VOLUME,
-              detail: Math.max(0, S - 0.1)
-            });
-            break;
-        }
-    };
-    return document.addEventListener("keydown", k), () => document.removeEventListener("keydown", k);
-  }, [i, h, N, E, T, S]), r.useEffect(() => {
-    N ? x?.() : u?.();
-  }, [N, x, u]), r.useEffect(() => {
-    w?.(T);
-  }, [T, w]), r.useEffect(() => {
-    C?.(S);
-  }, [S, C]), r.useEffect(() => {
-    g?.(E);
-  }, [E, g]), /* @__PURE__ */ e.jsx(
-    "div",
-    {
-      ref: $(y.rootRef),
-      className: m(
-        "relative isolate flex flex-col overflow-hidden rounded-lg bg-black outline-none",
-        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        E && "fixed inset-0 z-50 rounded-none",
-        s
-      ),
-      "data-state": E ? "fullscreen" : "inline",
-      "data-disabled": f ? "" : void 0,
-      "data-controls-visible": v ? "" : void 0,
-      tabIndex: 0,
-      onMouseEnter: z,
-      onMouseLeave: A,
-      onTouchStart: I,
-      onTouchMove: V,
-      onTouchEnd: H,
-      onClick: O,
-      children: l
-    }
-  );
-};
-Y.displayName = "EnhancedMediaPlayer";
-const W = function({
-  qualities: l,
-  currentQuality: s,
-  onQualityChange: n,
-  className: t
-}) {
-  const [o, a] = r.useState(!1), i = r.useMemo(() => l.find((c) => c.id === s)?.label || "Auto", [l, s]);
-  return /* @__PURE__ */ e.jsxs("div", { className: m("relative", t), children: [
-    /* @__PURE__ */ e.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => a(!o),
-        className: "flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 text-white transition-colors hover:bg-black/70",
-        "aria-label": "Select quality",
-        children: [
-          /* @__PURE__ */ e.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-4 w-4", children: /* @__PURE__ */ e.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }),
-          /* @__PURE__ */ e.jsx("span", { className: "text-sm", children: i }),
-          /* @__PURE__ */ e.jsx(
-            "svg",
-            {
-              viewBox: "0 0 24 24",
-              fill: "currentColor",
-              className: m("h-4 w-4 transition-transform", o && "rotate-180"),
-              children: /* @__PURE__ */ e.jsx("path", { d: "M7 10l5 5 5-5z" })
-            }
-          )
-        ]
-      }
-    ),
-    o && /* @__PURE__ */ e.jsx("div", { className: "absolute right-0 bottom-full mb-2 min-w-32 rounded-lg border border-white/20 bg-black/90 py-2 backdrop-blur-sm", children: l.map((c) => /* @__PURE__ */ e.jsxs(
-      "button",
-      {
-        onClick: () => {
-          n(c.id), a(!1);
-        },
-        className: m(
-          "w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10",
-          c.id === s && "bg-primary/20 text-primary"
-        ),
-        children: [
-          c.label,
-          c.bitrate && /* @__PURE__ */ e.jsxs("span", { className: "ml-2 text-white/60 text-xs", children: [
-            "(",
-            Math.round(c.bitrate / 1e3),
-            "k)"
-          ] })
-        ]
-      },
-      c.id
-    )) })
-  ] });
-}, Q = function({
-  subtitles: l,
-  currentSubtitle: s,
-  onSubtitleChange: n,
-  className: t
-}) {
-  const [o, a] = r.useState(!1), i = r.useMemo(() => s && l.find((c) => c.id === s)?.label || "Off", [l, s]);
-  return /* @__PURE__ */ e.jsxs("div", { className: m("relative", t), children: [
-    /* @__PURE__ */ e.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => a(!o),
-        className: "flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 text-white transition-colors hover:bg-black/70",
-        "aria-label": "Select subtitles",
-        children: [
-          /* @__PURE__ */ e.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-4 w-4", children: /* @__PURE__ */ e.jsx("path", { d: "M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z" }) }),
-          /* @__PURE__ */ e.jsx("span", { className: "text-sm", children: i }),
-          /* @__PURE__ */ e.jsx(
-            "svg",
-            {
-              viewBox: "0 0 24 24",
-              fill: "currentColor",
-              className: m("h-4 w-4 transition-transform", o && "rotate-180"),
-              children: /* @__PURE__ */ e.jsx("path", { d: "M7 10l5 5 5-5z" })
-            }
-          )
-        ]
-      }
-    ),
-    o && /* @__PURE__ */ e.jsxs("div", { className: "absolute right-0 bottom-full mb-2 min-w-32 rounded-lg border border-white/20 bg-black/90 py-2 backdrop-blur-sm", children: [
-      /* @__PURE__ */ e.jsx(
-        "button",
-        {
-          onClick: () => {
-            n(null), a(!1);
-          },
-          className: m(
-            "w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10",
-            !s && "bg-primary/20 text-primary"
-          ),
-          children: "Off"
-        }
-      ),
-      l.map((c) => /* @__PURE__ */ e.jsx(
-        "button",
-        {
-          onClick: () => {
-            n(c.id), a(!1);
-          },
-          className: m(
-            "w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10",
-            c.id === s && "bg-primary/20 text-primary"
-          ),
-          children: c.label
-        },
-        c.id
-      ))
-    ] })
-  ] });
-}, J = function({
-  className: l
-}) {
-  const s = L(), n = b((c) => c.playbackRate), [t, o] = r.useState(!1), a = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2], i = r.useCallback(
-    (c) => {
-      s({ type: p.SET_PLAYBACK_RATE, detail: c }), o(!1);
-    },
-    [s]
-  );
-  return /* @__PURE__ */ e.jsxs("div", { className: m("relative", l), children: [
-    /* @__PURE__ */ e.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => o(!t),
-        className: "flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 text-white transition-colors hover:bg-black/70",
-        "aria-label": "Select playback speed",
-        children: [
-          /* @__PURE__ */ e.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-4 w-4", children: /* @__PURE__ */ e.jsx("path", { d: "M13,8A4,4 0 0,0 9,12A4,4 0 0,0 13,16A4,4 0 0,0 17,12A4,4 0 0,0 13,8M13,14A2,2 0 0,1 11,12A2,2 0 0,1 13,10A2,2 0 0,1 15,12A2,2 0 0,1 13,14M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4Z" }) }),
-          /* @__PURE__ */ e.jsxs("span", { className: "text-sm", children: [
-            n,
-            "x"
-          ] }),
-          /* @__PURE__ */ e.jsx(
-            "svg",
-            {
-              viewBox: "0 0 24 24",
-              fill: "currentColor",
-              className: m("h-4 w-4 transition-transform", t && "rotate-180"),
-              children: /* @__PURE__ */ e.jsx("path", { d: "M7 10l5 5 5-5z" })
-            }
-          )
-        ]
-      }
-    ),
-    t && /* @__PURE__ */ e.jsx("div", { className: "absolute right-0 bottom-full mb-2 min-w-20 rounded-lg border border-white/20 bg-black/90 py-2 backdrop-blur-sm", children: a.map((c) => /* @__PURE__ */ e.jsxs(
-      "button",
-      {
-        onClick: () => i(c),
-        className: m(
-          "w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10",
-          c === n && "bg-primary/20 text-primary"
-        ),
-        children: [
-          c,
-          "x"
-        ]
-      },
-      c
-    )) })
-  ] });
-}, Z = function({
-  chapters: l,
-  onChapterSelect: s,
-  className: n
-}) {
-  const t = b((a) => a.currentTime), o = r.useMemo(() => l.find(
-    (a) => t >= a.startTime && t < a.endTime
-  ), [l, t]);
-  return /* @__PURE__ */ e.jsxs(
-    "div",
-    {
-      className: m(
-        "rounded-lg border border-white/20 bg-black/90 p-4 backdrop-blur-sm",
-        n
-      ),
-      children: [
-        /* @__PURE__ */ e.jsx("h3", { className: "mb-3 font-semibold text-white", children: "Chapters" }),
-        /* @__PURE__ */ e.jsx("div", { className: "max-h-64 space-y-2 overflow-y-auto", children: l.map((a) => /* @__PURE__ */ e.jsxs(
-          "button",
-          {
-            onClick: () => s(a),
-            className: m(
-              "flex w-full items-center gap-3 rounded-lg p-3 text-left transition-colors",
-              "hover:bg-white/10",
-              a.id === o?.id && "border border-primary/30 bg-primary/20"
-            ),
-            children: [
-              a.thumbnail && /* @__PURE__ */ e.jsx(
-                "img",
-                {
-                  src: a.thumbnail,
-                  alt: a.title,
-                  className: "h-9 w-16 rounded object-cover"
-                }
-              ),
-              /* @__PURE__ */ e.jsxs("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ e.jsx("div", { className: "truncate font-medium text-white", children: a.title }),
-                /* @__PURE__ */ e.jsxs("div", { className: "text-sm text-white/60", children: [
-                  D(a.startTime),
-                  " - ",
-                  D(a.endTime)
-                ] })
-              ] })
-            ]
-          },
-          a.id
-        )) })
-      ]
-    }
-  );
-}, q = function({
-  className: l
-}) {
-  const s = L(), n = b((o) => o.isPictureInPicture), t = r.useCallback(() => {
-    s({
-      type: n ? p.EXIT_PIP : p.ENTER_PIP
-    });
-  }, [s, n]);
-  return /* @__PURE__ */ e.jsx(
-    "button",
-    {
-      type: "button",
-      onClick: t,
-      className: m(
-        "flex h-10 w-10 items-center justify-center rounded-full text-white",
-        "transition-colors hover:bg-white/10",
-        l
-      ),
-      "aria-label": n ? "Exit Picture-in-Picture" : "Enter Picture-in-Picture",
-      children: /* @__PURE__ */ e.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-5 w-5", children: /* @__PURE__ */ e.jsx("path", { d: "M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z" }) })
-    }
-  );
-}, ie = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  ChaptersPanel: Z,
-  PictureInPictureButton: q,
-  PlaybackSpeedSelector: J,
-  QualitySelector: W,
-  SubtitleSelector: Q
-}, Symbol.toStringTag, { value: "Module" })), ee = function({
-  className: l,
-  size: s = "md"
-}) {
-  const n = L(), t = b((x) => x.isPlaying), o = b((x) => x.isLoading), a = {
-    sm: "h-8 w-8",
-    md: "h-10 w-10",
-    lg: "h-12 w-12",
-    xl: "h-16 w-16"
-  }, i = {
-    sm: "h-4 w-4",
-    md: "h-5 w-5",
-    lg: "h-6 w-6",
-    xl: "h-8 w-8"
-  }, c = r.useCallback(() => {
-    n({
-      type: t ? p.PAUSE : p.PLAY
-    });
-  }, [n, t]);
-  return /* @__PURE__ */ e.jsx(
-    "button",
-    {
-      type: "button",
-      onClick: c,
-      disabled: o,
-      className: m(
-        "group relative flex items-center justify-center rounded-full bg-white/10 backdrop-blur-sm",
-        "border border-white/20 text-white transition-all duration-200",
-        "hover:scale-105 hover:bg-white/20 active:scale-95",
-        "focus:outline-none focus:ring-2 focus:ring-white/50",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        a[s],
-        l
-      ),
-      "aria-label": t ? "Pause" : "Play",
-      children: o ? /* @__PURE__ */ e.jsx(
-        "div",
-        {
-          className: m(
-            "animate-spin rounded-full border-2 border-white/30 border-t-white",
-            i[s]
-          )
-        }
-      ) : /* @__PURE__ */ e.jsx("div", { className: m("transition-transform duration-200", i[s]), children: t ? /* @__PURE__ */ e.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-full w-full", children: /* @__PURE__ */ e.jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) }) : /* @__PURE__ */ e.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "ml-0.5 h-full w-full", children: /* @__PURE__ */ e.jsx("path", { d: "M8 5v14l11-7z" }) }) })
-    }
-  );
-}, se = function({
-  className: l
-}) {
-  const s = L(), n = b((f) => f.currentTime), t = b((f) => f.duration), o = b((f) => f.buffered), a = b((f) => f.previewTime), [i, c] = r.useState(!1), [x, u] = r.useState(null), w = r.useRef(null), C = t > 0 ? n / t * 100 : 0, g = t > 0 && a !== null ? a / t * 100 : null, y = r.useMemo(() => {
-    if (!o || t === 0) return [];
-    const f = [];
-    for (let v = 0; v < o.length; v++)
-      f.push({
-        start: o.start(v) / t * 100,
-        end: o.end(v) / t * 100
-      });
-    return f;
-  }, [o, t]), h = r.useCallback(
-    (f) => {
-      if (!w.current) return 0;
-      const v = w.current.getBoundingClientRect();
-      return Math.max(0, Math.min(1, (f - v.left) / v.width)) * t;
-    },
-    [t]
-  ), N = r.useCallback(
-    (f) => {
-      if (!i) {
-        const v = h(f.clientX);
-        u(v), s({ type: p.PREVIEW_TIME, detail: v });
-      }
-    },
-    [i, h, s]
-  ), E = r.useCallback(() => {
-    i || (u(null), s({ type: p.CLEAR_PREVIEW }));
-  }, [i, s]), T = r.useCallback(
-    (f) => {
-      c(!0);
-      const v = h(f.clientX);
-      s({ type: p.SEEK, detail: v });
-    },
-    [h, s]
-  ), S = r.useCallback(
-    (f) => {
-      c(!0);
-      const v = h(f.touches[0]?.clientX || 0);
-      s({ type: p.SEEK, detail: v });
-    },
-    [h, s]
-  );
-  return r.useEffect(() => {
-    const f = (z) => {
-      if (i) {
-        const A = h(z.clientX);
-        s({ type: p.SEEK, detail: A });
-      }
-    }, v = () => {
-      c(!1), u(null), s({ type: p.CLEAR_PREVIEW });
-    }, B = (z) => {
-      if (i) {
-        const A = h(z.touches[0]?.clientX || 0);
-        s({ type: p.SEEK, detail: A });
-      }
-    };
-    return i && (document.addEventListener("mousemove", f), document.addEventListener("mouseup", v), document.addEventListener("touchmove", B), document.addEventListener("touchend", v)), () => {
-      document.removeEventListener("mousemove", f), document.removeEventListener("mouseup", v), document.removeEventListener("touchmove", B), document.removeEventListener("touchend", v);
-    };
-  }, [i, h, s]), /* @__PURE__ */ e.jsxs("div", { className: m("group relative flex items-center", l), children: [
-    (x !== null || a !== null) && /* @__PURE__ */ e.jsx(
-      "div",
-      {
-        className: "pointer-events-none absolute bottom-full mb-2 rounded bg-black/80 px-2 py-1 text-white text-xs",
-        style: {
-          left: `${g || (x || 0) / t * 100}%`,
-          transform: "translateX(-50%)"
-        },
-        children: D(x || a || 0)
-      }
-    ),
-    /* @__PURE__ */ e.jsxs(
-      "div",
-      {
-        ref: w,
-        className: "relative h-2 w-full cursor-pointer rounded-full bg-white/20 transition-all duration-200 group-hover:h-3",
-        onMouseMove: N,
-        onMouseLeave: E,
-        onMouseDown: T,
-        onTouchStart: S,
-        children: [
-          y.map((f, v) => /* @__PURE__ */ e.jsx(
-            "div",
-            {
-              className: "absolute top-0 h-full rounded-full bg-white/30",
-              style: {
-                left: `${f.start}%`,
-                width: `${f.end - f.start}%`
-              }
-            },
-            v
-          )),
-          /* @__PURE__ */ e.jsx(
-            "div",
-            {
-              className: "absolute top-0 h-full rounded-full bg-primary transition-all duration-100",
-              style: { width: `${C}%` }
-            }
-          ),
-          g !== null && /* @__PURE__ */ e.jsx(
-            "div",
-            {
-              className: "absolute top-0 h-full w-1 rounded-full bg-white/80",
-              style: { left: `${g}%` }
-            }
-          ),
-          /* @__PURE__ */ e.jsx(
-            "div",
-            {
-              className: "-translate-y-1/2 absolute top-1/2 h-4 w-4 rounded-full border-2 border-white bg-primary opacity-0 shadow-lg transition-all duration-200 group-hover:opacity-100",
-              style: { left: `${C}%`, transform: "translateX(-50%) translateY(-50%)" }
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}, te = function({
-  className: l
-}) {
-  const s = L(), n = b((u) => u.volume), t = b((u) => u.isMuted), [o, a] = r.useState(!1), i = r.useCallback(() => {
-    s({ type: p.TOGGLE_MUTE });
-  }, [s]), c = r.useCallback(
-    (u) => {
-      s({ type: p.SET_VOLUME, detail: u });
-    },
-    [s]
-  ), x = r.useMemo(() => t || n === 0 ? /* @__PURE__ */ e.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-5 w-5", children: /* @__PURE__ */ e.jsx("path", { d: "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" }) }) : n < 0.5 ? /* @__PURE__ */ e.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-5 w-5", children: /* @__PURE__ */ e.jsx("path", { d: "M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z" }) }) : /* @__PURE__ */ e.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-5 w-5", children: /* @__PURE__ */ e.jsx("path", { d: "M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" }) }), [t, n]);
-  return /* @__PURE__ */ e.jsxs(
-    "div",
-    {
-      className: m("relative flex items-center", l),
-      onMouseEnter: () => a(!0),
-      onMouseLeave: () => a(!1),
-      children: [
-        /* @__PURE__ */ e.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: i,
-            className: "flex h-10 w-10 items-center justify-center rounded-full text-white transition-colors hover:bg-white/10",
-            "aria-label": t ? "Unmute" : "Mute",
-            children: x
-          }
-        ),
-        /* @__PURE__ */ e.jsx(
-          "div",
-          {
-            className: m(
-              "absolute left-full ml-2 flex items-center transition-all duration-200",
-              o ? "translate-x-0 opacity-100" : "-translate-x-2 pointer-events-none opacity-0"
-            ),
-            children: /* @__PURE__ */ e.jsx(
-              "input",
-              {
-                type: "range",
-                min: "0",
-                max: "1",
-                step: "0.01",
-                value: t ? 0 : n,
-                onChange: (u) => c(parseFloat(u.target.value)),
-                className: "slider h-1 w-20 cursor-pointer appearance-none rounded-lg bg-white/20"
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}, ne = function({
-  className: l,
-  size: s = "md",
-  skipTime: n = 10
-}) {
-  const t = L(), o = b((x) => x.currentTime), a = {
-    sm: "h-8 w-8",
-    md: "h-10 w-10",
-    lg: "h-12 w-12"
-  }, i = {
-    sm: "h-4 w-4",
-    md: "h-5 w-5",
-    lg: "h-6 w-6"
-  }, c = r.useCallback(() => {
-    const x = Math.max(0, o - n);
-    t({ type: p.SEEK, detail: x });
-  }, [t, o, n]);
-  return /* @__PURE__ */ e.jsx(
-    "button",
-    {
-      type: "button",
-      onClick: c,
-      className: m(
-        "group relative flex items-center justify-center rounded-full bg-white/10 backdrop-blur-sm",
-        "border border-white/20 text-white transition-all duration-200",
-        "hover:scale-105 hover:bg-white/20 active:scale-95",
-        "focus:outline-none focus:ring-2 focus:ring-white/50",
-        a[s],
-        l
-      ),
-      "aria-label": `Backward ${n} seconds`,
-      title: `Backward ${n}s`,
-      children: /* @__PURE__ */ e.jsxs("div", { className: m("flex items-center transition-transform duration-200", i[s]), children: [
-        /* @__PURE__ */ e.jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-full w-full", children: [
-          /* @__PURE__ */ e.jsx("path", { d: "M7 6c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1s-1-.45-1-1V7c0-.55.45-1 1-1zM15.5 7.5c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v9c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-9z" }),
-          /* @__PURE__ */ e.jsx("path", { d: "M5.5 12l7-4.5v9l-7-4.5z", opacity: "0.8" })
-        ] }),
-        n && /* @__PURE__ */ e.jsx("span", { className: "-bottom-1 absolute font-bold text-[10px]", children: n })
-      ] })
-    }
-  );
-}, ae = function({
-  className: l,
-  size: s = "md",
-  skipTime: n = 10
-}) {
-  const t = L(), o = b((u) => u.currentTime), a = b((u) => u.duration), i = {
-    sm: "h-8 w-8",
-    md: "h-10 w-10",
-    lg: "h-12 w-12"
-  }, c = {
-    sm: "h-4 w-4",
-    md: "h-5 w-5",
-    lg: "h-6 w-6"
-  }, x = r.useCallback(() => {
-    const u = Math.min(a, o + n);
-    t({ type: p.SEEK, detail: u });
-  }, [t, o, a, n]);
-  return /* @__PURE__ */ e.jsx(
-    "button",
-    {
-      type: "button",
-      onClick: x,
-      className: m(
-        "group relative flex items-center justify-center rounded-full bg-white/10 backdrop-blur-sm",
-        "border border-white/20 text-white transition-all duration-200",
-        "hover:scale-105 hover:bg-white/20 active:scale-95",
-        "focus:outline-none focus:ring-2 focus:ring-white/50",
-        i[s],
-        l
-      ),
-      "aria-label": `Forward ${n} seconds`,
-      title: `Forward ${n}s`,
-      children: /* @__PURE__ */ e.jsxs("div", { className: m("flex items-center transition-transform duration-200", c[s]), children: [
-        /* @__PURE__ */ e.jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-full w-full", children: [
-          /* @__PURE__ */ e.jsx("path", { d: "M17 6c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1s-1-.45-1-1V7c0-.55.45-1 1-1zM8.5 7.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v9c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5v-9z" }),
-          /* @__PURE__ */ e.jsx("path", { d: "M18.5 12l-7-4.5v9l7-4.5z", opacity: "0.8" })
-        ] }),
-        n && /* @__PURE__ */ e.jsx("span", { className: "-bottom-1 absolute font-bold text-[10px]", children: n })
-      ] })
-    }
-  );
-}, _ = function({
-  variant: l = "current",
-  className: s
-}) {
-  const n = b((a) => a.currentTime), t = b((a) => a.duration), o = r.useMemo(() => {
-    switch (l) {
-      case "current":
-        return D(n);
-      case "duration":
-        return D(t);
-      case "remaining":
-        return `-${D(t - n)}`;
-      default:
-        return D(n);
-    }
-  }, [l, n, t]);
-  return /* @__PURE__ */ e.jsx("div", { className: m("font-mono text-sm text-white tabular-nums", s), children: o });
-}, le = function({
-  metrics: l,
-  className: s
-}) {
-  if (!l || process.env.NODE_ENV !== "development")
-    return null;
-  const n = (o) => o >= 50 ? "text-green-400" : o >= 30 ? "text-yellow-400" : "text-red-400", t = (o) => o >= 5 ? "text-green-400" : o >= 2 ? "text-yellow-400" : "text-red-400";
-  return /* @__PURE__ */ e.jsxs("div", { className: m("flex items-center gap-3 font-mono text-xs", s), children: [
-    l.fps !== void 0 && /* @__PURE__ */ e.jsxs("div", { className: m("flex items-center gap-1", n(l.fps)), children: [
-      /* @__PURE__ */ e.jsx("div", { className: "h-2 w-2 rounded-full bg-current" }),
-      /* @__PURE__ */ e.jsxs("span", { children: [
-        l.fps,
-        " FPS"
-      ] })
-    ] }),
-    l.bufferHealth !== void 0 && /* @__PURE__ */ e.jsxs("div", { className: m("flex items-center gap-1", t(l.bufferHealth)), children: [
-      /* @__PURE__ */ e.jsx("div", { className: "h-2 w-2 rounded-full bg-current" }),
-      /* @__PURE__ */ e.jsxs("span", { children: [
-        l.bufferHealth.toFixed(1),
-        "s"
-      ] })
-    ] }),
-    l.quality !== void 0 && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 text-blue-400", children: [
-      /* @__PURE__ */ e.jsx("div", { className: "h-2 w-2 rounded-full bg-current" }),
-      /* @__PURE__ */ e.jsxs("span", { children: [
-        l.quality,
-        "p"
-      ] })
-    ] })
-  ] });
-}, de = function({
-  className: l,
-  showSkipButtons: s = !0,
-  showVolumeControl: n = !0,
-  showTimeDisplay: t = !0,
-  playButtonSize: o = "xl",
-  skipButtonSize: a = "md",
-  skipTime: i = 10,
-  showPerformanceIndicators: c = process.env.NODE_ENV === "development",
-  performanceMetrics: x
-}) {
-  return /* @__PURE__ */ e.jsxs(
-    "div",
-    {
-      className: m(
-        "flex flex-col gap-4 bg-gradient-to-t from-black/80 to-transparent p-4",
-        l
-      ),
-      children: [
-        /* @__PURE__ */ e.jsx(se, { className: "w-full" }),
-        /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-3", children: [
-            s && /* @__PURE__ */ e.jsx(
-              ne,
-              {
-                size: a,
-                skipTime: i,
-                className: "shrink-0"
-              }
-            ),
-            /* @__PURE__ */ e.jsx(ee, { size: o, className: "shrink-0" }),
-            s && /* @__PURE__ */ e.jsx(ae, { size: a, skipTime: i, className: "shrink-0" }),
-            n && /* @__PURE__ */ e.jsx(te, { className: "shrink-0" }),
-            t && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 font-mono text-sm", children: [
-              /* @__PURE__ */ e.jsx(_, { variant: "current" }),
-              /* @__PURE__ */ e.jsx("span", { className: "text-white/60", children: "/" }),
-              /* @__PURE__ */ e.jsx(_, { variant: "duration" })
-            ] })
-          ] }),
-          /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-2", children: c && /* @__PURE__ */ e.jsx(le, { metrics: x, className: "text-white/80" }) })
-        ] })
-      ]
-    }
-  );
-}, ue = ({
-  performanceMetrics: d = {},
-  preloadingStats: l = {},
-  playbackState: s = {},
-  hlsMetrics: n = {},
-  pluginInfo: t = {},
-  debugInfo: o = {},
-  className: a,
-  position: i = "top-right",
-  defaultCollapsed: c = !1,
-  title: x = "BaroiPlayer Debug Panel"
-}) => {
-  const [u, w] = r.useState(c), [C, g] = r.useState(
-    "performance"
-  ), y = U(() => {
-    switch (i) {
-      case "top-left":
-        return "top-4 left-4";
-      case "top-right":
-        return "top-4 right-4";
-      case "bottom-left":
-        return "bottom-4 left-4";
-      case "bottom-right":
-        return "bottom-4 right-4";
-      default:
-        return "top-4 right-4";
-    }
-  }, [i]), h = (j) => {
-    if (j === 0) return "0 B";
-    const M = 1024, F = ["B", "KB", "MB", "GB"], V = Math.floor(Math.log(j) / Math.log(M));
-    return parseFloat((j / Math.pow(M, V)).toFixed(2)) + " " + F[V];
-  }, N = (j) => {
-    const M = Math.floor(j / 60), F = Math.floor(j % 60);
-    return `${M}:${F.toString().padStart(2, "0")}`;
-  }, E = () => /* @__PURE__ */ e.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ e.jsxs("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [
-    /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-green-400", children: "FPS:" }),
-      /* @__PURE__ */ e.jsx("span", { className: "ml-2 font-mono", children: d.fps || 0 })
-    ] }),
-    /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-blue-400", children: "Memory:" }),
-      /* @__PURE__ */ e.jsxs("span", { className: "ml-2 font-mono", children: [
-        ((d.memoryUsage || 0) / 1024 / 1024).toFixed(1),
-        " MB"
-      ] })
-    ] }),
-    /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-yellow-400", children: "Buffer:" }),
-      /* @__PURE__ */ e.jsxs("span", { className: "ml-2 font-mono", children: [
-        (d.bufferHealth || 0).toFixed(2),
-        "s"
-      ] })
-    ] }),
-    /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-purple-400", children: "Bandwidth:" }),
-      /* @__PURE__ */ e.jsxs("span", { className: "ml-2 font-mono", children: [
-        h(d.networkBandwidth || 0),
-        "/s"
-      ] })
-    ] }),
-    /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-red-400", children: "Dropped:" }),
-      /* @__PURE__ */ e.jsxs("span", { className: "ml-2 font-mono", children: [
-        d.droppedFrames || 0,
-        " frames"
-      ] })
-    ] }),
-    /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-cyan-400", children: "Decoded:" }),
-      /* @__PURE__ */ e.jsxs("span", { className: "ml-2 font-mono", children: [
-        d.decodedFrames || 0,
-        " frames"
-      ] })
-    ] })
-  ] }) }), T = () => /* @__PURE__ */ e.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ e.jsxs("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [
-    /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-green-400", children: "Status:" }),
-      /* @__PURE__ */ e.jsx("span", { className: "ml-2 font-mono", children: s.isPlaying ? /* @__PURE__ */ e.jsx("span", { className: "text-green-300", children: "Playing" }) : /* @__PURE__ */ e.jsx("span", { className: "text-red-300", children: "Paused" }) })
-    ] }),
-    /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-blue-400", children: "Time:" }),
-      /* @__PURE__ */ e.jsxs("span", { className: "ml-2 font-mono", children: [
-        N(s.currentTime || 0),
-        " / ",
-        N(s.duration || 0)
-      ] })
-    ] }),
-    /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-yellow-400", children: "Volume:" }),
-      /* @__PURE__ */ e.jsxs("span", { className: "ml-2 font-mono", children: [
-        Math.round((s.volume || 0) * 100),
-        "%"
-      ] })
-    ] }),
-    /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-purple-400", children: "Quality:" }),
-      /* @__PURE__ */ e.jsxs("span", { className: "ml-2 font-mono", children: [
-        s.quality || 0,
-        "p"
-      ] })
-    ] }),
-    /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-red-400", children: "Buffering:" }),
-      /* @__PURE__ */ e.jsx("span", { className: "ml-2 font-mono", children: s.isBuffering ? /* @__PURE__ */ e.jsx("span", { className: "text-yellow-300", children: "Yes" }) : /* @__PURE__ */ e.jsx("span", { className: "text-green-300", children: "No" }) })
-    ] }),
-    s.error && /* @__PURE__ */ e.jsxs("div", { className: "col-span-2", children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-red-400", children: "Error:" }),
-      /* @__PURE__ */ e.jsx("span", { className: "ml-2 break-all font-mono text-red-300 text-xs", children: s.error })
-    ] })
-  ] }) }), S = () => /* @__PURE__ */ e.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ e.jsxs("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [
-    /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-green-400", children: "Preloaded:" }),
-      /* @__PURE__ */ e.jsxs("span", { className: "ml-2 font-mono", children: [
-        l.preloadedItems || 0,
-        " items"
-      ] })
-    ] }),
-    /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-blue-400", children: "Engagement:" }),
-      /* @__PURE__ */ e.jsxs("span", { className: "ml-2 font-mono", children: [
-        (l.engagementScore || 0).toFixed(1),
-        "%"
-      ] })
-    ] }),
-    /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-yellow-400", children: "Queue:" }),
-      /* @__PURE__ */ e.jsxs("span", { className: "ml-2 font-mono", children: [
-        l.queueLength || 0,
-        " items"
-      ] })
-    ] }),
-    /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-purple-400", children: "Hit Rate:" }),
-      /* @__PURE__ */ e.jsxs("span", { className: "ml-2 font-mono", children: [
-        (l.hitRate || 0).toFixed(1),
-        "%"
-      ] })
-    ] }),
-    /* @__PURE__ */ e.jsxs("div", { className: "col-span-2", children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-cyan-400", children: "Saved:" }),
-      /* @__PURE__ */ e.jsx("span", { className: "ml-2 font-mono", children: h(l.totalSaved || 0) })
-    ] })
-  ] }) }), f = () => /* @__PURE__ */ e.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ e.jsxs("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [
-    /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-green-400", children: "Level:" }),
-      /* @__PURE__ */ e.jsxs("span", { className: "ml-2 font-mono", children: [
-        n.currentLevel || 0,
-        " / ",
-        n.availableLevels || 0
-      ] })
-    ] }),
-    /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-blue-400", children: "Bandwidth:" }),
-      /* @__PURE__ */ e.jsxs("span", { className: "ml-2 font-mono", children: [
-        h(n.bandwidthEstimate || 0),
-        "/s"
-      ] })
-    ] }),
-    /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-red-400", children: "Dropped:" }),
-      /* @__PURE__ */ e.jsxs("span", { className: "ml-2 font-mono", children: [
-        n.droppedFrames || 0,
-        " frames"
-      ] })
-    ] })
-  ] }) }), v = () => /* @__PURE__ */ e.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ e.jsxs("div", { className: "text-xs", children: [
-    /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-green-400", children: "Total:" }),
-      /* @__PURE__ */ e.jsxs("span", { className: "ml-2 font-mono", children: [
-        t.pluginCount || 0,
-        " plugins"
-      ] })
-    ] }),
-    /* @__PURE__ */ e.jsxs("div", { className: "mt-2", children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-blue-400", children: "Active:" }),
-      /* @__PURE__ */ e.jsx("div", { className: "ml-2 space-y-1 font-mono text-xs", children: t.activePlugins?.map((j, M) => /* @__PURE__ */ e.jsxs("div", { className: "text-green-300", children: [
-        "• ",
-        j
-      ] }, M)) || /* @__PURE__ */ e.jsx("div", { className: "text-gray-400", children: "None" }) })
-    ] }),
-    t.loadedPlugins && t.loadedPlugins.length > (t.activePlugins?.length || 0) && /* @__PURE__ */ e.jsxs("div", { className: "mt-2", children: [
-      /* @__PURE__ */ e.jsx("span", { className: "text-yellow-400", children: "Loaded (inactive):" }),
-      /* @__PURE__ */ e.jsx("div", { className: "ml-2 space-y-1 font-mono text-xs", children: t.loadedPlugins.filter((j) => !t.activePlugins?.includes(j)).map((j, M) => /* @__PURE__ */ e.jsxs("div", { className: "text-yellow-300", children: [
-        "• ",
-        j
-      ] }, M)) })
-    ] })
-  ] }) }), B = () => /* @__PURE__ */ e.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ e.jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(o).map(([j, M]) => /* @__PURE__ */ e.jsxs("div", { children: [
-    /* @__PURE__ */ e.jsxs("span", { className: "text-yellow-400", children: [
-      j,
-      ":"
-    ] }),
-    /* @__PURE__ */ e.jsx("span", { className: "ml-2 text-gray-300", children: typeof M == "object" ? JSON.stringify(M, null, 2) : String(M) })
-  ] }, j)) }) }), z = () => /* @__PURE__ */ e.jsx("div", { className: "flex space-x-1 border-gray-600 border-b", children: [
-    { id: "performance", label: "Performance" },
-    { id: "hls", label: "HLS" },
-    { id: "plugins", label: "Plugins" },
-    { id: "debug", label: "Debug" }
-  ].map((j) => /* @__PURE__ */ e.jsx(
-    "button",
-    {
-      onClick: () => g(j.id),
-      className: m(
-        "px-2 py-1 font-medium text-xs transition-colors",
-        C === j.id ? "border-blue-400 border-b text-blue-400" : "text-gray-400 hover:text-white"
-      ),
-      children: j.label
-    },
-    j.id
-  )) }), A = () => {
-    switch (C) {
-      case "performance":
-        return /* @__PURE__ */ e.jsxs("div", { className: "space-y-3", children: [
-          E(),
-          /* @__PURE__ */ e.jsx("hr", { className: "border-gray-600" }),
-          T(),
-          /* @__PURE__ */ e.jsx("hr", { className: "border-gray-600" }),
-          S()
-        ] });
-      case "hls":
-        return f();
-      case "plugins":
-        return v();
-      case "debug":
-        return B();
-      default:
-        return E();
-    }
-  };
-  return process.env.NODE_ENV !== "development" ? null : /* @__PURE__ */ e.jsxs(
-    "div",
-    {
-      className: m(
-        "fixed z-50 min-w-80 max-w-96 rounded-lg border border-gray-700 bg-black/90 p-3 font-mono text-white text-xs backdrop-blur-sm",
-        y,
-        a
-      ),
-      children: [
-        /* @__PURE__ */ e.jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
-          /* @__PURE__ */ e.jsx("h3", { className: "font-bold text-blue-400 text-sm", children: x }),
-          /* @__PURE__ */ e.jsx("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ e.jsx(
-            "button",
-            {
-              onClick: () => w(!u),
-              className: "text-gray-400 transition-colors hover:text-white",
-              "aria-label": u ? "Expand" : "Collapse",
-              children: u ? /* @__PURE__ */ e.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ e.jsx(
-                "path",
-                {
-                  d: "M3 4.5L6 7.5L9 4.5",
-                  stroke: "currentColor",
-                  strokeWidth: "1.5",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
-                }
-              ) }) : /* @__PURE__ */ e.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ e.jsx(
-                "path",
-                {
-                  d: "M3 7.5L6 4.5L9 7.5",
-                  stroke: "currentColor",
-                  strokeWidth: "1.5",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
-                }
-              ) })
-            }
-          ) })
-        ] }),
-        u ? /* @__PURE__ */ e.jsxs("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [
-          /* @__PURE__ */ e.jsxs("div", { children: [
-            /* @__PURE__ */ e.jsx("span", { className: "text-green-400", children: "FPS:" }),
-            /* @__PURE__ */ e.jsx("span", { className: "ml-1 font-mono", children: d.fps || 0 })
-          ] }),
-          /* @__PURE__ */ e.jsxs("div", { children: [
-            /* @__PURE__ */ e.jsx("span", { className: "text-blue-400", children: "Memory:" }),
-            /* @__PURE__ */ e.jsxs("span", { className: "ml-1 font-mono", children: [
-              ((d.memoryUsage || 0) / 1024 / 1024).toFixed(1),
-              "MB"
-            ] })
-          ] })
-        ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-          z(),
-          /* @__PURE__ */ e.jsx("div", { className: "mt-3 max-h-64 overflow-y-auto", children: A() })
-        ] })
-      ]
-    }
-  );
-};
-export {
-  Z as C,
-  ue as D,
-  Y as E,
-  q as P,
-  W as Q,
-  Q as S,
-  J as a,
-  ee as b,
-  se as c,
-  _ as d,
-  te as e,
-  de as f,
-  ie as g
-};
-//# sourceMappingURL=enhanced-components-B_l3cist.js.map