strataplayer 1.2.11 → 1.2.13

package/dist/strataplayer.es.js

@@ -1,12 +1,13 @@
-var qt = Object.defineProperty;
-var Qt = (s, t, i) => t in s ? qt(s, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : s[t] = i;
-var S = (s, t, i) => Qt(s, typeof t != "symbol" ? t + "" : t, i);
-import ze, { useState as C, useEffect as P, useRef as I, useLayoutEffect as Xt, useMemo as Ce, useSyncExternalStore as Jt, useCallback as Ne } from "react";
-import { createRoot as Kt } from "react-dom/client";
+var Kt = Object.defineProperty;
+var Yt = (s, t, i) => t in s ? Kt(s, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : s[t] = i;
+var N = (s, t, i) => Yt(s, typeof t != "symbol" ? t + "" : t, i);
+import ze, { useState as S, useEffect as P, useRef as I, useLayoutEffect as Zt, useMemo as Ce, useSyncExternalStore as ei, useCallback as Ne } from "react";
+import { createRoot as ti } from "react-dom/client";
 import { jsxs as l, jsx as e, Fragment as L } from "react/jsx-runtime";
-class Yt {
+import { createPortal as ii } from "react-dom";
+class si {
   constructor() {
-    S(this, "events");
+    N(this, "events");
     this.events = /* @__PURE__ */ new Map();
   }
   on(t, i) {
@@ -28,10 +29,10 @@ class Yt {
     this.events.clear();
   }
 }
-class Zt {
+class ni {
   constructor(t) {
-    S(this, "state");
-    S(this, "listeners");
+    N(this, "state");
+    N(this, "listeners");
     this.state = t, this.listeners = /* @__PURE__ */ new Set();
   }
   get() {
@@ -48,13 +49,13 @@ class Zt {
     this.listeners.clear();
   }
 }
-class ei {
+class ri {
   constructor(t) {
-    S(this, "context", null);
-    S(this, "source", null);
-    S(this, "gainNode", null);
-    S(this, "video");
-    S(this, "isInitialized", !1);
+    N(this, "context", null);
+    N(this, "source", null);
+    N(this, "gainNode", null);
+    N(this, "video");
+    N(this, "isInitialized", !1);
     this.video = t;
   }
   /**
@@ -88,7 +89,7 @@ const Re = {
   isBold: !1,
   textColor: "#ffffff",
   verticalOffset: 40
-}, xt = "strata-settings", V = {
+}, kt = "strata-settings", B = {
   isPlaying: !1,
   isBuffering: !1,
   isLive: !1,
@@ -105,6 +106,7 @@ const Re = {
   currentAudioTrack: -1,
   error: null,
   isFullscreen: !1,
+  isWebFullscreen: !1,
   isPip: !1,
   subtitleTracks: [],
   currentSubtitle: -1,
@@ -125,11 +127,11 @@ const Re = {
   isAutoSized: !1,
   isLooping: !1,
   controlsVisible: !0
-}, wt = (s = {}) => {
+}, St = (s = {}) => {
   let t = {};
   if (!s.disablePersistence && typeof window < "u")
     try {
-      const r = localStorage.getItem(xt);
+      const r = localStorage.getItem(kt);
       r && (t = JSON.parse(r));
     } catch {
     }
@@ -139,48 +141,48 @@ const Re = {
     ...s.subtitleSettings || {}
   };
   return {
-    ...V,
+    ...B,
     ...t,
     // Load saved first
     // Override with config if present (not undefined)
-    volume: s.volume ?? t.volume ?? V.volume,
-    isMuted: s.muted ?? t.isMuted ?? V.isMuted,
-    playbackRate: s.playbackRate ?? t.playbackRate ?? V.playbackRate,
-    audioGain: s.audioGain ?? t.audioGain ?? V.audioGain,
-    theme: s.theme ?? t.theme ?? V.theme,
-    themeColor: s.themeColor ?? t.themeColor ?? V.themeColor,
-    iconSize: s.iconSize ?? t.iconSize ?? V.iconSize,
+    volume: s.volume ?? t.volume ?? B.volume,
+    isMuted: s.muted ?? t.isMuted ?? B.isMuted,
+    playbackRate: s.playbackRate ?? t.playbackRate ?? B.playbackRate,
+    audioGain: s.audioGain ?? t.audioGain ?? B.audioGain,
+    theme: s.theme ?? t.theme ?? B.theme,
+    themeColor: s.themeColor ?? t.themeColor ?? B.themeColor,
+    iconSize: s.iconSize ?? t.iconSize ?? B.iconSize,
     subtitleSettings: i,
     // Config overrides state for these visual modes
-    isAutoSized: s.autoSize ?? V.isAutoSized,
-    isLive: s.isLive ?? t.isLive ?? V.isLive,
-    isLooping: s.loop ?? t.isLooping ?? V.isLooping
+    isAutoSized: s.autoSize ?? B.isAutoSized,
+    isLive: s.isLive ?? t.isLive ?? B.isLive,
+    isLooping: s.loop ?? t.isLooping ?? B.isLooping
   };
 };
-class ti {
+class oi {
   constructor(t = {}, i) {
-    S(this, "video");
-    S(this, "container", null);
-    S(this, "events");
-    S(this, "store");
-    S(this, "plugins", /* @__PURE__ */ new Map());
-    S(this, "audioEngine");
-    S(this, "config");
-    S(this, "resizeObserver", null);
+    N(this, "video");
+    N(this, "container", null);
+    N(this, "events");
+    N(this, "store");
+    N(this, "plugins", /* @__PURE__ */ new Map());
+    N(this, "audioEngine");
+    N(this, "config");
+    N(this, "resizeObserver", null);
     // Retry Logic
-    S(this, "retryCount", 0);
-    S(this, "maxRetries", 5);
-    S(this, "retryTimer", null);
-    S(this, "currentSource", null);
-    S(this, "currentSrc", "");
-    S(this, "currentTracks", []);
+    N(this, "retryCount", 0);
+    N(this, "maxRetries", 5);
+    N(this, "retryTimer", null);
+    N(this, "currentSource", null);
+    N(this, "currentSrc", "");
+    N(this, "currentTracks", []);
     // Cast
-    S(this, "castInitialized", !1);
-    S(this, "boundCueChange");
-    S(this, "boundFullscreenChange");
-    this.config = t, this.config.autoOrientation = this.config.autoOrientation ?? !0, this.config.fetchTimeout = this.config.fetchTimeout ?? 3e4, this.config.centerControls = this.config.centerControls ?? !0, this.config.gestureSeek = this.config.gestureSeek ?? !1, this.video = i || document.createElement("video"), this.video.crossOrigin = "anonymous", t.playsInline !== !1 && (this.video.playsInline = !0), this.events = new Yt();
-    const r = wt(t);
-    this.store = new Zt(r), this.audioEngine = new ei(this.video), this.boundCueChange = this.handleCueChange.bind(this), this.boundFullscreenChange = () => {
+    N(this, "castInitialized", !1);
+    N(this, "boundCueChange");
+    N(this, "boundFullscreenChange");
+    this.config = t, this.config.autoOrientation = this.config.autoOrientation ?? !0, this.config.fetchTimeout = this.config.fetchTimeout ?? 3e4, this.config.centerControls = this.config.centerControls ?? !0, this.config.gestureSeek = this.config.gestureSeek ?? !1, this.video = i || document.createElement("video"), this.video.crossOrigin = "anonymous", t.playsInline !== !1 && (this.video.playsInline = !0), this.events = new si();
+    const r = St(t);
+    this.store = new ni(r), this.audioEngine = new ri(this.video), this.boundCueChange = this.handleCueChange.bind(this), this.boundFullscreenChange = () => {
       const a = !!document.fullscreenElement;
       if (this.store.setState({ isFullscreen: a }), this.emit("resize"), this.emit(a ? "fullscreen" : "fullscreen_exit"), a && this.config.autoOrientation && screen.orientation && "lock" in screen.orientation) {
         const m = this.video.videoWidth > this.video.videoHeight ? "landscape" : "portrait";
@@ -202,7 +204,7 @@ class ti {
         isLive: a.isLive,
         isLooping: a.isLooping
       };
-      localStorage.setItem(xt, JSON.stringify(d));
+      localStorage.setItem(kt, JSON.stringify(d));
     });
   }
   // --- Instance Properties ---
@@ -447,12 +449,12 @@ class ti {
     for (let d = 0; d < i; d++) {
       const m = new AbortController(), v = setTimeout(() => m.abort(), a);
       try {
-        const w = await fetch(t, { signal: m.signal });
-        if (clearTimeout(v), !w.ok) throw new Error(`HTTP ${w.status}`);
-        return w;
-      } catch (w) {
-        if (clearTimeout(v), d === i - 1) throw w;
-        w.name === "AbortError" && console.warn(`Fetch timeout (${a}ms) for ${t}`), await new Promise((b) => setTimeout(b, 1e3 * Math.pow(2, d)));
+        const x = await fetch(t, { signal: m.signal });
+        if (clearTimeout(v), !x.ok) throw new Error(`HTTP ${x.status}`);
+        return x;
+      } catch (x) {
+        if (clearTimeout(v), d === i - 1) throw x;
+        x.name === "AbortError" && console.warn(`Fetch timeout (${a}ms) for ${t}`), await new Promise((b) => setTimeout(b, 1e3 * Math.pow(2, d)));
       }
     }
     throw new Error("Fetch failed");
@@ -499,9 +501,9 @@ class ti {
     }), this.updateMediaSessionMetadata();
     let v = a.type || "auto";
     v === "auto" && (a.url.includes(".m3u8") ? v = "hls" : a.url.includes(".mpd") ? v = "dash" : a.url.includes(".flv") || a.url.includes(".ts") ? v = "mpegts" : a.url.startsWith("magnet:") || a.url.includes(".torrent") ? v = "webtorrent" : v = "mp4"), this.events.emit("load", { url: a.url, type: v });
-    const w = this.video.getElementsByTagName("track");
-    for (; w.length > 0; )
-      w[0].remove();
+    const x = this.video.getElementsByTagName("track");
+    for (; x.length > 0; )
+      x[0].remove();
     i.length > 0 && i.forEach((b) => {
       this.fetchWithRetry(b.src).then(() => {
         this.addTextTrackInternal(b.src, b.label, b.srcLang, b.default);
@@ -517,8 +519,8 @@ class ti {
   addTextTrack(t, i) {
     const r = new FileReader();
     r.onload = (a) => {
-      var w;
-      if (!((w = a.target) != null && w.result)) return;
+      var x;
+      if (!((x = a.target) != null && x.result)) return;
       let d = a.target.result;
       (t.name.toLowerCase().endsWith(".srt") || !d.trim().startsWith("WEBVTT")) && (d = d.replace(/(\d{2}:\d{2}:\d{2}),(\d{3})/g, "$1.$2"), d.trim().startsWith("WEBVTT") || (d = `WEBVTT
 
@@ -580,6 +582,13 @@ class ti {
         console.error("Fullscreen toggle failed", t);
       }
   }
+  toggleWebFullscreen() {
+    const t = this.store.get().isWebFullscreen;
+    document.fullscreenElement && document.exitFullscreen().catch(() => {
+    });
+    const i = !t;
+    this.store.setState({ isWebFullscreen: i }), typeof document < "u" && (document.body.style.overflow = i ? "hidden" : ""), this.emit("webfullscreen", i);
+  }
   togglePip() {
     document.pictureInPictureElement ? document.exitPictureInPicture() : this.video !== document.pictureInPictureElement && this.video.requestPictureInPicture && this.video.requestPictureInPicture();
   }
@@ -715,14 +724,14 @@ class ti {
       const a = await this.fetchWithRetry(t);
       if (!a.body) throw new Error("No body");
       const d = a.body.getReader(), m = a.headers.get("Content-Length"), v = m ? parseInt(m, 10) : 0;
-      let w = 0;
+      let x = 0;
       const b = [];
       for (; ; ) {
         const { done: z, value: R } = await d.read();
         if (z) break;
-        if (b.push(R), w += R.length, v) {
-          const f = Math.round(w / v * 100);
-          this.notify({ id: i, type: "loading", message: `Downloading... ${f}%`, progress: f });
+        if (b.push(R), x += R.length, v) {
+          const p = Math.round(x / v * 100);
+          this.notify({ id: i, type: "loading", message: `Downloading... ${p}%`, progress: p });
         }
       }
       const h = new Blob(b), y = window.URL.createObjectURL(h), k = document.createElement("a");
@@ -746,7 +755,7 @@ class ti {
     }));
   }
   destroy() {
-    this.retryTimer && clearTimeout(this.retryTimer), this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), document.removeEventListener("fullscreenchange", this.boundFullscreenChange), this.video.pause(), this.video.src = "";
+    this.retryTimer && clearTimeout(this.retryTimer), this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), this.store.get().isWebFullscreen && typeof document < "u" && (document.body.style.overflow = ""), document.removeEventListener("fullscreenchange", this.boundFullscreenChange), this.video.pause(), this.video.src = "";
     const t = this.video.getElementsByTagName("track");
     for (; t.length > 0; ) t[0].remove();
     this.emit("destroy"), this.events.destroy(), this.store.destroy(), this.plugins.forEach((i) => i.destroy && i.destroy()), this.plugins.clear(), this.video.remove(), this.audioEngine.destroy();
@@ -756,7 +765,7 @@ const Te = (s) => {
   if (isNaN(s)) return "00:00";
   const t = Math.floor(s / 3600), i = Math.floor(s % 3600 / 60), r = Math.floor(s % 60);
   return t > 0 ? `${t}:${i.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}` : `${i}:${r.toString().padStart(2, "0")}`;
-}, ii = async (s, t = 3, i = 2e4) => {
+}, ai = async (s, t = 3, i = 2e4) => {
   for (let r = 0; r < t; r++) {
     const a = new AbortController(), d = setTimeout(() => a.abort(), i);
     try {
@@ -769,12 +778,12 @@ const Te = (s) => {
     }
   }
   throw new Error("Failed");
-}, si = async (s, t, i = 2e4) => {
+}, li = async (s, t, i = 2e4) => {
   try {
-    const a = (await ii(s, 3, i)).split(`
+    const a = (await ai(s, 3, i)).split(`
 `), d = [];
     let m = null, v = null;
-    const w = s.substring(0, s.lastIndexOf("/") + 1), b = (h) => {
+    const x = s.substring(0, s.lastIndexOf("/") + 1), b = (h) => {
       const y = h.split(":");
       let k = 0;
       return y.length === 3 ? (k += parseFloat(y[0]) * 3600, k += parseFloat(y[1]) * 60, k += parseFloat(y[2])) : (k += parseFloat(y[0]) * 60, k += parseFloat(y[1])), k;
@@ -785,20 +794,20 @@ const Te = (s) => {
         m = b(y[0].trim()), v = b(y[1].trim());
       } else if (m !== null && v !== null && h.length > 0) {
         let [y, k] = h.split("#");
-        !y.match(/^https?:\/\//) && !y.startsWith("data:") && (y = w + y);
-        let z = 0, R = 0, f = 0, W = 0;
+        !y.match(/^https?:\/\//) && !y.startsWith("data:") && (y = x + y);
+        let z = 0, R = 0, p = 0, W = 0;
         if (k && k.startsWith("xywh=")) {
           const D = k.replace("xywh=", "").split(",");
-          D.length === 4 && (z = parseInt(D[0]), R = parseInt(D[1]), f = parseInt(D[2]), W = parseInt(D[3]));
+          D.length === 4 && (z = parseInt(D[0]), R = parseInt(D[1]), p = parseInt(D[2]), W = parseInt(D[3]));
         }
-        f > 0 && W > 0 && d.push({ start: m, end: v, url: y, x: z, y: R, w: f, h: W }), m = null, v = null;
+        p > 0 && W > 0 && d.push({ start: m, end: v, url: y, x: z, y: R, w: p, h: W }), m = null, v = null;
       }
     return d;
   } catch {
     return t({ type: "warning", message: "Failed to load thumbnails", duration: 4e3 }), [];
   }
-}, dt = (s, t = 200) => {
-  const [i, r] = C(s), [a, d] = C(!1);
+}, mt = (s, t = 200) => {
+  const [i, r] = S(s), [a, d] = S(!1);
   return P(() => {
     if (s)
       r(!0), requestAnimationFrame(() => {
@@ -814,7 +823,7 @@ const Te = (s) => {
       return () => clearTimeout(m);
     }
   }, [s, t]), { isMounted: i, isVisible: a };
-}, x = ({ className: s, children: t, fill: i = "none", strokeWidth: r = 2, viewBox: a = "0 0 24 24" }) => /* @__PURE__ */ e(
+}, g = ({ className: s, children: t, fill: i = "none", strokeWidth: r = 2, viewBox: a = "0 0 24 24" }) => /* @__PURE__ */ e(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -827,70 +836,70 @@ const Te = (s) => {
     className: s,
     children: t
   }
-), ut = ({ className: s }) => /* @__PURE__ */ e(x, { className: s, children: /* @__PURE__ */ e("polygon", { points: "5 3 19 12 5 21 5 3" }) }), ht = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+), ft = ({ className: s }) => /* @__PURE__ */ e(g, { className: s, children: /* @__PURE__ */ e("polygon", { points: "5 3 19 12 5 21 5 3" }) }), pt = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("rect", { width: "4", height: "16", x: "6", y: "4", rx: "1" }),
   /* @__PURE__ */ e("rect", { width: "4", height: "16", x: "14", y: "4", rx: "1" })
-] }), ni = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), ci = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
   /* @__PURE__ */ e("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" }),
   /* @__PURE__ */ e("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" })
-] }), ri = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), di = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
   /* @__PURE__ */ e("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" })
-] }), ai = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), ui = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
   /* @__PURE__ */ e("line", { x1: "23", x2: "17", y1: "9", y2: "15" }),
   /* @__PURE__ */ e("line", { x1: "17", x2: "23", y1: "9", y2: "15" })
-] }), oi = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), hi = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
   /* @__PURE__ */ e("path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
   /* @__PURE__ */ e("path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }),
   /* @__PURE__ */ e("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
-] }), li = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), mi = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("path", { d: "M8 3v3a2 2 0 0 1-2 2H3" }),
   /* @__PURE__ */ e("path", { d: "M21 8h-3a2 2 0 0 1-2-2V3" }),
   /* @__PURE__ */ e("path", { d: "M3 16h3a2 2 0 0 1 2 2v3" }),
   /* @__PURE__ */ e("path", { d: "M16 21v-3a2 2 0 0 1 2-2h3" })
-] }), ci = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), fi = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.09a2 2 0 0 1-1-1.74v-.47a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" }),
   /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "3" })
-] }), Le = ({ className: s }) => /* @__PURE__ */ e(x, { className: s, children: /* @__PURE__ */ e("path", { d: "M20 6 9 17l-5-5" }) }), di = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), Le = ({ className: s }) => /* @__PURE__ */ e(g, { className: s, children: /* @__PURE__ */ e("path", { d: "M20 6 9 17l-5-5" }) }), pi = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("path", { d: "M21 9V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h4" }),
   /* @__PURE__ */ e("rect", { x: "12", y: "13", width: "10", height: "7", rx: "2" })
-] }), ui = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), bi = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("rect", { width: "18", height: "14", x: "3", y: "5", rx: "2", ry: "2" }),
   /* @__PURE__ */ e("path", { d: "M7 15h4" }),
   /* @__PURE__ */ e("path", { d: "M15 15h2" }),
   /* @__PURE__ */ e("path", { d: "M7 11h2" }),
   /* @__PURE__ */ e("path", { d: "M13 11h4" })
-] }), hi = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), vi = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
   /* @__PURE__ */ e("polyline", { points: "7 10 12 15 17 10" }),
   /* @__PURE__ */ e("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
-] }), mi = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), gi = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
   /* @__PURE__ */ e("polyline", { points: "17 8 12 3 7 8" }),
   /* @__PURE__ */ e("line", { x1: "12", x2: "12", y1: "3", y2: "15" })
-] }), pi = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), xi = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("path", { d: "m12 19-7-7 7-7" }),
   /* @__PURE__ */ e("path", { d: "M19 12H5" })
-] }), Ie = ({ className: s }) => /* @__PURE__ */ e(x, { className: s, children: /* @__PURE__ */ e("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }), fi = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), Ie = ({ className: s }) => /* @__PURE__ */ e(g, { className: s, children: /* @__PURE__ */ e("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }), wi = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("path", { d: "M2 16.1A5 5 0 0 1 5.9 20" }),
   /* @__PURE__ */ e("path", { d: "M2 12.05A9 9 0 0 1 9.95 20" }),
   /* @__PURE__ */ e("path", { d: "M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6" }),
   /* @__PURE__ */ e("line", { x1: "2", x2: "2.01", y1: "20", y2: "20" })
-] }), bi = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), yi = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
   /* @__PURE__ */ e("circle", { cx: "9", cy: "7", r: "4" }),
   /* @__PURE__ */ e("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }),
   /* @__PURE__ */ e("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
-] }), vi = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), ki = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" }),
   /* @__PURE__ */ e("polyline", { points: "12 6 12 12 16 14" })
-] }), gi = ({ className: s }) => /* @__PURE__ */ e(x, { className: s, children: /* @__PURE__ */ e("path", { d: "M5 12h14" }) }), xi = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), Si = ({ className: s }) => /* @__PURE__ */ e(g, { className: s, children: /* @__PURE__ */ e("path", { d: "M5 12h14" }) }), Ci = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("path", { d: "M5 12h14" }),
   /* @__PURE__ */ e("path", { d: "M12 5v14" })
-] }), wi = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), Ni = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("path", { d: "M4 21v-7" }),
   /* @__PURE__ */ e("path", { d: "M4 10V3" }),
   /* @__PURE__ */ e("path", { d: "M12 21v-9" }),
@@ -900,87 +909,87 @@ const Te = (s) => {
   /* @__PURE__ */ e("path", { d: "M1 14h6" }),
   /* @__PURE__ */ e("path", { d: "M9 8h6" }),
   /* @__PURE__ */ e("path", { d: "M17 16h6" })
-] }), yi = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), Ti = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("polyline", { points: "4 7 4 4 20 4 20 7" }),
   /* @__PURE__ */ e("line", { x1: "9", x2: "15", y1: "20", y2: "20" }),
   /* @__PURE__ */ e("line", { x1: "12", x2: "12", y1: "4", y2: "20" })
-] }), yt = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), Ct = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("circle", { cx: "13.5", cy: "6.5", r: ".5", fill: "currentColor" }),
   /* @__PURE__ */ e("circle", { cx: "17.5", cy: "10.5", r: ".5", fill: "currentColor" }),
   /* @__PURE__ */ e("circle", { cx: "8.5", cy: "7.5", r: ".5", fill: "currentColor" }),
   /* @__PURE__ */ e("circle", { cx: "6.5", cy: "12.5", r: ".5", fill: "currentColor" }),
   /* @__PURE__ */ e("path", { d: "M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" })
-] }), ki = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), Mi = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
   /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "3" })
-] }), Si = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), zi = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("polyline", { points: "8 18 12 22 16 18" }),
   /* @__PURE__ */ e("polyline", { points: "8 6 12 2 16 6" }),
   /* @__PURE__ */ e("line", { x1: "12", x2: "12", y1: "2", y2: "22" })
-] }), Ci = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), Ii = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
   /* @__PURE__ */ e("path", { d: "M3 3v5h5" })
-] }), Ni = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), Ri = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("path", { d: "M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" }),
   /* @__PURE__ */ e("path", { d: "M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" })
-] }), Ti = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), Li = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("path", { d: "m3 17 4-10 4 10" }),
   /* @__PURE__ */ e("path", { d: "M4 13h6" }),
   /* @__PURE__ */ e("path", { d: "M15 12h4.5a2.5 2.5 0 0 1 0 5H15V7h4a2.5 2.5 0 0 1 0 5h-4" })
-] }), Mi = ({ className: s }) => /* @__PURE__ */ e(x, { className: s, children: /* @__PURE__ */ e("path", { d: "M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z" }) }), zi = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), $i = ({ className: s }) => /* @__PURE__ */ e(g, { className: s, children: /* @__PURE__ */ e("path", { d: "M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z" }) }), Ei = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("path", { d: "M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" }),
   /* @__PURE__ */ e("circle", { cx: "12", cy: "13", r: "3" })
-] }), Ii = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), Pi = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2" }),
   /* @__PURE__ */ e("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
-] }), Ri = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), Fi = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2" }),
   /* @__PURE__ */ e("path", { d: "M7 11V7a5 5 0 0 1 9.9-1" })
-] }), Li = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), Ai = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }),
   /* @__PURE__ */ e("line", { x1: "8", x2: "16", y1: "21", y2: "21" }),
   /* @__PURE__ */ e("line", { x1: "12", x2: "12", y1: "17", y2: "21" })
-] }), $i = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), Bi = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("polygon", { points: "13 19 22 12 13 5 13 19" }),
   /* @__PURE__ */ e("polygon", { points: "2 19 11 12 2 5 2 19" })
-] }), Ei = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), Vi = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("path", { d: "M18 6 6 18" }),
   /* @__PURE__ */ e("path", { d: "m6 6 12 12" })
-] }), Pi = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), Oi = ({ className: s }) => /* @__PURE__ */ l(g, { className: s, children: [
   /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" }),
   /* @__PURE__ */ e("path", { d: "M12 16v-4" }),
   /* @__PURE__ */ e("path", { d: "M12 8h.01" })
-] }), mt = ({ className: s }) => /* @__PURE__ */ l("div", { className: `relative flex items-center justify-center ${s}`, children: [
-  /* @__PURE__ */ l(x, { className: "w-full h-full", children: [
+] }), bt = ({ className: s }) => /* @__PURE__ */ l("div", { className: `relative flex items-center justify-center ${s}`, children: [
+  /* @__PURE__ */ l(g, { className: "w-full h-full", children: [
     /* @__PURE__ */ e("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
     /* @__PURE__ */ e("path", { d: "M3 3v5h5" })
   ] }),
   /* @__PURE__ */ e("span", { className: "absolute inset-0 flex items-center justify-center text-[32%] font-bold select-none mt-[1px]", children: "10" })
-] }), pt = ({ className: s }) => /* @__PURE__ */ l("div", { className: `relative flex items-center justify-center ${s}`, children: [
-  /* @__PURE__ */ l(x, { className: "w-full h-full", children: [
+] }), vt = ({ className: s }) => /* @__PURE__ */ l("div", { className: `relative flex items-center justify-center ${s}`, children: [
+  /* @__PURE__ */ l(g, { className: "w-full h-full", children: [
     /* @__PURE__ */ e("path", { d: "M21 12a9 9 0 1 1-9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
     /* @__PURE__ */ e("path", { d: "M21 3v5h-5" })
   ] }),
   /* @__PURE__ */ e("span", { className: "absolute inset-0 flex items-center justify-center text-[32%] font-bold select-none mt-[1px]", children: "10" })
-] }), Ai = ({ notifications: s }) => /* @__PURE__ */ e("div", { className: "absolute top-4 left-4 z-50 flex flex-col gap-2 pointer-events-none font-sans max-w-[85%] md:max-w-[400px]", children: s.map((t) => /* @__PURE__ */ l(
+] }), ji = ({ notifications: s }) => /* @__PURE__ */ e("div", { className: "absolute top-4 left-4 z-25 flex flex-col gap-2 pointer-events-none font-sans max-w-[85%] md:max-w-[320px]", children: s.map((t) => /* @__PURE__ */ l(
   "div",
   {
     className: `
-                        bg-zinc-950/90 backdrop-blur-md border border-white/10 text-white px-4 py-3 rounded-lg shadow-xl text-sm font-medium flex items-start gap-3 animate-in slide-in-from-left-2 fade-in duration-300 pointer-events-auto
+                        bg-zinc-950/90 backdrop-blur-md border border-white/10 text-white px-3 py-2 rounded-lg shadow-xl text-xs font-medium flex items-start gap-2.5 animate-in slide-in-from-left-2 fade-in duration-300 pointer-events-auto
                         w-fit max-w-full
                         ${t.type === "error" ? "border-red-500/50 text-red-100" : ""}
                         ${t.type === "warning" ? "border-amber-500/50 text-amber-100" : ""}
                     `,
     children: [
-      t.type === "loading" && /* @__PURE__ */ e(Ie, { className: "w-4 h-4 animate-spin text-[var(--accent)] shrink-0 mt-0.5" }),
+      t.type === "loading" && /* @__PURE__ */ e(Ie, { className: "w-3.5 h-3.5 animate-spin text-[var(--accent)] shrink-0 mt-0.5" }),
       /* @__PURE__ */ l("div", { className: "flex flex-col gap-1 min-w-0", children: [
         /* @__PURE__ */ e("span", { className: "break-words line-clamp-4 leading-relaxed whitespace-pre-wrap", children: t.message }),
-        typeof t.progress == "number" && /* @__PURE__ */ e("div", { className: "h-1 w-full bg-white/10 rounded-full overflow-hidden mt-1.5", children: /* @__PURE__ */ e("div", { className: "h-full bg-[var(--accent)] transition-all duration-300", style: { width: `${t.progress}%` } }) })
+        typeof t.progress == "number" && /* @__PURE__ */ e("div", { className: "h-0.5 w-full bg-white/10 rounded-full overflow-hidden mt-1.5", children: /* @__PURE__ */ e("div", { className: "h-full bg-[var(--accent)] transition-all duration-300", style: { width: `${t.progress}%` } }) })
       ] })
     ]
   },
   t.id
-)) }), Bi = ({ cues: s, settings: t }) => {
+)) }), Hi = ({ cues: s, settings: t }) => {
   if (t.useNative || s.length === 0) return null;
   const i = () => {
     switch (t.textStyle) {
@@ -1031,18 +1040,18 @@ const Te = (s) => {
       ))
     }
   );
-}, kt = ({ children: s, onClose: t, align: i = "right", maxHeight: r, className: a }) => {
+}, Nt = ({ children: s, onClose: t, align: i = "right", maxHeight: r, className: a }) => {
   const d = I(null), m = i === "center" ? "left-1/2 -translate-x-1/2 origin-bottom" : "right-0 origin-bottom-right", v = r ? { maxHeight: `${r}px` } : {};
   return /* @__PURE__ */ e(
     "div",
     {
       className: `absolute bottom-full mb-4 ${m} bg-[var(--bg-panel)] backdrop-blur-xl border-[length:var(--border-width)] border-white/10 shadow-2xl overflow-hidden w-[300px] max-w-[calc(100vw-32px)] text-sm z-50 ring-1 ring-white/5 font-[family-name:var(--font-main)] flex flex-col p-1.5 transition-all duration-300 ease-out ${a}`,
       style: { ...v, borderRadius: "var(--radius-lg)" },
-      onClick: (w) => w.stopPropagation(),
+      onClick: (x) => x.stopPropagation(),
       children: /* @__PURE__ */ e("div", { className: "overflow-y-auto hide-scrollbar flex-1", style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e("div", { ref: d, children: s }) })
     }
   );
-}, ft = ({ content: s, className: t }) => typeof s == "string" ? s.trim().startsWith("<") ? /* @__PURE__ */ e("span", { className: t, dangerouslySetInnerHTML: { __html: s } }) : /* @__PURE__ */ e("span", { className: t, children: s }) : /* @__PURE__ */ e("span", { className: t, children: s }), T = ({ label: s, value: t, active: i, onClick: r, hasSubmenu: a, icon: d }) => /* @__PURE__ */ l(
+}, gt = ({ content: s, className: t }) => typeof s == "string" ? s.trim().startsWith("<") ? /* @__PURE__ */ e("span", { className: t, dangerouslySetInnerHTML: { __html: s } }) : /* @__PURE__ */ e("span", { className: t, children: s }) : /* @__PURE__ */ e("span", { className: t, children: s }), T = ({ label: s, value: t, active: i, onClick: r, hasSubmenu: a, icon: d }) => /* @__PURE__ */ l(
   "button",
   {
     onClick: r,
@@ -1050,8 +1059,8 @@ const Te = (s) => {
     style: { borderRadius: "var(--radius)" },
     children: [
       /* @__PURE__ */ l("div", { className: "flex items-center gap-3 overflow-hidden", children: [
-        d && /* @__PURE__ */ e("span", { className: "text-zinc-400 shrink-0 group-hover:text-zinc-300 transition-colors flex items-center justify-center w-4 h-4", children: /* @__PURE__ */ e(ft, { content: d }) }),
-        /* @__PURE__ */ e("span", { className: `font-medium truncate text-sm flex items-center ${i ? "text-[var(--accent)]" : ""}`, title: typeof s == "string" ? s : void 0, children: /* @__PURE__ */ e(ft, { content: s }) })
+        d && /* @__PURE__ */ e("span", { className: "text-zinc-400 shrink-0 group-hover:text-zinc-300 transition-colors flex items-center justify-center w-4 h-4", children: /* @__PURE__ */ e(gt, { content: d }) }),
+        /* @__PURE__ */ e("span", { className: `font-medium truncate text-sm flex items-center ${i ? "text-[var(--accent)]" : ""}`, title: typeof s == "string" ? s : void 0, children: /* @__PURE__ */ e(gt, { content: s }) })
       ] }),
       /* @__PURE__ */ l("div", { className: "flex items-center gap-2 text-zinc-400 shrink-0", children: [
         t && /* @__PURE__ */ e("span", { className: "text-xs font-medium truncate max-w-[60px]", title: t, children: t }),
@@ -1072,7 +1081,7 @@ const Te = (s) => {
           className: "flex items-center gap-2 hover:text-white transition-colors focus:outline-none",
           onClick: t,
           children: [
-            /* @__PURE__ */ e(pi, { className: "w-3 h-3" }),
+            /* @__PURE__ */ e(xi, { className: "w-3 h-3" }),
             /* @__PURE__ */ e("span", { children: s })
           ]
         }
@@ -1080,7 +1089,7 @@ const Te = (s) => {
       i
     ]
   }
-), bt = () => /* @__PURE__ */ e("div", { className: "h-px bg-white/5 mx-2 my-1" }), de = ({ content: s }) => typeof s == "string" ? s.trim().startsWith("<") ? /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: s } }) : /* @__PURE__ */ e("span", { children: s }) : /* @__PURE__ */ e(L, { children: s }), K = ({ label: s, checked: t, onChange: i, icon: r, tooltip: a }) => /* @__PURE__ */ l(
+), xt = () => /* @__PURE__ */ e("div", { className: "h-px bg-white/5 mx-2 my-1" }), de = ({ content: s }) => typeof s == "string" ? s.trim().startsWith("<") ? /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: s } }) : /* @__PURE__ */ e("span", { children: s }) : /* @__PURE__ */ e(L, { children: s }), K = ({ label: s, checked: t, onChange: i, icon: r, tooltip: a }) => /* @__PURE__ */ l(
   "div",
   {
     className: "flex items-center justify-between py-2.5 px-3 hover:bg-white/5 group transition-colors",
@@ -1107,7 +1116,7 @@ const Te = (s) => {
           children: /* @__PURE__ */ e(
             "div",
             {
-              className: `absolute top-1/2 -translate-y-1/2 left-0.5 bg-white w-4 h-4 transition-transform shadow-sm ${t ? "translate-x-5" : "translate-x-0"}`,
+              className: `absolute top-1/2 -translate-y-1/2 left-1 bg-white w-4 h-4 transition-transform shadow-sm ${t ? "translate-x-5" : "translate-x-0"}`,
               style: { borderRadius: "var(--radius-full)" }
             }
           )
@@ -1144,7 +1153,7 @@ const Te = (s) => {
             max: r,
             step: a,
             value: t,
-            onChange: (w) => d(parseFloat(w.target.value)),
+            onChange: (x) => d(parseFloat(x.target.value)),
             className: "w-full h-1.5 appearance-none cursor-pointer focus:outline-none focus:ring-2 strata-range-input",
             style: {
               borderRadius: "var(--radius-full)",
@@ -1173,7 +1182,7 @@ const Te = (s) => {
       ] })
     ]
   }
-), Vi = ({ label: s, value: t, options: i, onChange: r, icon: a }) => /* @__PURE__ */ l(
+), Wi = ({ label: s, value: t, options: i, onChange: r, icon: a }) => /* @__PURE__ */ l(
   "div",
   {
     className: "py-2.5 px-3 hover:bg-white/5 group transition-colors",
@@ -1201,9 +1210,9 @@ const Te = (s) => {
 ), Y = ({ title: s, children: t }) => /* @__PURE__ */ l("div", { className: "py-2", children: [
   s && /* @__PURE__ */ e("h4", { className: "px-3 text-[10px] font-bold text-[var(--accent)] uppercase tracking-wider mb-1 mt-2", children: s }),
   /* @__PURE__ */ e("div", { className: "space-y-0.5", children: t })
-] }), Fi = ({ tracks: s, current: t, onSelect: i, onUpload: r, onClose: a, settings: d, onSettingsChange: m, onReset: v, offset: w, onOffsetChange: b, maxHeight: h, animationClass: y }) => {
-  const [k, z] = C("main"), R = I(null);
-  return /* @__PURE__ */ l(kt, { onClose: a, align: "right", maxHeight: h, className: y, children: [
+] }), Di = ({ tracks: s, current: t, onSelect: i, onUpload: r, onClose: a, settings: d, onSettingsChange: m, onReset: v, offset: x, onOffsetChange: b, maxHeight: h, animationClass: y }) => {
+  const [k, z] = S("main"), R = I(null);
+  return /* @__PURE__ */ l(Nt, { onClose: a, align: "right", maxHeight: h, className: y, children: [
     k === "main" && /* @__PURE__ */ l("div", { className: "animate-in slide-in-from-left-4 fade-in duration-200", children: [
       /* @__PURE__ */ e(
         "div",
@@ -1218,22 +1227,22 @@ const Te = (s) => {
           T,
           {
             label: "Upload Subtitle",
-            icon: /* @__PURE__ */ e(mi, { className: "w-4 h-4" }),
+            icon: /* @__PURE__ */ e(gi, { className: "w-4 h-4" }),
             onClick: () => {
-              var f;
-              return (f = R.current) == null ? void 0 : f.click();
+              var p;
+              return (p = R.current) == null ? void 0 : p.click();
             }
           }
         ),
-        /* @__PURE__ */ e("input", { type: "file", accept: ".vtt,.srt", ref: R, className: "hidden", onChange: (f) => {
+        /* @__PURE__ */ e("input", { type: "file", accept: ".vtt,.srt", ref: R, className: "hidden", onChange: (p) => {
           var W;
-          (W = f.target.files) != null && W[0] && r(f.target.files[0]);
+          (W = p.target.files) != null && W[0] && r(p.target.files[0]);
         } }),
         /* @__PURE__ */ e(
           T,
           {
             label: "Customize",
-            icon: /* @__PURE__ */ e(wi, { className: "w-4 h-4" }),
+            icon: /* @__PURE__ */ e(Ni, { className: "w-4 h-4" }),
             onClick: () => z("customize"),
             hasSubmenu: !0
           }
@@ -1249,17 +1258,17 @@ const Te = (s) => {
             }
           }
         ),
-        s.map((f) => /* @__PURE__ */ e(
+        s.map((p) => /* @__PURE__ */ e(
           T,
           {
-            label: f.label,
-            value: f.language,
-            active: t === f.index,
+            label: p.label,
+            value: p.language,
+            active: t === p.index,
             onClick: () => {
-              i(f.index), a();
+              i(p.index), a();
             }
           },
-          f.index
+          p.index
         ))
       ] })
     ] }),
@@ -1269,7 +1278,7 @@ const Te = (s) => {
         {
           label: "Customize",
           onBack: () => z("main"),
-          rightAction: /* @__PURE__ */ e("button", { onClick: v, className: "p-1.5 text-zinc-400 hover:text-white transition-colors rounded-md hover:bg-white/10", title: "Reset All", children: /* @__PURE__ */ e(Ci, { className: "w-4 h-4" }) })
+          rightAction: /* @__PURE__ */ e("button", { onClick: v, className: "p-1.5 text-zinc-400 hover:text-white transition-colors rounded-md hover:bg-white/10", title: "Reset All", children: /* @__PURE__ */ e(Ii, { className: "w-4 h-4" }) })
         }
       ),
       /* @__PURE__ */ l("div", { className: "pb-1", children: [
@@ -1278,36 +1287,36 @@ const Te = (s) => {
           {
             label: "Native Video Subtitle",
             checked: d.useNative,
-            onChange: (f) => m({ useNative: f })
+            onChange: (p) => m({ useNative: p })
           }
         ) }),
         !d.useNative && /* @__PURE__ */ l(L, { children: [
           /* @__PURE__ */ l(Y, { title: "Sync & Position", children: [
             /* @__PURE__ */ l("div", { className: "py-2.5 px-3 rounded-lg hover:bg-white/5 group transition-colors", children: [
               /* @__PURE__ */ e("div", { className: "flex justify-between items-center mb-2", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
-                /* @__PURE__ */ e(vi, { className: "w-4 h-4 text-zinc-500 group-hover:text-zinc-400 transition-colors" }),
+                /* @__PURE__ */ e(ki, { className: "w-4 h-4 text-zinc-500 group-hover:text-zinc-400 transition-colors" }),
                 /* @__PURE__ */ e("span", { className: "text-xs font-bold text-zinc-400 uppercase tracking-wider group-hover:text-zinc-300 transition-colors", children: "Sync Offset" })
               ] }) }),
               /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: () => b(Math.round((w - 0.1) * 10) / 10),
+                    onClick: () => b(Math.round((x - 0.1) * 10) / 10),
                     className: "w-8 h-8 flex items-center justify-center bg-zinc-800 rounded-lg hover:bg-zinc-700 text-zinc-300 transition-colors active:scale-95",
-                    children: /* @__PURE__ */ e(gi, { className: "w-4 h-4" })
+                    children: /* @__PURE__ */ e(Si, { className: "w-4 h-4" })
                   }
                 ),
                 /* @__PURE__ */ l("div", { className: "flex-1 bg-zinc-900 border border-white/5 rounded-lg h-8 flex items-center justify-center text-xs font-mono font-medium text-[var(--accent)]", children: [
-                  w > 0 ? "+" : "",
-                  (w == null ? void 0 : w.toFixed(1)) || "0.0",
+                  x > 0 ? "+" : "",
+                  (x == null ? void 0 : x.toFixed(1)) || "0.0",
                   "s"
                 ] }),
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: () => b(Math.round((w + 0.1) * 10) / 10),
+                    onClick: () => b(Math.round((x + 0.1) * 10) / 10),
                     className: "w-8 h-8 flex items-center justify-center bg-zinc-800 rounded-lg hover:bg-zinc-700 text-zinc-300 transition-colors active:scale-95",
-                    children: /* @__PURE__ */ e(xi, { className: "w-4 h-4" })
+                    children: /* @__PURE__ */ e(Ci, { className: "w-4 h-4" })
                   }
                 )
               ] })
@@ -1316,13 +1325,13 @@ const Te = (s) => {
               ce,
               {
                 label: "Vertical Position",
-                icon: /* @__PURE__ */ e(Si, { className: "w-4 h-4" }),
+                icon: /* @__PURE__ */ e(zi, { className: "w-4 h-4" }),
                 value: d.verticalOffset,
                 min: 0,
                 max: 200,
                 step: 5,
-                onChange: (f) => m({ verticalOffset: f }),
-                formatValue: (f) => `${f}px`
+                onChange: (p) => m({ verticalOffset: p }),
+                formatValue: (p) => `${p}px`
               }
             )
           ] }),
@@ -1331,29 +1340,29 @@ const Te = (s) => {
               ce,
               {
                 label: "Text Size",
-                icon: /* @__PURE__ */ e(yi, { className: "w-4 h-4" }),
+                icon: /* @__PURE__ */ e(Ti, { className: "w-4 h-4" }),
                 value: d.textSize,
                 min: 50,
                 max: 200,
                 step: 10,
-                onChange: (f) => m({ textSize: f }),
-                formatValue: (f) => `${f}%`
+                onChange: (p) => m({ textSize: p }),
+                formatValue: (p) => `${p}%`
               }
             ),
             /* @__PURE__ */ l("div", { className: "py-2.5 px-3 rounded-lg hover:bg-white/5 group transition-colors", children: [
               /* @__PURE__ */ l("div", { className: "flex items-center gap-3 mb-2", children: [
-                /* @__PURE__ */ e(yt, { className: "w-4 h-4 text-zinc-500 group-hover:text-zinc-400 transition-colors" }),
+                /* @__PURE__ */ e(Ct, { className: "w-4 h-4 text-zinc-500 group-hover:text-zinc-400 transition-colors" }),
                 /* @__PURE__ */ e("span", { className: "text-xs font-bold text-zinc-400 uppercase tracking-wider group-hover:text-zinc-300 transition-colors", children: "Text Color" })
               ] }),
               /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-2 p-1 bg-zinc-800/50 rounded-lg", children: [
-                ["#ffffff", "#ffff00", "#00ffff", "#ff00ff", "#ff0000", "#00ff00"].map((f) => /* @__PURE__ */ e(
+                ["#ffffff", "#ffff00", "#00ffff", "#ff00ff", "#ff0000", "#00ff00"].map((p) => /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: () => m({ textColor: f }),
-                    className: `w-6 h-6 rounded-full border border-white/10 transition-transform hover:scale-110 ${d.textColor === f ? "ring-2 scale-110" : ""}`,
-                    style: { backgroundColor: f, "--tw-ring-color": "var(--accent)" }
+                    onClick: () => m({ textColor: p }),
+                    className: `w-6 h-6 rounded-full border border-white/10 transition-transform hover:scale-110 ${d.textColor === p ? "ring-2 scale-110" : ""}`,
+                    style: { backgroundColor: p, "--tw-ring-color": "var(--accent)" }
                   },
-                  f
+                  p
                 )),
                 /* @__PURE__ */ e("div", { className: "w-px h-6 bg-white/10 mx-1" }),
                 /* @__PURE__ */ e("div", { className: "relative w-6 h-6 rounded-full overflow-hidden ring-1 ring-white/20 cursor-pointer", children: /* @__PURE__ */ e(
@@ -1361,14 +1370,14 @@ const Te = (s) => {
                   {
                     type: "color",
                     value: d.textColor,
-                    onChange: (f) => m({ textColor: f.target.value }),
+                    onChange: (p) => m({ textColor: p.target.value }),
                     className: "absolute inset-[-4px] w-[150%] h-[150%] cursor-pointer p-0 border-0"
                   }
                 ) })
               ] })
             ] }),
             /* @__PURE__ */ e(
-              Vi,
+              Wi,
               {
                 label: "Text Style",
                 value: d.textStyle,
@@ -1379,12 +1388,12 @@ const Te = (s) => {
                   { label: "Depressed", value: "depressed" },
                   { label: "Drop Shadow", value: "shadow" }
                 ],
-                onChange: (f) => m({ textStyle: f })
+                onChange: (p) => m({ textStyle: p })
               }
             ),
             /* @__PURE__ */ l("div", { className: "grid grid-cols-2 gap-2 mt-1 px-1", children: [
-              /* @__PURE__ */ e(K, { label: "Bold", icon: /* @__PURE__ */ e(Ni, { className: "w-4 h-4" }), checked: d.isBold, onChange: (f) => m({ isBold: f }) }),
-              /* @__PURE__ */ e(K, { label: "Fix Caps", icon: /* @__PURE__ */ e(Ti, { className: "w-4 h-4" }), checked: d.fixCapitalization, onChange: (f) => m({ fixCapitalization: f }) })
+              /* @__PURE__ */ e(K, { label: "Bold", icon: /* @__PURE__ */ e(Ri, { className: "w-4 h-4" }), checked: d.isBold, onChange: (p) => m({ isBold: p }) }),
+              /* @__PURE__ */ e(K, { label: "Fix Caps", icon: /* @__PURE__ */ e(Li, { className: "w-4 h-4" }), checked: d.fixCapitalization, onChange: (p) => m({ fixCapitalization: p }) })
             ] })
           ] }),
           /* @__PURE__ */ l(Y, { title: "Background", children: [
@@ -1392,16 +1401,16 @@ const Te = (s) => {
               ce,
               {
                 label: "Opacity",
-                icon: /* @__PURE__ */ e(ki, { className: "w-4 h-4" }),
+                icon: /* @__PURE__ */ e(Mi, { className: "w-4 h-4" }),
                 value: d.backgroundOpacity,
                 min: 0,
                 max: 100,
                 step: 5,
-                onChange: (f) => m({ backgroundOpacity: f }),
-                formatValue: (f) => `${f}%`
+                onChange: (p) => m({ backgroundOpacity: p }),
+                formatValue: (p) => `${p}%`
               }
             ),
-            /* @__PURE__ */ e(K, { label: "Blur Background", icon: /* @__PURE__ */ e(Mi, { className: "w-4 h-4" }), checked: d.backgroundBlur, onChange: (f) => m({ backgroundBlur: f }) }),
+            /* @__PURE__ */ e(K, { label: "Blur Background", icon: /* @__PURE__ */ e($i, { className: "w-4 h-4" }), checked: d.backgroundBlur, onChange: (p) => m({ backgroundBlur: p }) }),
             d.backgroundBlur && /* @__PURE__ */ e(
               ce,
               {
@@ -1410,8 +1419,8 @@ const Te = (s) => {
                 min: 0,
                 max: 20,
                 step: 1,
-                onChange: (f) => m({ backgroundBlurAmount: f }),
-                formatValue: (f) => `${f}px`
+                onChange: (p) => m({ backgroundBlurAmount: p }),
+                formatValue: (p) => `${p}px`
               }
             )
           ] })
@@ -1419,19 +1428,19 @@ const Te = (s) => {
       ] })
     ] })
   ] });
-}, Me = ({ content: s }) => typeof s == "string" ? s.trim().startsWith("<") ? /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: s } }) : /* @__PURE__ */ e("span", { children: s }) : /* @__PURE__ */ e(L, { children: s }), Oi = ({ x: s, y: t, items: i, onClose: r, containerWidth: a, containerHeight: d }) => {
-  const m = I(null), [v, w] = C({
+}, Me = ({ content: s }) => typeof s == "string" ? s.trim().startsWith("<") ? /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: s } }) : /* @__PURE__ */ e("span", { children: s }) : /* @__PURE__ */ e(L, { children: s }), Ui = ({ x: s, y: t, items: i, onClose: r, containerWidth: a, containerHeight: d }) => {
+  const m = I(null), [v, x] = S({
     top: t,
     left: s,
     opacity: 0
   });
-  return Xt(() => {
+  return Zt(() => {
     if (!m.current) return;
     const b = m.current.getBoundingClientRect(), h = b.width, y = b.height;
     let k = s, z = t;
     s + h > a - 10 && (k = s - h), k < 10 && (k = 10), k + h > a && (k = Math.max(10, a - h - 10)), t + y > d - 10 && (z = t - y);
     let R = d - 20;
-    z < 10 && (z = 10), z + y > d - 10 && (z = Math.max(10, d - y - 10)), w({
+    z < 10 && (z = 10), z + y > d - 10 && (z = Math.max(10, d - y - 10)), x({
       top: z,
       left: k,
       maxHeight: R,
@@ -1478,11 +1487,11 @@ const Te = (s) => {
       ] }, h))
     }
   );
-}, ji = ({ player: s, onClose: t }) => {
-  const [i, r] = C({});
+}, Gi = ({ player: s, onClose: t }) => {
+  const [i, r] = S({});
   return P(() => {
     const a = () => {
-      var w;
+      var x;
       if (!s.video) return;
       const m = s.video, v = m.getVideoPlaybackQuality ? m.getVideoPlaybackQuality() : null;
       r({
@@ -1493,7 +1502,7 @@ const Te = (s) => {
         Volume: `${Math.round(m.volume * 100)}%`,
         "Dropped Frames": v ? v.droppedVideoFrames : "N/A",
         Buffer: m.buffered.length > 0 ? `${(m.buffered.end(m.buffered.length - 1) - m.currentTime).toFixed(2)}s` : "0s",
-        Engine: ((w = s.store.get().sources[s.store.get().currentSourceIndex]) == null ? void 0 : w.type) || "native",
+        Engine: ((x = s.store.get().sources[s.store.get().currentSourceIndex]) == null ? void 0 : x.type) || "native",
         URL: m.currentSrc
       });
     };
@@ -1514,7 +1523,7 @@ const Te = (s) => {
                 a.stopPropagation(), t();
               },
               className: "absolute top-3 right-3 p-1.5 text-zinc-400 hover:text-white hover:bg-white/10 rounded-full transition-colors",
-              children: /* @__PURE__ */ e(Ei, { className: "w-4 h-4" })
+              children: /* @__PURE__ */ e(Vi, { className: "w-4 h-4" })
             }
           ),
           /* @__PURE__ */ e("h3", { className: "text-sm font-bold text-white mb-4 uppercase tracking-wider border-b border-white/10 pb-2", children: "Video Statistics" })
@@ -1526,38 +1535,38 @@ const Te = (s) => {
       ]
     }
   ) });
-}, Hi = [
+}, _i = [
   { label: "Strata", value: "#6366f1" },
   { label: "Emerald", value: "#10b981" },
   { label: "Rose", value: "#f43f5e" },
   { label: "Amber", value: "#f59e0b" },
   { label: "Sky", value: "#0ea5e9" },
   { label: "Violet", value: "#8b5cf6" }
-], Wi = [
+], qi = [
   { label: "Default", value: "default", color: "#6366f1" },
   { label: "Pixel", value: "pixel", color: "#ef4444" },
   { label: "Game", value: "game", color: "#eab308" },
   { label: "Hacker", value: "hacker", color: "#22c55e" }
-], vt = ({ content: s, className: t, style: i }) => typeof s == "string" ? s.trim().startsWith("<") ? /* @__PURE__ */ e("div", { className: t, style: i, dangerouslySetInnerHTML: { __html: s } }) : /* @__PURE__ */ e("div", { className: t, style: i, children: s }) : /* @__PURE__ */ e("div", { className: t, style: i, children: s }), gt = (s) => {
-  var ot, lt;
-  const { src: t, type: i, sources: r, poster: a, autoPlay: d, thumbnails: m, textTracks: v, plugins: w, onGetInstance: b, ...h } = s, y = h.screenshot ?? !1, k = h.pip ?? !0, z = h.setting ?? !0, R = h.fullscreen ?? !0, f = h.fullscreenWeb ?? !1, W = h.lock ?? !1, D = h.fastForward ?? !0, St = h.flip ?? !0, Ct = h.aspectRatio ?? !0, $e = h.hotKey ?? !0, Nt = h.backdrop ?? !0, ue = h.gestureSeek ?? !1, Tt = h.centerControls ?? !0, Ee = h.fetchTimeout ?? 3e4;
+], wt = ({ content: s, className: t, style: i }) => typeof s == "string" ? s.trim().startsWith("<") ? /* @__PURE__ */ e("div", { className: t, style: i, dangerouslySetInnerHTML: { __html: s } }) : /* @__PURE__ */ e("div", { className: t, style: i, children: s }) : /* @__PURE__ */ e("div", { className: t, style: i, children: s }), yt = (s) => {
+  var dt, ut;
+  const { src: t, type: i, sources: r, poster: a, autoPlay: d, thumbnails: m, textTracks: v, plugins: x, onGetInstance: b, ...h } = s, y = h.screenshot ?? !1, k = h.pip ?? !0, z = h.setting ?? !0, R = h.fullscreen ?? !0, p = h.fullscreenWeb ?? !1, W = h.lock ?? !1, D = h.fastForward ?? !0, Tt = h.flip ?? !0, Mt = h.aspectRatio ?? !0, $e = h.hotKey ?? !0, zt = h.backdrop ?? !0, ue = h.gestureSeek ?? !1, It = h.centerControls ?? !0, Ee = h.fetchTimeout ?? 3e4;
   h.autoOrientation;
-  const q = I(null), [n, Pe] = C(null), [he, me] = C(!1), [Ae, Mt] = C(0), [zt, It] = C(0), Be = Ce(() => wt(h), []), o = Jt(
+  const q = I(null), [n, Pe] = S(null), [he, me] = S(!1), [Fe, Rt] = S(0), [Lt, $t] = S(0), [Ae, Et] = S(!1), Be = Ce(() => St(h), []), o = ei(
     Ne((c) => n ? n.store.subscribe(c) : () => {
     }, [n]),
     () => n ? n.store.get() : Be,
     () => Be
-  ), [$, F] = C(!1), [E, U] = C(!1), [A, M] = C("main"), [Z, pe] = C({ x: 0, y: 0, visible: !1 }), [Rt, Ve] = C(!1), Fe = dt($, 200), Oe = dt(E, 200), [fe, ne] = C(!1), [re, be] = C(0), [Lt, je] = C(!1), [$t, He] = C(!1), [ve, ae] = C(!1), [We, De] = C([]), [Ue, Ge] = C(null), [Et, Pt] = C(0), [G, _e] = C(null), [Q, oe] = C(null), [Di, qe] = C(null), [ge, Qe] = C(!1), xe = I(null), Xe = I(1), te = I(null), Je = I(0), ee = I(!1), ie = I(null), _ = I(null), we = I(null), ye = I(null), se = I(null);
+  ), [$, V] = S(!1), [E, U] = S(!1), [F, M] = S("main"), [Z, fe] = S({ x: 0, y: 0, visible: !1 }), [Pt, Ve] = S(!1), Oe = mt($, 200), je = mt(E, 200), [pe, ne] = S(!1), [re, be] = S(0), [Ft, He] = S(!1), [At, We] = S(!1), [ve, oe] = S(!1), [De, Ue] = S([]), [Ge, _e] = S(null), [Bt, Vt] = S(0), [G, qe] = S(null), [Q, ae] = S(null), [Qi, Qe] = S(null), [ge, Xe] = S(!1), xe = I(null), Je = I(1), te = I(null), Ke = I(0), ee = I(!1), ie = I(null), _ = I(null), we = I(null), ye = I(null), se = I(null);
   P(() => {
-    if (!q.current) return;
-    const c = new ti({ ...h, poster: a });
-    w && w.length > 0 && w.forEach((g) => c.use(g)), c.attach(q.current), Pe(c), b && b(c);
-    const p = new ResizeObserver((g) => {
-      for (const N of g)
-        Mt(N.contentRect.height), It(N.contentRect.width);
+    if (Et("ontouchstart" in window || navigator.maxTouchPoints > 0), !q.current) return;
+    const c = new oi({ ...h, poster: a });
+    x && x.length > 0 && x.forEach((w) => c.use(w)), c.attach(q.current), Pe(c), b && b(c);
+    const f = new ResizeObserver((w) => {
+      for (const C of w)
+        Rt(C.contentRect.height), $t(C.contentRect.width);
     });
-    return p.observe(q.current), () => {
-      p.disconnect(), c.destroy(), Pe(null);
+    return f.observe(q.current), () => {
+      f.disconnect(), c.destroy(), Pe(null);
     };
   }, []), P(() => {
     if (!n) return;
@@ -1568,72 +1577,76 @@ const Te = (s) => {
     const c = v || [];
     r && r.length > 0 ? (me(!1), n.setSources(r, c)) : t && (me(!1), n.setSources([{ url: t, type: i || "auto" }], c));
   }, [t, i, r, v, n]), P(() => {
-    n && d && (n.video.muted = !0, n.store.setState({ isMuted: !0 }), n.play().catch(() => {
-    }));
+    n && d && n.play().catch(() => {
+      console.warn("Autoplay failed (likely needs user interaction)");
+    });
   }, [n, d]), P(() => {
     o.isPlaying && !he && me(!0);
   }, [o.isPlaying, he]), P(() => {
-    m && n ? si(m, n.notify.bind(n), Ee).then((c) => De(c)) : De([]);
+    m && n ? li(m, n.notify.bind(n), Ee).then((c) => Ue(c)) : Ue([]);
   }, [m, n, Ee]), P(() => (Q && (se.current && clearTimeout(se.current), se.current = setTimeout(() => {
-    oe(null);
+    ae(null);
   }, 600)), () => {
     se.current && clearTimeout(se.current);
   }), [Q]), P(() => {
-    const c = (p) => {
-      var g;
-      if (!(!n || !$e) && ((g = document.activeElement) == null ? void 0 : g.tagName) !== "INPUT")
-        switch (p.key.toLowerCase()) {
-          case " ":
-          case "k":
-            p.preventDefault(), n.togglePlay();
-            break;
-          case "arrowright":
-            p.preventDefault(), n.skip(5);
-            break;
-          case "arrowleft":
-            p.preventDefault(), n.skip(-5);
-            break;
-          case "arrowup":
-            p.preventDefault(), n.setVolume(n.video.volume + 0.1);
-            break;
-          case "arrowdown":
-            p.preventDefault(), n.setVolume(n.video.volume - 0.1);
-            break;
-          case "f":
-            p.preventDefault(), n.toggleFullscreen();
-            break;
-          case "m":
-            p.preventDefault(), n.toggleMute();
-            break;
-        }
+    const c = (f) => {
+      var C;
+      if (!n || !$e || ((C = document.activeElement) == null ? void 0 : C.tagName) === "INPUT") return;
+      switch (f.key.toLowerCase()) {
+        case " ":
+        case "k":
+          f.preventDefault(), n.togglePlay();
+          break;
+        case "arrowright":
+          f.preventDefault(), n.skip(5);
+          break;
+        case "arrowleft":
+          f.preventDefault(), n.skip(-5);
+          break;
+        case "arrowup":
+          f.preventDefault(), n.setVolume(n.video.volume + 0.1);
+          break;
+        case "arrowdown":
+          f.preventDefault(), n.setVolume(n.video.volume - 0.1);
+          break;
+        case "f":
+          f.preventDefault(), n.toggleFullscreen();
+          break;
+        case "m":
+          f.preventDefault(), n.toggleMute();
+          break;
+        case "escape":
+          n.store.get().isWebFullscreen && (f.preventDefault(), n.toggleWebFullscreen());
+          break;
+      }
     };
     return window.addEventListener("keydown", c), () => window.removeEventListener("keydown", c);
   }, [n, $e]);
-  const Ke = () => {
+  const Ye = () => {
     n && (n.setControlsVisible(!0), _.current && clearTimeout(_.current), !($ || E) && (_.current = setTimeout(() => {
       !o.isPlaying || $ || E || n.setControlsVisible(!1);
     }, 2500)));
   };
   P(() => {
-    n && (!$ && !E && o.isPlaying ? Ke() : ($ || E) && (n.setControlsVisible(!0), _.current && clearTimeout(_.current)));
+    n && (!$ && !E && o.isPlaying ? Ye() : ($ || E) && (n.setControlsVisible(!0), _.current && clearTimeout(_.current)));
   }, [$, E, o.isPlaying, n]);
-  const Ye = Ne(() => {
-    !D || !n || !o.isPlaying || o.isLocked || (Xe.current = n.video.playbackRate, xe.current = setTimeout(() => {
-      n.video.playbackRate = 2, Qe(!0);
+  const Ze = Ne(() => {
+    !D || !n || !o.isPlaying || o.isLocked || (Je.current = n.video.playbackRate, xe.current = setTimeout(() => {
+      n.video.playbackRate = 2, Xe(!0);
     }, 500));
   }, [D, n, o.isPlaying, o.isLocked]), ke = Ne(() => {
-    xe.current && clearTimeout(xe.current), ge && n && (n.video.playbackRate = Xe.current, Qe(!1));
-  }, [ge, n]), At = (c) => {
-    Ye(), ue && !o.isLocked && (te.current = c.touches[0].clientX, Je.current = o.currentTime, ee.current = !1);
-  }, Bt = (c) => {
+    xe.current && clearTimeout(xe.current), ge && n && (n.video.playbackRate = Je.current, Xe(!1));
+  }, [ge, n]), Ot = (c) => {
+    Ze(), ue && !o.isLocked && (te.current = c.touches[0].clientX, Ke.current = o.currentTime, ee.current = !1);
+  }, jt = (c) => {
     if (!o.isLocked && ue && te.current !== null) {
-      const p = c.touches[0].clientX - te.current;
-      if (Math.abs(p) > 10 && (ke(), ee.current = !0, ne(!0), q.current && o.duration)) {
-        const g = q.current.getBoundingClientRect(), N = p / g.width, j = Math.max(0, Math.min(o.duration, Je.current + N * o.duration));
+      const f = c.touches[0].clientX - te.current;
+      if (Math.abs(f) > 10 && (ke(), ee.current = !0, ne(!0), q.current && o.duration)) {
+        const w = q.current.getBoundingClientRect(), C = f / w.width, j = Math.max(0, Math.min(o.duration, Ke.current + C * o.duration));
         be(j);
       }
     }
-  }, Vt = (c) => {
+  }, Ht = (c) => {
     if (ke(), ue && ee.current) {
       n == null || n.seek(re), ne(!1), ee.current = !1, te.current = null;
       return;
@@ -1641,63 +1654,61 @@ const Te = (s) => {
     te.current = null;
   }, Se = (c) => {
     if (!we.current || !o.duration) return 0;
-    const p = we.current.getBoundingClientRect(), g = "touches" in c ? c.touches[0].clientX : c.clientX;
-    return Math.max(0, Math.min(1, (g - p.left) / p.width)) * o.duration;
-  }, Ze = (c) => {
+    const f = we.current.getBoundingClientRect(), w = "touches" in c ? c.touches[0].clientX : c.clientX;
+    return Math.max(0, Math.min(1, (w - f.left) / f.width)) * o.duration;
+  }, et = (c) => {
     if (o.isLocked) return;
     ne(!0), be(Se(c));
-    const p = (N) => be(Se(N)), g = (N) => {
-      n == null || n.seek(Se(N)), ne(!1), document.removeEventListener("mousemove", p), document.removeEventListener("touchmove", p), document.removeEventListener("mouseup", g), document.removeEventListener("touchend", g);
+    const f = (C) => be(Se(C)), w = (C) => {
+      n == null || n.seek(Se(C)), ne(!1), document.removeEventListener("mousemove", f), document.removeEventListener("touchmove", f), document.removeEventListener("mouseup", w), document.removeEventListener("touchend", w);
     };
-    document.addEventListener("mousemove", p), document.addEventListener("touchmove", p), document.addEventListener("mouseup", g), document.addEventListener("touchend", g);
-  }, et = (c) => {
-    if (!ye.current) return 0;
-    const p = ye.current.getBoundingClientRect(), g = "touches" in c ? c.touches[0].clientX : c.clientX;
-    return Math.max(0, Math.min(1, (g - p.left) / p.width));
+    document.addEventListener("mousemove", f), document.addEventListener("touchmove", f), document.addEventListener("mouseup", w), document.addEventListener("touchend", w);
   }, tt = (c) => {
+    if (!ye.current) return 0;
+    const f = ye.current.getBoundingClientRect(), w = "touches" in c ? c.touches[0].clientX : c.clientX;
+    return Math.max(0, Math.min(1, (w - f.left) / f.width));
+  }, it = (c) => {
     if (!n || o.isLocked) return;
-    je(!0), n.setVolume(et(c));
-    const p = (N) => n.setVolume(et(N)), g = () => {
-      je(!1), document.removeEventListener("mousemove", p), document.removeEventListener("touchmove", p), document.removeEventListener("mouseup", g), document.removeEventListener("touchend", g);
+    He(!0), n.setVolume(tt(c));
+    const f = (C) => n.setVolume(tt(C)), w = () => {
+      He(!1), document.removeEventListener("mousemove", f), document.removeEventListener("touchmove", f), document.removeEventListener("mouseup", w), document.removeEventListener("touchend", w);
     };
-    document.addEventListener("mousemove", p), document.addEventListener("touchmove", p), document.addEventListener("mouseup", g), document.addEventListener("touchend", g);
-  }, Ft = (c) => {
+    document.addEventListener("mousemove", f), document.addEventListener("touchmove", f), document.addEventListener("mouseup", w), document.addEventListener("touchend", w);
+  }, Wt = (c) => {
     if (!o.duration || o.isLive) return;
-    const p = c.currentTarget.getBoundingClientRect(), g = (c.clientX - p.left) / p.width, N = g * o.duration;
-    Pt(g * 100), Ge(N), We.length > 0 && _e(We.find((j) => N >= j.start && N < j.end) || null);
+    const f = c.currentTarget.getBoundingClientRect(), w = (c.clientX - f.left) / f.width, C = w * o.duration;
+    Vt(w * 100), _e(C), De.length > 0 && qe(De.find((j) => C >= j.start && C < j.end) || null);
   }, le = (c) => {
-    !n || o.isLocked || (n.skip(c === "forward" ? 10 : -10), qe(c), setTimeout(() => qe(null), 300));
-  }, Ot = (c) => {
+    !n || o.isLocked || (n.skip(c === "forward" ? 10 : -10), Qe(c), setTimeout(() => Qe(null), 300));
+  }, Dt = (c) => {
     if (!n) return;
     if (ee.current) {
       ee.current = !1;
       return;
     }
-    if ($ && F(!1), E && U(!1), ve && ae(!1), Z.visible && pe({ ...Z, visible: !1 }), n.setControlsVisible(!0), _.current && clearTimeout(_.current), _.current = setTimeout(() => {
+    if ($ && V(!1), E && U(!1), ve && oe(!1), Z.visible && fe({ ...Z, visible: !1 }), n.setControlsVisible(!0), _.current && clearTimeout(_.current), _.current = setTimeout(() => {
       !o.isPlaying || $ || E || n.setControlsVisible(!1);
     }, 2500), o.isLocked) return;
-    const p = c.currentTarget.getBoundingClientRect(), g = c.clientX - p.left, N = p.width, j = Date.now();
-    ie.current ? (clearTimeout(ie.current), ie.current = null, g < N * 0.35 ? (le("rewind"), oe({ type: "rewind", id: j })) : g > N * 0.65 ? (le("forward"), oe({ type: "forward", id: j })) : n.toggleFullscreen()) : ie.current = setTimeout(() => {
+    const f = c.currentTarget.getBoundingClientRect(), w = c.clientX - f.left, C = f.width, j = Date.now();
+    ie.current ? (clearTimeout(ie.current), ie.current = null, w < C * 0.35 ? (le("rewind"), ae({ type: "rewind", id: j })) : w > C * 0.65 ? (le("forward"), ae({ type: "forward", id: j })) : n.toggleFullscreen()) : ie.current = setTimeout(() => {
       n.togglePlay(), ie.current = null;
     }, 250);
-  }, jt = (c) => {
-    var g;
+  }, Ut = (c) => {
+    var w;
     if (c.preventDefault(), o.isLocked) return;
-    const p = (g = q.current) == null ? void 0 : g.getBoundingClientRect();
-    p && pe({
+    const f = (w = q.current) == null ? void 0 : w.getBoundingClientRect();
+    f && fe({
       visible: !0,
-      x: c.clientX - p.left,
-      y: c.clientY - p.top
+      x: c.clientX - f.left,
+      y: c.clientY - f.top
     });
-  }, Ht = (c) => {
-    c.stopPropagation();
-    const p = "ontouchstart" in window || navigator.maxTouchPoints > 0, g = window.matchMedia("(hover: none)").matches || p;
-    if (ve) {
-      ae(!1);
+  }, Gt = (c) => {
+    if (c.stopPropagation(), ve) {
+      oe(!1);
       return;
     }
-    g ? ae(!0) : n == null || n.toggleMute();
-  }, Wt = o.isMuted || o.volume === 0 ? ai : o.volume < 0.5 ? ri : ni, it = Math.max(100, Ae - 120), Dt = () => {
+    Ae ? oe(!0) : n == null || n.toggleMute();
+  }, _t = o.isMuted || o.volume === 0 ? ui : o.volume < 0.5 ? di : ci, st = Math.max(100, Fe - 120), qt = () => {
     switch (o.iconSize) {
       case "small":
         return "w-4 h-4";
@@ -1706,7 +1717,7 @@ const Te = (s) => {
       default:
         return "w-5 h-5";
     }
-  }, Ut = () => {
+  }, Qt = () => {
     switch (o.iconSize) {
       case "small":
         return "p-2 min-w-[32px] min-h-[32px]";
@@ -1715,7 +1726,7 @@ const Te = (s) => {
       default:
         return "p-2.5 min-w-[36px] min-h-[36px]";
     }
-  }, B = Dt(), O = Ut(), X = (() => {
+  }, A = qt(), O = Qt(), X = (() => {
     switch (o.iconSize) {
       case "small":
         return {
@@ -1739,7 +1750,7 @@ const Te = (s) => {
           skipIcon: "w-6 h-6"
         };
     }
-  })(), Gt = !o.isLocked && (o.controlsVisible || !o.isPlaying || $ || E), st = $t || Lt || ve, nt = Nt ? "backdrop-blur-xl bg-black/80" : "bg-black/95", rt = Ce(() => {
+  })(), Xt = !o.isLocked && (o.controlsVisible || !o.isPlaying || $ || E), nt = At || Ft || ve, rt = zt ? "backdrop-blur-xl bg-black/80" : "bg-black/95", ot = Ce(() => {
     const c = [
       { id: "play", position: "left", index: 10, isBuiltIn: !0 },
       { id: "volume", position: "left", index: 20, isBuiltIn: !0 },
@@ -1752,12 +1763,12 @@ const Te = (s) => {
       { id: "fullscreenWeb", position: "right", index: 110, isBuiltIn: !0 },
       { id: "fullscreen", position: "right", index: 120, isBuiltIn: !0 }
     ];
-    return h.controls && h.controls.forEach((p) => {
-      const g = c.find((N) => N.id === p.id);
-      g ? Object.assign(g, p) : c.push(p);
-    }), c.filter((p) => !(p.id === "screenshot" && !y || p.id === "pip" && !k || p.id === "settings" && !z || p.id === "fullscreen" && !R || p.id === "fullscreenWeb" && !f)).sort((p, g) => p.index - g.index);
-  }, [h.controls, y, k, z, R, f]), at = (c) => {
-    var p, g, N, j, ct;
+    return h.controls && h.controls.forEach((f) => {
+      const w = c.find((C) => C.id === f.id);
+      w ? Object.assign(w, f) : c.push(f);
+    }), c.filter((f) => !(f.id === "screenshot" && !y || f.id === "pip" && !k || f.id === "settings" && !z || f.id === "fullscreen" && !R || f.id === "fullscreenWeb" && !p)).sort((f, w) => f.index - w.index);
+  }, [h.controls, y, k, z, R, p]), at = (c) => {
+    var f, w, C, j, ht;
     if (!c.isBuiltIn)
       return /* @__PURE__ */ e(
         "button",
@@ -1768,41 +1779,41 @@ const Te = (s) => {
           className: `strata-control-btn text-zinc-300 hover:text-white transition-colors hover:bg-white/10 focus:outline-none flex items-center justify-center ${O} ${c.className || ""}`,
           style: { borderRadius: "var(--radius)", ...c.style },
           title: c.tooltip,
-          children: /* @__PURE__ */ e(vt, { content: c.html || "" })
+          children: /* @__PURE__ */ e(wt, { content: c.html || "" })
         },
         c.index
       );
     switch (c.id) {
       case "play":
-        return /* @__PURE__ */ e("button", { onClick: () => n == null ? void 0 : n.togglePlay(), className: `strata-control-btn text-zinc-300 hover:text-white transition-colors hover:bg-white/10 focus:outline-none ${O}`, style: { borderRadius: "var(--radius)" }, children: o.isPlaying ? /* @__PURE__ */ e(ht, { className: `${B} fill-current` }) : /* @__PURE__ */ e(ut, { className: `${B} fill-current` }) }, "play");
+        return /* @__PURE__ */ e("button", { onClick: () => n == null ? void 0 : n.togglePlay(), className: `strata-control-btn text-zinc-300 hover:text-white transition-colors hover:bg-white/10 focus:outline-none ${O}`, style: { borderRadius: "var(--radius)" }, children: o.isPlaying ? /* @__PURE__ */ e(pt, { className: `${A} fill-current` }) : /* @__PURE__ */ e(ft, { className: `${A} fill-current` }) }, "play");
       case "volume":
         return /* @__PURE__ */ l(
           "div",
           {
             className: "flex items-center gap-2 group/vol relative",
             onMouseEnter: () => {
-              window.matchMedia("(hover: hover)").matches && He(!0);
+              window.matchMedia("(hover: hover)").matches && We(!0);
             },
             onMouseLeave: () => {
-              window.matchMedia("(hover: hover)").matches && He(!1);
+              window.matchMedia("(hover: hover)").matches && We(!1);
             },
             children: [
-              /* @__PURE__ */ e("button", { onClick: Ht, className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 focus:outline-none ${O}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e(Wt, { className: B }) }),
-              /* @__PURE__ */ e("div", { className: `relative h-8 flex items-center transition-all duration-300 ease-out overflow-hidden ${st ? "w-28 opacity-100 ml-1" : "w-0 opacity-0"}`, children: /* @__PURE__ */ l("div", { ref: ye, className: "relative w-full h-full flex items-center cursor-pointer px-2", onMouseDown: tt, onTouchStart: tt, children: [
+              /* @__PURE__ */ e("button", { onClick: Gt, className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 focus:outline-none ${O}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e(_t, { className: A }) }),
+              /* @__PURE__ */ e("div", { className: `relative h-8 flex items-center transition-all duration-300 ease-out overflow-hidden ${nt ? "w-28 opacity-100 ml-1" : "w-0 opacity-0"}`, children: /* @__PURE__ */ l("div", { ref: ye, className: "relative w-full h-full flex items-center cursor-pointer px-2", onMouseDown: it, onTouchStart: it, children: [
                 /* @__PURE__ */ e("div", { className: "w-full h-1 bg-white/20 overflow-hidden", style: { borderRadius: "var(--radius-full)" }, children: /* @__PURE__ */ e("div", { className: "h-full bg-white", style: { width: `${(o.isMuted ? 0 : o.volume) * 100}%`, borderRadius: "var(--radius-full)" } }) }),
                 /* @__PURE__ */ e("div", { className: "absolute h-3 w-3 bg-white shadow-md top-1/2 -translate-y-1/2 pointer-events-none", style: { left: `calc(${(o.isMuted ? 0 : o.volume) * 100}% * 0.85 + 4px)`, borderRadius: "var(--radius-full)" } })
               ] }) }),
-              st && /* @__PURE__ */ e("div", { className: "strata-tooltip absolute bottom-full mb-2 px-1.5 py-0.5 rounded text-[10px] font-bold font-mono shadow-lg pointer-events-none whitespace-nowrap z-50 transform -translate-x-1/2", style: { left: `calc(52px + ${(o.isMuted ? 0 : o.volume) * 80}px)` }, children: o.isMuted ? "0%" : `${Math.round(o.volume * 100)}%` })
+              nt && /* @__PURE__ */ e("div", { className: "strata-tooltip absolute bottom-full mb-2 px-1.5 py-0.5 rounded text-[10px] font-bold font-mono shadow-lg pointer-events-none whitespace-nowrap z-50 transform -translate-x-1/2", style: { left: `calc(52px + ${(o.isMuted ? 0 : o.volume) * 80}px)` }, children: o.isMuted ? "0%" : `${Math.round(o.volume * 100)}%` })
             ]
           },
           "volume"
         );
       case "time":
-        return h.isLive ? /* @__PURE__ */ l("div", { className: "flex items-center gap-2 px-2 py-0.5 bg-red-500/10 border border-red-500/20 rounded-md", children: [
-          /* @__PURE__ */ e("div", { className: "w-2 h-2 rounded-full bg-red-500 animate-pulse" }),
-          /* @__PURE__ */ e("span", { className: "text-[10px] font-bold text-red-500 tracking-wider", children: "LIVE" })
+        return h.isLive ? /* @__PURE__ */ l("div", { className: "flex items-center gap-2 px-2 py-0.5 rounded-md border border-white/10", style: { backgroundColor: `${o.themeColor}1a`, borderColor: `${o.themeColor}33` }, children: [
+          /* @__PURE__ */ e("div", { className: "w-2 h-2 rounded-full animate-pulse", style: { backgroundColor: o.themeColor } }),
+          /* @__PURE__ */ e("span", { className: "text-[10px] font-bold tracking-wider", style: { color: o.themeColor }, children: "LIVE" })
         ] }, "live") : /* @__PURE__ */ l("div", { className: "text-xs font-medium text-zinc-400 font-mono select-none hidden sm:block tabular-nums", children: [
-          Te(fe ? re : o.currentTime),
+          Te(pe ? re : o.currentTime),
           " ",
           /* @__PURE__ */ e("span", { className: "text-zinc-600", children: "/" }),
           " ",
@@ -1811,10 +1822,10 @@ const Te = (s) => {
       case "subtitle":
         return /* @__PURE__ */ l("div", { className: "relative", children: [
           /* @__PURE__ */ e("button", { onClick: (u) => {
-            u.stopPropagation(), U(!E), F(!1);
-          }, className: `strata-control-btn transition-colors focus:outline-none ${O} ${E ? "text-[var(--accent)] bg-white/10" : "text-zinc-300 hover:text-white hover:bg-white/10"}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e(ui, { className: B }) }),
-          Oe.isMounted && /* @__PURE__ */ e(
-            Fi,
+            u.stopPropagation(), U(!E), V(!1);
+          }, className: `strata-control-btn transition-colors focus:outline-none ${O} ${E ? "text-[var(--accent)] bg-white/10" : "text-zinc-300 hover:text-white hover:bg-white/10"}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e(bi, { className: A }) }),
+          je.isMounted && /* @__PURE__ */ e(
+            Di,
             {
               tracks: o.subtitleTracks,
               current: o.currentSubtitle,
@@ -1826,40 +1837,40 @@ const Te = (s) => {
               onReset: () => n == null ? void 0 : n.resetSubtitleSettings(),
               offset: o.subtitleOffset,
               onOffsetChange: (u) => n == null ? void 0 : n.setSubtitleOffset(u),
-              maxHeight: it,
-              animationClass: `strata-backdrop ${nt} ${Oe.isVisible ? "opacity-100 translate-y-0 scale-100" : "opacity-0 translate-y-2 scale-95"}`
+              maxHeight: st,
+              animationClass: `strata-backdrop ${rt} ${je.isVisible ? "opacity-100 translate-y-0 scale-100" : "opacity-0 translate-y-2 scale-95"}`
             }
           )
         ] }, "subtitle");
       case "screenshot":
-        return /* @__PURE__ */ e("button", { onClick: () => n == null ? void 0 : n.screenshot(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 transition-colors hidden sm:block focus:outline-none ${O}`, style: { borderRadius: "var(--radius)" }, title: "Screenshot", children: /* @__PURE__ */ e(zi, { className: B }) }, "ss");
+        return /* @__PURE__ */ e("button", { onClick: () => n == null ? void 0 : n.screenshot(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 transition-colors hidden sm:block focus:outline-none ${O}`, style: { borderRadius: "var(--radius)" }, title: "Screenshot", children: /* @__PURE__ */ e(Ei, { className: A }) }, "ss");
       case "pip":
-        return /* @__PURE__ */ e("button", { onClick: () => n == null ? void 0 : n.togglePip(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 transition-colors hidden sm:block focus:outline-none ${O}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e(di, { className: B }) }, "pip");
+        return /* @__PURE__ */ e("button", { onClick: () => n == null ? void 0 : n.togglePip(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 transition-colors hidden sm:block focus:outline-none ${O}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e(pi, { className: A }) }, "pip");
       case "download":
-        return /* @__PURE__ */ e("button", { onClick: () => n == null ? void 0 : n.download(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 transition-colors hidden sm:block focus:outline-none ${O}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e(hi, { className: B }) }, "dl");
+        return /* @__PURE__ */ e("button", { onClick: () => n == null ? void 0 : n.download(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 transition-colors hidden sm:block focus:outline-none ${O}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e(vi, { className: A }) }, "dl");
       case "fullscreen":
-        return /* @__PURE__ */ e("button", { onClick: () => n == null ? void 0 : n.toggleFullscreen(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 rounded-lg transition-transform hover:scale-110 focus:outline-none ${O}`, style: { borderRadius: "var(--radius)" }, children: o.isFullscreen ? /* @__PURE__ */ e(li, { className: B }) : /* @__PURE__ */ e(oi, { className: B }) }, "fs");
+        return /* @__PURE__ */ e("button", { onClick: () => n == null ? void 0 : n.toggleFullscreen(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 rounded-lg transition-transform focus:outline-none ${O}`, style: { borderRadius: "var(--radius)" }, children: o.isFullscreen ? /* @__PURE__ */ e(mi, { className: A }) : /* @__PURE__ */ e(hi, { className: A }) }, "fs");
       case "fullscreenWeb":
-        return /* @__PURE__ */ e("button", { className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 hidden sm:block focus:outline-none ${O}`, style: { borderRadius: "var(--radius)" }, title: "Web Fullscreen", children: /* @__PURE__ */ e(Li, { className: B }) }, "fsw");
+        return /* @__PURE__ */ e("button", { onClick: () => n == null ? void 0 : n.toggleWebFullscreen(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 hidden sm:block focus:outline-none ${O} ${o.isWebFullscreen ? "text-[var(--accent)]" : ""}`, style: { borderRadius: "var(--radius)" }, title: "Web Fullscreen", children: /* @__PURE__ */ e(Ai, { className: A }) }, "fsw");
       case "settings":
         return /* @__PURE__ */ l("div", { className: "relative", children: [
           /* @__PURE__ */ e("button", { onClick: (u) => {
-            u.stopPropagation(), F(!$), U(!1), M("main");
-          }, className: `strata-control-btn transition-all duration-300 focus:outline-none ${O} ${$ ? "rotate-90 text-[var(--accent)] bg-white/10" : "text-zinc-300 hover:text-white hover:bg-white/10"}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e(ci, { className: B }) }),
-          Fe.isMounted && /* @__PURE__ */ e(kt, { onClose: () => F(!1), align: "right", maxHeight: it, className: `strata-backdrop ${nt} ${Fe.isVisible ? "opacity-100 translate-y-0 scale-100" : "opacity-0 translate-y-2 scale-95"}`, children: /* @__PURE__ */ l("div", { className: "w-full", children: [
-            A === "main" && /* @__PURE__ */ l("div", { className: "animate-in slide-in-from-left-4 fade-in duration-200", children: [
+            u.stopPropagation(), V(!$), U(!1), M("main");
+          }, className: `strata-control-btn transition-all duration-300 focus:outline-none ${O} ${$ ? "rotate-90 text-[var(--accent)] bg-white/10" : "text-zinc-300 hover:text-white hover:bg-white/10"}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e(fi, { className: A }) }),
+          Oe.isMounted && /* @__PURE__ */ e(Nt, { onClose: () => V(!1), align: "right", maxHeight: st, className: `strata-backdrop ${rt} ${Oe.isVisible ? "opacity-100 translate-y-0 scale-100" : "opacity-0 translate-y-2 scale-95"}`, children: /* @__PURE__ */ l("div", { className: "w-full", children: [
+            F === "main" && /* @__PURE__ */ l("div", { className: "animate-in slide-in-from-left-4 fade-in duration-200", children: [
               /* @__PURE__ */ e("div", { className: "px-3 py-2 mb-1 border-b border-white/5 font-bold text-zinc-400 uppercase text-[11px] tracking-wider flex justify-between items-center bg-white/5 sticky top-0 z-10 backdrop-blur-md", style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e("span", { children: "Settings" }) }),
-              o.sources.length > 1 && /* @__PURE__ */ e(T, { label: "Source", value: ((p = o.sources[o.currentSourceIndex]) == null ? void 0 : p.name) || `Source ${o.currentSourceIndex + 1}`, onClick: () => M("sources"), hasSubmenu: !0 }),
+              o.sources.length > 1 && /* @__PURE__ */ e(T, { label: "Source", value: ((f = o.sources[o.currentSourceIndex]) == null ? void 0 : f.name) || `Source ${o.currentSourceIndex + 1}`, onClick: () => M("sources"), hasSubmenu: !0 }),
               /* @__PURE__ */ e(T, { label: "Speed", value: `${o.playbackRate}x`, onClick: () => M("speed"), hasSubmenu: !0 }),
-              /* @__PURE__ */ e(T, { label: "Quality", value: o.currentQuality === -1 ? "Auto" : `${(g = o.qualityLevels[o.currentQuality]) == null ? void 0 : g.height}p`, onClick: () => M("quality"), hasSubmenu: !0 }),
-              /* @__PURE__ */ e(T, { label: "Audio", value: ((N = o.audioTracks[o.currentAudioTrack]) == null ? void 0 : N.label) || "Default", onClick: () => M("audio"), hasSubmenu: !0 }),
-              St && /* @__PURE__ */ e(T, { label: "Flip", value: o.flipState.horizontal ? "H" : o.flipState.vertical ? "V" : "Normal", onClick: () => M("flip"), hasSubmenu: !0 }),
-              Ct && /* @__PURE__ */ e(T, { label: "Aspect Ratio", value: o.aspectRatio, onClick: () => M("ratio"), hasSubmenu: !0 }),
-              /* @__PURE__ */ e(bt, {}),
+              /* @__PURE__ */ e(T, { label: "Quality", value: o.currentQuality === -1 ? "Auto" : `${(w = o.qualityLevels[o.currentQuality]) == null ? void 0 : w.height}p`, onClick: () => M("quality"), hasSubmenu: !0 }),
+              /* @__PURE__ */ e(T, { label: "Audio", value: ((C = o.audioTracks[o.currentAudioTrack]) == null ? void 0 : C.label) || "Default", onClick: () => M("audio"), hasSubmenu: !0 }),
+              Tt && /* @__PURE__ */ e(T, { label: "Flip", value: o.flipState.horizontal ? "H" : o.flipState.vertical ? "V" : "Normal", onClick: () => M("flip"), hasSubmenu: !0 }),
+              Mt && /* @__PURE__ */ e(T, { label: "Aspect Ratio", value: o.aspectRatio, onClick: () => M("ratio"), hasSubmenu: !0 }),
+              /* @__PURE__ */ e(xt, {}),
               /* @__PURE__ */ e(T, { label: "Audio Boost", value: o.audioGain > 1 ? `${o.audioGain}x` : "Off", onClick: () => M("boost"), hasSubmenu: !0 }),
-              /* @__PURE__ */ e(T, { label: "Watch Party", icon: /* @__PURE__ */ e(bi, { className: "w-4 h-4" }), onClick: () => M("party"), hasSubmenu: !0 }),
-              /* @__PURE__ */ e(T, { label: "Cast to Device", icon: /* @__PURE__ */ e(fi, { className: "w-4 h-4" }), onClick: () => {
-                n == null || n.requestCast(), F(!1);
+              /* @__PURE__ */ e(T, { label: "Watch Party", icon: /* @__PURE__ */ e(yi, { className: "w-4 h-4" }), onClick: () => M("party"), hasSubmenu: !0 }),
+              /* @__PURE__ */ e(T, { label: "Cast to Device", icon: /* @__PURE__ */ e(wi, { className: "w-4 h-4" }), onClick: () => {
+                n == null || n.requestCast(), V(!1);
               } }),
               (j = h.settings) == null ? void 0 : j.map((u, J) => u.switch !== void 0 ? /* @__PURE__ */ e("div", { className: "px-1", children: /* @__PURE__ */ e(
                 K,
@@ -1868,7 +1879,7 @@ const Te = (s) => {
                   icon: u.icon,
                   checked: u.switch,
                   tooltip: u.tooltip,
-                  onChange: (Gi) => {
+                  onChange: (Ji) => {
                     u.onSwitch && u.onSwitch(u);
                   }
                 }
@@ -1878,62 +1889,62 @@ const Te = (s) => {
                   label: u.html,
                   icon: u.icon,
                   onClick: () => {
-                    u.click ? u.click() : u.onClick && u.onClick(), F(!1);
+                    u.click ? u.click() : u.onClick && u.onClick(), V(!1);
                   }
                 },
                 `cust-${J}`
               )),
-              /* @__PURE__ */ e(bt, {}),
-              /* @__PURE__ */ e(T, { label: "Appearance", icon: /* @__PURE__ */ e(yt, { className: "w-4 h-4" }), onClick: () => M("appearance"), hasSubmenu: !0 })
+              /* @__PURE__ */ e(xt, {}),
+              /* @__PURE__ */ e(T, { label: "Appearance", icon: /* @__PURE__ */ e(Ct, { className: "w-4 h-4" }), onClick: () => M("appearance"), hasSubmenu: !0 })
             ] }),
-            ["speed", "quality", "audio", "boost", "party", "appearance", "sources", "flip", "ratio"].includes(A) && /* @__PURE__ */ l("div", { className: "animate-in slide-in-from-right-4 fade-in duration-200", children: [
-              A === "sources" && /* @__PURE__ */ l(L, { children: [
+            ["speed", "quality", "audio", "boost", "party", "appearance", "sources", "flip", "ratio"].includes(F) && /* @__PURE__ */ l("div", { className: "animate-in slide-in-from-right-4 fade-in duration-200", children: [
+              F === "sources" && /* @__PURE__ */ l(L, { children: [
                 /* @__PURE__ */ e(H, { label: "Select Source", onBack: () => M("main") }),
                 o.sources.map((u, J) => /* @__PURE__ */ e(T, { label: u.name || `Source ${J + 1}`, value: u.type, active: o.currentSourceIndex === J, onClick: () => n == null ? void 0 : n.switchSource(J) }, J))
               ] }),
-              A === "speed" && /* @__PURE__ */ l(L, { children: [
+              F === "speed" && /* @__PURE__ */ l(L, { children: [
                 /* @__PURE__ */ e(H, { label: "Speed", onBack: () => M("main") }),
                 [0.5, 1, 1.5, 2].map((u) => /* @__PURE__ */ e(T, { label: `${u}x`, active: o.playbackRate === u, onClick: () => n.video.playbackRate = u }, u))
               ] }),
-              A === "quality" && /* @__PURE__ */ l(L, { children: [
+              F === "quality" && /* @__PURE__ */ l(L, { children: [
                 /* @__PURE__ */ e(H, { label: "Quality", onBack: () => M("main") }),
                 /* @__PURE__ */ e(T, { label: "Auto", active: o.currentQuality === -1, onClick: () => n == null ? void 0 : n.setQuality(-1) }),
                 o.qualityLevels.map((u) => /* @__PURE__ */ e(T, { label: `${u.height}p`, value: `${Math.round(u.bitrate / 1e3)}k`, active: o.currentQuality === u.index, onClick: () => n == null ? void 0 : n.setQuality(u.index) }, u.index))
               ] }),
-              A === "audio" && /* @__PURE__ */ l(L, { children: [
+              F === "audio" && /* @__PURE__ */ l(L, { children: [
                 /* @__PURE__ */ e(H, { label: "Audio Track", onBack: () => M("main") }),
                 o.audioTracks.length === 0 && /* @__PURE__ */ e("div", { className: "px-4 py-3 text-zinc-500 text-xs text-center", children: "No tracks available" }),
                 o.audioTracks.map((u) => /* @__PURE__ */ e(T, { label: u.label, value: u.language, active: o.currentAudioTrack === u.index, onClick: () => n == null ? void 0 : n.setAudioTrack(u.index) }, u.index))
               ] }),
-              A === "boost" && /* @__PURE__ */ l(L, { children: [
+              F === "boost" && /* @__PURE__ */ l(L, { children: [
                 /* @__PURE__ */ e(H, { label: "Audio Boost", onBack: () => M("main") }),
                 [1, 1.5, 2, 3].map((u) => /* @__PURE__ */ e(T, { label: u === 1 ? "Off" : `${u}x`, active: o.audioGain === u, onClick: () => n == null ? void 0 : n.setAudioGain(u) }, u))
               ] }),
-              A === "flip" && /* @__PURE__ */ l(L, { children: [
+              F === "flip" && /* @__PURE__ */ l(L, { children: [
                 /* @__PURE__ */ e(H, { label: "Video Flip", onBack: () => M("main") }),
                 /* @__PURE__ */ l("div", { className: "p-2 space-y-1", children: [
                   /* @__PURE__ */ e(K, { label: "Horizontal Flip", checked: o.flipState.horizontal, onChange: () => n == null ? void 0 : n.setFlip("horizontal") }),
                   /* @__PURE__ */ e(K, { label: "Vertical Flip", checked: o.flipState.vertical, onChange: () => n == null ? void 0 : n.setFlip("vertical") })
                 ] })
               ] }),
-              A === "ratio" && /* @__PURE__ */ l(L, { children: [
+              F === "ratio" && /* @__PURE__ */ l(L, { children: [
                 /* @__PURE__ */ e(H, { label: "Aspect Ratio", onBack: () => M("main") }),
                 ["default", "16:9", "4:3"].map((u) => /* @__PURE__ */ e(T, { label: u === "default" ? "Default" : u, active: o.aspectRatio === u, onClick: () => n == null ? void 0 : n.setAspectRatio(u) }, u))
               ] }),
-              A === "party" && /* @__PURE__ */ l(L, { children: [
+              F === "party" && /* @__PURE__ */ l(L, { children: [
                 /* @__PURE__ */ e(H, { label: "Watch Party", onBack: () => M("main") }),
                 /* @__PURE__ */ l("div", { className: "p-4 space-y-3", children: [
                   /* @__PURE__ */ e("p", { className: "text-xs text-zinc-400 leading-relaxed", children: "Create a synchronized room on WatchParty.me to watch together." }),
-                  /* @__PURE__ */ e("a", { href: `https://www.watchparty.me/create?video=${encodeURIComponent(((ct = o.sources[o.currentSourceIndex]) == null ? void 0 : ct.url) || t || "")}`, target: "_blank", rel: "noopener noreferrer", className: "flex items-center justify-center w-full py-2.5 bg-[var(--accent)] hover:opacity-90 text-white font-medium transition-opacity text-xs", style: { borderRadius: "var(--radius)" }, children: "Create Room" })
+                  /* @__PURE__ */ e("a", { href: `https://www.watchparty.me/create?video=${encodeURIComponent(((ht = o.sources[o.currentSourceIndex]) == null ? void 0 : ht.url) || t || "")}`, target: "_blank", rel: "noopener noreferrer", className: "flex items-center justify-center w-full py-2.5 bg-[var(--accent)] hover:opacity-90 text-white font-medium transition-opacity text-xs", style: { borderRadius: "var(--radius)" }, children: "Create Room" })
                 ] })
               ] }),
-              A === "appearance" && /* @__PURE__ */ l(L, { children: [
+              F === "appearance" && /* @__PURE__ */ l(L, { children: [
                 /* @__PURE__ */ e(H, { label: "Appearance", onBack: () => M("main") }),
                 /* @__PURE__ */ l("div", { className: "pb-1", children: [
-                  /* @__PURE__ */ e(Y, { title: "Theme", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-2 gap-2 px-3", children: Wi.map((u) => /* @__PURE__ */ e("button", { onClick: () => n == null ? void 0 : n.setAppearance({ theme: u.value, themeColor: u.color }), className: `py-2 text-xs font-bold uppercase tracking-wide transition-colors border-[length:var(--border-width)] border-white/10 ${o.theme === u.value ? "bg-[var(--accent)] text-white" : "bg-white/5 text-zinc-400 hover:text-white"}`, style: { borderRadius: "var(--radius)" }, children: u.label }, u.value)) }) }),
+                  /* @__PURE__ */ e(Y, { title: "Theme", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-2 gap-2 px-3", children: qi.map((u) => /* @__PURE__ */ e("button", { onClick: () => n == null ? void 0 : n.setAppearance({ theme: u.value, themeColor: u.color }), className: `py-2 text-xs font-bold uppercase tracking-wide transition-colors border-[length:var(--border-width)] border-white/10 ${o.theme === u.value ? "bg-[var(--accent)] text-white" : "bg-white/5 text-zinc-400 hover:text-white"}`, style: { borderRadius: "var(--radius)" }, children: u.label }, u.value)) }) }),
                   /* @__PURE__ */ e(Y, { title: "Icon Size", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-1 px-3", children: ["small", "medium", "large"].map((u) => /* @__PURE__ */ e("button", { onClick: () => n == null ? void 0 : n.setAppearance({ iconSize: u }), className: `py-1.5 text-xs font-medium transition-colors ${o.iconSize === u ? "bg-white text-black" : "bg-white/5 text-zinc-400 hover:text-zinc-200"}`, style: { borderRadius: "var(--radius)" }, children: u.charAt(0).toUpperCase() + u.slice(1) }, u)) }) }),
                   /* @__PURE__ */ l(Y, { title: "Theme Color", children: [
-                    /* @__PURE__ */ e("div", { className: "grid grid-cols-6 gap-2 px-3", children: Hi.map((u) => /* @__PURE__ */ e("button", { title: u.label, onClick: () => n == null ? void 0 : n.setAppearance({ themeColor: u.value }), className: `w-6 h-6 transition-transform hover:scale-110 ${o.themeColor === u.value ? "ring-2 ring-white scale-110" : "ring-1 ring-white/10"}`, style: { backgroundColor: u.value, borderRadius: "var(--radius-full)" }, children: o.themeColor === u.value && /* @__PURE__ */ e(Le, { className: "w-3 h-3 text-white mx-auto stroke-[3]" }) }, u.value)) }),
+                    /* @__PURE__ */ e("div", { className: "grid grid-cols-6 gap-2 px-3", children: _i.map((u) => /* @__PURE__ */ e("button", { title: u.label, onClick: () => n == null ? void 0 : n.setAppearance({ themeColor: u.value }), className: `w-6 h-6 transition-transform hover:scale-110 ${o.themeColor === u.value ? "ring-2 ring-white scale-110" : "ring-1 ring-white/10"}`, style: { backgroundColor: u.value, borderRadius: "var(--radius-full)" }, children: o.themeColor === u.value && /* @__PURE__ */ e(Le, { className: "w-3 h-3 text-white mx-auto stroke-[3]" }) }, u.value)) }),
                     /* @__PURE__ */ e("div", { className: "px-3 pt-4", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-3 bg-white/5 p-2 hover:bg-white/10 transition-colors group", style: { borderRadius: "var(--radius)" }, children: [
                       /* @__PURE__ */ e("div", { className: "relative w-6 h-6 overflow-hidden ring-1 ring-white/20", style: { borderRadius: "var(--radius-full)" }, children: /* @__PURE__ */ e("input", { type: "color", value: o.themeColor, onChange: (u) => n == null ? void 0 : n.setAppearance({ themeColor: u.target.value }), className: "absolute inset-[-4px] w-[150%] h-[150%] cursor-pointer p-0 border-0" }) }),
                       /* @__PURE__ */ e("span", { className: "text-xs text-zinc-400 font-medium group-hover:text-zinc-200", children: "Custom Color" }),
@@ -1948,7 +1959,7 @@ const Te = (s) => {
       default:
         return null;
     }
-  }, _t = Ce(() => {
+  }, Jt = Ce(() => {
     const c = [
       // Loop (Playback Group)
       { html: "Playback", isLabel: !0 },
@@ -1972,7 +1983,7 @@ const Te = (s) => {
       // Stats
       {
         html: "Video Info",
-        icon: /* @__PURE__ */ e(Pi, { className: "w-3.5 h-3.5" }),
+        icon: /* @__PURE__ */ e(Oi, { className: "w-3.5 h-3.5" }),
         onClick: () => Ve(!0)
       },
       { separator: !0 }
@@ -1982,31 +1993,30 @@ const Te = (s) => {
       disabled: !0
     }), c.push({
       html: "Close",
-      onClick: (p) => p(),
+      onClick: (f) => f(),
       // Wrapper handles close
       icon: /* @__PURE__ */ e("div", { className: "text-red-400", children: /* @__PURE__ */ l("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: [
         /* @__PURE__ */ e("path", { d: "M18 6 6 18" }),
         /* @__PURE__ */ e("path", { d: "m6 6 12 12" })
       ] }) })
     }), c;
-  }, [h.contextmenu, o.aspectRatio, o.isLooping, n]);
-  return /* @__PURE__ */ l(
+  }, [h.contextmenu, o.aspectRatio, o.isLooping, n]), lt = o.isWebFullscreen, ct = /* @__PURE__ */ l(
     "div",
     {
       id: h.id,
       ref: q,
-      className: `group relative w-full h-full bg-black overflow-hidden select-none font-[family-name:var(--font-main)] outline-none rounded-[var(--radius)] text-zinc-100 strata-player-reset ${h.container || ""}`,
+      className: `group bg-black overflow-hidden select-none font-[family-name:var(--font-main)] outline-none text-zinc-100 strata-player-reset ${lt ? "fixed inset-0 z-[2147483647] w-screen h-screen rounded-none" : "relative w-full h-full rounded-[var(--radius)]"} ${h.container || ""}`,
       style: { touchAction: "manipulation", "--accent": o.themeColor },
-      onMouseMove: Ke,
+      onMouseMove: Ye,
       onMouseLeave: () => {
         o.isPlaying && !$ && !E && n && n.setControlsVisible(!1);
       },
-      onMouseDown: Ye,
+      onMouseDown: Ze,
       onMouseUp: ke,
-      onTouchStart: At,
-      onTouchMove: Bt,
-      onTouchEnd: Vt,
-      onContextMenu: jt,
+      onTouchStart: Ot,
+      onTouchMove: jt,
+      onTouchEnd: Ht,
+      onContextMenu: Ut,
       tabIndex: 0,
       role: "region",
       "aria-label": "Video Player",
@@ -2109,18 +2119,18 @@ const Te = (s) => {
         o.theme === "hacker" && /* @__PURE__ */ e("div", { className: "strata-scanlines" }),
         !n && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-zinc-950 z-50", children: /* @__PURE__ */ e(Ie, { className: "w-10 h-10 text-[var(--accent)] animate-spin" }) }),
         n && /* @__PURE__ */ l(L, { children: [
-          (ot = h.layers) == null ? void 0 : ot.map((c, p) => /* @__PURE__ */ e(
+          (dt = h.layers) == null ? void 0 : dt.map((c, f) => /* @__PURE__ */ e(
             "div",
             {
               className: `absolute inset-0 pointer-events-none z-10 ${c.className || ""}`,
               style: c.style,
-              children: /* @__PURE__ */ e(vt, { content: c.html || "", className: "w-full h-full" })
+              children: /* @__PURE__ */ e(wt, { content: c.html || "", className: "w-full h-full" })
             },
-            p
+            f
           )),
-          /* @__PURE__ */ e(Ai, { notifications: o.notifications }),
-          /* @__PURE__ */ e(Bi, { cues: o.activeCues, settings: o.subtitleSettings }),
-          /* @__PURE__ */ e("div", { className: "absolute inset-0 z-0", onClick: Ot, "aria-hidden": "true" }),
+          /* @__PURE__ */ e(ji, { notifications: o.notifications }),
+          /* @__PURE__ */ e(Hi, { cues: o.activeCues, settings: o.subtitleSettings }),
+          /* @__PURE__ */ e("div", { className: "absolute inset-0 z-0", onClick: Dt, "aria-hidden": "true" }),
           a && !he && /* @__PURE__ */ e(
             "div",
             {
@@ -2129,38 +2139,38 @@ const Te = (s) => {
             }
           ),
           Z.visible && /* @__PURE__ */ e(
-            Oi,
+            Ui,
             {
               x: Z.x,
               y: Z.y,
-              items: _t,
-              onClose: () => pe({ ...Z, visible: !1 }),
-              containerWidth: zt,
-              containerHeight: Ae
+              items: Jt,
+              onClose: () => fe({ ...Z, visible: !1 }),
+              containerWidth: Lt,
+              containerHeight: Fe
             }
           ),
-          Rt && n && /* @__PURE__ */ e(ji, { player: n, onClose: () => Ve(!1) }),
+          Pt && n && /* @__PURE__ */ e(Gi, { player: n, onClose: () => Ve(!1) }),
           ge && /* @__PURE__ */ l("div", { className: "absolute top-8 left-1/2 -translate-x-1/2 bg-black/50 backdrop-blur-md px-4 py-2 rounded-full flex items-center gap-2 z-40 animate-in fade-in zoom-in duration-200", children: [
-            /* @__PURE__ */ e($i, { className: "w-4 h-4 text-[var(--accent)] fill-current" }),
+            /* @__PURE__ */ e(Bi, { className: "w-4 h-4 text-[var(--accent)] fill-current" }),
             /* @__PURE__ */ e("span", { className: "text-xs font-bold tracking-wider", children: "2x Speed" })
           ] }),
-          W && o.controlsVisible && /* @__PURE__ */ e(
+          W && Ae && o.controlsVisible && /* @__PURE__ */ e(
             "button",
             {
               onClick: (c) => {
                 c.stopPropagation(), n.toggleLock();
               },
               className: `absolute left-4 md:left-6 bottom-24 md:bottom-28 z-50 p-3 rounded-full bg-black/50 backdrop-blur-md border border-white/10 text-white transition-all active:scale-95 ${o.isLocked ? "text-[var(--accent)] bg-white/10" : "hover:bg-white/10"}`,
-              children: o.isLocked ? /* @__PURE__ */ e(Ii, { className: "w-5 h-5" }) : /* @__PURE__ */ e(Ri, { className: "w-5 h-5" })
+              children: o.isLocked ? /* @__PURE__ */ e(Pi, { className: "w-5 h-5" }) : /* @__PURE__ */ e(Fi, { className: "w-5 h-5" })
             }
           ),
           Q && /* @__PURE__ */ e(
             "div",
             {
               className: `absolute top-0 bottom-0 flex items-center justify-center w-[35%] z-20 bg-white/5 backdrop-blur-[1px] animate-out fade-out duration-500 fill-mode-forwards ${Q.type === "rewind" ? "left-0 rounded-r-[4rem]" : "right-0 rounded-l-[4rem]"}`,
-              onAnimationEnd: () => oe(null),
+              onAnimationEnd: () => ae(null),
               children: /* @__PURE__ */ l("div", { className: "flex flex-col items-center text-white drop-shadow-lg", children: [
-                Q.type === "rewind" ? /* @__PURE__ */ e(mt, { className: "w-12 h-12 animate-pulse" }) : /* @__PURE__ */ e(pt, { className: "w-12 h-12 animate-pulse" }),
+                Q.type === "rewind" ? /* @__PURE__ */ e(bt, { className: "w-12 h-12 animate-pulse" }) : /* @__PURE__ */ e(vt, { className: "w-12 h-12 animate-pulse" }),
                 /* @__PURE__ */ e("span", { className: "font-bold text-sm mt-2 font-mono", children: Q.type === "rewind" ? "-10s" : "+10s" })
               ] })
             },
@@ -2173,29 +2183,29 @@ const Te = (s) => {
             /* @__PURE__ */ e("p", { className: "text-zinc-400 text-sm", children: o.error }),
             /* @__PURE__ */ e("button", { onClick: () => n.load(n.store.get().sources[n.store.get().currentSourceIndex] || { url: t || "" }, v), className: "px-6 py-2 bg-[var(--accent)] text-white font-medium rounded-full hover:opacity-90 transition-opacity mt-4 shadow-lg", children: "Try Again" })
           ] }) }),
-          Tt && !o.isLocked && (!o.isPlaying && !o.isBuffering && !o.error || o.controlsVisible) && !o.isBuffering ? /* @__PURE__ */ e(
+          It && !o.isLocked && (!o.isPlaying && !o.isBuffering && !o.error || o.controlsVisible) && !o.isBuffering ? /* @__PURE__ */ e(
             "div",
             {
               className: `absolute inset-0 flex items-center justify-center z-10 transition-opacity duration-300 pointer-events-none ${o.controlsVisible || !o.isPlaying ? "opacity-100" : "opacity-0"}`,
               children: /* @__PURE__ */ l("div", { className: "flex items-center gap-8 md:gap-16 pointer-events-auto", children: [
                 /* @__PURE__ */ e("button", { onClick: (c) => {
-                  c.stopPropagation(), F(!1), U(!1), le("rewind");
-                }, className: `group flex items-center justify-center rounded-full bg-black/40 hover:bg-black/60 border border-white/10 transition-all active:scale-110 text-white/90 focus:outline-none backdrop-blur-sm ${X.skipBtn}`, children: /* @__PURE__ */ e(mt, { className: X.skipIcon }) }),
+                  c.stopPropagation(), V(!1), U(!1), le("rewind");
+                }, className: `group flex items-center justify-center rounded-full bg-black/40 hover:bg-black/60 border border-white/10 transition-all duration-300 active:scale-125 active:opacity-80 text-white/90 focus:outline-none backdrop-blur-sm ${X.skipBtn}`, children: /* @__PURE__ */ e(bt, { className: X.skipIcon }) }),
                 /* @__PURE__ */ e("button", { onClick: (c) => {
-                  c.stopPropagation(), F(!1), U(!1), n.togglePlay();
-                }, className: `group relative flex items-center justify-center rounded-full bg-white/10 hover:bg-[var(--accent)] border border-white/10 shadow-2xl transition-all hover:scale-105 active:scale-110 duration-75 focus:outline-none backdrop-blur-md ${X.playBtn}`, children: o.isPlaying ? /* @__PURE__ */ e(ht, { className: `${X.playIcon} text-white fill-current` }) : /* @__PURE__ */ e(ut, { className: `${X.playIcon} text-white ml-1 fill-current` }) }),
+                  c.stopPropagation(), V(!1), U(!1), n.togglePlay();
+                }, className: `group relative flex items-center justify-center rounded-full bg-white/10 hover:bg-[var(--accent)] border border-white/10 shadow-2xl transition-all duration-300 active:scale-90 active:opacity-80 focus:outline-none backdrop-blur-md ${X.playBtn}`, children: o.isPlaying ? /* @__PURE__ */ e(pt, { className: `${X.playIcon} text-white fill-current` }) : /* @__PURE__ */ e(ft, { className: `${X.playIcon} text-white ml-1 fill-current` }) }),
                 /* @__PURE__ */ e("button", { onClick: (c) => {
-                  c.stopPropagation(), F(!1), U(!1), le("forward");
-                }, className: `group flex items-center justify-center rounded-full bg-black/40 hover:bg-black/60 border border-white/10 transition-all active:scale-110 text-white/90 focus:outline-none backdrop-blur-sm ${X.skipBtn}`, children: /* @__PURE__ */ e(pt, { className: X.skipIcon }) })
+                  c.stopPropagation(), V(!1), U(!1), le("forward");
+                }, className: `group flex items-center justify-center rounded-full bg-black/40 hover:bg-black/60 border border-white/10 transition-all duration-300 active:scale-125 active:opacity-80 text-white/90 focus:outline-none backdrop-blur-sm ${X.skipBtn}`, children: /* @__PURE__ */ e(vt, { className: X.skipIcon }) })
               ] })
             }
           ) : null,
           /* @__PURE__ */ l(
             "div",
             {
-              className: `absolute inset-x-0 bottom-0 z-30 transition-all duration-300 px-4 md:px-6 py-4 bg-gradient-to-t from-black/90 via-black/50 to-transparent ${Gt ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4 pointer-events-none"}`,
+              className: `absolute inset-x-0 bottom-0 z-30 transition-all duration-300 px-4 md:px-6 py-4 bg-gradient-to-t from-black/90 via-black/50 to-transparent ${Xt ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4 pointer-events-none"}`,
               onClick: (c) => {
-                c.target === c.currentTarget && (F(!1), U(!1), ae(!1)), c.stopPropagation();
+                c.target === c.currentTarget && (V(!1), U(!1), oe(!1)), c.stopPropagation();
               },
               children: [
                 !h.isLive && /* @__PURE__ */ l(
@@ -2203,28 +2213,28 @@ const Te = (s) => {
                   {
                     ref: we,
                     className: "relative w-full h-3 group/slider mb-3 cursor-pointer touch-none flex items-center",
-                    onMouseMove: Ft,
+                    onMouseMove: Wt,
                     onMouseLeave: () => {
-                      Ge(null), _e(null);
+                      _e(null), qe(null);
                     },
-                    onMouseDown: Ze,
-                    onTouchStart: Ze,
+                    onMouseDown: et,
+                    onTouchStart: et,
                     children: [
-                      (lt = h.highlight) == null ? void 0 : lt.map((c, p) => /* @__PURE__ */ e("div", { className: "absolute top-1/2 -translate-y-1/2 w-1.5 h-1.5 bg-yellow-400 rounded-full z-10 pointer-events-none", style: { left: `${c.time / o.duration * 100}%` }, title: c.text }, p)),
-                      Ue !== null && /* @__PURE__ */ l("div", { className: "absolute bottom-full mb-1.5 flex flex-col items-center transform -translate-x-1/2 z-40 pointer-events-none transition-opacity duration-150", style: { left: `clamp(70px, ${Et}%, calc(100% - 70px))` }, children: [
+                      (ut = h.highlight) == null ? void 0 : ut.map((c, f) => /* @__PURE__ */ e("div", { className: "absolute top-1/2 -translate-y-1/2 w-1.5 h-1.5 bg-yellow-400 rounded-full z-10 pointer-events-none", style: { left: `${c.time / o.duration * 100}%` }, title: c.text }, f)),
+                      Ge !== null && /* @__PURE__ */ l("div", { className: "absolute bottom-full mb-1.5 flex flex-col items-center transform -translate-x-1/2 z-40 pointer-events-none transition-opacity duration-150", style: { left: `clamp(70px, ${Bt}%, calc(100% - 70px))` }, children: [
                         G && /* @__PURE__ */ e("div", { className: "bg-black/90 border border-white/10 shadow-2xl overflow-hidden backdrop-blur-sm", style: { width: `${G.w * 0.5}px`, height: `${G.h * 0.5}px`, borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e("div", { style: { backgroundImage: `url("${G.url}")`, width: `${G.w}px`, height: `${G.h}px`, backgroundPosition: `-${G.x}px -${G.y}px`, backgroundRepeat: "no-repeat", transform: "scale(0.5)", transformOrigin: "top left" } }) }),
-                        /* @__PURE__ */ e("div", { className: "strata-tooltip px-2 py-0.5 text-[11px] font-bold font-mono shadow-lg tabular-nums mt-1", children: Te(Ue) })
+                        /* @__PURE__ */ e("div", { className: "strata-tooltip px-2 py-0.5 text-[11px] font-bold font-mono shadow-lg tabular-nums mt-1", children: Te(Ge) })
                       ] }),
                       /* @__PURE__ */ l("div", { className: "w-full h-1 bg-white/20 overflow-hidden relative backdrop-blur-sm border-[length:var(--border-width)] border-white/10", style: { borderRadius: "var(--radius-full)" }, children: [
-                        o.duration > 0 && o.buffered.map((c, p) => /* @__PURE__ */ e("div", { className: "absolute top-0 bottom-0 bg-white/20", style: { left: `${c.start / o.duration * 100}%`, width: `${(c.end - c.start) / o.duration * 100}%` } }, p)),
-                        /* @__PURE__ */ e("div", { className: "absolute left-0 top-0 bottom-0 bg-[var(--accent)]", style: { width: `${(fe ? re : o.currentTime) / o.duration * 100}%` } })
+                        o.duration > 0 && o.buffered.map((c, f) => /* @__PURE__ */ e("div", { className: "absolute top-0 bottom-0 bg-white/20", style: { left: `${c.start / o.duration * 100}%`, width: `${(c.end - c.start) / o.duration * 100}%` } }, f)),
+                        /* @__PURE__ */ e("div", { className: "absolute left-0 top-0 bottom-0 bg-[var(--accent)]", style: { width: `${(pe ? re : o.currentTime) / o.duration * 100}%` } })
                       ] }),
                       /* @__PURE__ */ e(
                         "div",
                         {
                           className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-3.5 h-3.5 bg-white shadow-md scale-0 group-hover/slider:scale-100 transition-transform duration-100 z-10",
                           style: {
-                            left: `${(fe ? re : o.currentTime) / o.duration * 100}%`,
+                            left: `${(pe ? re : o.currentTime) / o.duration * 100}%`,
                             borderRadius: "var(--radius-full)"
                           }
                         }
@@ -2233,8 +2243,8 @@ const Te = (s) => {
                   }
                 ),
                 /* @__PURE__ */ l("div", { className: "flex items-center justify-between pointer-events-auto", children: [
-                  /* @__PURE__ */ e("div", { className: "flex items-center gap-3", children: rt.filter((c) => c.position === "left" || c.position === "center").map(at) }),
-                  /* @__PURE__ */ e("div", { className: "flex items-center gap-1", children: rt.filter((c) => c.position === "right").map(at) })
+                  /* @__PURE__ */ e("div", { className: "flex items-center gap-3", children: ot.filter((c) => c.position === "left" || c.position === "center").map(at) }),
+                  /* @__PURE__ */ e("div", { className: "flex items-center gap-1", children: ot.filter((c) => c.position === "right").map(at) })
                 ] })
               ]
             }
@@ -2243,20 +2253,21 @@ const Te = (s) => {
       ]
     }
   );
-}, Ji = (s, t) => {
-  const i = Kt(s);
-  return i.render(ze.createElement(gt, t)), {
+  return lt && typeof document < "u" ? ii(ct, document.body) : ct;
+}, is = (s, t) => {
+  const i = ti(s);
+  return i.render(ze.createElement(yt, t)), {
     unmount: () => {
       i.unmount();
     },
     update: (r) => {
-      i.render(ze.createElement(gt, { ...t, ...r }));
+      i.render(ze.createElement(yt, { ...t, ...r }));
     }
   };
 };
 export {
-  ti as StrataCore,
-  gt as StrataPlayer,
-  Ji as mountStrataPlayer
+  oi as StrataCore,
+  yt as StrataPlayer,
+  is as mountStrataPlayer
 };
 //# sourceMappingURL=strataplayer.es.js.map