@therealtinhtute/baroiplayer 1.1.0 → 1.2.0

package/dist/{minimal-components-DlRK7Qu_.js → minimal-components-C4z900Ro.js}

@@ -1,7 +1,7 @@
-import { j as e, d as Me, u as ie, a as Q, b as Z, M as y } from "./context-BYwDoSRX.js";
+import { j as e, d as we, u as ie, a as Q, b as Z, M as y } from "./context-BYwDoSRX.js";
 import K, { useState as A, useRef as D, useEffect as B, useCallback as V } from "react";
 import { c as f, f as W } from "./utils-Dzpl2ArK.js";
-import { u as Ne, a as Le, b as ze, c as Ee, d as ke, e as Ce, f as Ae, g as Se } from "./hooks-CyX6De5M.js";
+import { u as Me, a as Ne, b as Le, c as ze, d as Ee, e as ke, f as Ce, g as Ae } from "./hooks-Bpi-jDiO.js";
 function Oe(...t) {
   return (s) => {
     t.forEach((n) => {
@@ -9,15 +9,15 @@ function Oe(...t) {
     });
   };
 }
-function Pe({
+function Se({
   children: t,
   className: s,
   dir: n = "ltr",
   disabled: a = !1,
-  asChild: l = !1,
-  autoHide: r = !0,
-  enableGestures: c = !0,
-  enableMobileOptimizations: o = !0,
+  asChild: r = !1,
+  autoHide: l = !0,
+  enableGestures: o = !0,
+  enableMobileOptimizations: c = !0,
   onPlay: d,
   onPause: p,
   onEnded: v,
@@ -29,10 +29,10 @@ function Pe({
   onFullscreenChange: k,
   ...g
 }) {
-  const x = ie(), u = Q(), { isTouchDevice: w } = Ne(), h = Z((i) => i.isPlaying), m = Z((i) => i.currentTime), L = Z((i) => i.volume);
+  const x = ie(), u = Q(), { isTouchDevice: w } = Me(), h = Z((i) => i.isPlaying), m = Z((i) => i.currentTime), L = Z((i) => i.volume);
   Z((i) => i.isMuted), Z((i) => i.error);
   const j = Z((i) => i.isFullscreen);
-  Z((i) => i.isPictureInPicture), Le();
+  Z((i) => i.isPictureInPicture), Ne();
   const C = {
     onPlayPause: () => {
       a || u({
@@ -66,11 +66,11 @@ function Pe({
       console.log("Zoom gesture detected:", i);
     }
   };
-  ze(
+  Le(
     x.rootRef,
-    c ? C : {}
+    o ? C : {}
   );
-  const S = (i) => {
+  const O = (i) => {
     if (a) return;
     const E = i.target;
     if (E.tagName === "INPUT" || E.tagName === "TEXTAREA" || E.isContentEditable) return;
@@ -128,7 +128,7 @@ function Pe({
       u({ type: y.PAUSE }), p?.();
     }, I = () => {
       u({ type: y.PAUSE }), v?.();
-    }, O = () => {
+    }, S = () => {
       const P = i.currentTime;
       u({ type: y.SET_CURRENT_TIME, detail: P }), b?.(P);
     }, J = () => {
@@ -142,8 +142,8 @@ function Pe({
     }, U = () => {
       u({ type: y.SET_LOADING, detail: !0 });
     };
-    return i.addEventListener("play", E), i.addEventListener("pause", Y), i.addEventListener("ended", I), i.addEventListener("timeupdate", O), i.addEventListener("volumechange", J), i.addEventListener("loadedmetadata", F), i.addEventListener("error", H), i.addEventListener("loadstart", U), () => {
-      i.removeEventListener("play", E), i.removeEventListener("pause", Y), i.removeEventListener("ended", I), i.removeEventListener("timeupdate", O), i.removeEventListener("volumechange", J), i.removeEventListener("loadedmetadata", F), i.removeEventListener("error", H), i.removeEventListener("loadstart", U);
+    return i.addEventListener("play", E), i.addEventListener("pause", Y), i.addEventListener("ended", I), i.addEventListener("timeupdate", S), i.addEventListener("volumechange", J), i.addEventListener("loadedmetadata", F), i.addEventListener("error", H), i.addEventListener("loadstart", U), () => {
+      i.removeEventListener("play", E), i.removeEventListener("pause", Y), i.removeEventListener("ended", I), i.removeEventListener("timeupdate", S), i.removeEventListener("volumechange", J), i.removeEventListener("loadedmetadata", F), i.removeEventListener("error", H), i.removeEventListener("loadstart", U);
     };
   }, [u, d, p, v, b, N, M, z]);
   const G = {
@@ -176,22 +176,22 @@ function Pe({
       "transform-gpu",
       s
     ),
-    onKeyDown: S,
+    onKeyDown: O,
     ...g
   };
   return /* @__PURE__ */ e.jsx("div", { ref: Oe(x.rootRef), ...G, children: t });
 }
-function ce(t) {
-  return /* @__PURE__ */ e.jsx(Me, { children: /* @__PURE__ */ e.jsx(Pe, { ...t }) });
+function oe(t) {
+  return /* @__PURE__ */ e.jsx(we, { children: /* @__PURE__ */ e.jsx(Se, { ...t }) });
 }
-ce.displayName = "MediaPlayerRoot";
-const ue = (t) => /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...t, children: /* @__PURE__ */ e.jsx(
+oe.displayName = "MediaPlayerRoot";
+const ce = (t) => /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...t, children: /* @__PURE__ */ e.jsx(
   "path",
   {
     fill: "currentColor",
     d: "M3 2.25a1 1 0 0 0-1 1V9a1 1 0 0 0 1 1h5.25a1 1 0 0 0 0-2H4.863c.985-1.179 2.208-2.113 3.682-2.57a9.435 9.435 0 0 1 6.106.16c1.981.738 3.81 2.232 4.722 3.894a1 1 0 1 0 1.754-.961c-1.175-2.143-3.415-3.927-5.778-4.807a11.435 11.435 0 0 0-7.395-.196C6.378 4.008 5.068 4.9 4 5.979V3.25a1 1 0 0 0-1-1ZM9.75 12a1 1 0 0 0-1.762-.647l-.222.265c-.515.623-1.078 1.303-2.28 2.024a1 1 0 1 0 1.029 1.716c.483-.29.889-.582 1.235-.865V20a1 1 0 0 0 2 0v-8Zm6.5-1c-1.386 0-2.4.635-3.008 1.661c-.564.95-.742 2.161-.742 3.339s.178 2.39.742 3.339C13.85 20.365 14.864 21 16.25 21s2.4-.635 3.008-1.661c.564-.95.742-2.161.742-3.339s-.178-2.39-.742-3.339C18.65 11.635 17.636 11 16.25 11Zm-1.75 5c0-1.031.166-1.82.461-2.318c.251-.422.613-.682 1.289-.682c.676 0 1.038.26 1.288.682c.296.498.462 1.287.462 2.318c0 1.031-.166 1.82-.462 2.318c-.25.422-.612.682-1.288.682s-1.038-.26-1.289-.682c-.295-.498-.461-1.287-.461-2.318Z"
   }
-) }), Te = (t) => /* @__PURE__ */ e.jsx(
+) }), Pe = (t) => /* @__PURE__ */ e.jsx(
   "svg",
   {
     width: 32,
@@ -207,13 +207,13 @@ const ue = (t) => /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/
       }
     )
   }
-), Ie = Te, de = (t) => /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...t, children: /* @__PURE__ */ e.jsx(
+), Te = Pe, ue = (t) => /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...t, children: /* @__PURE__ */ e.jsx(
   "path",
   {
     fill: "currentColor",
     d: "M21 2.25a1 1 0 0 1 1 1V9a1 1 0 0 1-1 1h-5.25a1 1 0 0 1 0-2h3.387c-.985-1.179-2.208-2.113-3.682-2.57a9.435 9.435 0 0 0-6.106.16c-1.981.738-3.81 2.232-4.722 3.894a1 1 0 0 1-1.754-.961C4.048 6.38 6.288 4.596 8.652 3.716a11.435 11.435 0 0 1 7.394-.196c1.576.488 2.886 1.38 3.954 2.459V3.25a1 1 0 0 1 1-1ZM9.095 11.061A1 1 0 0 1 9.75 12v8a1 1 0 0 1-2 0v-5.507c-.346.283-.752.575-1.235.864a1 1 0 1 1-1.03-1.715c1.203-.721 1.766-1.4 2.281-2.024c.074-.09.148-.178.222-.265a1 1 0 0 1 1.107-.292Zm4.147 1.6C13.85 11.635 14.864 11 16.25 11s2.4.635 3.008 1.661c.564.95.742 2.161.742 3.339s-.178 2.39-.742 3.339C18.65 20.365 17.636 21 16.25 21s-2.4-.636-3.008-1.661c-.564-.95-.742-2.161-.742-3.339s.178-2.39.742-3.339Zm1.72 1.021c-.296.498-.462 1.287-.462 2.318c0 1.031.166 1.82.461 2.318c.251.422.613.682 1.289.682c.676 0 1.038-.26 1.288-.682c.296-.498.462-1.287.462-2.318c0-1.031-.166-1.82-.462-2.318c-.25-.422-.612-.682-1.288-.682s-1.038.26-1.289.682Z"
   }
-) }), qe = (t) => /* @__PURE__ */ e.jsx(
+) }), Ie = (t) => /* @__PURE__ */ e.jsx(
   "svg",
   {
     width: "24",
@@ -234,7 +234,7 @@ const ue = (t) => /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/
       }
     )
   }
-), Ge = (t) => /* @__PURE__ */ e.jsx(
+), qe = (t) => /* @__PURE__ */ e.jsx(
   "svg",
   {
     width: "24",
@@ -255,7 +255,7 @@ const ue = (t) => /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/
       }
     )
   }
-), Ye = (t) => /* @__PURE__ */ e.jsxs(
+), Ge = (t) => /* @__PURE__ */ e.jsxs(
   "svg",
   {
     width: "24",
@@ -288,7 +288,7 @@ const ue = (t) => /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/
       ) })
     ]
   }
-), Ze = (t) => /* @__PURE__ */ e.jsx(
+), Ye = (t) => /* @__PURE__ */ e.jsx(
   "svg",
   {
     width: "24",
@@ -309,7 +309,7 @@ const ue = (t) => /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/
       }
     )
   }
-), Ke = (t) => /* @__PURE__ */ e.jsx(
+), Ze = (t) => /* @__PURE__ */ e.jsx(
   "svg",
   {
     width: "24",
@@ -328,13 +328,13 @@ const ue = (t) => /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/
       }
     )
   }
-), De = (t) => /* @__PURE__ */ e.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", ...t, children: /* @__PURE__ */ e.jsx(
+), Ke = (t) => /* @__PURE__ */ e.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", ...t, children: /* @__PURE__ */ e.jsx(
   "path",
   {
     fill: "currentColor",
     d: "M2 12c0-.865.11-1.703.316-2.504A3 3 0 0 0 4.99 4.867a9.99 9.99 0 0 1 4.335-2.505a3 3 0 0 0 5.348 0a9.99 9.99 0 0 1 4.335 2.505a3 3 0 0 0 2.675 4.63a10.036 10.036 0 0 1 0 5.007a3 3 0 0 0-2.675 4.629a9.99 9.99 0 0 1-4.335 2.505a3 3 0 0 0-5.348 0a9.99 9.99 0 0 1-4.335-2.505a3 3 0 0 0-2.675-4.63A10.056 10.056 0 0 1 2 12zm4.804 3c.63 1.091.81 2.346.564 3.524c.408.29.842.541 1.297.75A4.993 4.993 0 0 1 12 18c1.26 0 2.438.471 3.335 1.274c.455-.209.889-.46 1.297-.75A4.993 4.993 0 0 1 17.196 15a4.993 4.993 0 0 1 2.77-2.25a8.126 8.126 0 0 0 0-1.5A4.993 4.993 0 0 1 17.195 9a4.993 4.993 0 0 1-.564-3.524a7.989 7.989 0 0 0-1.297-.75A4.993 4.993 0 0 1 12 6a4.993 4.993 0 0 1-3.335-1.274a7.99 7.99 0 0 0-1.297.75A4.993 4.993 0 0 1 6.804 9a4.993 4.993 0 0 1-2.77 2.25a8.126 8.126 0 0 0 0 1.5A4.993 4.993 0 0 1 6.805 15zM12 15a3 3 0 1 1 0-6a3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2a1 1 0 0 0 0 2z"
   }
-) }), Re = (t) => /* @__PURE__ */ e.jsx(
+) }), De = (t) => /* @__PURE__ */ e.jsx(
   "svg",
   {
     width: "24",
@@ -353,7 +353,7 @@ const ue = (t) => /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/
       }
     )
   }
-), We = (t) => /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...t, children: /* @__PURE__ */ e.jsxs("g", { fill: "currentColor", children: [
+), Re = (t) => /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...t, children: /* @__PURE__ */ e.jsxs("g", { fill: "currentColor", children: [
   /* @__PURE__ */ e.jsx(
     "path",
     {
@@ -363,7 +363,7 @@ const ue = (t) => /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/
     }
   ),
   /* @__PURE__ */ e.jsx("path", { d: "M21.78 3.53a.75.75 0 0 0-1.06-1.06l-4.45 4.449a11.265 11.265 0 0 0-.193-1.39c-.172-.788-.477-1.473-1.116-1.923a3.066 3.066 0 0 0-.769-.39c-.818-.28-1.631-.057-2.457.345c-.814.395-1.8 1.046-3.032 1.857l-.267.176c-.447.295-.602.394-.76.464a2.17 2.17 0 0 1-.535.16c-.171.03-.354.032-.89.032h-.162c-1.217 0-2.062-.001-2.814.347A3.962 3.962 0 0 0 1.548 8.22c-.392.729-.438 1.491-.504 2.575l-.008.13C1.014 11.294 1 11.658 1 12c0 .342.014.706.036 1.074l.008.13c.066 1.084.112 1.846.504 2.575a3.962 3.962 0 0 0 1.727 1.624c.61.283 1.283.336 2.166.345L2.72 20.47a.75.75 0 1 0 1.06 1.06l18-18ZM16.5 12a.75.75 0 0 0-1.255-.554l-.071.074l-6 6.274A.778.778 0 0 0 9.34 19c1.039.68 1.899 1.225 2.631 1.549c.743.328 1.48.489 2.222.236a3.08 3.08 0 0 0 .769-.391c.706-.497 1.005-1.28 1.167-2.18c.159-.884.213-2.056.281-3.516l.003-.058a68.23 68.23 0 0 0 .088-2.64Z" })
-] }) }), Je = (t) => /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...t, children: /* @__PURE__ */ e.jsxs("g", { fill: "currentColor", children: [
+] }) }), We = (t) => /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...t, children: /* @__PURE__ */ e.jsxs("g", { fill: "currentColor", children: [
   /* @__PURE__ */ e.jsx("path", { d: "M2.003 11.716c.037-1.843.056-2.764.668-3.552a3.18 3.18 0 0 1 .413-.431c.752-.636 1.746-.636 3.733-.636c.71 0 1.065 0 1.403-.092c.07-.02.14-.042.209-.067c.33-.121.627-.33 1.22-.746c2.338-1.645 3.508-2.467 4.489-2.11c.188.069.37.168.533.29c.848.635.913 2.115 1.042 5.073a70.58 70.58 0 0 1 .08 2.555c0 .521-.032 1.46-.08 2.555c-.13 2.958-.194 4.438-1.042 5.073a2.109 2.109 0 0 1-.533.29c-.982.357-2.15-.465-4.49-2.11c-.592-.416-.889-.625-1.22-.746a2.61 2.61 0 0 0-.208-.067c-.338-.092-.693-.092-1.403-.092c-1.987 0-2.98 0-3.733-.636a3.145 3.145 0 0 1-.413-.43c-.612-.79-.63-1.71-.668-3.553a14.06 14.06 0 0 1 0-.569Z" }),
   /* @__PURE__ */ e.jsx(
     "path",
@@ -373,134 +373,133 @@ const ue = (t) => /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/
       clipRule: "evenodd"
     }
   )
-] }) }), He = ({
+] }) }), Je = ({
   size: t = 24,
   className: s = "",
   color: n = "currentColor"
-}) => /* @__PURE__ */ e.jsx(Ke, { width: t, height: t, className: s, style: { color: n } }), Ue = ({
+}) => /* @__PURE__ */ e.jsx(Ze, { width: t, height: t, className: s, style: { color: n } }), He = ({
   size: t = 24,
   className: s = "",
   color: n = "currentColor"
-}) => /* @__PURE__ */ e.jsx(Ze, { width: t, height: t, className: s, style: { color: n } }), Ve = ({
+}) => /* @__PURE__ */ e.jsx(Ye, { width: t, height: t, className: s, style: { color: n } }), Ue = ({
   size: t = 24,
   className: s = "",
   color: n = "currentColor"
-}) => /* @__PURE__ */ e.jsx(Je, { width: t, height: t, className: s, style: { color: n } }), Fe = ({
+}) => /* @__PURE__ */ e.jsx(We, { width: t, height: t, className: s, style: { color: n } }), Ve = ({
   size: t = 24,
   className: s = "",
   color: n = "currentColor"
-}) => /* @__PURE__ */ e.jsx(We, { width: t, height: t, className: s, style: { color: n } }), Xe = ({
+}) => /* @__PURE__ */ e.jsx(Re, { width: t, height: t, className: s, style: { color: n } }), Fe = ({
   size: t = 24,
   className: s = "",
   color: n = "currentColor"
-}) => /* @__PURE__ */ e.jsx(qe, { width: t, height: t, className: s, style: { color: n } }), Be = ({
+}) => /* @__PURE__ */ e.jsx(Ie, { width: t, height: t, className: s, style: { color: n } }), Xe = ({
   size: t = 24,
   className: s = "",
   color: n = "currentColor"
-}) => /* @__PURE__ */ e.jsx(Ge, { width: t, height: t, className: s, style: { color: n } }), Qe = ({
+}) => /* @__PURE__ */ e.jsx(qe, { width: t, height: t, className: s, style: { color: n } }), Be = ({
   size: t = 24,
   className: s = "",
   color: n = "currentColor"
-}) => /* @__PURE__ */ e.jsx(De, { width: t, height: t, className: s, style: { color: n } }), _e = ({
+}) => /* @__PURE__ */ e.jsx(Ke, { width: t, height: t, className: s, style: { color: n } }), Qe = ({
   size: t = 24,
   className: s = "",
   color: n = "currentColor"
 }) => /* @__PURE__ */ e.jsx(
-  Ye,
+  Ge,
   {
     width: t,
     height: t,
     className: `animate-spin ${s}`,
     style: { color: n }
   }
-), $e = ({
+), _e = ({
   size: t = 24,
   className: s = "",
   color: n = "currentColor"
-}) => /* @__PURE__ */ e.jsx(ue, { width: t, height: t, className: s, style: { color: n } }), et = ({
+}) => /* @__PURE__ */ e.jsx(ce, { width: t, height: t, className: s, style: { color: n } }), $e = ({
   size: t = 24,
   className: s = "",
   color: n = "currentColor"
-}) => /* @__PURE__ */ e.jsx(de, { width: t, height: t, className: s, style: { color: n } }), tt = ({
+}) => /* @__PURE__ */ e.jsx(ue, { width: t, height: t, className: s, style: { color: n } }), et = ({
   size: t = 24,
   className: s = "",
   color: n = "currentColor"
-}) => /* @__PURE__ */ e.jsx(de, { width: t, height: t, className: s, style: { color: n } }), nt = ({
+}) => /* @__PURE__ */ e.jsx(ue, { width: t, height: t, className: s, style: { color: n } }), tt = ({
   size: t = 24,
   className: s = "",
   color: n = "currentColor"
-}) => /* @__PURE__ */ e.jsx(ue, { width: t, height: t, className: s, style: { color: n } }), me = ({
+}) => /* @__PURE__ */ e.jsx(ce, { width: t, height: t, className: s, style: { color: n } }), de = ({
   size: t = 24,
   className: s = "",
   color: n = "currentColor"
-}) => /* @__PURE__ */ e.jsx(Re, { width: t, height: t, className: s, style: { color: n } }), st = ({
+}) => /* @__PURE__ */ e.jsx(De, { width: t, height: t, className: s, style: { color: n } }), nt = ({
   size: t = 24,
   className: s = "",
   color: n = "currentColor"
-}) => /* @__PURE__ */ e.jsx(Ie, { width: t, height: t, className: s, style: { color: n } }), R = {
-  play: He,
-  pause: Ue,
-  volume: Ve,
-  volumeMuted: Fe,
-  fullscreen: Xe,
-  exitFullscreen: Be,
-  settings: Qe,
-  forward: $e,
-  backward: et,
-  spinner: _e,
-  subtitle: me
+}) => /* @__PURE__ */ e.jsx(Te, { width: t, height: t, className: s, style: { color: n } }), R = {
+  play: Je,
+  pause: He,
+  volume: Ue,
+  volumeMuted: Ve,
+  fullscreen: Fe,
+  exitFullscreen: Xe,
+  settings: Be,
+  forward: _e,
+  backward: $e,
+  spinner: Qe,
+  subtitle: de
 };
-function oe(...t) {
+function st(...t) {
   return (s) => {
     t.forEach((n) => {
       typeof n == "function" ? n(s) : n && (n.current = s);
     });
   };
 }
-function he({
+function me({
   asChild: t = !1,
   className: s,
   children: n,
   ...a
 }) {
-  const l = ie(), [r, c] = K.useState(
-    () => oe(l.mediaRef)
+  const r = ie(), l = K.useMemo(
+    () => st(r.mediaRef),
+    [r.mediaRef]
   );
-  if (K.useEffect(() => {
-    c(() => oe(l.mediaRef));
-  }, [l.mediaRef]), t) {
+  if (t) {
     const o = K.Children.only(n);
     return K.cloneElement(o, {
       ...a,
-      ref: r,
+      ref: l,
       "data-slot": "media-player-video"
     });
   }
-  return /* @__PURE__ */ e.jsx("video", { ref: r, "data-slot": "media-player-video", className: s, ...a, children: n });
+  return /* @__PURE__ */ e.jsx("video", { ref: l, "data-slot": "media-player-video", className: s, ...a, children: n });
 }
-he.displayName = "MediaPlayerVideo";
+me.displayName = "MediaPlayerVideo";
 function se({
   variant: t = "current-duration",
   className: s,
   asChild: n = !1,
   children: a,
-  ...l
+  ...r
 }) {
-  const r = ie(), c = Z((b) => b.currentTime), o = Z((b) => b.duration), d = K.useMemo(() => t === "remaining" ? {
-    remaining: W(Math.max(0, o - c))
+  const l = ie(), o = Z((b) => b.currentTime), c = Z((b) => b.duration), d = K.useMemo(() => t === "remaining" ? {
+    remaining: W(Math.max(0, c - o))
   } : t === "duration" ? {
-    duration: W(o)
+    duration: W(c)
   } : t === "current" ? {
-    current: W(c)
+    current: W(o)
   } : {
-    current: W(c),
-    duration: W(o)
-  }, [t, c, o]), p = {
+    current: W(o),
+    duration: W(c)
+  }, [t, o, c]), p = {
     "data-slot": "media-player-time",
     "data-variant": t,
-    dir: r.dir,
+    dir: l.dir,
     className: f("text-sm text-foreground/80 tabular-nums", s),
-    ...l
+    ...r
   };
   if (t !== "current-duration") {
     const b = d[t];
@@ -542,16 +541,16 @@ function at({
   size: n = "md",
   className: a
 }) {
-  const l = Q(), r = () => {
-    l({
+  const r = Q(), l = () => {
+    r({
       type: t ? y.PAUSE : y.PLAY
     });
-  }, c = {
+  }, o = {
     sm: "h-10 w-10",
     md: "h-12 w-12 minimal-btn",
     lg: "h-16 w-16 minimal-btn-lg",
     xl: "h-20 w-20 minimal-btn-lg"
-  }, o = {
+  }, c = {
     sm: 27,
     md: 30,
     lg: 36,
@@ -560,17 +559,17 @@ function at({
   return !d || !p ? null : /* @__PURE__ */ e.jsx(
     "button",
     {
-      className: f("minimal-btn", c[n], a),
-      onClick: r,
+      className: f("minimal-btn", o[n], a),
+      onClick: l,
       "aria-label": t ? "Pause" : "Play",
-      children: t ? /* @__PURE__ */ e.jsx(p, { size: o[n] }) : /* @__PURE__ */ e.jsx(d, { size: o[n] })
+      children: t ? /* @__PURE__ */ e.jsx(p, { size: c[n] }) : /* @__PURE__ */ e.jsx(d, { size: c[n] })
     }
   );
 }
 function it({ thumbnails: t, onSeek: s, className: n }) {
-  const a = Q(), l = Z((h) => h.currentTime), r = Z((h) => h.duration), c = Z((h) => h.buffered), [o, d] = A(!1), [p, v] = A(0), [b, N] = A(0), M = D(null), z = r > 0 ? l / r * 100 : 0, T = c && c.length > 0 && r > 0 ? c.end(c.length - 1) / r * 100 : 0, k = (h) => {
-    if (!M.current || r === 0) return;
-    const m = M.current.getBoundingClientRect(), j = Math.max(0, Math.min(1, (h - m.left) / m.width)) * r;
+  const a = Q(), r = Z((h) => h.currentTime), l = Z((h) => h.duration), o = Z((h) => h.buffered), [c, d] = A(!1), [p, v] = A(0), [b, N] = A(0), M = D(null), z = l > 0 ? r / l * 100 : 0, T = o && o.length > 0 && l > 0 ? o.end(o.length - 1) / l * 100 : 0, k = (h) => {
+    if (!M.current || l === 0) return;
+    const m = M.current.getBoundingClientRect(), j = Math.max(0, Math.min(1, (h - m.left) / m.width)) * l;
     a({
       type: y.SEEK,
       detail: j
@@ -578,16 +577,16 @@ function it({ thumbnails: t, onSeek: s, className: n }) {
   }, g = (h) => {
     h.preventDefault(), d(!0), k(h.clientX);
   }, x = (h) => {
-    if (!M.current || r === 0) return;
-    const m = M.current.getBoundingClientRect(), j = Math.max(0, Math.min(1, (h.clientX - m.left) / m.width)) * r;
-    v(j), N(h.clientX - m.left), o && k(h.clientX);
+    if (!M.current || l === 0) return;
+    const m = M.current.getBoundingClientRect(), j = Math.max(0, Math.min(1, (h.clientX - m.left) / m.width)) * l;
+    v(j), N(h.clientX - m.left), c && k(h.clientX);
   }, u = () => {
     d(!1);
   }, w = () => {
     d(!1), v(0);
   };
   return K.useEffect(() => {
-    if (o) {
+    if (c) {
       const h = (L) => {
         k(L.clientX);
       }, m = () => {
@@ -597,7 +596,7 @@ function it({ thumbnails: t, onSeek: s, className: n }) {
         document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", m);
       };
     }
-  }, [o]), /* @__PURE__ */ e.jsxs("div", { className: f("group relative", n), children: [
+  }, [c]), /* @__PURE__ */ e.jsxs("div", { className: f("group relative", n), children: [
     p > 0 && /* @__PURE__ */ e.jsxs(
       "div",
       {
@@ -624,7 +623,7 @@ function it({ thumbnails: t, onSeek: s, className: n }) {
           /* @__PURE__ */ e.jsx(
             "div",
             {
-              className: f("minimal-seekbar-thumb", o && "active"),
+              className: f("minimal-seekbar-thumb", c && "active"),
               style: { left: `${z}%` }
             }
           )
@@ -633,8 +632,8 @@ function it({ thumbnails: t, onSeek: s, className: n }) {
     )
   ] });
 }
-function rt({ icons: t, className: s }) {
-  const n = Q(), a = Z((v) => v.volume), l = Z((v) => v.isMuted), [r, c] = A(!1), o = (v) => {
+function lt({ icons: t, className: s }) {
+  const n = Q(), a = Z((v) => v.volume), r = Z((v) => v.isMuted), [l, o] = A(!1), c = (v) => {
     const b = parseFloat(v.target.value);
     n({
       type: y.SET_VOLUME,
@@ -644,20 +643,20 @@ function rt({ icons: t, className: s }) {
     n({
       type: y.TOGGLE_MUTE
     });
-  }, p = l || a === 0 ? t.volumeMuted : t.volume;
+  }, p = r || a === 0 ? t.volumeMuted : t.volume;
   return p ? /* @__PURE__ */ e.jsxs(
     "div",
     {
       className: f("minimal-volume-group flex items-center gap-2", s),
-      onMouseEnter: () => c(!0),
-      onMouseLeave: () => c(!1),
+      onMouseEnter: () => o(!0),
+      onMouseLeave: () => o(!1),
       children: [
         /* @__PURE__ */ e.jsx(
           "button",
           {
             className: "minimal-btn inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/20 bg-white/10 text-white transition-all duration-150 hover:border-white/30 hover:bg-white/20",
             onClick: d,
-            "aria-label": l ? "Unmute" : "Mute",
+            "aria-label": r ? "Unmute" : "Mute",
             children: /* @__PURE__ */ e.jsx(p, { size: 18 })
           }
         ),
@@ -666,7 +665,7 @@ function rt({ icons: t, className: s }) {
           {
             className: f(
               "overflow-hidden transition-all duration-250",
-              r ? "w-20 opacity-100" : "w-0 opacity-0"
+              l ? "w-20 opacity-100" : "w-0 opacity-0"
             ),
             children: /* @__PURE__ */ e.jsx(
               "input",
@@ -675,11 +674,11 @@ function rt({ icons: t, className: s }) {
                 min: "0",
                 max: "1",
                 step: "0.01",
-                value: l ? 0 : a,
-                onChange: o,
+                value: r ? 0 : a,
+                onChange: c,
                 className: "minimal-volume-slider h-1 w-full cursor-pointer appearance-none rounded-full bg-white/20",
                 style: {
-                  background: `linear-gradient(to right, rgb(59 130 246) 0%, rgb(59 130 246) ${(l ? 0 : a) * 100}%, rgba(255,255,255,0.2) ${(l ? 0 : a) * 100}%, rgba(255,255,255,0.2) 100%)`
+                  background: `linear-gradient(to right, rgb(59 130 246) 0%, rgb(59 130 246) ${(r ? 0 : a) * 100}%, rgba(255,255,255,0.2) ${(r ? 0 : a) * 100}%, rgba(255,255,255,0.2) 100%)`
                 }
               }
             )
@@ -689,15 +688,15 @@ function rt({ icons: t, className: s }) {
     }
   ) : null;
 }
-function lt({
+function rt({
   visible: t,
   icons: s,
   isPlaying: n,
   showQualitySelector: a,
-  showSpeedControl: l,
-  qualities: r,
-  thumbnails: c,
-  onUserInteractionStart: o,
+  showSpeedControl: r,
+  qualities: l,
+  thumbnails: o,
+  onUserInteractionStart: c,
   onUserInteractionEnd: d,
   onSeek: p
 }) {
@@ -711,16 +710,16 @@ function lt({
         t ? "minimal-controls-visible" : "minimal-controls-hidden"
       ),
       "data-hidden": !t,
-      onMouseDown: o,
+      onMouseDown: c,
       onMouseUp: d,
-      onTouchStart: o,
+      onTouchStart: c,
       onTouchEnd: d,
       children: [
-        /* @__PURE__ */ e.jsx("div", { className: "mb-2", children: /* @__PURE__ */ e.jsx(it, { thumbnails: c, onSeek: p }) }),
+        /* @__PURE__ */ e.jsx("div", { className: "mb-2", children: /* @__PURE__ */ e.jsx(it, { thumbnails: o, onSeek: p }) }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
           /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-3", children: [
             /* @__PURE__ */ e.jsx(at, { isPlaying: n, icons: s }),
-            /* @__PURE__ */ e.jsx(rt, { icons: s }),
+            /* @__PURE__ */ e.jsx(lt, { icons: s }),
             /* @__PURE__ */ e.jsxs("div", { className: "minimal-time select-none font-mono text-sm text-white/90", children: [
               /* @__PURE__ */ e.jsx(se, { variant: "current" }),
               /* @__PURE__ */ e.jsx("span", { className: "mx-1 text-white/60", children: "/" }),
@@ -728,9 +727,9 @@ function lt({
             ] })
           ] }),
           /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
-            a && r && r.length > 1 && /* @__PURE__ */ e.jsx("button", { className: "minimal-btn w-auto px-3 font-medium text-xs", title: "Quality", children: r.find((v) => v.default)?.quality || r[0]?.quality || "Auto" }),
-            l && /* @__PURE__ */ e.jsx("button", { className: "minimal-btn w-auto px-3 font-medium text-xs", title: "Playback Speed", children: "1x" }),
-            s.settings && (a || l) && /* @__PURE__ */ e.jsx("button", { className: "minimal-btn", title: "Settings", children: /* @__PURE__ */ e.jsx(s.settings, { size: 18 }) }),
+            a && l && l.length > 1 && /* @__PURE__ */ e.jsx("button", { className: "minimal-btn w-auto px-3 font-medium text-xs", title: "Quality", children: l.find((v) => v.default)?.quality || l[0]?.quality || "Auto" }),
+            r && /* @__PURE__ */ e.jsx("button", { className: "minimal-btn w-auto px-3 font-medium text-xs", title: "Playback Speed", children: "1x" }),
+            s.settings && (a || r) && /* @__PURE__ */ e.jsx("button", { className: "minimal-btn", title: "Settings", children: /* @__PURE__ */ e.jsx(s.settings, { size: 18 }) }),
             /* @__PURE__ */ e.jsx(
               "button",
               {
@@ -767,20 +766,20 @@ function ct({
   showCenterButton: s = !1,
   isPlaying: n = !1,
   icons: a,
-  onPlayPause: l,
-  className: r
+  onPlayPause: r,
+  className: l
 }) {
   if (!t || !s) return null;
-  const c = a.play, o = a.pause;
-  return !c || !o ? null : /* @__PURE__ */ e.jsx(
+  const o = a.play, c = a.pause;
+  return !o || !c ? null : /* @__PURE__ */ e.jsx(
     "div",
     {
       className: f(
         "absolute inset-0 z-30 flex items-center justify-center",
         "bg-black/20 transition-opacity duration-200",
-        r
+        l
       ),
-      onClick: l,
+      onClick: r,
       children: /* @__PURE__ */ e.jsx(
         "button",
         {
@@ -794,10 +793,10 @@ function ct({
             "active:scale-95"
           ),
           onClick: (d) => {
-            d.stopPropagation(), l?.();
+            d.stopPropagation(), r?.();
           },
           "aria-label": n ? "Pause" : "Play",
-          children: n ? /* @__PURE__ */ e.jsx(o, { size: 48 }) : /* @__PURE__ */ e.jsx(c, { size: 48, className: "ml-1" })
+          children: n ? /* @__PURE__ */ e.jsx(c, { size: 48 }) : /* @__PURE__ */ e.jsx(o, { size: 48, className: "ml-1" })
         }
       )
     }
@@ -808,10 +807,10 @@ function kt({
   poster: s,
   autoPlay: n = !1,
   muted: a = !1,
-  loop: l = !1,
-  autoHideControls: r = !0,
-  hideDelay: c = 2500,
-  theme: o = "dark",
+  loop: r = !1,
+  autoHideControls: l = !0,
+  hideDelay: o = 2500,
+  theme: c = "dark",
   customIcons: d,
   showCenterPlayButton: p = !0,
   showLoadingSpinner: v = !0,
@@ -829,50 +828,50 @@ function kt({
   showSpeedControl: m = !1,
   thumbnails: L
 }) {
-  const [j, C] = A(!0), [S, G] = A(!1), [i, E] = A(!1), [Y, I] = A(null), O = D(null), J = D(null), [F, H] = A(!1), [U, P] = A(!1), X = { ...R, ...d }, _ = () => {
-    r && (O.current && clearTimeout(O.current), C(!0), !U && S && (O.current = setTimeout(() => {
+  const [j, C] = A(!0), [O, G] = A(!1), [i, E] = A(!1), [Y, I] = A(null), S = D(null), J = D(null), [F, H] = A(!1), [U, P] = A(!1), X = { ...R, ...d }, _ = () => {
+    l && (S.current && clearTimeout(S.current), C(!0), !U && O && (S.current = setTimeout(() => {
       C(!1);
-    }, c)));
-  }, fe = () => {
+    }, o)));
+  }, he = () => {
     _();
+  }, fe = () => {
+    H(!0), C(!0), S.current && clearTimeout(S.current);
   }, ve = () => {
-    H(!0), C(!0), O.current && clearTimeout(O.current);
-  }, xe = () => {
-    H(!1), S && r && !U && (O.current = setTimeout(() => {
+    H(!1), O && l && !U && (S.current = setTimeout(() => {
       C(!1);
     }, 500));
+  }, xe = () => {
+    P(!0), C(!0), S.current && clearTimeout(S.current);
   }, pe = () => {
-    P(!0), C(!0), O.current && clearTimeout(O.current);
-  }, ge = () => {
     P(!1), _();
-  }, le = (q) => {
-    G(q), q ? (N?.(), _()) : (M?.(), C(!0), O.current && clearTimeout(O.current));
-  }, be = () => {
+  }, re = (q) => {
+    G(q), q ? (N?.(), _()) : (M?.(), C(!0), S.current && clearTimeout(S.current));
+  }, ge = () => {
     E(!0), I(null);
-  }, je = () => {
+  }, be = () => {
     E(!1);
-  }, ye = (q) => {
+  }, je = (q) => {
     E(!1), I(q.message || "An error occurred"), x?.(q);
   };
   B(() => () => {
-    O.current && clearTimeout(O.current);
+    S.current && clearTimeout(S.current);
   }, []);
-  const we = w && w.length > 0 && (w.find((q) => q.default)?.src || w[0]?.src) || (typeof t == "string" ? t : t[0]);
+  const ye = w && w.length > 0 && (w.find((q) => q.default)?.src || w[0]?.src) || (typeof t == "string" ? t : t[0]);
   return /* @__PURE__ */ e.jsx(
     "div",
     {
       ref: J,
       className: f(
         "minimal-player theme-minimal relative overflow-hidden rounded-lg bg-black",
-        `theme-minimal-${o}`,
+        `theme-minimal-${c}`,
         b
       ),
-      "data-theme": o,
-      onMouseMove: fe,
-      onMouseEnter: ve,
-      onMouseLeave: xe,
+      "data-theme": c,
+      onMouseMove: he,
+      onMouseEnter: fe,
+      onMouseLeave: ve,
       children: /* @__PURE__ */ e.jsxs(
-        ce,
+        oe,
         {
           className: "relative h-full w-full",
           autoHide: !1,
@@ -880,17 +879,17 @@ function kt({
           enableMobileOptimizations: !0,
           children: [
             /* @__PURE__ */ e.jsx(
-              he,
+              me,
               {
-                src: we,
+                src: ye,
                 poster: s,
                 autoPlay: n,
                 muted: a,
-                loop: l,
+                loop: r,
                 playsInline: !0,
                 crossOrigin: "anonymous",
-                onPlay: () => le(!0),
-                onPause: () => le(!1),
+                onPlay: () => re(!0),
+                onPause: () => re(!1),
                 onEnded: z,
                 onTimeUpdate: (q) => {
                   const $ = q.currentTarget;
@@ -900,9 +899,9 @@ function kt({
                   const $ = q.currentTarget;
                   k?.($.volume);
                 },
-                onLoadStart: be,
-                onLoadedData: je,
-                onError: (q) => ye(new Error("Failed to load video"))
+                onLoadStart: ge,
+                onLoadedData: be,
+                onError: (q) => je(new Error("Failed to load video"))
               }
             ),
             v && i && /* @__PURE__ */ e.jsx(ot, { icon: X.spinner }),
@@ -952,31 +951,31 @@ function kt({
                 )
               }
             ),
-            p && !S && !i && /* @__PURE__ */ e.jsx(
+            p && !O && !i && /* @__PURE__ */ e.jsx(
               ct,
               {
                 visible: !0,
                 showCenterButton: !0,
-                isPlaying: S,
+                isPlaying: O,
                 icons: X,
                 onPlayPause: () => {
                   const q = J.current?.querySelector("video");
-                  q && (S ? q.pause() : q.play());
+                  q && (O ? q.pause() : q.play());
                 }
               }
             ),
             /* @__PURE__ */ e.jsx(
-              lt,
+              rt,
               {
-                visible: j || !S || F,
+                visible: j || !O || F,
                 icons: X,
-                isPlaying: S,
+                isPlaying: O,
                 showQualitySelector: h,
                 showSpeedControl: m,
                 qualities: w,
                 thumbnails: L,
-                onUserInteractionStart: pe,
-                onUserInteractionEnd: ge,
+                onUserInteractionStart: xe,
+                onUserInteractionEnd: pe,
                 onSeek: g
               }
             )
@@ -998,9 +997,9 @@ function dt({
   gifSrc: s,
   showFallback: n = !0,
   className: a,
-  ...l
+  ...r
 }) {
-  const [r, c] = A(!1), [o, d] = A(!1), p = [
+  const [l, o] = A(!1), [c, d] = A(!1), p = [
     s,
     ae,
     "/mona-loading.gif",
@@ -1008,7 +1007,7 @@ function dt({
     "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
     // 1x1 transparent gif as last resort
   ].filter(Boolean), [v, b] = A(0), N = p[v], M = () => {
-    v < p.length - 1 ? b(v + 1) : c(!0);
+    v < p.length - 1 ? b(v + 1) : o(!0);
   }, z = () => /* @__PURE__ */ e.jsxs("div", { className: "relative h-12 w-12", children: [
     /* @__PURE__ */ e.jsx("div", { className: "absolute inset-0 animate-spin rounded-full bg-gradient-to-r from-cyan-400 via-blue-500 to-cyan-400 opacity-75" }),
     /* @__PURE__ */ e.jsx("div", { className: "absolute inset-1 rounded-full bg-black/90" }),
@@ -1025,10 +1024,10 @@ function dt({
         "flex flex-col items-center justify-center space-y-2 rounded py-2 text-white",
         a
       ),
-      ...l,
+      ...r,
       children: [
-        (!o || r) && n && /* @__PURE__ */ e.jsx(z, {}),
-        !r && N && /* @__PURE__ */ e.jsx(
+        (!c || l) && n && /* @__PURE__ */ e.jsx(z, {}),
+        !l && N && /* @__PURE__ */ e.jsx(
           "img",
           {
             alt: "loading",
@@ -1037,8 +1036,8 @@ function dt({
             src: N,
             onError: M,
             onLoad: () => d(!0),
-            className: f("object-contain", !o && "hidden"),
-            style: { display: o ? "block" : "none" }
+            className: f("object-contain", !c && "hidden"),
+            style: { display: c ? "block" : "none" }
           }
         ),
         /* @__PURE__ */ e.jsx("span", { className: "mt-2 text-sm tracking-wider", children: t })
@@ -1067,7 +1066,7 @@ const mt = {
     spinner: "h-18 w-18 border-4",
     dots: "h-3 w-3"
   }
-}, re = {
+}, le = {
   initial: {
     wrapper: "absolute inset-0 z-50 flex items-center justify-center",
     background: "bg-black/80"
@@ -1084,9 +1083,9 @@ const mt = {
   context: s = "initial",
   message: n,
   className: a,
-  textSize: l = "text-sm"
+  textSize: r = "text-sm"
 }) {
-  const r = re[s], c = () => {
+  const l = le[s], o = () => {
     if (n) return n;
     switch (s) {
       case "initial":
@@ -1099,25 +1098,25 @@ const mt = {
         return "Loading...";
     }
   };
-  return /* @__PURE__ */ e.jsx("div", { className: f(r.wrapper, r.background, a), children: /* @__PURE__ */ e.jsx(dt, { loadingText: c(), className: f("text-white", l) }) });
+  return /* @__PURE__ */ e.jsx("div", { className: f(l.wrapper, l.background, a), children: /* @__PURE__ */ e.jsx(dt, { loadingText: o(), className: f("text-white", r) }) });
 }, ee = function({
   variant: s = "animate",
   context: n = "initial",
   size: a = "md",
-  color: l,
-  message: r,
-  showMessage: c = !0,
-  className: o,
+  color: r,
+  message: l,
+  showMessage: o = !0,
+  className: c,
   style: d
 }) {
-  const p = mt[a], v = re[n];
+  const p = mt[a], v = le[n];
   if (s === "animate")
     return /* @__PURE__ */ e.jsx(
       ht,
       {
         context: n,
-        message: r,
-        className: o,
+        message: l,
+        className: c,
         textSize: a === "sm" ? "text-xs" : a === "lg" ? "text-base" : "text-sm"
       }
     );
@@ -1131,10 +1130,10 @@ const mt = {
               "minimal-loading-spinner animate-spin rounded-full",
               "border-white/20 border-t-cyan-500",
               p.spinner,
-              o
+              c
             ),
             style: {
-              borderTopColor: l || void 0,
+              borderTopColor: r || void 0,
               ...d
             }
           }
@@ -1146,10 +1145,10 @@ const mt = {
             className: f(
               "minimal-loading-dot rounded-full bg-cyan-500",
               p.dots,
-              o
+              c
             ),
             style: {
-              backgroundColor: l || void 0,
+              backgroundColor: r || void 0,
               animationDelay: `${M * 150}ms`,
               ...d
             }
@@ -1157,7 +1156,7 @@ const mt = {
           M
         )) });
       case "skeleton":
-        return /* @__PURE__ */ e.jsxs("div", { className: f("space-y-3", o), children: [
+        return /* @__PURE__ */ e.jsxs("div", { className: f("space-y-3", c), children: [
           /* @__PURE__ */ e.jsx("div", { className: "minimal-loading-skeleton h-4 w-32 rounded bg-white/10" }),
           /* @__PURE__ */ e.jsx("div", { className: "minimal-loading-skeleton h-3 w-24 rounded bg-white/10" }),
           /* @__PURE__ */ e.jsx("div", { className: "minimal-loading-skeleton h-3 w-28 rounded bg-white/10" })
@@ -1166,7 +1165,7 @@ const mt = {
         return null;
     }
   }, N = () => {
-    if (r) return r;
+    if (l) return l;
     switch (n) {
       case "initial":
         return "Loading video...";
@@ -1180,7 +1179,7 @@ const mt = {
   };
   return /* @__PURE__ */ e.jsx("div", { className: f(v.wrapper, v.background), children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
     /* @__PURE__ */ e.jsx("div", { className: f(p.container, "flex items-center justify-center"), children: b() }),
-    c && /* @__PURE__ */ e.jsxs("div", { className: "text-center", children: [
+    o && /* @__PURE__ */ e.jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ e.jsx("p", { className: "font-medium text-sm text-white/90", children: N() }),
       n === "buffering" && /* @__PURE__ */ e.jsx("p", { className: "mt-1 text-white/60 text-xs", children: "Please wait..." })
     ] })
@@ -1190,8 +1189,8 @@ const mt = {
   context: n = "initial",
   className: a
 }) {
-  const l = re[n];
-  return /* @__PURE__ */ e.jsx("div", { className: f(l.wrapper, l.background, a), children: s });
+  const r = le[n];
+  return /* @__PURE__ */ e.jsx("div", { className: f(r.wrapper, r.background, a), children: s });
 }, ne = {
   Initial: (t) => /* @__PURE__ */ e.jsx(ee, { variant: "animate", context: "initial", size: "md", ...t }),
   Seeking: (t) => /* @__PURE__ */ e.jsx(ee, { variant: "animate", context: "seeking", size: "sm", ...t }),
@@ -1207,9 +1206,9 @@ const mt = {
   isPlaying: s,
   onTogglePlay: n,
   onSeekBackward: a,
-  onSeekForward: l
+  onSeekForward: r
 }) {
-  const r = R.play, c = R.pause;
+  const l = R.play, o = R.pause;
   return /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ e.jsx(
       "button",
@@ -1217,7 +1216,7 @@ const mt = {
         className: "minimal-btn size-15",
         onClick: n,
         "aria-label": s ? "Pause" : "Play",
-        children: s ? c && /* @__PURE__ */ e.jsx(c, { size: 32 }) : r && /* @__PURE__ */ e.jsx(r, { size: 32 })
+        children: s ? o && /* @__PURE__ */ e.jsx(o, { size: 32 }) : l && /* @__PURE__ */ e.jsx(l, { size: 32 })
       }
     ),
     /* @__PURE__ */ e.jsx(
@@ -1227,17 +1226,17 @@ const mt = {
         onClick: a,
         "aria-label": "Backward 10 seconds",
         title: "Backward 10s (J)",
-        children: /* @__PURE__ */ e.jsx(nt, { size: 18 })
+        children: /* @__PURE__ */ e.jsx(tt, { size: 18 })
       }
     ),
     /* @__PURE__ */ e.jsx(
       "button",
       {
         className: "minimal-btn h-9 w-9",
-        onClick: l,
+        onClick: r,
         "aria-label": "Forward 10 seconds",
         title: "Forward 10s (L)",
-        children: /* @__PURE__ */ e.jsx(tt, { size: 18 })
+        children: /* @__PURE__ */ e.jsx(et, { size: 18 })
       }
     )
   ] });
@@ -1245,14 +1244,14 @@ const mt = {
   showSettings: s,
   playbackRate: n,
   onToggleSettings: a,
-  onChangePlaybackRate: l
+  onChangePlaybackRate: r
 }) {
-  const r = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2], c = V(
+  const l = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2], o = V(
     (d) => {
       d.stopPropagation(), a();
     },
     [a]
-  ), o = V((d) => {
+  ), c = V((d) => {
     d.stopPropagation();
   }, []);
   return /* @__PURE__ */ e.jsxs("div", { className: "relative", style: { zIndex: s ? 60 : "auto" }, children: [
@@ -1260,7 +1259,7 @@ const mt = {
       "button",
       {
         className: f("minimal-btn h-9 w-9", s && "text-cyan-500"),
-        onClick: c,
+        onClick: o,
         "aria-label": "Settings",
         children: R.settings && /* @__PURE__ */ e.jsx(R.settings, { size: 18 })
       }
@@ -1273,10 +1272,10 @@ const mt = {
           bottom: "100%",
           zIndex: 1e3
         },
-        onClick: o,
+        onClick: c,
         children: [
           /* @__PURE__ */ e.jsx("div", { className: "px-3 py-1 text-gray-400 text-xs uppercase tracking-wider", children: "Speed" }),
-          /* @__PURE__ */ e.jsx("div", { className: "px-1", children: r.map((d) => /* @__PURE__ */ e.jsx(
+          /* @__PURE__ */ e.jsx("div", { className: "px-1", children: l.map((d) => /* @__PURE__ */ e.jsx(
             "button",
             {
               className: f(
@@ -1284,7 +1283,7 @@ const mt = {
                 "text-white",
                 n === d && "bg-cyan-700/20 text-cyan-400"
               ),
-              onClick: () => l(d),
+              onClick: () => r(d),
               children: d === 1 ? "Normal" : `${d}x`
             },
             d
@@ -1297,10 +1296,10 @@ const mt = {
   subtitleSrc: s,
   subtitlesEnabled: n,
   subtitleTracks: a,
-  currentTrackId: l,
-  hasSubtitles: r,
-  subtitleLoadError: c,
-  isFullscreen: o,
+  currentTrackId: r,
+  hasSubtitles: l,
+  subtitleLoadError: o,
+  isFullscreen: c,
   showSettings: d,
   playbackRate: p,
   onToggleSubtitles: v,
@@ -1322,19 +1321,19 @@ const mt = {
     a && a.length > 0 ? g(!k) : v();
   };
   return /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
-    r && /* @__PURE__ */ e.jsxs("div", { className: "relative", ref: x, children: [
+    l && /* @__PURE__ */ e.jsxs("div", { className: "relative", ref: x, children: [
       /* @__PURE__ */ e.jsx(
         "button",
         {
           className: f(
             "minimal-btn h-9 w-9",
             n && "text-cyan-500",
-            c && "text-red-500"
+            o && "text-red-500"
           ),
           onClick: h,
           "aria-label": "Subtitles",
-          title: c ? "Subtitle Error" : "Subtitles (C)",
-          children: /* @__PURE__ */ e.jsx(me, { size: 18 })
+          title: o ? "Subtitle Error" : "Subtitles (C)",
+          children: /* @__PURE__ */ e.jsx(de, { size: 18 })
         }
       ),
       k && a && a.length > 0 && /* @__PURE__ */ e.jsxs("div", { className: "absolute right-0 bottom-full mb-2 w-48 rounded-md bg-gray-900/95 py-2 shadow-lg backdrop-blur-sm", children: [
@@ -1357,7 +1356,7 @@ const mt = {
           {
             className: f(
               "flex w-full items-center px-3 py-1.5 text-gray-300 text-sm hover:bg-gray-800",
-              l === m.id && "bg-gray-800 text-cyan-500"
+              r === m.id && "bg-gray-800 text-cyan-500"
             ),
             onClick: () => {
               b?.(m.id), g(!1);
@@ -1373,7 +1372,7 @@ const mt = {
           },
           m.id
         )),
-        c && /* @__PURE__ */ e.jsx("div", { className: "mt-2 border-gray-800 border-t px-3 py-2", children: /* @__PURE__ */ e.jsx("p", { className: "text-red-400 text-xs", children: "Failed to load subtitles" }) })
+        o && /* @__PURE__ */ e.jsx("div", { className: "mt-2 border-gray-800 border-t px-3 py-2", children: /* @__PURE__ */ e.jsx("p", { className: "text-red-400 text-xs", children: "Failed to load subtitles" }) })
       ] })
     ] }),
     /* @__PURE__ */ e.jsx(
@@ -1383,7 +1382,7 @@ const mt = {
         onClick: (m) => N(m.ctrlKey || m.metaKey),
         "aria-label": "Take Screenshot",
         title: "Screenshot (S) - Ctrl+Click to copy",
-        children: /* @__PURE__ */ e.jsx(st, { size: 18 })
+        children: /* @__PURE__ */ e.jsx(nt, { size: 18 })
       }
     ),
     /* @__PURE__ */ e.jsx(
@@ -1400,9 +1399,9 @@ const mt = {
       {
         className: "minimal-btn h-9 w-9",
         onClick: M,
-        "aria-label": o ? "Exit Fullscreen" : "Enter Fullscreen",
+        "aria-label": c ? "Exit Fullscreen" : "Enter Fullscreen",
         title: "Fullscreen (F)",
-        children: o ? w && /* @__PURE__ */ e.jsx(w, { size: 18 }) : u && /* @__PURE__ */ e.jsx(u, { size: 18 })
+        children: c ? w && /* @__PURE__ */ e.jsx(w, { size: 18 }) : u && /* @__PURE__ */ e.jsx(u, { size: 18 })
       }
     )
   ] });
@@ -1410,18 +1409,18 @@ const mt = {
   currentTime: s,
   duration: n,
   bufferedRanges: a = [],
-  isSeeking: l = !1,
-  onSeek: r
+  isSeeking: r = !1,
+  onSeek: l
 }) {
-  const [c, o] = A(!1), [d, p] = A(0), [v, b] = A(!1), [N, M] = A({ x: 0, y: 0 }), z = D(null), T = n > 0 ? s / n * 100 : 0, k = (w) => {
+  const [o, c] = A(!1), [d, p] = A(0), [v, b] = A(!1), [N, M] = A({ x: 0, y: 0 }), z = D(null), T = n > 0 ? s / n * 100 : 0, k = (w) => {
     if (n === 0) return;
     const h = w.currentTarget.getBoundingClientRect(), m = (w.clientX - h.left) / h.width, L = Math.max(0, Math.min(n, m * n));
-    M({ x: w.clientX - h.left, y: w.clientY - h.top }), b(!0), setTimeout(() => b(!1), 600), r(L);
+    M({ x: w.clientX - h.left, y: w.clientY - h.top }), b(!0), setTimeout(() => b(!1), 600), l(L);
   }, g = (w) => {
     if (!z.current) return;
     const h = z.current.getBoundingClientRect(), m = (w.clientX - h.left) / h.width * 100;
     p(Math.max(0, Math.min(100, m)));
-  }, x = () => o(!0), u = () => o(!1);
+  }, x = () => c(!0), u = () => c(!1);
   return /* @__PURE__ */ e.jsxs("div", { className: "relative mb-3", children: [
     /* @__PURE__ */ e.jsxs(
       "div",
@@ -1429,7 +1428,7 @@ const mt = {
         ref: z,
         className: f(
           "minimal-seekbar group relative cursor-pointer",
-          l && "minimal-seekbar-seeking"
+          r && "minimal-seekbar-seeking"
         ),
         onClick: k,
         onMouseMove: g,
@@ -1455,19 +1454,19 @@ const mt = {
             {
               className: f(
                 "minimal-seekbar-progress",
-                l && "minimal-seekbar-progress-seeking"
+                r && "minimal-seekbar-progress-seeking"
               ),
               style: { width: `${T}%` }
             }
           ),
-          c && !l && /* @__PURE__ */ e.jsx("div", { className: "minimal-seekbar-hover-indicator", style: { left: `${d}%` } }),
+          o && !r && /* @__PURE__ */ e.jsx("div", { className: "minimal-seekbar-hover-indicator", style: { left: `${d}%` } }),
           /* @__PURE__ */ e.jsx(
             "div",
             {
               className: f(
                 "minimal-seekbar-thumb",
-                (c || l) && "opacity-100",
-                l && "minimal-seekbar-thumb-seeking"
+                (o || r) && "opacity-100",
+                r && "minimal-seekbar-thumb-seeking"
               ),
               style: { left: `${T}%` }
             }
@@ -1485,7 +1484,7 @@ const mt = {
         ]
       }
     ),
-    l && /* @__PURE__ */ e.jsx("div", { className: "-top-6 -translate-x-1/2 absolute left-1/2 transform", children: /* @__PURE__ */ e.jsx("div", { className: "rounded bg-black/80 px-2 py-1 text-white text-xs backdrop-blur-sm", children: "Seeking..." }) })
+    r && /* @__PURE__ */ e.jsx("div", { className: "-top-6 -translate-x-1/2 absolute left-1/2 transform", children: /* @__PURE__ */ e.jsx("div", { className: "rounded bg-black/80 px-2 py-1 text-white text-xs backdrop-blur-sm", children: "Seeking..." }) })
   ] });
 }, bt = function({ currentTime: s, duration: n }) {
   return /* @__PURE__ */ e.jsxs("div", { className: "font-mono text-sm text-white", children: [
@@ -1497,29 +1496,29 @@ const mt = {
   volume: s,
   isMuted: n,
   showVolumeSlider: a,
-  onToggleMute: l,
-  onVolumeChange: r,
-  onShowVolumeSlider: c,
-  orientation: o = "horizontal",
+  onToggleMute: r,
+  onVolumeChange: l,
+  onShowVolumeSlider: o,
+  orientation: c = "horizontal",
   className: d
 }) {
   const p = R.volume, v = R.volumeMuted, b = D(null), N = D(null), M = D(!1), [z, T] = K.useState(!1), [k, g] = K.useState(!1), x = D(null);
   V(
     (j) => {
       const C = parseFloat(j.target.value);
-      r(C);
+      l(C);
     },
-    [r]
+    [l]
   );
   const u = V(
     (j, C) => {
-      const S = C ? N : b;
-      if (!S.current) return;
-      const G = S.current.getBoundingClientRect();
+      const O = C ? N : b;
+      if (!O.current) return;
+      const G = O.current.getBoundingClientRect();
       let i;
-      C ? i = Math.max(0, Math.min(1, 1 - (j.clientY - G.top) / G.height)) : i = Math.max(0, Math.min(1, (j.clientX - G.left) / G.width)), r(i);
+      C ? i = Math.max(0, Math.min(1, 1 - (j.clientY - G.top) / G.height)) : i = Math.max(0, Math.min(1, (j.clientX - G.left) / G.width)), l(i);
     },
-    [r]
+    [l]
   ), w = V(
     (j, C) => {
       j.preventDefault(), j.stopPropagation(), M.current = !0, T(!0), u(j, C);
@@ -1527,13 +1526,13 @@ const mt = {
     [u]
   );
   B(() => {
-    const j = (S) => {
+    const j = (O) => {
       if (!M.current) return;
-      const G = o === "vertical" ? N : b;
+      const G = c === "vertical" ? N : b;
       if (!G.current) return;
       const i = G.current.getBoundingClientRect();
       let E;
-      o === "horizontal" ? E = Math.max(0, Math.min(1, (S.clientX - i.left) / i.width)) : E = Math.max(0, Math.min(1, 1 - (S.clientY - i.top) / i.height)), r(E);
+      c === "horizontal" ? E = Math.max(0, Math.min(1, (O.clientX - i.left) / i.width)) : E = Math.max(0, Math.min(1, 1 - (O.clientY - i.top) / i.height)), l(E);
     }, C = () => {
       M.current = !1, T(!1);
     };
@@ -1541,14 +1540,14 @@ const mt = {
       return document.addEventListener("mousemove", j), document.addEventListener("mouseup", C), () => {
         document.removeEventListener("mousemove", j), document.removeEventListener("mouseup", C);
       };
-  }, [z, o, r]);
+  }, [z, c, l]);
   const h = V(() => {
-    x.current && clearTimeout(x.current), g(!0), c(!0);
-  }, [c]), m = V(() => {
+    x.current && clearTimeout(x.current), g(!0), o(!0);
+  }, [o]), m = V(() => {
     x.current = setTimeout(() => {
-      M.current || (g(!1), c(!1));
+      M.current || (g(!1), o(!1));
     }, 200);
-  }, [c]);
+  }, [o]);
   B(() => () => {
     x.current && clearTimeout(x.current);
   }, []);
@@ -1558,13 +1557,13 @@ const mt = {
     {
       className: f(
         "volume-control-wrapper",
-        o === "vertical" ? "relative" : "flex items-center gap-2",
+        c === "vertical" ? "relative" : "flex items-center gap-2",
         d
       ),
       onMouseEnter: h,
       onMouseLeave: m,
       children: [
-        o === "vertical" && /* @__PURE__ */ e.jsx(
+        c === "vertical" && /* @__PURE__ */ e.jsx(
           "div",
           {
             className: f(
@@ -1613,12 +1612,12 @@ const mt = {
           "button",
           {
             className: "minimal-btn h-10 w-10",
-            onClick: l,
+            onClick: r,
             "aria-label": n ? "Unmute" : "Mute",
             children: n || s === 0 ? v && /* @__PURE__ */ e.jsx(v, { size: 20 }) : p && /* @__PURE__ */ e.jsx(p, { size: 20 })
           }
         ),
-        o === "horizontal" && /* @__PURE__ */ e.jsx(
+        c === "horizontal" && /* @__PURE__ */ e.jsx(
           "div",
           {
             className: f(
@@ -1663,10 +1662,10 @@ const mt = {
   controlsVisible: s,
   currentTime: n,
   duration: a,
-  isPlaying: l,
-  volume: r,
-  isMuted: c,
-  showVolumeSlider: o,
+  isPlaying: r,
+  volume: l,
+  isMuted: o,
+  showVolumeSlider: c,
   isFullscreen: d,
   showSettings: p,
   playbackRate: v,
@@ -1685,13 +1684,13 @@ const mt = {
   onSeekForward: L,
   onToggleMute: j,
   onVolumeChange: C,
-  onShowVolumeSlider: S,
+  onShowVolumeSlider: O,
   onToggleSubtitles: G,
   onSelectSubtitleTrack: i,
   onTakeScreenshot: E,
   onToggleFullscreen: Y,
   onToggleSettings: I,
-  onChangePlaybackRate: O
+  onChangePlaybackRate: S
 }) {
   return /* @__PURE__ */ e.jsxs(
     "div",
@@ -1718,7 +1717,7 @@ const mt = {
             /* @__PURE__ */ e.jsx(
               vt,
               {
-                isPlaying: l,
+                isPlaying: r,
                 onTogglePlay: h,
                 onSeekBackward: m,
                 onSeekForward: L
@@ -1727,12 +1726,12 @@ const mt = {
             /* @__PURE__ */ e.jsx(
               jt,
               {
-                volume: r,
-                isMuted: c,
-                showVolumeSlider: o,
+                volume: l,
+                isMuted: o,
+                showVolumeSlider: c,
                 onToggleMute: j,
                 onVolumeChange: C,
-                onShowVolumeSlider: S,
+                onShowVolumeSlider: O,
                 orientation: g
               }
             ),
@@ -1755,7 +1754,7 @@ const mt = {
               onTakeScreenshot: E,
               onToggleFullscreen: Y,
               onToggleSettings: I,
-              onChangePlaybackRate: O
+              onChangePlaybackRate: S
             }
           )
         ] })
@@ -1771,10 +1770,10 @@ const mt = {
   videoRef: s,
   src: n,
   poster: a,
-  subtitleSrc: l,
-  subtitlesEnabled: r,
-  crossOrigin: c,
-  onTogglePlay: o
+  subtitleSrc: r,
+  subtitlesEnabled: l,
+  crossOrigin: o,
+  onTogglePlay: c
 }) {
   return /* @__PURE__ */ e.jsx(
     "video",
@@ -1782,10 +1781,10 @@ const mt = {
       ref: s,
       src: n,
       poster: a,
-      crossOrigin: c,
+      crossOrigin: o,
       className: "h-full w-full object-contain",
-      onClick: o,
-      children: l && /* @__PURE__ */ e.jsx("track", { kind: "subtitles", src: l, default: r })
+      onClick: c,
+      children: r && /* @__PURE__ */ e.jsx("track", { kind: "subtitles", src: r, default: l })
     }
   );
 };
@@ -1794,14 +1793,14 @@ function Ct(t) {
     src: s,
     poster: n,
     className: a,
-    subtitleSrc: l,
-    subtitleTracks: r,
-    crossOrigin: c,
-    volumeOrientation: o = "horizontal",
+    subtitleSrc: r,
+    subtitleTracks: l,
+    crossOrigin: o,
+    volumeOrientation: c = "horizontal",
     loadingComponent: d = void 0,
     showLoadingState: p = !0,
     loadingProps: v = {}
-  } = t, b = D(null), [N, M] = A(!1), [z, T] = A(1), { videoRef: k, state: g, controls: x } = Ee(b), {
+  } = t, b = D(null), [N, M] = A(!1), [z, T] = A(1), { videoRef: k, state: g, controls: x } = ze(b), {
     subtitlesEnabled: u,
     currentSubtitle: w,
     toggleSubtitles: h,
@@ -1809,21 +1808,21 @@ function Ct(t) {
     setCurrentSubtitle: L,
     selectSubtitleTrack: j,
     availableTracks: C,
-    currentTrackId: S,
+    currentTrackId: O,
     loadError: G,
     hasSubtitles: i
-  } = ke({
-    subtitleSrc: l,
-    subtitleTracks: r,
+  } = Ee({
+    subtitleSrc: r,
+    subtitleTracks: l,
     onLoadError: (P) => console.error("Subtitle load error:", P)
-  }), { takeScreenshot: E } = Se(k), {
+  }), { takeScreenshot: E } = Ae(k), {
     controlsVisible: Y,
     showVolumeSlider: I,
-    setShowVolumeSlider: O,
+    setShowVolumeSlider: S,
     handleMouseMove: J,
     handleMouseEnter: F,
     handleMouseLeave: H
-  } = Ce(g.isPlaying, N);
+  } = ke(g.isPlaying, N);
   B(() => {
     if (u) {
       const P = m(g.currentTime);
@@ -1833,7 +1832,7 @@ function Ct(t) {
   const U = (P) => {
     k.current && (k.current.playbackRate = P, T(P), M(!1));
   };
-  return Ae({
+  return Ce({
     videoControls: x,
     toggleSubtitles: h,
     takeScreenshot: E,
@@ -1854,9 +1853,9 @@ function Ct(t) {
             videoRef: k,
             src: s,
             poster: n,
-            subtitleSrc: l,
+            subtitleSrc: r,
             subtitlesEnabled: u,
-            crossOrigin: c,
+            crossOrigin: o,
             onTogglePlay: x.togglePlay
           }
         ),
@@ -1881,13 +1880,13 @@ function Ct(t) {
             isFullscreen: g.isFullscreen,
             showSettings: N,
             playbackRate: z,
-            subtitleSrc: l,
+            subtitleSrc: r,
             subtitlesEnabled: u,
             subtitleTracks: C,
-            currentTrackId: S,
+            currentTrackId: O,
             hasSubtitles: i,
             subtitleLoadError: G,
-            volumeOrientation: o,
+            volumeOrientation: c,
             bufferedRanges: g.bufferedRanges,
             isSeeking: g.isSeeking,
             onSeek: x.seekTo,
@@ -1896,7 +1895,7 @@ function Ct(t) {
             onSeekForward: x.seekForward,
             onToggleMute: x.toggleMute,
             onVolumeChange: x.setVolume,
-            onShowVolumeSlider: O,
+            onShowVolumeSlider: S,
             onToggleSubtitles: h,
             onSelectSubtitleTrack: j,
             onTakeScreenshot: E,
@@ -1915,13 +1914,13 @@ function Ct(t) {
   );
 }
 export {
-  ce as M,
+  oe as M,
   Ct as S,
   kt as a,
-  He as b,
-  Ue as c,
+  Je as b,
+  He as c,
   R as d,
-  Ve as e,
-  Xe as f
+  Ue as e,
+  Fe as f
 };
-//# sourceMappingURL=minimal-components-DlRK7Qu_.js.map
+//# sourceMappingURL=minimal-components-C4z900Ro.js.map