@therealtinhtute/baroiplayer 1.0.8 → 1.1.0

package/dist/enhanced-components-DUw2KrmQ.js

@@ -0,0 +1,1142 @@
+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 && /* @__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-DUw2KrmQ.js.map