strataplayer 1.2.11 → 1.2.12

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 Xt = Object.defineProperty;
+var Jt = (s, t, i) => t in s ? Xt(s, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : s[t] = i;
+var C = (s, t, i) => Jt(s, typeof t != "symbol" ? t + "" : t, i);
+import ze, { useState as N, useEffect as P, useRef as I, useLayoutEffect as Kt, useMemo as Ce, useSyncExternalStore as Yt, useCallback as Ne } from "react";
+import { createRoot as Zt } from "react-dom/client";
 import { jsxs as l, jsx as e, Fragment as L } from "react/jsx-runtime";
-class Yt {
+import { createPortal as ei } from "react-dom";
+class ti {
   constructor() {
-    S(this, "events");
+    C(this, "events");
     this.events = /* @__PURE__ */ new Map();
   }
   on(t, i) {
@@ -17,21 +18,21 @@ class Yt {
     const r = this.events.get(t);
     r && this.events.set(
       t,
-      r.filter((a) => a !== i)
+      r.filter((o) => o !== i)
     );
   }
   emit(t, i) {
     const r = this.events.get(t);
-    r && r.forEach((a) => a(i));
+    r && r.forEach((o) => o(i));
   }
   destroy() {
     this.events.clear();
   }
 }
-class Zt {
+class ii {
   constructor(t) {
-    S(this, "state");
-    S(this, "listeners");
+    C(this, "state");
+    C(this, "listeners");
     this.state = t, this.listeners = /* @__PURE__ */ new Set();
   }
   get() {
@@ -39,7 +40,7 @@ class Zt {
   }
   setState(t) {
     const i = this.state, r = typeof t == "function" ? t(i) : t;
-    this.state = { ...i, ...r }, this.listeners.forEach((a) => a(this.state, i));
+    this.state = { ...i, ...r }, this.listeners.forEach((o) => o(this.state, i));
   }
   subscribe(t) {
     return this.listeners.add(t), () => this.listeners.delete(t);
@@ -48,13 +49,13 @@ class Zt {
     this.listeners.clear();
   }
 }
-class ei {
+class si {
   constructor(t) {
-    S(this, "context", null);
-    S(this, "source", null);
-    S(this, "gainNode", null);
-    S(this, "video");
-    S(this, "isInitialized", !1);
+    C(this, "context", null);
+    C(this, "source", null);
+    C(this, "gainNode", null);
+    C(this, "video");
+    C(this, "isInitialized", !1);
     this.video = t;
   }
   /**
@@ -88,7 +89,7 @@ const Re = {
   isBold: !1,
   textColor: "#ffffff",
   verticalOffset: 40
-}, xt = "strata-settings", V = {
+}, yt = "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 = {}) => {
+}, kt = (s = {}) => {
   let t = {};
   if (!s.disablePersistence && typeof window < "u")
     try {
-      const r = localStorage.getItem(xt);
+      const r = localStorage.getItem(yt);
       r && (t = JSON.parse(r));
     } catch {
     }
@@ -139,70 +141,70 @@ 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 ni {
   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);
+    C(this, "video");
+    C(this, "container", null);
+    C(this, "events");
+    C(this, "store");
+    C(this, "plugins", /* @__PURE__ */ new Map());
+    C(this, "audioEngine");
+    C(this, "config");
+    C(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", []);
+    C(this, "retryCount", 0);
+    C(this, "maxRetries", 5);
+    C(this, "retryTimer", null);
+    C(this, "currentSource", null);
+    C(this, "currentSrc", "");
+    C(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 = () => {
-      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) {
+    C(this, "castInitialized", !1);
+    C(this, "boundCueChange");
+    C(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 ti();
+    const r = kt(t);
+    this.store = new ii(r), this.audioEngine = new si(this.video), this.boundCueChange = this.handleCueChange.bind(this), this.boundFullscreenChange = () => {
+      const o = !!document.fullscreenElement;
+      if (this.store.setState({ isFullscreen: o }), this.emit("resize"), this.emit(o ? "fullscreen" : "fullscreen_exit"), o && this.config.autoOrientation && screen.orientation && "lock" in screen.orientation) {
         const m = this.video.videoWidth > this.video.videoHeight ? "landscape" : "portrait";
         try {
           screen.orientation.lock(m).catch(() => {
           });
         } catch {
         }
-      } else !a && screen.orientation && "unlock" in screen.orientation && screen.orientation.unlock();
-    }, this.video.volume = r.volume, this.video.muted = r.isMuted, this.video.playbackRate = r.playbackRate, this.video.loop = r.isLooping, r.audioGain > 1 && this.audioEngine.setGain(r.audioGain), r.isAutoSized && (this.video.style.objectFit = "cover"), this.initVideoListeners(), this.initMediaSession(), this.initCast(), t.disablePersistence || this.store.subscribe((a) => {
+      } else !o && screen.orientation && "unlock" in screen.orientation && screen.orientation.unlock();
+    }, this.video.volume = r.volume, this.video.muted = r.isMuted, this.video.playbackRate = r.playbackRate, this.video.loop = r.isLooping, r.audioGain > 1 && this.audioEngine.setGain(r.audioGain), r.isAutoSized && (this.video.style.objectFit = "cover"), this.initVideoListeners(), this.initMediaSession(), this.initCast(), t.disablePersistence || this.store.subscribe((o) => {
       const d = {
-        volume: a.volume,
-        isMuted: a.isMuted,
-        playbackRate: a.playbackRate,
-        subtitleSettings: a.subtitleSettings,
-        iconSize: a.iconSize,
-        themeColor: a.themeColor,
-        theme: a.theme,
-        isLive: a.isLive,
-        isLooping: a.isLooping
+        volume: o.volume,
+        isMuted: o.isMuted,
+        playbackRate: o.playbackRate,
+        subtitleSettings: o.subtitleSettings,
+        iconSize: o.iconSize,
+        themeColor: o.themeColor,
+        theme: o.theme,
+        isLive: o.isLive,
+        isLooping: o.isLooping
       };
-      localStorage.setItem(xt, JSON.stringify(d));
+      localStorage.setItem(yt, JSON.stringify(d));
     });
   }
   // --- Instance Properties ---
@@ -288,8 +290,8 @@ class ti {
       "volumechange",
       "waiting"
     ].forEach((r) => {
-      this.video.addEventListener(r, (a) => {
-        switch (this.emit(`video:${r}`, a), r === "play" && this.emit("play"), r === "pause" && this.emit("pause"), r === "ended" && this.emit("ended"), r === "error" && this.emit("error", this.video.error), r === "seeked" && this.emit("seek"), r) {
+      this.video.addEventListener(r, (o) => {
+        switch (this.emit(`video:${r}`, o), r === "play" && this.emit("play"), r === "pause" && this.emit("pause"), r === "ended" && this.emit("ended"), r === "error" && this.emit("error", this.video.error), r === "seeked" && this.emit("seek"), r) {
           case "play":
             t({ isPlaying: !0 }), "mediaSession" in navigator && (navigator.mediaSession.playbackState = "playing"), this.updateMediaSessionPosition();
             break;
@@ -366,9 +368,9 @@ class ti {
     });
   }
   updateMediaSessionMetadata() {
-    var r, a;
+    var r, o;
     if (!("mediaSession" in navigator)) return;
-    const t = ((r = this.currentSource) == null ? void 0 : r.name) || ((a = this.currentSource) == null ? void 0 : a.url.split("/").pop()) || "Video", i = [];
+    const t = ((r = this.currentSource) == null ? void 0 : r.name) || ((o = this.currentSource) == null ? void 0 : o.url.split("/").pop()) || "Video", i = [];
     this.config.poster && i.push({ src: this.config.poster, sizes: "512x512", type: "image/jpeg" }), i.push({ src: "logo.png", sizes: "512x512", type: "image/png" }), navigator.mediaSession.metadata = new MediaMetadata({
       title: t,
       artist: "StrataPlayer",
@@ -386,8 +388,8 @@ class ti {
           position: Math.max(0, Math.min(i, t))
           // Ensure within [0, duration]
         });
-      } catch (a) {
-        console.warn("MediaSession Position Error:", a);
+      } catch (o) {
+        console.warn("MediaSession Position Error:", o);
       }
   }
   triggerError(t, i = !1) {
@@ -397,12 +399,12 @@ class ti {
     const i = this.video.error, r = t || (i == null ? void 0 : i.message) || (i ? `Code ${i.code}` : "Unknown Error");
     if (this.removeNotification("retry"), this.emit("video:error", i), this.retryCount < this.maxRetries) {
       this.retryCount++;
-      const a = Math.pow(2, this.retryCount - 1) * 1500;
+      const o = Math.pow(2, this.retryCount - 1) * 1500;
       this.notify({
         id: "retry",
         type: "loading",
         message: `Error: ${r}. Retrying (${this.retryCount}/${this.maxRetries})...`
-      }), console.warn(`[StrataPlayer] Error: ${r}. Retrying in ${a}ms...`), this.retryTimer && clearTimeout(this.retryTimer), this.retryTimer = setTimeout(() => {
+      }), console.warn(`[StrataPlayer] Error: ${r}. Retrying in ${o}ms...`), this.retryTimer && clearTimeout(this.retryTimer), this.retryTimer = setTimeout(() => {
         if (this.currentSource) {
           this.load(this.currentSource, this.currentTracks, !0);
           const d = this.store.get().currentTime;
@@ -413,11 +415,11 @@ class ti {
             this.video.addEventListener("canplay", m);
           }
         }
-      }, a);
+      }, o);
     } else {
       this.removeNotification("retry");
-      const a = `Failed to play after ${this.maxRetries} attempts: ${r}`;
-      this.store.setState({ error: a }), this.emit("error", a);
+      const o = `Failed to play after ${this.maxRetries} attempts: ${r}`;
+      this.store.setState({ error: o }), this.emit("error", o);
     }
   }
   updateBuffer() {
@@ -431,10 +433,10 @@ class ti {
   }
   updateSubtitles() {
     setTimeout(() => {
-      const t = Array.from(this.video.textTracks).filter((r) => r.kind === "subtitles" || r.kind === "captions").map((r, a) => ({
-        label: r.label || r.language || `Track ${a + 1}`,
+      const t = Array.from(this.video.textTracks).filter((r) => r.kind === "subtitles" || r.kind === "captions").map((r, o) => ({
+        label: r.label || r.language || `Track ${o + 1}`,
         language: r.language,
-        index: a
+        index: o
       }));
       this.store.setState({ subtitleTracks: t });
       const i = this.store.get();
@@ -443,16 +445,16 @@ class ti {
   }
   // --- Utility ---
   async fetchWithRetry(t, i = 3, r) {
-    const a = r ?? this.config.fetchTimeout ?? 3e4;
+    const o = r ?? this.config.fetchTimeout ?? 3e4;
     for (let d = 0; d < i; d++) {
-      const m = new AbortController(), v = setTimeout(() => m.abort(), a);
+      const m = new AbortController(), v = setTimeout(() => m.abort(), o);
       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)));
+        w.name === "AbortError" && console.warn(`Fetch timeout (${o}ms) for ${t}`), await new Promise((b) => setTimeout(b, 1e3 * Math.pow(2, d)));
       }
     }
     throw new Error("Fetch failed");
@@ -473,19 +475,19 @@ class ti {
   switchSource(t) {
     const i = this.store.get().sources;
     if (t >= 0 && t < i.length) {
-      const r = this.video.currentTime, a = !this.video.paused;
+      const r = this.video.currentTime, o = !this.video.paused;
       this.load(i[t], this.currentTracks);
       const d = () => {
-        this.video.currentTime = r, a && this.video.play(), this.video.removeEventListener("canplay", d);
+        this.video.currentTime = r, o && this.video.play(), this.video.removeEventListener("canplay", d);
       };
       this.video.addEventListener("canplay", d);
     }
   }
   load(t, i = [], r = !1) {
     this.retryTimer && clearTimeout(this.retryTimer);
-    const a = typeof t == "string" ? { url: t, type: "auto" } : t;
-    r || (this.retryCount = 0, this.store.setState({ error: null }), this.removeNotification("retry")), this.currentSrc = a.url, this.currentSource = a, this.currentTracks = i;
-    const m = this.store.get().sources.findIndex((b) => b.url === a.url);
+    const o = typeof t == "string" ? { url: t, type: "auto" } : t;
+    r || (this.retryCount = 0, this.store.setState({ error: null }), this.removeNotification("retry")), this.currentSrc = o.url, this.currentSource = o, this.currentTracks = i;
+    const m = this.store.get().sources.findIndex((b) => b.url === o.url);
     this.store.setState({
       isBuffering: !0,
       qualityLevels: [],
@@ -497,8 +499,8 @@ class ti {
       // subtitleTracks and currentSubtitle are purposely preserved
       currentSourceIndex: m
     }), 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 });
+    let v = o.type || "auto";
+    v === "auto" && (o.url.includes(".m3u8") ? v = "hls" : o.url.includes(".mpd") ? v = "dash" : o.url.includes(".flv") || o.url.includes(".ts") ? v = "mpegts" : o.url.startsWith("magnet:") || o.url.includes(".torrent") ? v = "webtorrent" : v = "mp4"), this.events.emit("load", { url: o.url, type: v });
     const w = this.video.getElementsByTagName("track");
     for (; w.length > 0; )
       w[0].remove();
@@ -508,7 +510,7 @@ class ti {
       }).catch((h) => {
         this.notify({ type: "warning", message: `Failed to load subtitle: ${b.label}`, duration: 4e3 });
       });
-    }), (v === "mp4" || v === "webm" || v === "ogg") && (this.video.src = a.url);
+    }), (v === "mp4" || v === "webm" || v === "ogg") && (this.video.src = o.url);
   }
   // Wrapper for external subtitle API
   loadSubtitle(t, i = "Subtitle") {
@@ -516,10 +518,10 @@ class ti {
   }
   addTextTrack(t, i) {
     const r = new FileReader();
-    r.onload = (a) => {
+    r.onload = (o) => {
       var w;
-      if (!((w = a.target) != null && w.result)) return;
-      let d = a.target.result;
+      if (!((w = o.target) != null && w.result)) return;
+      let d = o.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
 
 ` + d));
@@ -532,9 +534,9 @@ class ti {
       this.notify({ type: "error", message: "Failed to read file", duration: 3e3 });
     }, r.readAsText(t);
   }
-  addTextTrackInternal(t, i, r = "", a = !1) {
+  addTextTrackInternal(t, i, r = "", o = !1) {
     const d = document.createElement("track");
-    d.kind = "subtitles", d.label = i, d.src = t, d.srclang = r, a && (d.default = !0), this.video.appendChild(d), this.updateSubtitles();
+    d.kind = "subtitles", d.label = i, d.src = t, d.srclang = r, o && (d.default = !0), this.video.appendChild(d), this.updateSubtitles();
   }
   play() {
     return this.video.play();
@@ -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();
   }
@@ -590,8 +599,8 @@ class ti {
     if (i) {
       i.drawImage(this.video, 0, 0, t.width, t.height);
       try {
-        const r = t.toDataURL("image/png"), a = document.createElement("a");
-        a.download = `screenshot-${(/* @__PURE__ */ new Date()).toISOString()}.png`, a.href = r, a.click(), this.notify({ type: "success", message: "Screenshot saved", duration: 2e3 });
+        const r = t.toDataURL("image/png"), o = document.createElement("a");
+        o.download = `screenshot-${(/* @__PURE__ */ new Date()).toISOString()}.png`, o.href = r, o.click(), this.notify({ type: "success", message: "Screenshot saved", duration: 2e3 });
       } catch {
         this.notify({ type: "error", message: "Failed to take screenshot", duration: 3e3 });
       }
@@ -609,8 +618,8 @@ class ti {
       [t]: !i[t]
     };
     this.store.setState({ flipState: r });
-    const a = r.horizontal ? -1 : 1, d = r.vertical ? -1 : 1;
-    this.video.style.transform = `scale(${a}, ${d})`;
+    const o = r.horizontal ? -1 : 1, d = r.vertical ? -1 : 1;
+    this.video.style.transform = `scale(${o}, ${d})`;
   }
   setAspectRatio(t) {
     if (this.store.setState({ aspectRatio: t }), t === "default") {
@@ -655,8 +664,8 @@ class ti {
     try {
       const i = t.cast.framework.CastContext.getInstance().getCurrentSession();
       if (!i) return;
-      const r = new t.chrome.cast.media.MediaInfo(this.currentSrc, this.currentSrc.includes(".m3u8") ? "application/x-mpegurl" : "video/mp4"), a = new t.chrome.cast.media.LoadRequest(r);
-      i.loadMedia(a).then(() => {
+      const r = new t.chrome.cast.media.MediaInfo(this.currentSrc, this.currentSrc.includes(".m3u8") ? "application/x-mpegurl" : "video/mp4"), o = new t.chrome.cast.media.LoadRequest(r);
+      i.loadMedia(o).then(() => {
         this.notify({ type: "success", message: "Casting...", duration: 3e3 });
       }).catch((d) => console.error("Cast load error", d));
     } catch (i) {
@@ -669,10 +678,10 @@ class ti {
       this.store.setState({ activeCues: [] });
       return;
     }
-    const r = Array.from(this.video.textTracks).filter((a) => a.kind === "subtitles" || a.kind === "captions")[t.currentSubtitle];
+    const r = Array.from(this.video.textTracks).filter((o) => o.kind === "subtitles" || o.kind === "captions")[t.currentSubtitle];
     if (r && r.activeCues) {
-      const a = Array.from(r.activeCues).map((d) => d.text);
-      this.store.setState({ activeCues: a });
+      const o = Array.from(r.activeCues).map((d) => d.text);
+      this.store.setState({ activeCues: o });
     } else
       this.store.setState({ activeCues: [] });
   }
@@ -680,10 +689,10 @@ class ti {
     if (Array.from(this.video.textTracks).forEach((i) => {
       i.removeEventListener("cuechange", this.boundCueChange), i.mode = "hidden";
     }), this.store.setState({ currentSubtitle: t, subtitleOffset: 0, activeCues: [] }), t !== -1) {
-      const r = Array.from(this.video.textTracks).filter((a) => a.kind === "subtitles" || a.kind === "captions")[t];
+      const r = Array.from(this.video.textTracks).filter((o) => o.kind === "subtitles" || o.kind === "captions")[t];
       if (r) {
-        const a = this.store.get().subtitleSettings;
-        r.mode = a.useNative ? "showing" : "hidden", r.addEventListener("cuechange", this.boundCueChange), this.handleCueChange();
+        const o = this.store.get().subtitleSettings;
+        r.mode = o.useNative ? "showing" : "hidden", r.addEventListener("cuechange", this.boundCueChange), this.handleCueChange();
       }
     }
   }
@@ -696,8 +705,8 @@ class ti {
   }
   setSubtitleOffset(t) {
     const i = this.store.get().subtitleOffset, r = t - i;
-    Math.abs(r) < 1e-3 || (Array.from(this.video.textTracks).forEach((a) => {
-      (a.mode === "showing" || a.mode === "hidden") && a.cues && Array.from(a.cues).forEach((d) => {
+    Math.abs(r) < 1e-3 || (Array.from(this.video.textTracks).forEach((o) => {
+      (o.mode === "showing" || o.mode === "hidden") && o.cues && Array.from(o.cues).forEach((d) => {
         d.startTime += r, d.endTime += r;
       });
     }), this.store.setState({ subtitleOffset: t }), this.notify({ type: "info", message: `Subtitle Offset: ${t > 0 ? "+" : ""}${t.toFixed(1)}s`, duration: 1500 }));
@@ -712,17 +721,17 @@ class ti {
     }
     const i = this.notify({ type: "loading", message: "Preparing download...", progress: 0 });
     try {
-      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;
+      const o = await this.fetchWithRetry(t);
+      if (!o.body) throw new Error("No body");
+      const d = o.body.getReader(), m = o.headers.get("Content-Length"), v = m ? parseInt(m, 10) : 0;
       let w = 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 });
+          const p = Math.round(w / 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,11 +765,11 @@ 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) => {
+}, ri = async (s, t = 3, i = 2e4) => {
   for (let r = 0; r < t; r++) {
-    const a = new AbortController(), d = setTimeout(() => a.abort(), i);
+    const o = new AbortController(), d = setTimeout(() => o.abort(), i);
     try {
-      const m = await fetch(s, { signal: a.signal });
+      const m = await fetch(s, { signal: o.signal });
       if (clearTimeout(d), !m.ok) throw new Error(`HTTP ${m.status}`);
       return await m.text();
     } catch (m) {
@@ -769,9 +778,9 @@ const Te = (s) => {
     }
   }
   throw new Error("Failed");
-}, si = async (s, t, i = 2e4) => {
+}, oi = async (s, t, i = 2e4) => {
   try {
-    const a = (await ii(s, 3, i)).split(`
+    const o = (await ri(s, 3, i)).split(`
 `), d = [];
     let m = null, v = null;
     const w = s.substring(0, s.lastIndexOf("/") + 1), b = (h) => {
@@ -779,26 +788,26 @@ const Te = (s) => {
       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;
     };
-    for (let h of a)
+    for (let h of o)
       if (h = h.trim(), h.includes("-->")) {
         const y = h.split("-->");
         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;
+        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);
+}, ht = (s, t = 200) => {
+  const [i, r] = N(s), [o, d] = N(!1);
   return P(() => {
     if (s)
       r(!0), requestAnimationFrame(() => {
@@ -813,12 +822,12 @@ const Te = (s) => {
       }, t);
       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(
+  }, [s, t]), { isMounted: i, isVisible: o };
+}, x = ({ className: s, children: t, fill: i = "none", strokeWidth: r = 2, viewBox: o = "0 0 24 24" }) => /* @__PURE__ */ e(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: a,
+    viewBox: o,
     fill: i,
     stroke: "currentColor",
     strokeWidth: r,
@@ -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: [
+), mt = ({ className: s }) => /* @__PURE__ */ e(x, { className: s, children: /* @__PURE__ */ e("polygon", { points: "5 3 19 12 5 21 5 3" }) }), ft = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), ai = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), li = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), ci = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), di = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), ui = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), hi = ({ className: s }) => /* @__PURE__ */ l(x, { 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(x, { className: s, children: /* @__PURE__ */ e("path", { d: "M20 6 9 17l-5-5" }) }), mi = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), fi = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), pi = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), bi = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), vi = ({ className: s }) => /* @__PURE__ */ l(x, { 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(x, { className: s, children: /* @__PURE__ */ e("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }), gi = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), xi = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), wi = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), yi = ({ className: s }) => /* @__PURE__ */ e(x, { className: s, children: /* @__PURE__ */ e("path", { d: "M5 12h14" }) }), ki = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
   /* @__PURE__ */ e("path", { d: "M5 12h14" }),
   /* @__PURE__ */ e("path", { d: "M12 5v14" })
-] }), wi = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
+] }), Si = ({ className: s }) => /* @__PURE__ */ l(x, { className: s, children: [
   /* @__PURE__ */ e("path", { d: "M4 21v-7" }),
   /* @__PURE__ */ e("path", { d: "M4 10V3" }),
   /* @__PURE__ */ e("path", { d: "M12 21v-9" }),
@@ -900,69 +909,69 @@ 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: [
+] }), Ci = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), St = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), Ni = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), Ti = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), Mi = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), zi = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), Ii = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), Ri = ({ 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" }) }), Li = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), $i = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), Ei = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), Pi = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), Fi = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), Ai = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), Bi = ({ className: s }) => /* @__PURE__ */ l(x, { 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: [
+] }), pt = ({ className: s }) => /* @__PURE__ */ l("div", { className: `relative flex items-center justify-center ${s}`, children: [
   /* @__PURE__ */ l(x, { 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: [
+] }), bt = ({ className: s }) => /* @__PURE__ */ l("div", { className: `relative flex items-center justify-center ${s}`, children: [
   /* @__PURE__ */ l(x, { 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(
+] }), Vi = ({ 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(
   "div",
   {
     className: `
@@ -980,7 +989,7 @@ const Te = (s) => {
     ]
   },
   t.id
-)) }), Bi = ({ cues: s, settings: t }) => {
+)) }), Oi = ({ cues: s, settings: t }) => {
   if (t.useNative || s.length === 0) return null;
   const i = () => {
     switch (t.textStyle) {
@@ -1003,7 +1012,7 @@ const Te = (s) => {
       style: {
         bottom: `${t.verticalOffset}px`
       },
-      children: s.map((r, a) => /* @__PURE__ */ e(
+      children: s.map((r, o) => /* @__PURE__ */ e(
         "div",
         {
           className: "mb-1 inline-block max-w-[80%]",
@@ -1027,22 +1036,22 @@ const Te = (s) => {
             }
           )
         },
-        a
+        o
       ))
     }
   );
-}, kt = ({ children: s, onClose: t, align: i = "right", maxHeight: r, className: a }) => {
+}, Ct = ({ children: s, onClose: t, align: i = "right", maxHeight: r, className: o }) => {
   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}`,
+      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 ${o}`,
       style: { ...v, borderRadius: "var(--radius-lg)" },
       onClick: (w) => w.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(
+}, vt = ({ 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: o, icon: d }) => /* @__PURE__ */ l(
   "button",
   {
     onClick: r,
@@ -1050,13 +1059,13 @@ 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(vt, { 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(vt, { 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 }),
         i && /* @__PURE__ */ e(Le, { className: "w-4 h-4 text-[var(--accent)] shrink-0" }),
-        a && /* @__PURE__ */ e("span", { className: "text-xs group-hover:translate-x-0.5 transition-transform text-zinc-500 shrink-0", children: "›" })
+        o && /* @__PURE__ */ e("span", { className: "text-xs group-hover:translate-x-0.5 transition-transform text-zinc-500 shrink-0", children: "›" })
       ] })
     ]
   }
@@ -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(vi, { 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(
+), gt = () => /* @__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: o }) => /* @__PURE__ */ l(
   "div",
   {
     className: "flex items-center justify-between py-2.5 px-3 hover:bg-white/5 group transition-colors",
@@ -1090,7 +1099,7 @@ const Te = (s) => {
         r && /* @__PURE__ */ e("span", { className: "text-zinc-500 group-hover:text-zinc-400 transition-colors flex items-center justify-center w-4 h-4", children: /* @__PURE__ */ e(de, { content: r }) }),
         /* @__PURE__ */ l("div", { className: "flex flex-col", children: [
           /* @__PURE__ */ e("span", { className: "text-sm text-zinc-300 font-medium group-hover:text-white transition-colors flex items-center", children: /* @__PURE__ */ e(de, { content: s }) }),
-          a && /* @__PURE__ */ e("span", { className: "text-[10px] text-zinc-500", children: a })
+          o && /* @__PURE__ */ e("span", { className: "text-[10px] text-zinc-500", children: o })
         ] })
       ] }),
       /* @__PURE__ */ e(
@@ -1115,7 +1124,7 @@ const Te = (s) => {
       )
     ]
   }
-), ce = ({ label: s, value: t, min: i, max: r, step: a, onChange: d, formatValue: m, icon: v }) => /* @__PURE__ */ l(
+), ce = ({ label: s, value: t, min: i, max: r, step: o, onChange: d, formatValue: m, icon: v }) => /* @__PURE__ */ l(
   "div",
   {
     className: "py-2.5 px-3 hover:bg-white/5 group transition-colors",
@@ -1142,7 +1151,7 @@ const Te = (s) => {
             type: "range",
             min: i,
             max: r,
-            step: a,
+            step: o,
             value: t,
             onChange: (w) => d(parseFloat(w.target.value)),
             className: "w-full h-1.5 appearance-none cursor-pointer focus:outline-none focus:ring-2 strata-range-input",
@@ -1173,14 +1182,14 @@ const Te = (s) => {
       ] })
     ]
   }
-), Vi = ({ label: s, value: t, options: i, onChange: r, icon: a }) => /* @__PURE__ */ l(
+), ji = ({ label: s, value: t, options: i, onChange: r, icon: o }) => /* @__PURE__ */ l(
   "div",
   {
     className: "py-2.5 px-3 hover:bg-white/5 group transition-colors",
     style: { borderRadius: "var(--radius)" },
     children: [
       /* @__PURE__ */ l("div", { className: "flex items-center gap-3 mb-2", children: [
-        a && /* @__PURE__ */ e("span", { className: "text-zinc-500 group-hover:text-zinc-400 transition-colors flex items-center justify-center w-4 h-4", children: /* @__PURE__ */ e(de, { content: a }) }),
+        o && /* @__PURE__ */ e("span", { className: "text-zinc-500 group-hover:text-zinc-400 transition-colors flex items-center justify-center w-4 h-4", children: /* @__PURE__ */ e(de, { content: o }) }),
         /* @__PURE__ */ e("span", { className: "text-xs font-bold text-zinc-400 uppercase tracking-wider group-hover:text-zinc-300 transition-colors", children: s })
       ] }),
       /* @__PURE__ */ l("div", { className: "relative", children: [
@@ -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: [
+] }), Hi = ({ tracks: s, current: t, onSelect: i, onUpload: r, onClose: o, settings: d, onSettingsChange: m, onReset: v, offset: w, onOffsetChange: b, maxHeight: h, animationClass: y }) => {
+  const [k, z] = N("main"), R = I(null);
+  return /* @__PURE__ */ l(Ct, { onClose: o, 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(bi, { 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(Si, { className: "w-4 h-4" }),
             onClick: () => z("customize"),
             hasSubmenu: !0
           }
@@ -1245,21 +1254,21 @@ const Te = (s) => {
             label: "Off",
             active: t === -1,
             onClick: () => {
-              i(-1), a();
+              i(-1), o();
             }
           }
         ),
-        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), o();
             }
           },
-          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(Mi, { className: "w-4 h-4" }) })
         }
       ),
       /* @__PURE__ */ l("div", { className: "pb-1", children: [
@@ -1278,14 +1287,14 @@ 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(wi, { 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: [
@@ -1294,7 +1303,7 @@ const Te = (s) => {
                   {
                     onClick: () => b(Math.round((w - 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(yi, { 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: [
@@ -1307,7 +1316,7 @@ const Te = (s) => {
                   {
                     onClick: () => b(Math.round((w + 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(ki, { 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(Ti, { 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(Ci, { 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(St, { 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,
+              ji,
               {
                 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(zi, { className: "w-4 h-4" }), checked: d.isBold, onChange: (p) => m({ isBold: p }) }),
+              /* @__PURE__ */ e(K, { label: "Fix Caps", icon: /* @__PURE__ */ e(Ii, { 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(Ni, { 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(Ri, { 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,17 +1428,17 @@ 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 }), Wi = ({ x: s, y: t, items: i, onClose: r, containerWidth: o, containerHeight: d }) => {
+  const m = I(null), [v, w] = N({
     top: t,
     left: s,
     opacity: 0
   });
-  return Xt(() => {
+  return Kt(() => {
     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);
+    s + h > o - 10 && (k = s - h), k < 10 && (k = 10), k + h > o && (k = Math.max(10, o - 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({
       top: z,
@@ -1437,7 +1446,7 @@ const Te = (s) => {
       maxHeight: R,
       opacity: 1
     });
-  }, [s, t, i, a, d]), P(() => {
+  }, [s, t, i, o, d]), P(() => {
     const b = (h) => {
       m.current && !m.current.contains(h.target) && r();
     };
@@ -1478,10 +1487,10 @@ const Te = (s) => {
       ] }, h))
     }
   );
-}, ji = ({ player: s, onClose: t }) => {
-  const [i, r] = C({});
+}, Di = ({ player: s, onClose: t }) => {
+  const [i, r] = N({});
   return P(() => {
-    const a = () => {
+    const o = () => {
       var w;
       if (!s.video) return;
       const m = s.video, v = m.getVideoPlaybackQuality ? m.getVideoPlaybackQuality() : null;
@@ -1497,8 +1506,8 @@ const Te = (s) => {
         URL: m.currentSrc
       });
     };
-    a();
-    const d = setInterval(a, 1e3);
+    o();
+    const d = setInterval(o, 1e3);
     return () => clearInterval(d);
   }, [s]), /* @__PURE__ */ e("div", { className: "absolute inset-0 z-[60] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-200", children: /* @__PURE__ */ l(
     "div",
@@ -1510,59 +1519,59 @@ const Te = (s) => {
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: (a) => {
-                a.stopPropagation(), t();
+              onClick: (o) => {
+                o.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(Ai, { 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" })
         ] }),
-        /* @__PURE__ */ e("div", { className: "overflow-y-auto hide-scrollbar p-5 pt-0 space-y-2.5 flex-1 min-h-0", children: Object.entries(i).map(([a, d]) => /* @__PURE__ */ l("div", { className: "flex flex-col sm:flex-row sm:justify-between sm:items-center gap-1", children: [
-          /* @__PURE__ */ e("span", { className: "text-zinc-500 font-bold shrink-0", children: a }),
+        /* @__PURE__ */ e("div", { className: "overflow-y-auto hide-scrollbar p-5 pt-0 space-y-2.5 flex-1 min-h-0", children: Object.entries(i).map(([o, d]) => /* @__PURE__ */ l("div", { className: "flex flex-col sm:flex-row sm:justify-between sm:items-center gap-1", children: [
+          /* @__PURE__ */ e("span", { className: "text-zinc-500 font-bold shrink-0", children: o }),
           /* @__PURE__ */ e("span", { className: "text-zinc-200 truncate select-all font-medium bg-white/5 px-1.5 py-0.5 rounded break-all text-right", title: String(d), children: String(d) })
-        ] }, a)) })
+        ] }, o)) })
       ]
     }
   ) });
-}, Hi = [
+}, Ui = [
   { 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 = [
+], Gi = [
   { 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;
+], xt = ({ 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 }), wt = (s) => {
+  var ct, dt;
+  const { src: t, type: i, sources: r, poster: o, 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, p = h.fullscreenWeb ?? !1, W = h.lock ?? !1, D = h.fastForward ?? !0, Nt = h.flip ?? !0, Tt = h.aspectRatio ?? !0, $e = h.hotKey ?? !0, Mt = h.backdrop ?? !0, ue = h.gestureSeek ?? !1, zt = 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] = N(null), [he, me] = N(!1), [Fe, It] = N(0), [Rt, Lt] = N(0), Ae = Ce(() => kt(h), []), a = Yt(
     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);
+    () => n ? n.store.get() : Ae,
+    () => Ae
+  ), [$, V] = N(!1), [E, U] = N(!1), [F, M] = N("main"), [Z, fe] = N({ x: 0, y: 0, visible: !1 }), [$t, Be] = N(!1), Ve = ht($, 200), Oe = ht(E, 200), [pe, ne] = N(!1), [re, be] = N(0), [Et, je] = N(!1), [Pt, He] = N(!1), [ve, oe] = N(!1), [We, De] = N([]), [Ue, Ge] = N(null), [Ft, At] = N(0), [G, _e] = N(null), [Q, ae] = N(null), [_i, qe] = N(null), [ge, Qe] = N(!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);
   P(() => {
     if (!q.current) return;
-    const c = new ti({ ...h, poster: a });
+    const c = new ni({ ...h, poster: o });
     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);
+    const f = new ResizeObserver((g) => {
+      for (const S of g)
+        It(S.contentRect.height), Lt(S.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;
     const c = {};
-    h.theme !== void 0 && h.theme !== o.theme && (c.theme = h.theme), h.themeColor !== void 0 && h.themeColor !== o.themeColor && (c.themeColor = h.themeColor), h.iconSize !== void 0 && h.iconSize !== o.iconSize && (c.iconSize = h.iconSize), Object.keys(c).length > 0 && n.setAppearance(c), h.volume !== void 0 && Math.abs(h.volume - o.volume) > 0.01 && n.setVolume(h.volume), h.muted !== void 0 && h.muted !== o.isMuted && (h.muted ? n.video.muted = !0 : n.video.muted = !1);
+    h.theme !== void 0 && h.theme !== a.theme && (c.theme = h.theme), h.themeColor !== void 0 && h.themeColor !== a.themeColor && (c.themeColor = h.themeColor), h.iconSize !== void 0 && h.iconSize !== a.iconSize && (c.iconSize = h.iconSize), Object.keys(c).length > 0 && n.setAppearance(c), h.volume !== void 0 && Math.abs(h.volume - a.volume) > 0.01 && n.setVolume(h.volume), h.muted !== void 0 && h.muted !== a.isMuted && (h.muted ? n.video.muted = !0 : n.video.muted = !1);
   }, [n, h.theme, h.themeColor, h.iconSize, h.volume, h.muted]), P(() => {
     if (!n) return;
     const c = v || [];
@@ -1571,134 +1580,137 @@ const Te = (s) => {
     n && d && (n.video.muted = !0, n.store.setState({ isMuted: !0 }), n.play().catch(() => {
     }));
   }, [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([]);
+    a.isPlaying && !he && me(!0);
+  }, [a.isPlaying, he]), P(() => {
+    m && n ? oi(m, n.notify.bind(n), Ee).then((c) => De(c)) : De([]);
   }, [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 S;
+      if (!n || !$e || ((S = document.activeElement) == null ? void 0 : S.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 = () => {
     n && (n.setControlsVisible(!0), _.current && clearTimeout(_.current), !($ || E) && (_.current = setTimeout(() => {
-      !o.isPlaying || $ || E || n.setControlsVisible(!1);
+      !a.isPlaying || $ || E || n.setControlsVisible(!1);
     }, 2500)));
   };
   P(() => {
-    n && (!$ && !E && o.isPlaying ? Ke() : ($ || E) && (n.setControlsVisible(!0), _.current && clearTimeout(_.current)));
-  }, [$, E, o.isPlaying, n]);
+    n && (!$ && !E && a.isPlaying ? Ke() : ($ || E) && (n.setControlsVisible(!0), _.current && clearTimeout(_.current)));
+  }, [$, E, a.isPlaying, n]);
   const Ye = Ne(() => {
-    !D || !n || !o.isPlaying || o.isLocked || (Xe.current = n.video.playbackRate, xe.current = setTimeout(() => {
+    !D || !n || !a.isPlaying || a.isLocked || (Xe.current = n.video.playbackRate, xe.current = setTimeout(() => {
       n.video.playbackRate = 2, Qe(!0);
     }, 500));
-  }, [D, n, o.isPlaying, o.isLocked]), ke = Ne(() => {
+  }, [D, n, a.isPlaying, a.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) => {
-    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));
+  }, [ge, n]), Bt = (c) => {
+    Ye(), ue && !a.isLocked && (te.current = c.touches[0].clientX, Je.current = a.currentTime, ee.current = !1);
+  }, Vt = (c) => {
+    if (!a.isLocked && ue && te.current !== null) {
+      const f = c.touches[0].clientX - te.current;
+      if (Math.abs(f) > 10 && (ke(), ee.current = !0, ne(!0), q.current && a.duration)) {
+        const g = q.current.getBoundingClientRect(), S = f / g.width, j = Math.max(0, Math.min(a.duration, Je.current + S * a.duration));
         be(j);
       }
     }
-  }, Vt = (c) => {
+  }, Ot = (c) => {
     if (ke(), ue && ee.current) {
       n == null || n.seek(re), ne(!1), ee.current = !1, te.current = null;
       return;
     }
     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;
+    if (!we.current || !a.duration) return 0;
+    const f = we.current.getBoundingClientRect(), g = "touches" in c ? c.touches[0].clientX : c.clientX;
+    return Math.max(0, Math.min(1, (g - f.left) / f.width)) * a.duration;
   }, Ze = (c) => {
-    if (o.isLocked) return;
+    if (a.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 = (S) => be(Se(S)), g = (S) => {
+      n == null || n.seek(Se(S)), ne(!1), document.removeEventListener("mousemove", f), document.removeEventListener("touchmove", f), document.removeEventListener("mouseup", g), document.removeEventListener("touchend", g);
     };
-    document.addEventListener("mousemove", p), document.addEventListener("touchmove", p), document.addEventListener("mouseup", g), document.addEventListener("touchend", g);
+    document.addEventListener("mousemove", f), document.addEventListener("touchmove", f), 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));
+    const f = ye.current.getBoundingClientRect(), g = "touches" in c ? c.touches[0].clientX : c.clientX;
+    return Math.max(0, Math.min(1, (g - f.left) / f.width));
   }, tt = (c) => {
-    if (!n || o.isLocked) return;
+    if (!n || a.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);
+    const f = (S) => n.setVolume(et(S)), g = () => {
+      je(!1), document.removeEventListener("mousemove", f), document.removeEventListener("touchmove", f), document.removeEventListener("mouseup", g), document.removeEventListener("touchend", g);
     };
-    document.addEventListener("mousemove", p), document.addEventListener("touchmove", p), document.addEventListener("mouseup", g), document.addEventListener("touchend", g);
-  }, Ft = (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);
+    document.addEventListener("mousemove", f), document.addEventListener("touchmove", f), document.addEventListener("mouseup", g), document.addEventListener("touchend", g);
+  }, jt = (c) => {
+    if (!a.duration || a.isLive) return;
+    const f = c.currentTarget.getBoundingClientRect(), g = (c.clientX - f.left) / f.width, S = g * a.duration;
+    At(g * 100), Ge(S), We.length > 0 && _e(We.find((j) => S >= j.start && S < j.end) || null);
   }, le = (c) => {
-    !n || o.isLocked || (n.skip(c === "forward" ? 10 : -10), qe(c), setTimeout(() => qe(null), 300));
-  }, Ot = (c) => {
+    !n || a.isLocked || (n.skip(c === "forward" ? 10 : -10), qe(c), setTimeout(() => qe(null), 300));
+  }, Ht = (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(() => {
-      !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(() => {
+    if ($ && V(!1), E && U(!1), ve && oe(!1), Z.visible && fe({ ...Z, visible: !1 }), n.setControlsVisible(!0), _.current && clearTimeout(_.current), _.current = setTimeout(() => {
+      !a.isPlaying || $ || E || n.setControlsVisible(!1);
+    }, 2500), a.isLocked) return;
+    const f = c.currentTarget.getBoundingClientRect(), g = c.clientX - f.left, S = f.width, j = Date.now();
+    ie.current ? (clearTimeout(ie.current), ie.current = null, g < S * 0.35 ? (le("rewind"), ae({ type: "rewind", id: j })) : g > S * 0.65 ? (le("forward"), ae({ type: "forward", id: j })) : n.toggleFullscreen()) : ie.current = setTimeout(() => {
       n.togglePlay(), ie.current = null;
     }, 250);
-  }, jt = (c) => {
+  }, Wt = (c) => {
     var g;
-    if (c.preventDefault(), o.isLocked) return;
-    const p = (g = q.current) == null ? void 0 : g.getBoundingClientRect();
-    p && pe({
+    if (c.preventDefault(), a.isLocked) return;
+    const f = (g = q.current) == null ? void 0 : g.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) => {
+  }, Dt = (c) => {
     c.stopPropagation();
-    const p = "ontouchstart" in window || navigator.maxTouchPoints > 0, g = window.matchMedia("(hover: none)").matches || p;
+    const f = "ontouchstart" in window || navigator.maxTouchPoints > 0, g = window.matchMedia("(hover: none)").matches || f;
     if (ve) {
-      ae(!1);
+      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 = () => {
-    switch (o.iconSize) {
+    g ? oe(!0) : n == null || n.toggleMute();
+  }, Ut = a.isMuted || a.volume === 0 ? ci : a.volume < 0.5 ? li : ai, it = Math.max(100, Fe - 120), Gt = () => {
+    switch (a.iconSize) {
       case "small":
         return "w-4 h-4";
       case "large":
@@ -1706,8 +1718,8 @@ const Te = (s) => {
       default:
         return "w-5 h-5";
     }
-  }, Ut = () => {
-    switch (o.iconSize) {
+  }, _t = () => {
+    switch (a.iconSize) {
       case "small":
         return "p-2 min-w-[32px] min-h-[32px]";
       case "large":
@@ -1715,8 +1727,8 @@ const Te = (s) => {
       default:
         return "p-2.5 min-w-[36px] min-h-[36px]";
     }
-  }, B = Dt(), O = Ut(), X = (() => {
-    switch (o.iconSize) {
+  }, A = Gt(), O = _t(), X = (() => {
+    switch (a.iconSize) {
       case "small":
         return {
           playBtn: "w-14 h-14",
@@ -1739,7 +1751,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(() => {
+  })(), qt = !a.isLocked && (a.controlsVisible || !a.isPlaying || $ || E), st = Pt || Et || ve, nt = Mt ? "backdrop-blur-xl bg-black/80" : "bg-black/95", rt = Ce(() => {
     const c = [
       { id: "play", position: "left", index: 10, isBuiltIn: !0 },
       { id: "volume", position: "left", index: 20, isBuiltIn: !0 },
@@ -1752,12 +1764,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 g = c.find((S) => S.id === f.id);
+      g ? Object.assign(g, 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, g) => f.index - g.index);
+  }, [h.controls, y, k, z, R, p]), ot = (c) => {
+    var f, g, S, j, ut;
     if (!c.isBuiltIn)
       return /* @__PURE__ */ e(
         "button",
@@ -1768,13 +1780,13 @@ 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(xt, { 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: a.isPlaying ? /* @__PURE__ */ e(ft, { className: `${A} fill-current` }) : /* @__PURE__ */ e(mt, { className: `${A} fill-current` }) }, "play");
       case "volume":
         return /* @__PURE__ */ l(
           "div",
@@ -1787,12 +1799,12 @@ const Te = (s) => {
               window.matchMedia("(hover: hover)").matches && He(!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("button", { onClick: Dt, 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(Ut, { className: A }) }),
               /* @__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("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)" } })
+                /* @__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: `${(a.isMuted ? 0 : a.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(${(a.isMuted ? 0 : a.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)}%` })
+              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 + ${(a.isMuted ? 0 : a.volume) * 80}px)` }, children: a.isMuted ? "0%" : `${Math.round(a.volume * 100)}%` })
             ]
           },
           "volume"
@@ -1802,29 +1814,29 @@ const Te = (s) => {
           /* @__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" })
         ] }, "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 : a.currentTime),
           " ",
           /* @__PURE__ */ e("span", { className: "text-zinc-600", children: "/" }),
           " ",
-          Te(o.duration)
+          Te(a.duration)
         ] }, "time");
       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 }) }),
+            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(fi, { className: A }) }),
           Oe.isMounted && /* @__PURE__ */ e(
-            Fi,
+            Hi,
             {
-              tracks: o.subtitleTracks,
-              current: o.currentSubtitle,
+              tracks: a.subtitleTracks,
+              current: a.currentSubtitle,
               onSelect: (u) => n == null ? void 0 : n.setSubtitle(u),
               onUpload: (u) => n == null ? void 0 : n.addTextTrack(u, u.name),
               onClose: () => U(!1),
-              settings: o.subtitleSettings,
+              settings: a.subtitleSettings,
               onSettingsChange: (u) => n == null ? void 0 : n.updateSubtitleSettings(u),
               onReset: () => n == null ? void 0 : n.resetSubtitleSettings(),
-              offset: o.subtitleOffset,
+              offset: a.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"}`
@@ -1832,34 +1844,34 @@ const Te = (s) => {
           )
         ] }, "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(Li, { 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(mi, { 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(pi, { 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 hover:scale-110 focus:outline-none ${O}`, style: { borderRadius: "var(--radius)" }, children: a.isFullscreen ? /* @__PURE__ */ e(ui, { className: A }) : /* @__PURE__ */ e(di, { 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} ${a.isWebFullscreen ? "text-[var(--accent)]" : ""}`, style: { borderRadius: "var(--radius)" }, title: "Web Fullscreen", children: /* @__PURE__ */ e(Pi, { 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(hi, { className: A }) }),
+          Ve.isMounted && /* @__PURE__ */ e(Ct, { onClose: () => V(!1), align: "right", maxHeight: it, className: `strata-backdrop ${nt} ${Ve.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 }),
-              /* @__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: "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);
+              a.sources.length > 1 && /* @__PURE__ */ e(T, { label: "Source", value: ((f = a.sources[a.currentSourceIndex]) == null ? void 0 : f.name) || `Source ${a.currentSourceIndex + 1}`, onClick: () => M("sources"), hasSubmenu: !0 }),
+              /* @__PURE__ */ e(T, { label: "Speed", value: `${a.playbackRate}x`, onClick: () => M("speed"), hasSubmenu: !0 }),
+              /* @__PURE__ */ e(T, { label: "Quality", value: a.currentQuality === -1 ? "Auto" : `${(g = a.qualityLevels[a.currentQuality]) == null ? void 0 : g.height}p`, onClick: () => M("quality"), hasSubmenu: !0 }),
+              /* @__PURE__ */ e(T, { label: "Audio", value: ((S = a.audioTracks[a.currentAudioTrack]) == null ? void 0 : S.label) || "Default", onClick: () => M("audio"), hasSubmenu: !0 }),
+              Nt && /* @__PURE__ */ e(T, { label: "Flip", value: a.flipState.horizontal ? "H" : a.flipState.vertical ? "V" : "Normal", onClick: () => M("flip"), hasSubmenu: !0 }),
+              Tt && /* @__PURE__ */ e(T, { label: "Aspect Ratio", value: a.aspectRatio, onClick: () => M("ratio"), hasSubmenu: !0 }),
+              /* @__PURE__ */ e(gt, {}),
+              /* @__PURE__ */ e(T, { label: "Audio Boost", value: a.audioGain > 1 ? `${a.audioGain}x` : "Off", onClick: () => M("boost"), hasSubmenu: !0 }),
+              /* @__PURE__ */ e(T, { label: "Watch Party", icon: /* @__PURE__ */ e(xi, { className: "w-4 h-4" }), onClick: () => M("party"), hasSubmenu: !0 }),
+              /* @__PURE__ */ e(T, { label: "Cast to Device", icon: /* @__PURE__ */ e(gi, { 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 +1880,7 @@ const Te = (s) => {
                   icon: u.icon,
                   checked: u.switch,
                   tooltip: u.tooltip,
-                  onChange: (Gi) => {
+                  onChange: (Qi) => {
                     u.onSwitch && u.onSwitch(u);
                   }
                 }
@@ -1878,66 +1890,66 @@ 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(gt, {}),
+              /* @__PURE__ */ e(T, { label: "Appearance", icon: /* @__PURE__ */ e(St, { 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.sources.map((u, J) => /* @__PURE__ */ e(T, { label: u.name || `Source ${J + 1}`, value: u.type, active: a.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))
+                [0.5, 1, 1.5, 2].map((u) => /* @__PURE__ */ e(T, { label: `${u}x`, active: a.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))
+                /* @__PURE__ */ e(T, { label: "Auto", active: a.currentQuality === -1, onClick: () => n == null ? void 0 : n.setQuality(-1) }),
+                a.qualityLevels.map((u) => /* @__PURE__ */ e(T, { label: `${u.height}p`, value: `${Math.round(u.bitrate / 1e3)}k`, active: a.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.audioTracks.length === 0 && /* @__PURE__ */ e("div", { className: "px-4 py-3 text-zinc-500 text-xs text-center", children: "No tracks available" }),
+                a.audioTracks.map((u) => /* @__PURE__ */ e(T, { label: u.label, value: u.language, active: a.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))
+                [1, 1.5, 2, 3].map((u) => /* @__PURE__ */ e(T, { label: u === 1 ? "Off" : `${u}x`, active: a.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") })
+                  /* @__PURE__ */ e(K, { label: "Horizontal Flip", checked: a.flipState.horizontal, onChange: () => n == null ? void 0 : n.setFlip("horizontal") }),
+                  /* @__PURE__ */ e(K, { label: "Vertical Flip", checked: a.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))
+                ["default", "16:9", "4:3"].map((u) => /* @__PURE__ */ e(T, { label: u === "default" ? "Default" : u, active: a.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(((ut = a.sources[a.currentSourceIndex]) == null ? void 0 : ut.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: "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__ */ e(Y, { title: "Theme", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-2 gap-2 px-3", children: Gi.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 ${a.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 ${a.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: Ui.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 ${a.themeColor === u.value ? "ring-2 ring-white scale-110" : "ring-1 ring-white/10"}`, style: { backgroundColor: u.value, borderRadius: "var(--radius-full)" }, children: a.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("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: a.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" }),
-                      /* @__PURE__ */ e("span", { className: "text-[10px] font-mono text-zinc-500 ml-auto uppercase", children: o.themeColor })
+                      /* @__PURE__ */ e("span", { className: "text-[10px] font-mono text-zinc-500 ml-auto uppercase", children: a.themeColor })
                     ] }) })
                   ] })
                 ] })
@@ -1948,13 +1960,13 @@ const Te = (s) => {
       default:
         return null;
     }
-  }, _t = Ce(() => {
+  }, Qt = Ce(() => {
     const c = [
       // Loop (Playback Group)
       { html: "Playback", isLabel: !0 },
       {
         html: "Loop",
-        checked: o.isLooping,
+        checked: a.isLooping,
         onClick: () => n == null ? void 0 : n.toggleLoop()
       },
       { separator: !0 },
@@ -1965,15 +1977,15 @@ const Te = (s) => {
       { separator: !0 },
       // Aspect Ratio Group
       { html: "Aspect Ratio", isLabel: !0 },
-      { html: "Default", checked: o.aspectRatio === "default", onClick: () => n == null ? void 0 : n.setAspectRatio("default") },
-      { html: "16:9", checked: o.aspectRatio === "16:9", onClick: () => n == null ? void 0 : n.setAspectRatio("16:9") },
-      { html: "4:3", checked: o.aspectRatio === "4:3", onClick: () => n == null ? void 0 : n.setAspectRatio("4:3") },
+      { html: "Default", checked: a.aspectRatio === "default", onClick: () => n == null ? void 0 : n.setAspectRatio("default") },
+      { html: "16:9", checked: a.aspectRatio === "16:9", onClick: () => n == null ? void 0 : n.setAspectRatio("16:9") },
+      { html: "4:3", checked: a.aspectRatio === "4:3", onClick: () => n == null ? void 0 : n.setAspectRatio("4:3") },
       { separator: !0 },
       // Stats
       {
         html: "Video Info",
-        icon: /* @__PURE__ */ e(Pi, { className: "w-3.5 h-3.5" }),
-        onClick: () => Ve(!0)
+        icon: /* @__PURE__ */ e(Bi, { className: "w-3.5 h-3.5" }),
+        onClick: () => Be(!0)
       },
       { separator: !0 }
     ];
@@ -1982,35 +1994,34 @@ 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, a.aspectRatio, a.isLooping, n]), at = a.isWebFullscreen, lt = /* @__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 || ""}`,
-      style: { touchAction: "manipulation", "--accent": o.themeColor },
+      className: `group bg-black overflow-hidden select-none font-[family-name:var(--font-main)] outline-none text-zinc-100 strata-player-reset ${at ? "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": a.themeColor },
       onMouseMove: Ke,
       onMouseLeave: () => {
-        o.isPlaying && !$ && !E && n && n.setControlsVisible(!1);
+        a.isPlaying && !$ && !E && n && n.setControlsVisible(!1);
       },
       onMouseDown: Ye,
       onMouseUp: ke,
-      onTouchStart: At,
-      onTouchMove: Bt,
-      onTouchEnd: Vt,
-      onContextMenu: jt,
+      onTouchStart: Bt,
+      onTouchMove: Vt,
+      onTouchEnd: Ot,
+      onContextMenu: Wt,
       tabIndex: 0,
       role: "region",
       "aria-label": "Video Player",
-      "data-theme": o.theme,
+      "data-theme": a.theme,
       children: [
         /* @__PURE__ */ e("style", { children: `
                 [data-theme="default"] {
@@ -2106,96 +2117,96 @@ const Te = (s) => {
                 [data-theme="pixel"] .strata-backdrop { backdrop-filter: none; background: #000; }
                 [data-theme="hacker"] .strata-backdrop { backdrop-filter: none; background: #000; }
             ` }),
-        o.theme === "hacker" && /* @__PURE__ */ e("div", { className: "strata-scanlines" }),
+        a.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(
+          (ct = h.layers) == null ? void 0 : ct.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(xt, { 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" }),
-          a && !he && /* @__PURE__ */ e(
+          /* @__PURE__ */ e(Vi, { notifications: a.notifications }),
+          /* @__PURE__ */ e(Oi, { cues: a.activeCues, settings: a.subtitleSettings }),
+          /* @__PURE__ */ e("div", { className: "absolute inset-0 z-0", onClick: Ht, "aria-hidden": "true" }),
+          o && !he && /* @__PURE__ */ e(
             "div",
             {
               className: "absolute inset-0 bg-cover bg-center z-[5] pointer-events-none",
-              style: { backgroundImage: `url(${a})` }
+              style: { backgroundImage: `url(${o})` }
             }
           ),
           Z.visible && /* @__PURE__ */ e(
-            Oi,
+            Wi,
             {
               x: Z.x,
               y: Z.y,
-              items: _t,
-              onClose: () => pe({ ...Z, visible: !1 }),
-              containerWidth: zt,
-              containerHeight: Ae
+              items: Qt,
+              onClose: () => fe({ ...Z, visible: !1 }),
+              containerWidth: Rt,
+              containerHeight: Fe
             }
           ),
-          Rt && n && /* @__PURE__ */ e(ji, { player: n, onClose: () => Ve(!1) }),
+          $t && n && /* @__PURE__ */ e(Di, { player: n, onClose: () => Be(!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(Fi, { 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 && a.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" })
+              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 ${a.isLocked ? "text-[var(--accent)] bg-white/10" : "hover:bg-white/10"}`,
+              children: a.isLocked ? /* @__PURE__ */ e($i, { className: "w-5 h-5" }) : /* @__PURE__ */ e(Ei, { 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(pt, { className: "w-12 h-12 animate-pulse" }) : /* @__PURE__ */ e(bt, { 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" })
               ] })
             },
             Q.id
           ),
-          o.isBuffering && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center z-20 pointer-events-none", children: /* @__PURE__ */ e(Ie, { className: "w-12 h-12 text-[var(--accent)] animate-spin drop-shadow-lg" }) }),
-          o.error && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center z-30 bg-black/90 backdrop-blur-md animate-in fade-in", children: /* @__PURE__ */ l("div", { className: "flex flex-col items-center gap-4 text-red-500 p-8 max-w-md text-center", children: [
+          a.isBuffering && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center z-20 pointer-events-none", children: /* @__PURE__ */ e(Ie, { className: "w-12 h-12 text-[var(--accent)] animate-spin drop-shadow-lg" }) }),
+          a.error && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center z-30 bg-black/90 backdrop-blur-md animate-in fade-in", children: /* @__PURE__ */ l("div", { className: "flex flex-col items-center gap-4 text-red-500 p-8 max-w-md text-center", children: [
             /* @__PURE__ */ e("span", { className: "text-5xl mb-2", children: "⚠️" }),
             /* @__PURE__ */ e("h3", { className: "text-xl font-bold text-white", children: "Playback Error" }),
-            /* @__PURE__ */ e("p", { className: "text-zinc-400 text-sm", children: o.error }),
+            /* @__PURE__ */ e("p", { className: "text-zinc-400 text-sm", children: a.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(
+          zt && !a.isLocked && (!a.isPlaying && !a.isBuffering && !a.error || a.controlsVisible) && !a.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"}`,
+              className: `absolute inset-0 flex items-center justify-center z-10 transition-opacity duration-300 pointer-events-none ${a.controlsVisible || !a.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(pt, { 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 hover:scale-110 active:scale-90 active:opacity-80 focus:outline-none backdrop-blur-md ${X.playBtn}`, children: a.isPlaying ? /* @__PURE__ */ e(ft, { className: `${X.playIcon} text-white fill-current` }) : /* @__PURE__ */ e(mt, { 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(bt, { 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 ${qt ? "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 +2214,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: jt,
                     onMouseLeave: () => {
                       Ge(null), _e(null);
                     },
                     onMouseDown: Ze,
                     onTouchStart: Ze,
                     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: [
+                      (dt = h.highlight) == null ? void 0 : dt.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 / a.duration * 100}%` }, title: c.text }, f)),
+                      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, ${Ft}%, 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__ */ 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}%` } })
+                        a.duration > 0 && a.buffered.map((c, f) => /* @__PURE__ */ e("div", { className: "absolute top-0 bottom-0 bg-white/20", style: { left: `${c.start / a.duration * 100}%`, width: `${(c.end - c.start) / a.duration * 100}%` } }, f)),
+                        /* @__PURE__ */ e("div", { className: "absolute left-0 top-0 bottom-0 bg-[var(--accent)]", style: { width: `${(pe ? re : a.currentTime) / a.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 : a.currentTime) / a.duration * 100}%`,
                             borderRadius: "var(--radius-full)"
                           }
                         }
@@ -2233,8 +2244,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: rt.filter((c) => c.position === "left" || c.position === "center").map(ot) }),
+                  /* @__PURE__ */ e("div", { className: "flex items-center gap-1", children: rt.filter((c) => c.position === "right").map(ot) })
                 ] })
               ]
             }
@@ -2243,20 +2254,21 @@ const Te = (s) => {
       ]
     }
   );
-}, Ji = (s, t) => {
-  const i = Kt(s);
-  return i.render(ze.createElement(gt, t)), {
+  return at && typeof document < "u" ? ei(lt, document.body) : lt;
+}, es = (s, t) => {
+  const i = Zt(s);
+  return i.render(ze.createElement(wt, t)), {
     unmount: () => {
       i.unmount();
     },
     update: (r) => {
-      i.render(ze.createElement(gt, { ...t, ...r }));
+      i.render(ze.createElement(wt, { ...t, ...r }));
     }
   };
 };
 export {
-  ti as StrataCore,
-  gt as StrataPlayer,
-  Ji as mountStrataPlayer
+  ni as StrataCore,
+  wt as StrataPlayer,
+  es as mountStrataPlayer
 };
 //# sourceMappingURL=strataplayer.es.js.map