@therealtinhtute/baroiplayer 1.0.0 → 1.0.2

package/dist/{enhanced-components-DHv0MFvG.js → enhanced-components-Da0TSvKe.js}

@@ -1,8 +1,8 @@
-import { u as K, a as L, b, j as e, M as p } from "./context-BMteAJDN.js";
-import r, { useMemo as U } from "react";
-import { c as m, f as D } from "./utils-BnscpYYd.js";
-function $(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(() => {
+import { u as U, a as L, b, j as e, M as f } from "./context-Af84FynT.js";
+import r, { useMemo as $ } from "react";
+import { c as p, f as D, a as _ } from "./utils-nTO4AnHo.js";
+function X(d, l, s, n) {
+  const [t, o] = r.useState(!0), [a, i] = r.useState(!1), [c, m] = r.useState(!1), u = r.useRef(null), w = r.useCallback(() => {
     u.current && clearTimeout(u.current), d && (u.current = setTimeout(() => {
       !a && !c && o(!1);
     }, l));
@@ -17,9 +17,9 @@ function $(d, l, s, n) {
   }, [s]), y = r.useCallback(() => {
     s && (i(!1), w());
   }, [s, w]), h = r.useCallback(() => {
-    n && (x(!0), C());
+    n && (m(!0), C());
   }, [n, C]), N = r.useCallback(() => {
-    n && (x(!1), w());
+    n && (m(!1), w());
   }, [n, w]);
   return {
     showControls: t,
@@ -30,19 +30,19 @@ function $(d, l, s, n) {
     handleTouchEnd: N
   };
 }
-function X(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) => {
+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, m] = 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
+    a && h - a.time < 300 ? (m(!0), l({
+      type: s ? f.PAUSE : f.PLAY
     })) : (i({
       x: y.clientX,
       y: y.clientY,
       time: h
-    }), x(!1));
+    }), m(!1));
   }, [d, a, s, l]), w = r.useCallback((g) => {
     if (!d || !a || c) return;
     const y = g.touches[0];
@@ -51,20 +51,20 @@ function X(d) {
     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,
+        type: f.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,
+        type: f.SET_VOLUME,
         detail: T
       });
     }
   }, [d, a, c, t, n, o, l]), C = r.useCallback(() => {
     d && setTimeout(() => {
-      i(null), x(!1);
+      i(null), m(!1);
     }, 300);
   }, [d]);
   return {
@@ -73,7 +73,7 @@ function X(d) {
     handleTouchEnd: C
   };
 }
-const G = function({
+const Y = function({
   children: l,
   className: s,
   autoHide: n = !0,
@@ -82,28 +82,28 @@ const G = function({
   showControlsOnTouch: a = !0,
   enableKeyboardControls: i = !0,
   enableTouchGestures: c = !0,
-  onPlay: x,
+  onPlay: m,
   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, [])), {
+  const y = U(), 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, [])), x = b(r.useCallback((k) => k.error, [])), {
     showControls: v,
     showControlsTemporarily: B,
     handleMouseEnter: z,
     handleMouseLeave: A,
     handleTouchStart: j,
     handleTouchEnd: M
-  } = $(n, t, o, a), {
+  } = X(n, t, o, a), {
     handleTouchStart: F,
     handleTouchMove: V,
     handleTouchEnd: R
-  } = X(c), I = r.useCallback((k) => {
+  } = G(c), H = r.useCallback((k) => {
     j(), F(k);
-  }, [j, F]), H = r.useCallback(() => {
+  }, [j, F]), O = r.useCallback(() => {
     M(), R();
-  }, [M, R]), O = r.useCallback(() => {
+  }, [M, R]), K = r.useCallback(() => {
     B();
   }, [B]);
   return r.useEffect(() => {
@@ -114,38 +114,38 @@ const G = function({
           case "Space":
           case "KeyK":
             P.preventDefault(), h({
-              type: N ? p.PAUSE : p.PLAY
+              type: N ? f.PAUSE : f.PLAY
             });
             break;
           case "KeyF":
             P.preventDefault(), h({
-              type: E ? p.EXIT_FULLSCREEN : p.ENTER_FULLSCREEN
+              type: E ? f.EXIT_FULLSCREEN : f.ENTER_FULLSCREEN
             });
             break;
           case "KeyM":
-            P.preventDefault(), h({ type: p.TOGGLE_MUTE });
+            P.preventDefault(), h({ type: f.TOGGLE_MUTE });
             break;
           case "ArrowLeft":
             P.preventDefault(), h({
-              type: p.SEEK,
+              type: f.SEEK,
               detail: Math.max(0, T - 10)
             });
             break;
           case "ArrowRight":
             P.preventDefault(), h({
-              type: p.SEEK,
+              type: f.SEEK,
               detail: T + 10
             });
             break;
           case "ArrowUp":
             P.preventDefault(), h({
-              type: p.SET_VOLUME,
+              type: f.SET_VOLUME,
               detail: Math.min(1, S + 0.1)
             });
             break;
           case "ArrowDown":
             P.preventDefault(), h({
-              type: p.SET_VOLUME,
+              type: f.SET_VOLUME,
               detail: Math.max(0, S - 0.1)
             });
             break;
@@ -153,8 +153,8 @@ const G = function({
     };
     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(() => {
+    N ? m?.() : u?.();
+  }, [N, m, u]), r.useEffect(() => {
     w?.(T);
   }, [T, w]), r.useEffect(() => {
     C?.(S);
@@ -164,7 +164,7 @@ const G = function({
     "div",
     {
       ref: y.rootRef,
-      className: m(
+      className: p(
         "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",
@@ -172,28 +172,28 @@ const G = function({
         s
       ),
       "data-state": E ? "fullscreen" : "inline",
-      "data-disabled": f ? "" : void 0,
+      "data-disabled": x ? "" : void 0,
       "data-controls-visible": v ? "" : void 0,
       tabIndex: 0,
       onMouseEnter: z,
       onMouseLeave: A,
-      onTouchStart: I,
+      onTouchStart: H,
       onTouchMove: V,
-      onTouchEnd: H,
-      onClick: O,
+      onTouchEnd: O,
+      onClick: K,
       children: l
     }
   );
 };
-G.displayName = "EnhancedMediaPlayer";
-const Y = function({
+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: [
+  return /* @__PURE__ */ e.jsxs("div", { className: p("relative", t), children: [
     /* @__PURE__ */ e.jsxs(
       "button",
       {
@@ -209,7 +209,7 @@ const Y = function({
             {
               viewBox: "0 0 24 24",
               fill: "currentColor",
-              className: m("h-4 w-4 transition-transform", o && "rotate-180"),
+              className: p("h-4 w-4 transition-transform", o && "rotate-180"),
               children: /* @__PURE__ */ e.jsx("path", { d: "M7 10l5 5 5-5z" })
             }
           )
@@ -222,7 +222,7 @@ const Y = function({
         onClick: () => {
           n(c.id), a(!1);
         },
-        className: m(
+        className: p(
           "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"
         ),
@@ -238,14 +238,14 @@ const Y = function({
       c.id
     )) })
   ] });
-}, W = function({
+}, 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: [
+  return /* @__PURE__ */ e.jsxs("div", { className: p("relative", t), children: [
     /* @__PURE__ */ e.jsxs(
       "button",
       {
@@ -261,7 +261,7 @@ const Y = function({
             {
               viewBox: "0 0 24 24",
               fill: "currentColor",
-              className: m("h-4 w-4 transition-transform", o && "rotate-180"),
+              className: p("h-4 w-4 transition-transform", o && "rotate-180"),
               children: /* @__PURE__ */ e.jsx("path", { d: "M7 10l5 5 5-5z" })
             }
           )
@@ -275,7 +275,7 @@ const Y = function({
           onClick: () => {
             n(null), a(!1);
           },
-          className: m(
+          className: p(
             "w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10",
             !s && "bg-primary/20 text-primary"
           ),
@@ -288,7 +288,7 @@ const Y = function({
           onClick: () => {
             n(c.id), a(!1);
           },
-          className: m(
+          className: p(
             "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"
           ),
@@ -298,13 +298,13 @@ const Y = function({
       ))
     ] })
   ] });
-}, Q = function({
+}, 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({ type: f.SET_PLAYBACK_RATE, detail: c }), o(!1);
   }, [s]);
-  return /* @__PURE__ */ e.jsxs("div", { className: m("relative", l), children: [
+  return /* @__PURE__ */ e.jsxs("div", { className: p("relative", l), children: [
     /* @__PURE__ */ e.jsxs(
       "button",
       {
@@ -323,7 +323,7 @@ const Y = function({
             {
               viewBox: "0 0 24 24",
               fill: "currentColor",
-              className: m("h-4 w-4 transition-transform", t && "rotate-180"),
+              className: p("h-4 w-4 transition-transform", t && "rotate-180"),
               children: /* @__PURE__ */ e.jsx("path", { d: "M7 10l5 5 5-5z" })
             }
           )
@@ -334,7 +334,7 @@ const Y = function({
       "button",
       {
         onClick: () => i(c),
-        className: m(
+        className: p(
           "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"
         ),
@@ -346,7 +346,7 @@ const Y = function({
       c
     )) })
   ] });
-}, J = function({
+}, Z = function({
   chapters: l,
   onChapterSelect: s,
   className: n
@@ -354,13 +354,13 @@ const Y = function({
   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: [
+  return /* @__PURE__ */ e.jsxs("div", { className: p("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(
+        className: p(
           "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"
@@ -387,12 +387,12 @@ const Y = function({
       a.id
     )) })
   ] });
-}, Z = function({
+}, q = function({
   className: l
 }) {
   const s = L(), n = b((o) => o.isPictureInPicture), t = r.useCallback(() => {
     s({
-      type: n ? p.EXIT_PIP : p.ENTER_PIP
+      type: n ? f.EXIT_PIP : f.ENTER_PIP
     });
   }, [s, n]);
   return /* @__PURE__ */ e.jsx(
@@ -400,7 +400,7 @@ const Y = function({
     {
       type: "button",
       onClick: t,
-      className: m(
+      className: p(
         "flex h-10 w-10 items-center justify-center rounded-full text-white",
         "transition-colors hover:bg-white/10",
         l
@@ -409,18 +409,18 @@ const Y = function({
       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" }) })
     }
   );
-}, ce = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, ie = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  ChaptersPanel: J,
-  PictureInPictureButton: Z,
-  PlaybackSpeedSelector: Q,
-  QualitySelector: Y,
-  SubtitleSelector: W
-}, Symbol.toStringTag, { value: "Module" })), q = function({
+  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 = {
+  const n = L(), t = b((m) => m.isPlaying), o = b((m) => m.isLoading), a = {
     sm: "h-8 w-8",
     md: "h-10 w-10",
     lg: "h-12 w-12",
@@ -432,7 +432,7 @@ const Y = function({
     xl: "h-8 w-8"
   }, c = r.useCallback(() => {
     n({
-      type: t ? p.PAUSE : p.PLAY
+      type: t ? f.PAUSE : f.PLAY
     });
   }, [n, t]);
   return /* @__PURE__ */ e.jsx(
@@ -441,7 +441,7 @@ const Y = function({
       type: "button",
       onClick: c,
       disabled: o,
-      className: m(
+      className: p(
         "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",
@@ -451,68 +451,68 @@ const Y = function({
         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" }) }) })
+      children: o ? /* @__PURE__ */ e.jsx("div", { className: p("animate-spin rounded-full border-2 border-white/30 border-t-white", i[s]) }) : /* @__PURE__ */ e.jsx("div", { className: p("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" }) }) })
     }
   );
-}, ee = function({
+}, 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(() => {
+  const s = L(), n = b((x) => x.currentTime), t = b((x) => x.duration), o = b((x) => x.buffered), a = b((x) => x.previewTime), [i, c] = r.useState(!1), [m, 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 = [];
+    const x = [];
     for (let v = 0; v < o.length; v++)
-      f.push({
+      x.push({
         start: o.start(v) / t * 100,
         end: o.end(v) / t * 100
       });
-    return f;
-  }, [o, t]), h = r.useCallback((f) => {
+    return x;
+  }, [o, t]), h = r.useCallback((x) => {
     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) => {
+    return Math.max(0, Math.min(1, (x - v.left) / v.width)) * t;
+  }, [t]), N = r.useCallback((x) => {
     if (!i) {
-      const v = h(f.clientX);
-      u(v), s({ type: p.PREVIEW_TIME, detail: v });
+      const v = h(x.clientX);
+      u(v), s({ type: f.PREVIEW_TIME, detail: v });
     }
   }, [i, h, s]), E = r.useCallback(() => {
-    i || (u(null), s({ type: p.CLEAR_PREVIEW }));
-  }, [i, s]), T = r.useCallback((f) => {
+    i || (u(null), s({ type: f.CLEAR_PREVIEW }));
+  }, [i, s]), T = r.useCallback((x) => {
     c(!0);
-    const v = h(f.clientX);
-    s({ type: p.SEEK, detail: v });
-  }, [h, s]), S = r.useCallback((f) => {
+    const v = h(x.clientX);
+    s({ type: f.SEEK, detail: v });
+  }, [h, s]), S = r.useCallback((x) => {
     c(!0);
-    const v = h(f.touches[0]?.clientX || 0);
-    s({ type: p.SEEK, detail: v });
+    const v = h(x.touches[0]?.clientX || 0);
+    s({ type: f.SEEK, detail: v });
   }, [h, s]);
   return r.useEffect(() => {
-    const f = (z) => {
+    const x = (z) => {
       if (i) {
         const A = h(z.clientX);
-        s({ type: p.SEEK, detail: A });
+        s({ type: f.SEEK, detail: A });
       }
     }, v = () => {
-      c(!1), u(null), s({ type: p.CLEAR_PREVIEW });
+      c(!1), u(null), s({ type: f.CLEAR_PREVIEW });
     }, B = (z) => {
       if (i) {
         const A = h(z.touches[0]?.clientX || 0);
-        s({ type: p.SEEK, detail: A });
+        s({ type: f.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);
+    return i && (document.addEventListener("mousemove", x), document.addEventListener("mouseup", v), document.addEventListener("touchmove", B), document.addEventListener("touchend", v)), () => {
+      document.removeEventListener("mousemove", x), 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(
+  }, [i, h, s]), /* @__PURE__ */ e.jsxs("div", { className: p("group relative flex items-center", l), children: [
+    (m !== 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}%`,
+          left: `${g || (m || 0) / t * 100}%`,
           transform: "translateX(-50%)"
         },
-        children: D(x || a || 0)
+        children: D(m || a || 0)
       }
     ),
     /* @__PURE__ */ e.jsxs(
@@ -525,13 +525,13 @@ const Y = function({
         onMouseDown: T,
         onTouchStart: S,
         children: [
-          y.map((f, v) => /* @__PURE__ */ e.jsx(
+          y.map((x, 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}%`
+                left: `${x.start}%`,
+                width: `${x.end - x.start}%`
               }
             },
             v
@@ -561,18 +561,18 @@ const Y = function({
       }
     )
   ] });
-}, se = function({
+}, 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({ type: f.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]);
+    s({ type: f.SET_VOLUME, detail: u });
+  }, [s]), m = 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),
+      className: p("relative flex items-center", l),
       onMouseEnter: () => a(!0),
       onMouseLeave: () => a(!1),
       children: [
@@ -583,10 +583,10 @@ const Y = function({
             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
+            children: m
           }
         ),
-        /* @__PURE__ */ e.jsx("div", { className: m(
+        /* @__PURE__ */ e.jsx("div", { className: p(
           "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(
@@ -604,12 +604,12 @@ const Y = function({
       ]
     }
   );
-}, te = function({
+}, ne = function({
   className: l,
   size: s = "md",
   skipTime: n = 10
 }) {
-  const t = L(), o = b((x) => x.currentTime), a = {
+  const t = L(), o = b((m) => m.currentTime), a = {
     sm: "h-8 w-8",
     md: "h-10 w-10",
     lg: "h-12 w-12"
@@ -618,15 +618,15 @@ const Y = function({
     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 });
+    const m = Math.max(0, o - n);
+    t({ type: f.SEEK, detail: m });
   }, [t, o, n]);
   return /* @__PURE__ */ e.jsx(
     "button",
     {
       type: "button",
       onClick: c,
-      className: m(
+      className: p(
         "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",
@@ -636,7 +636,7 @@ const Y = function({
       ),
       "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: [
+      children: /* @__PURE__ */ e.jsxs("div", { className: p("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" })
@@ -645,7 +645,7 @@ const Y = function({
       ] })
     }
   );
-}, ne = function({
+}, ae = function({
   className: l,
   size: s = "md",
   skipTime: n = 10
@@ -658,16 +658,16 @@ const Y = function({
     sm: "h-4 w-4",
     md: "h-5 w-5",
     lg: "h-6 w-6"
-  }, x = r.useCallback(() => {
+  }, m = r.useCallback(() => {
     const u = Math.min(a, o + n);
-    t({ type: p.SEEK, detail: u });
+    t({ type: f.SEEK, detail: u });
   }, [t, o, a, n]);
   return /* @__PURE__ */ e.jsx(
     "button",
     {
       type: "button",
-      onClick: x,
-      className: m(
+      onClick: m,
+      className: p(
         "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",
@@ -677,7 +677,7 @@ const Y = function({
       ),
       "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: [
+      children: /* @__PURE__ */ e.jsxs("div", { className: p("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" })
@@ -686,7 +686,7 @@ const Y = function({
       ] })
     }
   );
-}, _ = function({
+}, I = function({
   variant: l = "current",
   className: s
 }) {
@@ -702,23 +702,23 @@ const Y = function({
         return D(n);
     }
   }, [l, n, t]);
-  return /* @__PURE__ */ e.jsx("div", { className: m("font-mono text-sm text-white tabular-nums", s), children: o });
-}, ae = function({
+  return /* @__PURE__ */ e.jsx("div", { className: p("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: [
+  return /* @__PURE__ */ e.jsxs("div", { className: p("flex items-center gap-3 font-mono text-xs", s), children: [
+    l.fps !== void 0 && /* @__PURE__ */ e.jsxs("div", { className: p("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: [
+    l.bufferHealth !== void 0 && /* @__PURE__ */ e.jsxs("div", { className: p("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),
@@ -733,7 +733,7 @@ const Y = function({
       ] })
     ] })
   ] });
-}, ie = function({
+}, de = function({
   className: l,
   showSkipButtons: s = !0,
   showVolumeControl: n = !0,
@@ -742,14 +742,14 @@ const Y = function({
   skipButtonSize: a = "md",
   skipTime: i = 10,
   showPerformanceIndicators: c = process.env.NODE_ENV === "development",
-  performanceMetrics: x
+  performanceMetrics: m
 }) {
-  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(ee, { className: "w-full" }),
+  return /* @__PURE__ */ e.jsxs("div", { className: p("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(
-          te,
+          ne,
           {
             size: a,
             skipTime: i,
@@ -757,37 +757,37 @@ const Y = function({
           }
         ),
         /* @__PURE__ */ e.jsx(
-          q,
+          ee,
           {
             size: o,
             className: "shrink-0"
           }
         ),
         s && /* @__PURE__ */ e.jsx(
-          ne,
+          ae,
           {
             size: a,
             skipTime: i,
             className: "shrink-0"
           }
         ),
-        n && /* @__PURE__ */ e.jsx(se, { 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(I, { variant: "current" }),
           /* @__PURE__ */ e.jsx("span", { className: "text-white/60", children: "/" }),
-          /* @__PURE__ */ e.jsx(_, { variant: "duration" })
+          /* @__PURE__ */ e.jsx(I, { variant: "duration" })
         ] })
       ] }),
       /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-2", children: c && /* @__PURE__ */ e.jsx(
-        ae,
+        le,
         {
-          metrics: x,
+          metrics: m,
           className: "text-white/80"
         }
       ) })
     ] })
   ] });
-}, de = ({
+}, ue = ({
   performanceMetrics: d = {},
   preloadingStats: l = {},
   playbackState: s = {},
@@ -797,9 +797,9 @@ const Y = function({
   className: a,
   position: i = "top-right",
   defaultCollapsed: c = !1,
-  title: x = "BaroiPlayer Debug Panel"
+  title: m = "BaroiPlayer Debug Panel"
 }) => {
-  const [u, w] = r.useState(c), [C, g] = r.useState("performance"), y = U(() => {
+  const [u, w] = r.useState(c), [C, g] = r.useState("performance"), y = $(() => {
     switch (i) {
       case "top-left":
         return "top-4 left-4";
@@ -927,7 +927,7 @@ const Y = function({
       /* @__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: [
+  ] }) }), x = () => /* @__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: [
@@ -965,7 +965,7 @@ const Y = function({
         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: [
+    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: [
         "• ",
@@ -987,7 +987,7 @@ const Y = function({
     "button",
     {
       onClick: () => g(j.id),
-      className: m(
+      className: _(
         "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"
       ),
@@ -1005,7 +1005,7 @@ const Y = function({
           S()
         ] });
       case "hls":
-        return f();
+        return x();
       case "plugins":
         return v();
       case "debug":
@@ -1017,14 +1017,14 @@ const Y = function({
   return process.env.NODE_ENV !== "development" ? null : /* @__PURE__ */ e.jsxs(
     "div",
     {
-      className: m(
+      className: _(
         "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("h3", { className: "font-bold text-blue-400 text-sm", children: m }),
           /* @__PURE__ */ e.jsx("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ e.jsx(
             "button",
             {
@@ -1056,18 +1056,18 @@ const Y = function({
   );
 };
 export {
-  J as C,
-  de as D,
-  G as E,
-  Z as P,
-  Y as Q,
-  W as S,
-  Q as a,
-  q as b,
-  ee as c,
-  _ as d,
-  se as e,
-  ie as f,
-  ce as g
+  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,
+  I as d,
+  te as e,
+  de as f,
+  ie as g
 };
-//# sourceMappingURL=enhanced-components-DHv0MFvG.js.map
+//# sourceMappingURL=enhanced-components-Da0TSvKe.js.map