strataplayer 1.0.4 → 1.0.5

package/dist/strataplayer.es.js

@@ -1,14 +1,13 @@
-var Ke = Object.defineProperty;
-var Ye = (d, e, i) => e in d ? Ke(d, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : d[e] = i;
-var b = (d, e, i) => Ye(d, typeof e != "symbol" ? e + "" : e, i);
-import Pe, { useState as w, useEffect as I, useRef as D, useMemo as Ze, useSyncExternalStore as et, useCallback as tt } from "react";
-import { createRoot as it } from "react-dom/client";
-import { jsxs as c, jsx as t, Fragment as $ } from "react/jsx-runtime";
-import H from "hls.js";
-import { Loader2 as st, Pause as rt, Play as at, VolumeX as nt, Volume1 as ot, Volume2 as lt, Subtitles as ct, PictureInPicture as dt, Download as ut, Settings as ht, Users as mt, Cast as ft, Palette as pt, Check as bt, Minimize as vt, Maximize as gt, RotateCcw as xt, RotateCw as wt, Upload as yt, SlidersHorizontal as kt, RefreshCcw as Nt, Clock as St, Minus as Ct, Plus as Tt, MoveVertical as zt, Type as Et, Bold as It, CaseUpper as Rt, Eye as Pt, Droplet as Mt, ArrowLeft as $t } from "lucide-react";
-class Lt {
+var tt = Object.defineProperty;
+var it = (c, e, i) => e in c ? tt(c, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : c[e] = i;
+var g = (c, e, i) => it(c, typeof e != "symbol" ? e + "" : e, i);
+import Le, { useState as w, useEffect as R, forwardRef as He, createElement as oe, useRef as q, useMemo as st, useSyncExternalStore as at, useCallback as rt } from "react";
+import { createRoot as nt } from "react-dom/client";
+import { jsxs as d, jsx as t, Fragment as A } from "react/jsx-runtime";
+import U from "hls.js";
+class ot {
   constructor() {
-    b(this, "events");
+    g(this, "events");
     this.events = /* @__PURE__ */ new Map();
   }
   on(e, i) {
@@ -19,21 +18,21 @@ class Lt {
     const s = this.events.get(e);
     s && this.events.set(
       e,
-      s.filter((n) => n !== i)
+      s.filter((r) => r !== i)
     );
   }
   emit(e, i) {
     const s = this.events.get(e);
-    s && s.forEach((n) => n(i));
+    s && s.forEach((r) => r(i));
   }
   destroy() {
     this.events.clear();
   }
 }
-class At {
+class lt {
   constructor(e) {
-    b(this, "state");
-    b(this, "listeners");
+    g(this, "state");
+    g(this, "listeners");
     this.state = e, this.listeners = /* @__PURE__ */ new Set();
   }
   get() {
@@ -41,7 +40,7 @@ class At {
   }
   setState(e) {
     const i = this.state, s = typeof e == "function" ? e(i) : e;
-    this.state = { ...i, ...s }, this.listeners.forEach((n) => n(this.state, i));
+    this.state = { ...i, ...s }, this.listeners.forEach((r) => r(this.state, i));
   }
   subscribe(e) {
     return this.listeners.add(e), () => this.listeners.delete(e);
@@ -50,13 +49,13 @@ class At {
     this.listeners.clear();
   }
 }
-class Bt {
+class ct {
   constructor(e) {
-    b(this, "context", null);
-    b(this, "source", null);
-    b(this, "gainNode", null);
-    b(this, "video");
-    b(this, "isInitialized", !1);
+    g(this, "context", null);
+    g(this, "source", null);
+    g(this, "gainNode", null);
+    g(this, "video");
+    g(this, "isInitialized", !1);
     this.video = e;
   }
   /**
@@ -79,7 +78,7 @@ class Bt {
     this.context && this.context.close(), this.isInitialized = !1;
   }
 }
-const oe = {
+const ce = {
   useNative: !1,
   fixCapitalization: !1,
   backgroundOpacity: 50,
@@ -90,7 +89,7 @@ const oe = {
   isBold: !1,
   textColor: "#ffffff",
   verticalOffset: 40
-}, Ve = "strata-settings-v3", O = {
+}, qe = "strata-settings-v3", O = {
   isPlaying: !1,
   isBuffering: !1,
   currentTime: 0,
@@ -110,7 +109,7 @@ const oe = {
   subtitleTracks: [],
   currentSubtitle: -1,
   subtitleOffset: 0,
-  subtitleSettings: oe,
+  subtitleSettings: ce,
   activeCues: [],
   viewMode: "normal",
   notifications: [],
@@ -119,69 +118,69 @@ const oe = {
   theme: "default",
   sources: [],
   currentSourceIndex: -1
-}, je = (d = {}) => {
+}, De = (c = {}) => {
   let e = {};
-  if (!d.disablePersistence && typeof window < "u")
+  if (!c.disablePersistence && typeof window < "u")
     try {
-      const s = localStorage.getItem(Ve);
+      const s = localStorage.getItem(qe);
       s && (e = JSON.parse(s));
     } catch {
     }
   const i = {
-    ...oe,
+    ...ce,
     ...e.subtitleSettings || {},
-    ...d.subtitleSettings || {}
+    ...c.subtitleSettings || {}
   };
   return {
     ...O,
     ...e,
     // Load saved first
     // Override with config if present (not undefined)
-    volume: d.volume ?? e.volume ?? O.volume,
-    isMuted: d.muted ?? e.isMuted ?? O.isMuted,
-    playbackRate: d.playbackRate ?? e.playbackRate ?? O.playbackRate,
-    audioGain: d.audioGain ?? e.audioGain ?? O.audioGain,
-    theme: d.theme ?? e.theme ?? O.theme,
-    themeColor: d.themeColor ?? e.themeColor ?? O.themeColor,
-    iconSize: d.iconSize ?? e.iconSize ?? O.iconSize,
+    volume: c.volume ?? e.volume ?? O.volume,
+    isMuted: c.muted ?? e.isMuted ?? O.isMuted,
+    playbackRate: c.playbackRate ?? e.playbackRate ?? O.playbackRate,
+    audioGain: c.audioGain ?? e.audioGain ?? O.audioGain,
+    theme: c.theme ?? e.theme ?? O.theme,
+    themeColor: c.themeColor ?? e.themeColor ?? O.themeColor,
+    iconSize: c.iconSize ?? e.iconSize ?? O.iconSize,
     subtitleSettings: i
   };
 };
-class Ot {
+class dt {
   constructor(e = {}, i) {
-    b(this, "video");
-    b(this, "container", null);
-    b(this, "events");
-    b(this, "store");
-    b(this, "plugins", /* @__PURE__ */ new Map());
-    b(this, "audioEngine");
-    b(this, "config");
+    g(this, "video");
+    g(this, "container", null);
+    g(this, "events");
+    g(this, "store");
+    g(this, "plugins", /* @__PURE__ */ new Map());
+    g(this, "audioEngine");
+    g(this, "config");
     // Retry Logic
-    b(this, "retryCount", 0);
-    b(this, "maxRetries", 5);
-    b(this, "retryTimer", null);
-    b(this, "currentSource", null);
-    b(this, "currentSrc", "");
-    b(this, "currentTracks", []);
+    g(this, "retryCount", 0);
+    g(this, "maxRetries", 5);
+    g(this, "retryTimer", null);
+    g(this, "currentSource", null);
+    g(this, "currentSrc", "");
+    g(this, "currentTracks", []);
     // Cast
-    b(this, "castInitialized", !1);
-    b(this, "boundCueChange");
-    b(this, "boundFullscreenChange");
-    this.config = e, this.video = i || document.createElement("video"), this.video.crossOrigin = "anonymous", this.events = new Lt();
-    const s = je(e);
-    this.store = new At(s), this.audioEngine = new Bt(this.video), this.boundCueChange = this.handleCueChange.bind(this), this.boundFullscreenChange = () => {
+    g(this, "castInitialized", !1);
+    g(this, "boundCueChange");
+    g(this, "boundFullscreenChange");
+    this.config = e, this.video = i || document.createElement("video"), this.video.crossOrigin = "anonymous", this.events = new ot();
+    const s = De(e);
+    this.store = new lt(s), this.audioEngine = new ct(this.video), this.boundCueChange = this.handleCueChange.bind(this), this.boundFullscreenChange = () => {
       this.store.setState({ isFullscreen: !!document.fullscreenElement });
-    }, this.video.volume = s.volume, this.video.muted = s.isMuted, this.video.playbackRate = s.playbackRate, s.audioGain > 1 && this.audioEngine.setGain(s.audioGain), this.initVideoListeners(), this.initCast(), e.disablePersistence || this.store.subscribe((n) => {
+    }, this.video.volume = s.volume, this.video.muted = s.isMuted, this.video.playbackRate = s.playbackRate, s.audioGain > 1 && this.audioEngine.setGain(s.audioGain), this.initVideoListeners(), this.initCast(), e.disablePersistence || this.store.subscribe((r) => {
       const l = {
-        volume: n.volume,
-        isMuted: n.isMuted,
-        playbackRate: n.playbackRate,
-        subtitleSettings: n.subtitleSettings,
-        iconSize: n.iconSize,
-        themeColor: n.themeColor,
-        theme: n.theme
+        volume: r.volume,
+        isMuted: r.isMuted,
+        playbackRate: r.playbackRate,
+        subtitleSettings: r.subtitleSettings,
+        iconSize: r.iconSize,
+        themeColor: r.themeColor,
+        theme: r.theme
       };
-      localStorage.setItem(Ve, JSON.stringify(l));
+      localStorage.setItem(qe, JSON.stringify(l));
     });
   }
   initVideoListeners() {
@@ -199,12 +198,12 @@ class Ot {
     const i = this.video.error, s = e || (i == null ? void 0 : i.message) || (i ? `Code ${i.code}` : "Unknown Error");
     if (this.removeNotification("retry"), this.retryCount < this.maxRetries) {
       this.retryCount++;
-      const n = Math.pow(2, this.retryCount - 1) * 1500;
+      const r = Math.pow(2, this.retryCount - 1) * 1500;
       this.notify({
         id: "retry",
         type: "loading",
         message: `Error: ${s}. Retrying (${this.retryCount}/${this.maxRetries})...`
-      }), console.warn(`[StrataPlayer] Error: ${s}. Retrying in ${n}ms...`), this.retryTimer && clearTimeout(this.retryTimer), this.retryTimer = setTimeout(() => {
+      }), console.warn(`[StrataPlayer] Error: ${s}. Retrying in ${r}ms...`), this.retryTimer && clearTimeout(this.retryTimer), this.retryTimer = setTimeout(() => {
         if (this.currentSource) {
           this.load(this.currentSource, this.currentTracks, !0);
           const l = this.store.get().currentTime;
@@ -215,11 +214,11 @@ class Ot {
             this.video.addEventListener("canplay", m);
           }
         }
-      }, n);
+      }, r);
     } else {
       this.removeNotification("retry");
-      const n = `Failed to play after ${this.maxRetries} attempts: ${s}`;
-      this.store.setState({ error: n });
+      const r = `Failed to play after ${this.maxRetries} attempts: ${s}`;
+      this.store.setState({ error: r });
     }
   }
   updateBuffer() {
@@ -233,10 +232,10 @@ class Ot {
   }
   updateSubtitles() {
     setTimeout(() => {
-      const e = Array.from(this.video.textTracks).filter((s) => s.kind === "subtitles" || s.kind === "captions").map((s, n) => ({
-        label: s.label || s.language || `Track ${n + 1}`,
+      const e = Array.from(this.video.textTracks).filter((s) => s.kind === "subtitles" || s.kind === "captions").map((s, r) => ({
+        label: s.label || s.language || `Track ${r + 1}`,
         language: s.language,
-        index: n
+        index: r
       }));
       this.store.setState({ subtitleTracks: e });
       const i = this.store.get();
@@ -247,11 +246,11 @@ class Ot {
   async fetchWithRetry(e, i = 3) {
     for (let s = 0; s < i; s++)
       try {
-        const n = await fetch(e);
-        if (!n.ok) throw new Error(`HTTP ${n.status}`);
-        return n;
-      } catch (n) {
-        if (s === i - 1) throw n;
+        const r = await fetch(e);
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        return r;
+      } catch (r) {
+        if (s === i - 1) throw r;
         await new Promise((l) => setTimeout(l, 1e3 * Math.pow(2, s)));
       }
     throw new Error("Fetch failed");
@@ -269,19 +268,19 @@ class Ot {
   switchSource(e) {
     const i = this.store.get().sources;
     if (e >= 0 && e < i.length) {
-      const s = this.video.currentTime, n = !this.video.paused;
+      const s = this.video.currentTime, r = !this.video.paused;
       this.load(i[e], this.currentTracks);
       const l = () => {
-        this.video.currentTime = s, n && this.video.play(), this.video.removeEventListener("canplay", l);
+        this.video.currentTime = s, r && this.video.play(), this.video.removeEventListener("canplay", l);
       };
       this.video.addEventListener("canplay", l);
     }
   }
   load(e, i = [], s = !1) {
     this.retryTimer && clearTimeout(this.retryTimer);
-    const n = typeof e == "string" ? { url: e, type: "auto" } : e;
-    s || (this.retryCount = 0, this.store.setState({ error: null }), this.removeNotification("retry")), this.currentSrc = n.url, this.currentSource = n, this.currentTracks = i;
-    const m = this.store.get().sources.findIndex((p) => p.url === n.url);
+    const r = typeof e == "string" ? { url: e, type: "auto" } : e;
+    s || (this.retryCount = 0, this.store.setState({ error: null }), this.removeNotification("retry")), this.currentSrc = r.url, this.currentSource = r, this.currentTracks = i;
+    const m = this.store.get().sources.findIndex((f) => f.url === r.url);
     this.store.setState({
       isBuffering: !0,
       qualityLevels: [],
@@ -293,40 +292,40 @@ class Ot {
       // subtitleTracks and currentSubtitle are purposely preserved
       currentSourceIndex: m
     });
-    let v = n.type || "auto";
-    v === "auto" && (n.url.includes(".m3u8") ? v = "hls" : n.url.includes(".mpd") ? v = "dash" : v = "mp4"), this.events.emit("load", { url: n.url, type: v });
+    let b = r.type || "auto";
+    b === "auto" && (r.url.includes(".m3u8") ? b = "hls" : r.url.includes(".mpd") ? b = "dash" : b = "mp4"), this.events.emit("load", { url: r.url, type: b });
     const h = this.video.getElementsByTagName("track");
     for (; h.length > 0; )
       h[0].remove();
-    i.length > 0 && i.forEach((p) => {
-      this.fetchWithRetry(p.src).then(() => {
-        this.addTextTrackInternal(p.src, p.label, p.srcLang, p.default);
-      }).catch((a) => {
-        this.notify({ type: "warning", message: `Failed to load subtitle: ${p.label}`, duration: 4e3 });
+    i.length > 0 && i.forEach((f) => {
+      this.fetchWithRetry(f.src).then(() => {
+        this.addTextTrackInternal(f.src, f.label, f.srcLang, f.default);
+      }).catch((n) => {
+        this.notify({ type: "warning", message: `Failed to load subtitle: ${f.label}`, duration: 4e3 });
       });
-    }), (v === "mp4" || v === "webm" || v === "ogg") && (this.video.src = n.url);
+    }), (b === "mp4" || b === "webm" || b === "ogg") && (this.video.src = r.url);
   }
   addTextTrack(e, i) {
     const s = new FileReader();
-    s.onload = (n) => {
+    s.onload = (r) => {
       var h;
-      if (!((h = n.target) != null && h.result)) return;
-      let l = n.target.result;
+      if (!((h = r.target) != null && h.result)) return;
+      let l = r.target.result;
       (e.name.toLowerCase().endsWith(".srt") || !l.trim().startsWith("WEBVTT")) && (l = l.replace(/(\d{2}:\d{2}:\d{2}),(\d{3})/g, "$1.$2"), l.trim().startsWith("WEBVTT") || (l = `WEBVTT
 
 ` + l));
-      const m = new Blob([l], { type: "text/vtt" }), v = URL.createObjectURL(m);
-      this.addTextTrackInternal(v, i, "user", !0), setTimeout(() => {
-        const a = this.store.get().subtitleTracks.findIndex((x) => x.label === i);
-        a !== -1 && (this.setSubtitle(a), this.notify({ type: "success", message: "Subtitle uploaded", duration: 3e3 }));
+      const m = new Blob([l], { type: "text/vtt" }), b = URL.createObjectURL(m);
+      this.addTextTrackInternal(b, i, "user", !0), setTimeout(() => {
+        const n = this.store.get().subtitleTracks.findIndex((x) => x.label === i);
+        n !== -1 && (this.setSubtitle(n), this.notify({ type: "success", message: "Subtitle uploaded", duration: 3e3 }));
       }, 200);
     }, s.onerror = () => {
       this.notify({ type: "error", message: "Failed to read file", duration: 3e3 });
     }, s.readAsText(e);
   }
-  addTextTrackInternal(e, i, s = "", n = !1) {
+  addTextTrackInternal(e, i, s = "", r = !1) {
     const l = document.createElement("track");
-    l.kind = "subtitles", l.label = i, l.src = e, l.srclang = s, n && (l.default = !0), this.video.appendChild(l), this.updateSubtitles();
+    l.kind = "subtitles", l.label = i, l.src = e, l.srclang = s, r && (l.default = !0), this.video.appendChild(l), this.updateSubtitles();
   }
   play() {
     return this.video.play();
@@ -403,8 +402,8 @@ class Ot {
     try {
       const i = e.cast.framework.CastContext.getInstance().getCurrentSession();
       if (!i) return;
-      const s = new e.chrome.cast.media.MediaInfo(this.currentSrc, this.currentSrc.includes(".m3u8") ? "application/x-mpegurl" : "video/mp4"), n = new e.chrome.cast.media.LoadRequest(s);
-      i.loadMedia(n).then(() => {
+      const s = new e.chrome.cast.media.MediaInfo(this.currentSrc, this.currentSrc.includes(".m3u8") ? "application/x-mpegurl" : "video/mp4"), r = new e.chrome.cast.media.LoadRequest(s);
+      i.loadMedia(r).then(() => {
         this.notify({ type: "success", message: "Casting...", duration: 3e3 });
       }).catch((l) => console.error("Cast load error", l));
     } catch (i) {
@@ -417,10 +416,10 @@ class Ot {
       this.store.setState({ activeCues: [] });
       return;
     }
-    const s = Array.from(this.video.textTracks).filter((n) => n.kind === "subtitles" || n.kind === "captions")[e.currentSubtitle];
+    const s = Array.from(this.video.textTracks).filter((r) => r.kind === "subtitles" || r.kind === "captions")[e.currentSubtitle];
     if (s && s.activeCues) {
-      const n = Array.from(s.activeCues).map((l) => l.text);
-      this.store.setState({ activeCues: n });
+      const r = Array.from(s.activeCues).map((l) => l.text);
+      this.store.setState({ activeCues: r });
     } else
       this.store.setState({ activeCues: [] });
   }
@@ -428,10 +427,10 @@ class Ot {
     if (Array.from(this.video.textTracks).forEach((i) => {
       i.removeEventListener("cuechange", this.boundCueChange), i.mode = "hidden";
     }), this.store.setState({ currentSubtitle: e, subtitleOffset: 0, activeCues: [] }), e !== -1) {
-      const s = Array.from(this.video.textTracks).filter((n) => n.kind === "subtitles" || n.kind === "captions")[e];
+      const s = Array.from(this.video.textTracks).filter((r) => r.kind === "subtitles" || r.kind === "captions")[e];
       if (s) {
-        const n = this.store.get().subtitleSettings;
-        s.mode = n.useNative ? "showing" : "hidden", s.addEventListener("cuechange", this.boundCueChange), this.handleCueChange();
+        const r = this.store.get().subtitleSettings;
+        s.mode = r.useNative ? "showing" : "hidden", s.addEventListener("cuechange", this.boundCueChange), this.handleCueChange();
       }
     }
   }
@@ -440,12 +439,12 @@ class Ot {
     this.store.setState({ subtitleSettings: s }), e.useNative !== void 0 && this.setSubtitle(this.store.get().currentSubtitle);
   }
   resetSubtitleSettings() {
-    this.store.setState({ subtitleSettings: oe }), this.setSubtitle(this.store.get().currentSubtitle);
+    this.store.setState({ subtitleSettings: ce }), this.setSubtitle(this.store.get().currentSubtitle);
   }
   setSubtitleOffset(e) {
     const i = this.store.get().subtitleOffset, s = e - i;
-    Math.abs(s) < 1e-3 || (Array.from(this.video.textTracks).forEach((n) => {
-      (n.mode === "showing" || n.mode === "hidden") && n.cues && Array.from(n.cues).forEach((l) => {
+    Math.abs(s) < 1e-3 || (Array.from(this.video.textTracks).forEach((r) => {
+      (r.mode === "showing" || r.mode === "hidden") && r.cues && Array.from(r.cues).forEach((l) => {
         l.startTime += s, l.endTime += s;
       });
     }), this.store.setState({ subtitleOffset: e }), this.notify({ type: "info", message: `Subtitle Offset: ${e > 0 ? "+" : ""}${e.toFixed(1)}s`, duration: 1500 }));
@@ -460,21 +459,21 @@ class Ot {
     }
     const i = this.notify({ type: "loading", message: "Preparing download...", progress: 0 });
     try {
-      const n = await this.fetchWithRetry(e);
-      if (!n.body) throw new Error("No body");
-      const l = n.body.getReader(), m = n.headers.get("Content-Length"), v = m ? parseInt(m, 10) : 0;
+      const r = await this.fetchWithRetry(e);
+      if (!r.body) throw new Error("No body");
+      const l = r.body.getReader(), m = r.headers.get("Content-Length"), b = m ? parseInt(m, 10) : 0;
       let h = 0;
-      const p = [];
+      const f = [];
       for (; ; ) {
-        const { done: C, value: u } = await l.read();
-        if (C) break;
-        if (p.push(u), h += u.length, v) {
-          const T = Math.round(h / v * 100);
-          this.notify({ id: i, type: "loading", message: `Downloading... ${T}%`, progress: T });
+        const { done: T, value: z } = await l.read();
+        if (T) break;
+        if (f.push(z), h += z.length, b) {
+          const u = Math.round(h / b * 100);
+          this.notify({ id: i, type: "loading", message: `Downloading... ${u}%`, progress: u });
         }
       }
-      const a = new Blob(p), x = window.URL.createObjectURL(a), k = document.createElement("a");
-      k.style.display = "none", k.href = x, k.download = ((s = e.split("/").pop()) == null ? void 0 : s.split("?")[0]) || "video.mp4", document.body.appendChild(k), k.click(), window.URL.revokeObjectURL(x), document.body.removeChild(k), this.notify({ id: i, type: "success", message: "Saved!", duration: 3e3 });
+      const n = new Blob(f), x = window.URL.createObjectURL(n), C = document.createElement("a");
+      C.style.display = "none", C.href = x, C.download = ((s = e.split("/").pop()) == null ? void 0 : s.split("?")[0]) || "video.mp4", document.body.appendChild(C), C.click(), window.URL.revokeObjectURL(x), document.body.removeChild(C), this.notify({ id: i, type: "success", message: "Saved!", duration: 3e3 });
     } catch {
       this.notify({ id: i, type: "error", message: "Download failed.", duration: 4e3 }), window.open(e, "_blank");
     }
@@ -500,15 +499,15 @@ class Ot {
     this.events.destroy(), this.store.destroy(), this.plugins.forEach((i) => i.destroy && i.destroy()), this.plugins.clear(), this.video.remove(), this.audioEngine.destroy();
   }
 }
-class Ft {
+class ut {
   constructor() {
-    b(this, "name", "HlsPlugin");
-    b(this, "hls", null);
-    b(this, "core", null);
+    g(this, "name", "HlsPlugin");
+    g(this, "hls", null);
+    g(this, "core", null);
   }
   init(e) {
     this.core = e, this.core.events.on("load", (i) => {
-      i.type === "hls" || i.url.includes(".m3u8") ? H.isSupported() ? this.loadHls(i.url) : this.core.video.canPlayType("application/vnd.apple.mpegurl") && (this.core.video.src = i.url) : this.hls && (this.hls.destroy(), this.hls = null);
+      i.type === "hls" || i.url.includes(".m3u8") ? U.isSupported() ? this.loadHls(i.url) : this.core.video.canPlayType("application/vnd.apple.mpegurl") && (this.core.video.src = i.url) : this.hls && (this.hls.destroy(), this.hls = null);
     }), this.core.events.on("quality-request", (i) => {
       this.hls && (this.hls.currentLevel = i);
     }), this.core.events.on("audio-track-request", (i) => {
@@ -516,34 +515,34 @@ class Ft {
     });
   }
   loadHls(e) {
-    this.hls && this.hls.destroy(), this.hls = new H({
+    this.hls && this.hls.destroy(), this.hls = new U({
       autoStartLoad: !0,
       startLevel: -1,
       // Auto
       capLevelToPlayerSize: !0
       // Performance opt
-    }), this.hls.loadSource(e), this.hls.attachMedia(this.core.video), this.hls.on(H.Events.MANIFEST_PARSED, (i, s) => {
-      const n = s.levels.map((l, m) => ({
+    }), this.hls.loadSource(e), this.hls.attachMedia(this.core.video), this.hls.on(U.Events.MANIFEST_PARSED, (i, s) => {
+      const r = s.levels.map((l, m) => ({
         height: l.height,
         bitrate: l.bitrate,
         index: m
       }));
-      this.core.store.setState({ qualityLevels: n });
-    }), this.hls.on(H.Events.AUDIO_TRACKS_UPDATED, (i, s) => {
-      const n = s.audioTracks.map((l, m) => ({
+      this.core.store.setState({ qualityLevels: r });
+    }), this.hls.on(U.Events.AUDIO_TRACKS_UPDATED, (i, s) => {
+      const r = s.audioTracks.map((l, m) => ({
         label: l.name || l.lang || `Audio ${m + 1}`,
         language: l.lang || "",
         index: m
       }));
       this.core.store.setState({
-        audioTracks: n,
+        audioTracks: r,
         currentAudioTrack: this.hls.audioTrack
       });
-    }), this.hls.on(H.Events.LEVEL_SWITCHED, (i, s) => {
-    }), this.hls.on(H.Events.ERROR, (i, s) => {
+    }), this.hls.on(U.Events.LEVEL_SWITCHED, (i, s) => {
+    }), this.hls.on(U.Events.ERROR, (i, s) => {
       if (s.fatal) {
-        const n = s.details || "Unknown HLS Error";
-        this.core.triggerError(n, !0);
+        const r = s.details || "Unknown HLS Error";
+        this.core.triggerError(r, !0);
       }
     });
   }
@@ -551,53 +550,53 @@ class Ft {
     this.hls && (this.hls.destroy(), this.hls = null);
   }
 }
-const ae = (d) => {
-  if (isNaN(d)) return "00:00";
-  const e = Math.floor(d / 3600), i = Math.floor(d % 3600 / 60), s = Math.floor(d % 60);
+const ne = (c) => {
+  if (isNaN(c)) return "00:00";
+  const e = Math.floor(c / 3600), i = Math.floor(c % 3600 / 60), s = Math.floor(c % 60);
   return e > 0 ? `${e}:${i.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}` : `${i}:${s.toString().padStart(2, "0")}`;
-}, Vt = async (d, e = 3) => {
+}, ht = async (c, e = 3) => {
   for (let i = 0; i < e; i++)
     try {
-      const s = await fetch(d);
+      const s = await fetch(c);
       if (!s.ok) throw new Error(`HTTP ${s.status}`);
       return await s.text();
     } catch (s) {
       if (i === e - 1) throw s;
-      await new Promise((n) => setTimeout(n, 1e3));
+      await new Promise((r) => setTimeout(r, 1e3));
     }
   throw new Error("Failed");
-}, jt = async (d, e) => {
+}, mt = async (c, e) => {
   try {
-    const s = (await Vt(d)).split(`
-`), n = [];
+    const s = (await ht(c)).split(`
+`), r = [];
     let l = null, m = null;
-    const v = d.substring(0, d.lastIndexOf("/") + 1), h = (p) => {
-      const a = p.split(":");
+    const b = c.substring(0, c.lastIndexOf("/") + 1), h = (f) => {
+      const n = f.split(":");
       let x = 0;
-      return a.length === 3 ? (x += parseFloat(a[0]) * 3600, x += parseFloat(a[1]) * 60, x += parseFloat(a[2])) : (x += parseFloat(a[0]) * 60, x += parseFloat(a[1])), x;
+      return n.length === 3 ? (x += parseFloat(n[0]) * 3600, x += parseFloat(n[1]) * 60, x += parseFloat(n[2])) : (x += parseFloat(n[0]) * 60, x += parseFloat(n[1])), x;
     };
-    for (let p of s)
-      if (p = p.trim(), p.includes("-->")) {
-        const a = p.split("-->");
-        l = h(a[0].trim()), m = h(a[1].trim());
-      } else if (l !== null && m !== null && p.length > 0) {
-        let [a, x] = p.split("#");
-        !a.match(/^https?:\/\//) && !a.startsWith("data:") && (a = v + a);
-        let k = 0, C = 0, u = 0, T = 0;
+    for (let f of s)
+      if (f = f.trim(), f.includes("-->")) {
+        const n = f.split("-->");
+        l = h(n[0].trim()), m = h(n[1].trim());
+      } else if (l !== null && m !== null && f.length > 0) {
+        let [n, x] = f.split("#");
+        !n.match(/^https?:\/\//) && !n.startsWith("data:") && (n = b + n);
+        let C = 0, T = 0, z = 0, u = 0;
         if (x && x.startsWith("xywh=")) {
-          const L = x.replace("xywh=", "").split(",");
-          L.length === 4 && (k = parseInt(L[0]), C = parseInt(L[1]), u = parseInt(L[2]), T = parseInt(L[3]));
+          const M = x.replace("xywh=", "").split(",");
+          M.length === 4 && (C = parseInt(M[0]), T = parseInt(M[1]), z = parseInt(M[2]), u = parseInt(M[3]));
         }
-        u > 0 && T > 0 && n.push({ start: l, end: m, url: a, x: k, y: C, w: u, h: T }), l = null, m = null;
+        z > 0 && u > 0 && r.push({ start: l, end: m, url: n, x: C, y: T, w: z, h: u }), l = null, m = null;
       }
-    return n;
+    return r;
   } catch {
     return e({ type: "warning", message: "Failed to load thumbnails", duration: 4e3 }), [];
   }
-}, Me = (d, e = 200) => {
-  const [i, s] = w(d), [n, l] = w(!1);
-  return I(() => {
-    if (d)
+}, $e = (c, e = 200) => {
+  const [i, s] = w(c), [r, l] = w(!1);
+  return R(() => {
+    if (c)
       s(!0), requestAnimationFrame(() => {
         requestAnimationFrame(() => {
           l(!0);
@@ -610,14 +609,467 @@ const ae = (d) => {
       }, e);
       return () => clearTimeout(m);
     }
-  }, [d, e]), { isMounted: i, isVisible: n };
-}, $e = at, Le = rt, Dt = lt, Ut = ot, Ht = nt, qt = gt, _t = vt, Gt = ht, De = bt, Wt = dt, Qt = ct, Xt = ut, Jt = yt, Kt = $t, ne = st, Yt = ft, Zt = mt, ei = St, ti = Ct, ii = Tt, si = kt, ri = Et, Ue = pt, ai = Pt, ni = zt, oi = Nt, li = It, ci = Rt, di = Mt, Ae = ({ className: d }) => /* @__PURE__ */ c("div", { className: `relative flex items-center justify-center ${d}`, children: [
-  /* @__PURE__ */ t(xt, { className: "w-full h-full", strokeWidth: 2 }),
+  }, [c, e]), { isMounted: i, isVisible: r };
+};
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const pt = (c) => c.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), Ue = (...c) => c.filter((e, i, s) => !!e && e.trim() !== "" && s.indexOf(e) === i).join(" ").trim();
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var ft = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const vt = He(
+  ({
+    color: c = "currentColor",
+    size: e = 24,
+    strokeWidth: i = 2,
+    absoluteStrokeWidth: s,
+    className: r = "",
+    children: l,
+    iconNode: m,
+    ...b
+  }, h) => oe(
+    "svg",
+    {
+      ref: h,
+      ...ft,
+      width: e,
+      height: e,
+      stroke: c,
+      strokeWidth: s ? Number(i) * 24 / Number(e) : i,
+      className: Ue("lucide", r),
+      ...b
+    },
+    [
+      ...m.map(([f, n]) => oe(f, n)),
+      ...Array.isArray(l) ? l : [l]
+    ]
+  )
+);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const v = (c, e) => {
+  const i = He(
+    ({ className: s, ...r }, l) => oe(vt, {
+      ref: l,
+      iconNode: e,
+      className: Ue(`lucide-${pt(c)}`, s),
+      ...r
+    })
+  );
+  return i.displayName = `${c}`, i;
+};
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const bt = v("ArrowLeft", [
+  ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
+  ["path", { d: "M19 12H5", key: "x3x0zl" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const gt = v("Bold", [
+  [
+    "path",
+    { d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8", key: "mg9rjx" }
+  ]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const yt = v("Captions", [
+  ["rect", { width: "18", height: "14", x: "3", y: "5", rx: "2", ry: "2", key: "12ruh7" }],
+  ["path", { d: "M7 15h4M15 15h2M7 11h2M13 11h4", key: "1ueiar" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const xt = v("CaseUpper", [
+  ["path", { d: "m3 15 4-8 4 8", key: "1vwr6u" }],
+  ["path", { d: "M4 13h6", key: "1r9ots" }],
+  ["path", { d: "M15 11h4.5a2 2 0 0 1 0 4H15V7h4a2 2 0 0 1 0 4", key: "1sqfas" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const wt = v("Cast", [
+  ["path", { d: "M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6", key: "3zrzxg" }],
+  ["path", { d: "M2 12a9 9 0 0 1 8 8", key: "g6cvee" }],
+  ["path", { d: "M2 16a5 5 0 0 1 4 4", key: "1y1dii" }],
+  ["line", { x1: "2", x2: "2.01", y1: "20", y2: "20", key: "xu2jvo" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const kt = v("Check", [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Ct = v("Clock", [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["polyline", { points: "12 6 12 12 16 14", key: "68esgv" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Nt = v("Download", [
+  ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
+  ["polyline", { points: "7 10 12 15 17 10", key: "2ggqvy" }],
+  ["line", { x1: "12", x2: "12", y1: "15", y2: "3", key: "1vk2je" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const St = v("Droplet", [
+  [
+    "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",
+      key: "c7niix"
+    }
+  ]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Tt = v("Eye", [
+  [
+    "path",
+    {
+      d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0",
+      key: "1nclc0"
+    }
+  ],
+  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const zt = v("LoaderCircle", [
+  ["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Mt = v("Maximize", [
+  ["path", { d: "M8 3H5a2 2 0 0 0-2 2v3", key: "1dcmit" }],
+  ["path", { d: "M21 8V5a2 2 0 0 0-2-2h-3", key: "1e4gt3" }],
+  ["path", { d: "M3 16v3a2 2 0 0 0 2 2h3", key: "wsl5sc" }],
+  ["path", { d: "M16 21h3a2 2 0 0 0 2-2v-3", key: "18trek" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Et = v("Minimize", [
+  ["path", { d: "M8 3v3a2 2 0 0 1-2 2H3", key: "hohbtr" }],
+  ["path", { d: "M21 8h-3a2 2 0 0 1-2-2V3", key: "5jw1f3" }],
+  ["path", { d: "M3 16h3a2 2 0 0 1 2 2v3", key: "198tvr" }],
+  ["path", { d: "M16 21v-3a2 2 0 0 1 2-2h3", key: "ph8mxp" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const It = v("Minus", [["path", { d: "M5 12h14", key: "1ays0h" }]]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Rt = v("MoveVertical", [
+  ["path", { d: "M12 2v20", key: "t6zp3m" }],
+  ["path", { d: "m8 18 4 4 4-4", key: "bh5tu3" }],
+  ["path", { d: "m8 6 4-4 4 4", key: "ybng9g" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Pt = v("Palette", [
+  ["circle", { cx: "13.5", cy: "6.5", r: ".5", fill: "currentColor", key: "1okk4w" }],
+  ["circle", { cx: "17.5", cy: "10.5", r: ".5", fill: "currentColor", key: "f64h9f" }],
+  ["circle", { cx: "8.5", cy: "7.5", r: ".5", fill: "currentColor", key: "fotxhn" }],
+  ["circle", { cx: "6.5", cy: "12.5", r: ".5", fill: "currentColor", key: "qy21gx" }],
+  [
+    "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",
+      key: "12rzf8"
+    }
+  ]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Lt = v("Pause", [
+  ["rect", { x: "14", y: "4", width: "4", height: "16", rx: "1", key: "zuxfzm" }],
+  ["rect", { x: "6", y: "4", width: "4", height: "16", rx: "1", key: "1okwgv" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const $t = v("PictureInPicture", [
+  [
+    "path",
+    {
+      d: "M8 4.5v5H3m-1-6 6 6m13 0v-3c0-1.16-.84-2-2-2h-7m-9 9v2c0 1.05.95 2 2 2h3",
+      key: "bcd8fb"
+    }
+  ],
+  ["rect", { width: "10", height: "7", x: "12", y: "13.5", ry: "2", key: "136fx3" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const At = v("Play", [
+  ["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Bt = v("Plus", [
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "M12 5v14", key: "s699le" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Vt = v("RefreshCcw", [
+  ["path", { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "14sxne" }],
+  ["path", { d: "M3 3v5h5", key: "1xhq8a" }],
+  ["path", { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16", key: "1hlbsb" }],
+  ["path", { d: "M16 16h5v5", key: "ccwih5" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Ot = v("RotateCcw", [
+  ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
+  ["path", { d: "M3 3v5h5", key: "1xhq8a" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const jt = v("RotateCw", [
+  ["path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8", key: "1p45f6" }],
+  ["path", { d: "M21 3v5h-5", key: "1q7to0" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Ft = v("Settings", [
+  [
+    "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-.08a2 2 0 0 1-1-1.74v-.5a2 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",
+      key: "1qme2f"
+    }
+  ],
+  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Ht = v("SlidersHorizontal", [
+  ["line", { x1: "21", x2: "14", y1: "4", y2: "4", key: "obuewd" }],
+  ["line", { x1: "10", x2: "3", y1: "4", y2: "4", key: "1q6298" }],
+  ["line", { x1: "21", x2: "12", y1: "12", y2: "12", key: "1iu8h1" }],
+  ["line", { x1: "8", x2: "3", y1: "12", y2: "12", key: "ntss68" }],
+  ["line", { x1: "21", x2: "16", y1: "20", y2: "20", key: "14d8ph" }],
+  ["line", { x1: "12", x2: "3", y1: "20", y2: "20", key: "m0wm8r" }],
+  ["line", { x1: "14", x2: "14", y1: "2", y2: "6", key: "14e1ph" }],
+  ["line", { x1: "8", x2: "8", y1: "10", y2: "14", key: "1i6ji0" }],
+  ["line", { x1: "16", x2: "16", y1: "18", y2: "22", key: "1lctlv" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const qt = v("Type", [
+  ["polyline", { points: "4 7 4 4 20 4 20 7", key: "1nosan" }],
+  ["line", { x1: "9", x2: "15", y1: "20", y2: "20", key: "swin9y" }],
+  ["line", { x1: "12", x2: "12", y1: "4", y2: "20", key: "1tx1rr" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Dt = v("Upload", [
+  ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
+  ["polyline", { points: "17 8 12 3 7 8", key: "t8dd8p" }],
+  ["line", { x1: "12", x2: "12", y1: "3", y2: "15", key: "widbto" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Ut = v("Users", [
+  ["path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2", key: "1yyitq" }],
+  ["circle", { cx: "9", cy: "7", r: "4", key: "nufk8" }],
+  ["path", { d: "M22 21v-2a4 4 0 0 0-3-3.87", key: "kshegd" }],
+  ["path", { d: "M16 3.13a4 4 0 0 1 0 7.75", key: "1da9ce" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Gt = v("Volume1", [
+  [
+    "path",
+    {
+      d: "M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z",
+      key: "uqj9uw"
+    }
+  ],
+  ["path", { d: "M16 9a5 5 0 0 1 0 6", key: "1q6k2b" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Wt = v("Volume2", [
+  [
+    "path",
+    {
+      d: "M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z",
+      key: "uqj9uw"
+    }
+  ],
+  ["path", { d: "M16 9a5 5 0 0 1 0 6", key: "1q6k2b" }],
+  ["path", { d: "M19.364 18.364a9 9 0 0 0 0-12.728", key: "ijwkga" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const _t = v("VolumeX", [
+  [
+    "path",
+    {
+      d: "M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z",
+      key: "uqj9uw"
+    }
+  ],
+  ["line", { x1: "22", x2: "16", y1: "9", y2: "15", key: "1ewh16" }],
+  ["line", { x1: "16", x2: "22", y1: "9", y2: "15", key: "5ykzw1" }]
+]), Ae = At, Be = Lt, Qt = Wt, Xt = Gt, Jt = _t, Kt = Mt, Yt = Et, Zt = Ft, Ge = kt, ei = $t, ti = yt, ii = Nt, si = Dt, ai = bt, le = zt, ri = wt, ni = Ut, oi = Ct, li = It, ci = Bt, di = Ht, ui = qt, We = Pt, hi = Tt, mi = Rt, pi = Vt, fi = gt, vi = xt, bi = St, Ve = ({ className: c }) => /* @__PURE__ */ d("div", { className: `relative flex items-center justify-center ${c}`, children: [
+  /* @__PURE__ */ t(Ot, { className: "w-full h-full", strokeWidth: 2 }),
   /* @__PURE__ */ t("span", { className: "absolute inset-0 flex items-center justify-center text-[32%] font-bold select-none mt-[1px]", children: "10" })
-] }), Be = ({ className: d }) => /* @__PURE__ */ c("div", { className: `relative flex items-center justify-center ${d}`, children: [
-  /* @__PURE__ */ t(wt, { className: "w-full h-full", strokeWidth: 2 }),
+] }), Oe = ({ className: c }) => /* @__PURE__ */ d("div", { className: `relative flex items-center justify-center ${c}`, children: [
+  /* @__PURE__ */ t(jt, { className: "w-full h-full", strokeWidth: 2 }),
   /* @__PURE__ */ t("span", { className: "absolute inset-0 flex items-center justify-center text-[32%] font-bold select-none mt-[1px]", children: "10" })
-] }), ui = ({ notifications: d }) => /* @__PURE__ */ t("div", { className: "absolute top-4 left-4 z-50 flex flex-col gap-2 pointer-events-none font-sans", children: d.map((e) => /* @__PURE__ */ c(
+] }), gi = ({ notifications: c }) => /* @__PURE__ */ t("div", { className: "absolute top-4 left-4 z-50 flex flex-col gap-2 pointer-events-none font-sans", children: c.map((e) => /* @__PURE__ */ d(
   "div",
   {
     className: `
@@ -626,16 +1078,16 @@ const ae = (d) => {
                         ${e.type === "warning" ? "border-amber-500/50 text-amber-100" : ""}
                     `,
     children: [
-      e.type === "loading" && /* @__PURE__ */ t(ne, { className: "w-4 h-4 animate-spin text-[var(--accent)]" }),
-      /* @__PURE__ */ c("div", { className: "flex flex-col gap-1 w-full", children: [
+      e.type === "loading" && /* @__PURE__ */ t(le, { className: "w-4 h-4 animate-spin text-[var(--accent)]" }),
+      /* @__PURE__ */ d("div", { className: "flex flex-col gap-1 w-full", children: [
         /* @__PURE__ */ t("span", { children: e.message }),
         typeof e.progress == "number" && /* @__PURE__ */ t("div", { className: "h-1 w-full bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ t("div", { className: "h-full bg-[var(--accent)] transition-all duration-300", style: { width: `${e.progress}%` } }) })
       ] })
     ]
   },
   e.id
-)) }), hi = ({ cues: d, settings: e }) => {
-  if (e.useNative || d.length === 0) return null;
+)) }), yi = ({ cues: c, settings: e }) => {
+  if (e.useNative || c.length === 0) return null;
   const i = () => {
     switch (e.textStyle) {
       case "outline":
@@ -657,7 +1109,7 @@ const ae = (d) => {
       style: {
         bottom: `${e.verticalOffset}px`
       },
-      children: d.map((s, n) => /* @__PURE__ */ t(
+      children: c.map((s, r) => /* @__PURE__ */ t(
         "div",
         {
           className: "mb-1 inline-block max-w-[80%]",
@@ -681,68 +1133,68 @@ const ae = (d) => {
             }
           )
         },
-        n
+        r
       ))
     }
   );
-}, He = ({ children: d, onClose: e, align: i = "right", maxHeight: s, className: n }) => {
-  const l = D(null), m = i === "center" ? "left-1/2 -translate-x-1/2 origin-bottom" : "right-0 origin-bottom-right", v = s ? { maxHeight: `${s}px` } : {};
+}, _e = ({ children: c, onClose: e, align: i = "right", maxHeight: s, className: r }) => {
+  const l = q(null), m = i === "center" ? "left-1/2 -translate-x-1/2 origin-bottom" : "right-0 origin-bottom-right", b = s ? { maxHeight: `${s}px` } : {};
   return /* @__PURE__ */ t(
     "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 ${n}`,
-      style: { ...v, borderRadius: "var(--radius-lg)" },
+      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 ${r}`,
+      style: { ...b, borderRadius: "var(--radius-lg)" },
       onClick: (h) => h.stopPropagation(),
-      children: /* @__PURE__ */ t("div", { className: "overflow-y-auto hide-scrollbar flex-1", style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t("div", { ref: l, children: d }) })
+      children: /* @__PURE__ */ t("div", { className: "overflow-y-auto hide-scrollbar flex-1", style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t("div", { ref: l, children: c }) })
     }
   );
-}, y = ({ label: d, value: e, active: i, onClick: s, hasSubmenu: n, icon: l }) => /* @__PURE__ */ c(
+}, k = ({ label: c, value: e, active: i, onClick: s, hasSubmenu: r, icon: l }) => /* @__PURE__ */ d(
   "button",
   {
     onClick: s,
     className: "w-full flex items-center justify-between px-3 py-2.5 hover:bg-white/10 transition-colors text-left text-zinc-200 active:bg-white/5 focus:outline-none focus:bg-white/10 group overflow-hidden my-0.5",
     style: { borderRadius: "var(--radius)" },
     children: [
-      /* @__PURE__ */ c("div", { className: "flex items-center gap-3 overflow-hidden", children: [
+      /* @__PURE__ */ d("div", { className: "flex items-center gap-3 overflow-hidden", children: [
         l && /* @__PURE__ */ t("span", { className: "text-zinc-400 shrink-0 group-hover:text-zinc-300 transition-colors", children: l }),
-        /* @__PURE__ */ t("span", { className: `font-medium truncate text-sm ${i ? "text-[var(--accent)]" : ""}`, title: d, children: d })
+        /* @__PURE__ */ t("span", { className: `font-medium truncate text-sm ${i ? "text-[var(--accent)]" : ""}`, title: c, children: c })
       ] }),
-      /* @__PURE__ */ c("div", { className: "flex items-center gap-2 text-zinc-400 shrink-0", children: [
+      /* @__PURE__ */ d("div", { className: "flex items-center gap-2 text-zinc-400 shrink-0", children: [
         e && /* @__PURE__ */ t("span", { className: "text-xs font-medium truncate max-w-[60px]", title: e, children: e }),
-        i && /* @__PURE__ */ t(De, { className: "w-4 h-4 text-[var(--accent)] shrink-0" }),
-        n && /* @__PURE__ */ t("span", { className: "text-xs group-hover:translate-x-0.5 transition-transform text-zinc-500 shrink-0", children: "›" })
+        i && /* @__PURE__ */ t(Ge, { className: "w-4 h-4 text-[var(--accent)] shrink-0" }),
+        r && /* @__PURE__ */ t("span", { className: "text-xs group-hover:translate-x-0.5 transition-transform text-zinc-500 shrink-0", children: "›" })
       ] })
     ]
   }
-), F = ({ label: d, onBack: e, rightAction: i }) => /* @__PURE__ */ c(
+), j = ({ label: c, onBack: e, rightAction: i }) => /* @__PURE__ */ d(
   "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__ */ c(
+      /* @__PURE__ */ d(
         "button",
         {
           className: "flex items-center gap-2 hover:text-white transition-colors focus:outline-none",
           onClick: e,
           children: [
-            /* @__PURE__ */ t(Kt, { className: "w-3 h-3" }),
-            /* @__PURE__ */ t("span", { children: d })
+            /* @__PURE__ */ t(ai, { className: "w-3 h-3" }),
+            /* @__PURE__ */ t("span", { children: c })
           ]
         }
       ),
       i
     ]
   }
-), Oe = () => /* @__PURE__ */ t("div", { className: "h-px bg-white/5 mx-2 my-1" }), J = ({ label: d, checked: e, onChange: i, icon: s }) => /* @__PURE__ */ c(
+), je = () => /* @__PURE__ */ t("div", { className: "h-px bg-white/5 mx-2 my-1" }), K = ({ label: c, checked: e, onChange: i, icon: s }) => /* @__PURE__ */ d(
   "div",
   {
     className: "flex items-center justify-between py-2.5 px-3 hover:bg-white/5 group transition-colors",
     style: { borderRadius: "var(--radius)" },
     children: [
-      /* @__PURE__ */ c("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ d("div", { className: "flex items-center gap-3", children: [
         s && /* @__PURE__ */ t("span", { className: "text-zinc-500 group-hover:text-zinc-400 transition-colors", children: s }),
-        /* @__PURE__ */ t("span", { className: "text-sm text-zinc-300 font-medium group-hover:text-white transition-colors", children: d })
+        /* @__PURE__ */ t("span", { className: "text-sm text-zinc-300 font-medium group-hover:text-white transition-colors", children: c })
       ] }),
       /* @__PURE__ */ t(
         "button",
@@ -766,16 +1218,16 @@ const ae = (d) => {
       )
     ]
   }
-), K = ({ label: d, value: e, min: i, max: s, step: n, onChange: l, formatValue: m, icon: v }) => /* @__PURE__ */ c(
+), Y = ({ label: c, value: e, min: i, max: s, step: r, onChange: l, formatValue: m, icon: b }) => /* @__PURE__ */ d(
   "div",
   {
     className: "py-2.5 px-3 hover:bg-white/5 group transition-colors",
     style: { borderRadius: "var(--radius)" },
     children: [
-      /* @__PURE__ */ c("div", { className: "flex justify-between items-center mb-2", children: [
-        /* @__PURE__ */ c("div", { className: "flex items-center gap-3", children: [
-          v && /* @__PURE__ */ t("span", { className: "text-zinc-500 group-hover:text-zinc-400 transition-colors", children: v }),
-          /* @__PURE__ */ t("span", { className: "text-xs font-bold text-zinc-400 uppercase tracking-wider group-hover:text-zinc-300 transition-colors", children: d })
+      /* @__PURE__ */ d("div", { className: "flex justify-between items-center mb-2", children: [
+        /* @__PURE__ */ d("div", { className: "flex items-center gap-3", children: [
+          b && /* @__PURE__ */ t("span", { className: "text-zinc-500 group-hover:text-zinc-400 transition-colors", children: b }),
+          /* @__PURE__ */ t("span", { className: "text-xs font-bold text-zinc-400 uppercase tracking-wider group-hover:text-zinc-300 transition-colors", children: c })
         ] }),
         /* @__PURE__ */ t(
           "span",
@@ -786,14 +1238,14 @@ const ae = (d) => {
           }
         )
       ] }),
-      /* @__PURE__ */ c("div", { className: "relative h-4 flex items-center px-1", children: [
+      /* @__PURE__ */ d("div", { className: "relative h-4 flex items-center px-1", children: [
         /* @__PURE__ */ t(
           "input",
           {
             type: "range",
             min: i,
             max: s,
-            step: n,
+            step: r,
             value: e,
             onChange: (h) => l(parseFloat(h.target.value)),
             className: "w-full h-1.5 appearance-none cursor-pointer focus:outline-none focus:ring-2 strata-range-input",
@@ -824,17 +1276,17 @@ const ae = (d) => {
       ] })
     ]
   }
-), mi = ({ label: d, value: e, options: i, onChange: s, icon: n }) => /* @__PURE__ */ c(
+), xi = ({ label: c, value: e, options: i, onChange: s, icon: r }) => /* @__PURE__ */ d(
   "div",
   {
     className: "py-2.5 px-3 hover:bg-white/5 group transition-colors",
     style: { borderRadius: "var(--radius)" },
     children: [
-      /* @__PURE__ */ c("div", { className: "flex items-center gap-3 mb-2", children: [
-        n && /* @__PURE__ */ t("span", { className: "text-zinc-500 group-hover:text-zinc-400 transition-colors", children: n }),
-        /* @__PURE__ */ t("span", { className: "text-xs font-bold text-zinc-400 uppercase tracking-wider group-hover:text-zinc-300 transition-colors", children: d })
+      /* @__PURE__ */ d("div", { className: "flex items-center gap-3 mb-2", children: [
+        r && /* @__PURE__ */ t("span", { className: "text-zinc-500 group-hover:text-zinc-400 transition-colors", children: r }),
+        /* @__PURE__ */ t("span", { className: "text-xs font-bold text-zinc-400 uppercase tracking-wider group-hover:text-zinc-300 transition-colors", children: c })
       ] }),
-      /* @__PURE__ */ c("div", { className: "relative", children: [
+      /* @__PURE__ */ d("div", { className: "relative", children: [
         /* @__PURE__ */ t(
           "select",
           {
@@ -849,102 +1301,99 @@ const ae = (d) => {
       ] })
     ]
   }
-), U = ({ title: d, children: e }) => /* @__PURE__ */ c("div", { className: "py-2", children: [
-  d && /* @__PURE__ */ t("h4", { className: "px-3 text-[10px] font-bold text-[var(--accent)] uppercase tracking-wider mb-1 mt-2", children: d }),
+), D = ({ title: c, children: e }) => /* @__PURE__ */ d("div", { className: "py-2", children: [
+  c && /* @__PURE__ */ t("h4", { className: "px-3 text-[10px] font-bold text-[var(--accent)] uppercase tracking-wider mb-1 mt-2", children: c }),
   /* @__PURE__ */ t("div", { className: "space-y-0.5", children: e })
-] }), fi = ({ tracks: d, current: e, onSelect: i, onUpload: s, onClose: n, settings: l, onSettingsChange: m, onReset: v, offset: h, maxHeight: p, animationClass: a }) => {
-  const [x, k] = w("main"), C = D(null);
-  return /* @__PURE__ */ c(He, { onClose: n, align: "right", maxHeight: p, className: a, children: [
-    x === "main" && /* @__PURE__ */ c("div", { className: "animate-in slide-in-from-left-4 fade-in duration-200", children: [
+] }), wi = ({ tracks: c, current: e, onSelect: i, onUpload: s, onClose: r, settings: l, onSettingsChange: m, onReset: b, offset: h, onOffsetChange: f, maxHeight: n, animationClass: x }) => {
+  const [C, T] = w("main"), z = q(null);
+  return /* @__PURE__ */ d(_e, { onClose: r, align: "right", maxHeight: n, className: x, children: [
+    C === "main" && /* @__PURE__ */ d("div", { className: "animate-in slide-in-from-left-4 fade-in duration-200", children: [
       /* @__PURE__ */ t("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 rounded-lg", children: /* @__PURE__ */ t("span", { children: "Subtitles" }) }),
-      /* @__PURE__ */ c("div", { children: [
+      /* @__PURE__ */ d("div", { children: [
         /* @__PURE__ */ t(
-          y,
+          k,
           {
             label: "Upload Subtitle",
-            icon: /* @__PURE__ */ t(Jt, { className: "w-4 h-4" }),
+            icon: /* @__PURE__ */ t(si, { className: "w-4 h-4" }),
             onClick: () => {
               var u;
-              return (u = C.current) == null ? void 0 : u.click();
+              return (u = z.current) == null ? void 0 : u.click();
             }
           }
         ),
-        /* @__PURE__ */ t("input", { type: "file", accept: ".vtt,.srt", ref: C, className: "hidden", onChange: (u) => {
-          var T;
-          (T = u.target.files) != null && T[0] && s(u.target.files[0]);
+        /* @__PURE__ */ t("input", { type: "file", accept: ".vtt,.srt", ref: z, className: "hidden", onChange: (u) => {
+          var M;
+          (M = u.target.files) != null && M[0] && s(u.target.files[0]);
         } }),
         /* @__PURE__ */ t(
-          y,
+          k,
           {
             label: "Customize",
-            icon: /* @__PURE__ */ t(si, { className: "w-4 h-4" }),
-            onClick: () => k("customize"),
+            icon: /* @__PURE__ */ t(di, { className: "w-4 h-4" }),
+            onClick: () => T("customize"),
             hasSubmenu: !0
           }
         ),
         /* @__PURE__ */ t("div", { className: "h-px bg-white/5 mx-2 my-1" }),
         /* @__PURE__ */ t(
-          y,
+          k,
           {
             label: "Off",
             active: e === -1,
             onClick: () => {
-              i(-1), n();
+              i(-1), r();
             }
           }
         ),
-        d.map((u) => /* @__PURE__ */ t(
-          y,
+        c.map((u) => /* @__PURE__ */ t(
+          k,
           {
             label: u.label,
             value: u.language,
             active: e === u.index,
             onClick: () => {
-              i(u.index), n();
+              i(u.index), r();
             }
           },
           u.index
         ))
       ] })
     ] }),
-    x === "customize" && /* @__PURE__ */ c("div", { className: "animate-in slide-in-from-right-4 fade-in duration-200", children: [
+    C === "customize" && /* @__PURE__ */ d("div", { className: "animate-in slide-in-from-right-4 fade-in duration-200", children: [
       /* @__PURE__ */ t(
-        F,
+        j,
         {
           label: "Customize",
-          onBack: () => k("main"),
-          rightAction: /* @__PURE__ */ t("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__ */ t(oi, { className: "w-4 h-4" }) })
+          onBack: () => T("main"),
+          rightAction: /* @__PURE__ */ t("button", { onClick: b, className: "p-1.5 text-zinc-400 hover:text-white transition-colors rounded-md hover:bg-white/10", title: "Reset All", children: /* @__PURE__ */ t(pi, { className: "w-4 h-4" }) })
         }
       ),
-      /* @__PURE__ */ c("div", { className: "pb-1", children: [
-        /* @__PURE__ */ t(U, { children: /* @__PURE__ */ t(
-          J,
+      /* @__PURE__ */ d("div", { className: "pb-1", children: [
+        /* @__PURE__ */ t(D, { children: /* @__PURE__ */ t(
+          K,
           {
             label: "Native Video Subtitle",
             checked: l.useNative,
             onChange: (u) => m({ useNative: u })
           }
         ) }),
-        !l.useNative && /* @__PURE__ */ c($, { children: [
-          /* @__PURE__ */ c(U, { title: "Sync & Position", children: [
-            /* @__PURE__ */ c("div", { className: "py-2.5 px-3 rounded-lg hover:bg-white/5 group transition-colors", children: [
-              /* @__PURE__ */ t("div", { className: "flex justify-between items-center mb-2", children: /* @__PURE__ */ c("div", { className: "flex items-center gap-3", children: [
-                /* @__PURE__ */ t(ei, { className: "w-4 h-4 text-zinc-500 group-hover:text-zinc-400 transition-colors" }),
+        !l.useNative && /* @__PURE__ */ d(A, { children: [
+          /* @__PURE__ */ d(D, { title: "Sync & Position", children: [
+            /* @__PURE__ */ d("div", { className: "py-2.5 px-3 rounded-lg hover:bg-white/5 group transition-colors", children: [
+              /* @__PURE__ */ t("div", { className: "flex justify-between items-center mb-2", children: /* @__PURE__ */ d("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ t(oi, { className: "w-4 h-4 text-zinc-500 group-hover:text-zinc-400 transition-colors" }),
                 /* @__PURE__ */ t("span", { className: "text-xs font-bold text-zinc-400 uppercase tracking-wider group-hover:text-zinc-300 transition-colors", children: "Sync Offset" })
               ] }) }),
-              /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ t(
                   "button",
                   {
-                    onClick: () => {
-                      const u = window._strataPlayer;
-                      u && u.setSubtitleOffset(Math.round((h - 0.1) * 10) / 10);
-                    },
+                    onClick: () => f(Math.round((h - 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__ */ t(ti, { className: "w-4 h-4" })
+                    children: /* @__PURE__ */ t(li, { className: "w-4 h-4" })
                   }
                 ),
-                /* @__PURE__ */ c("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: [
+                /* @__PURE__ */ d("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: [
                   h > 0 ? "+" : "",
                   (h == null ? void 0 : h.toFixed(1)) || "0.0",
                   "s"
@@ -952,21 +1401,18 @@ const ae = (d) => {
                 /* @__PURE__ */ t(
                   "button",
                   {
-                    onClick: () => {
-                      const u = window._strataPlayer;
-                      u && u.setSubtitleOffset(Math.round((h + 0.1) * 10) / 10);
-                    },
+                    onClick: () => f(Math.round((h + 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__ */ t(ii, { className: "w-4 h-4" })
+                    children: /* @__PURE__ */ t(ci, { className: "w-4 h-4" })
                   }
                 )
               ] })
             ] }),
             /* @__PURE__ */ t(
-              K,
+              Y,
               {
                 label: "Vertical Position",
-                icon: /* @__PURE__ */ t(ni, { className: "w-4 h-4" }),
+                icon: /* @__PURE__ */ t(mi, { className: "w-4 h-4" }),
                 value: l.verticalOffset,
                 min: 0,
                 max: 200,
@@ -976,12 +1422,12 @@ const ae = (d) => {
               }
             )
           ] }),
-          /* @__PURE__ */ c(U, { title: "Appearance", children: [
+          /* @__PURE__ */ d(D, { title: "Appearance", children: [
             /* @__PURE__ */ t(
-              K,
+              Y,
               {
                 label: "Text Size",
-                icon: /* @__PURE__ */ t(ri, { className: "w-4 h-4" }),
+                icon: /* @__PURE__ */ t(ui, { className: "w-4 h-4" }),
                 value: l.textSize,
                 min: 50,
                 max: 200,
@@ -990,12 +1436,12 @@ const ae = (d) => {
                 formatValue: (u) => `${u}%`
               }
             ),
-            /* @__PURE__ */ c("div", { className: "py-2.5 px-3 rounded-lg hover:bg-white/5 group transition-colors", children: [
-              /* @__PURE__ */ c("div", { className: "flex items-center gap-3 mb-2", children: [
-                /* @__PURE__ */ t(Ue, { className: "w-4 h-4 text-zinc-500 group-hover:text-zinc-400 transition-colors" }),
+            /* @__PURE__ */ d("div", { className: "py-2.5 px-3 rounded-lg hover:bg-white/5 group transition-colors", children: [
+              /* @__PURE__ */ d("div", { className: "flex items-center gap-3 mb-2", children: [
+                /* @__PURE__ */ t(We, { className: "w-4 h-4 text-zinc-500 group-hover:text-zinc-400 transition-colors" }),
                 /* @__PURE__ */ t("span", { className: "text-xs font-bold text-zinc-400 uppercase tracking-wider group-hover:text-zinc-300 transition-colors", children: "Text Color" })
               ] }),
-              /* @__PURE__ */ c("div", { className: "flex items-center justify-between gap-2 p-1 bg-zinc-800/50 rounded-lg", children: [
+              /* @__PURE__ */ d("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((u) => /* @__PURE__ */ t(
                   "button",
                   {
@@ -1018,7 +1464,7 @@ const ae = (d) => {
               ] })
             ] }),
             /* @__PURE__ */ t(
-              mi,
+              xi,
               {
                 label: "Text Style",
                 value: l.textStyle,
@@ -1032,17 +1478,17 @@ const ae = (d) => {
                 onChange: (u) => m({ textStyle: u })
               }
             ),
-            /* @__PURE__ */ c("div", { className: "grid grid-cols-2 gap-2 mt-1 px-1", children: [
-              /* @__PURE__ */ t(J, { label: "Bold", icon: /* @__PURE__ */ t(li, { className: "w-4 h-4" }), checked: l.isBold, onChange: (u) => m({ isBold: u }) }),
-              /* @__PURE__ */ t(J, { label: "Fix Caps", icon: /* @__PURE__ */ t(ci, { className: "w-4 h-4" }), checked: l.fixCapitalization, onChange: (u) => m({ fixCapitalization: u }) })
+            /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-2 mt-1 px-1", children: [
+              /* @__PURE__ */ t(K, { label: "Bold", icon: /* @__PURE__ */ t(fi, { className: "w-4 h-4" }), checked: l.isBold, onChange: (u) => m({ isBold: u }) }),
+              /* @__PURE__ */ t(K, { label: "Fix Caps", icon: /* @__PURE__ */ t(vi, { className: "w-4 h-4" }), checked: l.fixCapitalization, onChange: (u) => m({ fixCapitalization: u }) })
             ] })
           ] }),
-          /* @__PURE__ */ c(U, { title: "Background", children: [
+          /* @__PURE__ */ d(D, { title: "Background", children: [
             /* @__PURE__ */ t(
-              K,
+              Y,
               {
                 label: "Opacity",
-                icon: /* @__PURE__ */ t(ai, { className: "w-4 h-4" }),
+                icon: /* @__PURE__ */ t(hi, { className: "w-4 h-4" }),
                 value: l.backgroundOpacity,
                 min: 0,
                 max: 100,
@@ -1051,9 +1497,9 @@ const ae = (d) => {
                 formatValue: (u) => `${u}%`
               }
             ),
-            /* @__PURE__ */ t(J, { label: "Blur Background", icon: /* @__PURE__ */ t(di, { className: "w-4 h-4" }), checked: l.backgroundBlur, onChange: (u) => m({ backgroundBlur: u }) }),
+            /* @__PURE__ */ t(K, { label: "Blur Background", icon: /* @__PURE__ */ t(bi, { className: "w-4 h-4" }), checked: l.backgroundBlur, onChange: (u) => m({ backgroundBlur: u }) }),
             l.backgroundBlur && /* @__PURE__ */ t(
-              K,
+              Y,
               {
                 label: "Blur Intensity",
                 value: l.backgroundBlurAmount,
@@ -1069,126 +1515,126 @@ const ae = (d) => {
       ] })
     ] })
   ] });
-}, pi = [
+}, ki = [
   { label: "Strata", value: "#6366f1" },
   { label: "Emerald", value: "#10b981" },
   { label: "Rose", value: "#f43f5e" },
   { label: "Amber", value: "#f59e0b" },
   { label: "Sky", value: "#0ea5e9" },
   { label: "Violet", value: "#8b5cf6" }
-], bi = [
+], Ci = [
   { label: "Default", value: "default", color: "#6366f1" },
   { label: "Pixel", value: "pixel", color: "#ef4444" },
   { label: "Game", value: "game", color: "#eab308" },
   { label: "Hacker", value: "hacker", color: "#22c55e" }
-], Fe = (d) => {
-  var ze, Ee, Ie, Re;
-  const { src: e, sources: i, poster: s, autoPlay: n, thumbnails: l, textTracks: m, plugins: v, ...h } = d, p = D(null), [a, x] = w(null), [k, C] = w(!1), [u, T] = w(0), L = Ze(() => je(h), []), o = et(
-    tt((r) => a ? a.store.subscribe(r) : () => {
-    }, [a]),
-    () => a ? a.store.get() : L,
-    () => L
-  ), [Y, Q] = w(!0), [z, R] = w(!1), [E, A] = w(!1), [P, N] = w("main"), le = Me(z, 200), ce = Me(E, 200), [Z, de] = w(!1), [ee, ue] = w(0), [he, me] = w(!1), [fe, pe] = w(!1), [be, ve] = w([]), [ge, xe] = w(null), [qe, _e] = w(0), [B, we] = w(null), [q, te] = w(null), [vi, ye] = w(null), _ = D(null), G = D(null), ie = D(null), se = D(null);
-  I(() => {
-    if (!p.current) return;
-    const r = new Ot(h);
-    window._strataPlayer = r, v && v.length > 0 ? v.forEach((g) => r.use(g)) : r.use(new Ft()), r.attach(p.current), x(r);
-    const f = new ResizeObserver((g) => {
-      for (const S of g)
-        T(S.contentRect.height);
+], Fe = (c) => {
+  var Ee, Ie, Re, Pe;
+  const { src: e, sources: i, poster: s, autoPlay: r, thumbnails: l, textTracks: m, plugins: b, ...h } = c, f = q(null), [n, x] = w(null), [C, T] = w(!1), [z, u] = w(0), M = st(() => De(h), []), o = at(
+    rt((a) => n ? n.store.subscribe(a) : () => {
+    }, [n]),
+    () => n ? n.store.get() : M,
+    () => M
+  ), [Z, X] = w(!0), [E, P] = w(!1), [I, B] = w(!1), [L, N] = w("main"), de = $e(E, 200), ue = $e(I, 200), [ee, he] = w(!1), [te, me] = w(0), [pe, fe] = w(!1), [ve, be] = w(!1), [ge, ye] = w([]), [xe, we] = w(null), [Qe, Xe] = w(0), [V, ke] = w(null), [G, ie] = w(null), [Ni, Ce] = w(null), W = q(null), _ = q(null), se = q(null), ae = q(null);
+  R(() => {
+    if (!f.current) return;
+    const a = new dt(h);
+    b && b.length > 0 ? b.forEach((y) => a.use(y)) : a.use(new ut()), a.attach(f.current), x(a);
+    const p = new ResizeObserver((y) => {
+      for (const S of y)
+        u(S.contentRect.height);
     });
-    return f.observe(p.current), () => {
-      f.disconnect(), r.destroy(), x(null), window._strataPlayer = null;
+    return p.observe(f.current), () => {
+      p.disconnect(), a.destroy(), x(null);
     };
-  }, []), I(() => {
-    if (!a) return;
-    const r = {};
-    h.theme !== void 0 && h.theme !== o.theme && (r.theme = h.theme), h.themeColor !== void 0 && h.themeColor !== o.themeColor && (r.themeColor = h.themeColor), h.iconSize !== void 0 && h.iconSize !== o.iconSize && (r.iconSize = h.iconSize), Object.keys(r).length > 0 && a.setAppearance(r), h.volume !== void 0 && Math.abs(h.volume - o.volume) > 0.01 && a.setVolume(h.volume), h.muted !== void 0 && h.muted !== o.isMuted && (h.muted ? a.video.muted = !0 : a.video.muted = !1);
-  }, [a, h.theme, h.themeColor, h.iconSize, h.volume, h.muted]), I(() => {
-    if (!a) return;
-    const r = m || [];
-    i && i.length > 0 ? (C(!1), a.setSources(i, r)) : e && (C(!1), a.setSources([{ url: e, type: "auto" }], r));
-  }, [e, i, m, a]), I(() => {
-  }, [a, s]), I(() => {
-    a && n && (a.video.muted = !0, a.store.setState({ isMuted: !0 }), a.play().catch(() => {
+  }, []), R(() => {
+    if (!n) return;
+    const a = {};
+    h.theme !== void 0 && h.theme !== o.theme && (a.theme = h.theme), h.themeColor !== void 0 && h.themeColor !== o.themeColor && (a.themeColor = h.themeColor), h.iconSize !== void 0 && h.iconSize !== o.iconSize && (a.iconSize = h.iconSize), Object.keys(a).length > 0 && n.setAppearance(a), 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);
+  }, [n, h.theme, h.themeColor, h.iconSize, h.volume, h.muted]), R(() => {
+    if (!n) return;
+    const a = m || [];
+    i && i.length > 0 ? (T(!1), n.setSources(i, a)) : e && (T(!1), n.setSources([{ url: e, type: "auto" }], a));
+  }, [e, i, m, n]), R(() => {
+  }, [n, s]), R(() => {
+    n && r && (n.video.muted = !0, n.store.setState({ isMuted: !0 }), n.play().catch(() => {
     }));
-  }, [a, n]), I(() => {
-    o.isPlaying && !k && C(!0);
-  }, [o.isPlaying, k]), I(() => {
-    l && a ? jt(l, a.notify.bind(a)).then((r) => ve(r)) : ve([]);
-  }, [l, a]), I(() => {
-    const r = (f) => {
-      var g;
-      if (a && ((g = document.activeElement) == null ? void 0 : g.tagName) !== "INPUT")
-        switch (f.key.toLowerCase()) {
+  }, [n, r]), R(() => {
+    o.isPlaying && !C && T(!0);
+  }, [o.isPlaying, C]), R(() => {
+    l && n ? mt(l, n.notify.bind(n)).then((a) => ye(a)) : ye([]);
+  }, [l, n]), R(() => {
+    const a = (p) => {
+      var y;
+      if (n && ((y = document.activeElement) == null ? void 0 : y.tagName) !== "INPUT")
+        switch (p.key.toLowerCase()) {
           case " ":
           case "k":
-            f.preventDefault(), a.togglePlay();
+            p.preventDefault(), n.togglePlay();
             break;
           case "arrowright":
-            f.preventDefault(), a.skip(5);
+            p.preventDefault(), n.skip(5);
             break;
           case "arrowleft":
-            f.preventDefault(), a.skip(-5);
+            p.preventDefault(), n.skip(-5);
             break;
           case "arrowup":
-            f.preventDefault(), a.setVolume(a.video.volume + 0.1);
+            p.preventDefault(), n.setVolume(n.video.volume + 0.1);
             break;
           case "arrowdown":
-            f.preventDefault(), a.setVolume(a.video.volume - 0.1);
+            p.preventDefault(), n.setVolume(n.video.volume - 0.1);
             break;
           case "f":
-            f.preventDefault(), a.toggleFullscreen();
+            p.preventDefault(), n.toggleFullscreen();
             break;
           case "m":
-            f.preventDefault(), a.toggleMute();
+            p.preventDefault(), n.toggleMute();
             break;
         }
     };
-    return window.addEventListener("keydown", r), () => window.removeEventListener("keydown", r);
-  }, [a]);
-  const ke = () => {
-    Q(!0), G.current && clearTimeout(G.current), !(z || E) && (G.current = setTimeout(() => {
-      !o.isPlaying || z || E || Q(!1);
+    return window.addEventListener("keydown", a), () => window.removeEventListener("keydown", a);
+  }, [n]);
+  const Ne = () => {
+    X(!0), _.current && clearTimeout(_.current), !(E || I) && (_.current = setTimeout(() => {
+      !o.isPlaying || E || I || X(!1);
     }, 2500));
   };
-  I(() => {
-    !z && !E && o.isPlaying ? ke() : (z || E) && (Q(!0), G.current && clearTimeout(G.current));
-  }, [z, E, o.isPlaying]);
-  const re = (r) => {
-    if (!ie.current || !o.duration) return 0;
-    const f = ie.current.getBoundingClientRect(), g = "touches" in r ? r.touches[0].clientX : r.clientX;
-    return Math.max(0, Math.min(1, (g - f.left) / f.width)) * o.duration;
-  }, Ne = (r) => {
-    de(!0), ue(re(r));
-    const f = (S) => ue(re(S)), g = (S) => {
-      a == null || a.seek(re(S)), de(!1), document.removeEventListener("mousemove", f), document.removeEventListener("touchmove", f), document.removeEventListener("mouseup", g), document.removeEventListener("touchend", g);
+  R(() => {
+    !E && !I && o.isPlaying ? Ne() : (E || I) && (X(!0), _.current && clearTimeout(_.current));
+  }, [E, I, o.isPlaying]);
+  const re = (a) => {
+    if (!se.current || !o.duration) return 0;
+    const p = se.current.getBoundingClientRect(), y = "touches" in a ? a.touches[0].clientX : a.clientX;
+    return Math.max(0, Math.min(1, (y - p.left) / p.width)) * o.duration;
+  }, Se = (a) => {
+    he(!0), me(re(a));
+    const p = (S) => me(re(S)), y = (S) => {
+      n == null || n.seek(re(S)), he(!1), document.removeEventListener("mousemove", p), document.removeEventListener("touchmove", p), document.removeEventListener("mouseup", y), document.removeEventListener("touchend", y);
     };
-    document.addEventListener("mousemove", f), document.addEventListener("touchmove", f), document.addEventListener("mouseup", g), document.addEventListener("touchend", g);
-  }, Se = (r) => {
-    if (!se.current) return 0;
-    const f = se.current.getBoundingClientRect(), g = "touches" in r ? r.touches[0].clientX : r.clientX;
-    return Math.max(0, Math.min(1, (g - f.left) / f.width));
-  }, Ce = (r) => {
-    if (!a) return;
-    me(!0), a.setVolume(Se(r));
-    const f = (S) => a.setVolume(Se(S)), g = () => {
-      me(!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", y), document.addEventListener("touchend", y);
+  }, Te = (a) => {
+    if (!ae.current) return 0;
+    const p = ae.current.getBoundingClientRect(), y = "touches" in a ? a.touches[0].clientX : a.clientX;
+    return Math.max(0, Math.min(1, (y - p.left) / p.width));
+  }, ze = (a) => {
+    if (!n) return;
+    fe(!0), n.setVolume(Te(a));
+    const p = (S) => n.setVolume(Te(S)), y = () => {
+      fe(!1), document.removeEventListener("mousemove", p), document.removeEventListener("touchmove", p), document.removeEventListener("mouseup", y), document.removeEventListener("touchend", y);
     };
-    document.addEventListener("mousemove", f), document.addEventListener("touchmove", f), document.addEventListener("mouseup", g), document.addEventListener("touchend", g);
-  }, Ge = (r) => {
+    document.addEventListener("mousemove", p), document.addEventListener("touchmove", p), document.addEventListener("mouseup", y), document.addEventListener("touchend", y);
+  }, Je = (a) => {
     if (!o.duration) return;
-    const f = r.currentTarget.getBoundingClientRect(), g = (r.clientX - f.left) / f.width, S = g * o.duration;
-    _e(g * 100), xe(S), be.length > 0 && we(be.find((W) => S >= W.start && S < W.end) || null);
-  }, X = (r) => {
-    a && (a.skip(r === "forward" ? 10 : -10), ye(r), setTimeout(() => ye(null), 300));
-  }, We = (r) => {
-    if (z && R(!1), E && A(!1), !a) return;
-    const f = r.currentTarget.getBoundingClientRect(), g = r.clientX - f.left, S = f.width, W = Date.now();
-    _.current ? (clearTimeout(_.current), _.current = null, g < S * 0.35 ? (X("rewind"), te({ type: "rewind", id: W })) : g > S * 0.65 ? (X("forward"), te({ type: "forward", id: W })) : a.toggleFullscreen()) : _.current = setTimeout(() => {
-      a.togglePlay(), _.current = null;
+    const p = a.currentTarget.getBoundingClientRect(), y = (a.clientX - p.left) / p.width, S = y * o.duration;
+    Xe(y * 100), we(S), ge.length > 0 && ke(ge.find((Q) => S >= Q.start && S < Q.end) || null);
+  }, J = (a) => {
+    n && (n.skip(a === "forward" ? 10 : -10), Ce(a), setTimeout(() => Ce(null), 300));
+  }, Ke = (a) => {
+    if (E && P(!1), I && B(!1), !n) return;
+    const p = a.currentTarget.getBoundingClientRect(), y = a.clientX - p.left, S = p.width, Q = Date.now();
+    W.current ? (clearTimeout(W.current), W.current = null, y < S * 0.35 ? (J("rewind"), ie({ type: "rewind", id: Q })) : y > S * 0.65 ? (J("forward"), ie({ type: "forward", id: Q })) : n.toggleFullscreen()) : W.current = setTimeout(() => {
+      n.togglePlay(), W.current = null;
     }, 250);
-  }, Qe = o.isMuted || o.volume === 0 ? Ht : o.volume < 0.5 ? Ut : Dt, Te = Math.max(100, u - 120), Xe = () => {
+  }, Ye = o.isMuted || o.volume === 0 ? Jt : o.volume < 0.5 ? Xt : Qt, Me = Math.max(100, z - 120), Ze = () => {
     switch (o.iconSize) {
       case "small":
         return "w-4 h-4";
@@ -1197,7 +1643,7 @@ const ae = (d) => {
       default:
         return "w-5 h-5";
     }
-  }, Je = () => {
+  }, et = () => {
     switch (o.iconSize) {
       case "small":
         return "p-1.5";
@@ -1206,7 +1652,7 @@ const ae = (d) => {
       default:
         return "p-2";
     }
-  }, M = Xe(), V = Je(), j = (() => {
+  }, $ = Ze(), F = et(), H = (() => {
     switch (o.iconSize) {
       case "small":
         return {
@@ -1231,14 +1677,14 @@ const ae = (d) => {
         };
     }
   })();
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ d(
     "div",
     {
-      ref: p,
-      className: "group relative w-full h-full bg-black overflow-hidden select-none font-[family-name:var(--font-main)] outline-none touch-none rounded-[var(--radius)] text-zinc-100",
-      onMouseMove: ke,
+      ref: f,
+      className: "group relative w-full h-full bg-black overflow-hidden select-none font-[family-name:var(--font-main)] outline-none touch-none rounded-[var(--radius)] text-zinc-100 strata-player-reset",
+      onMouseMove: Ne,
       onMouseLeave: () => {
-        o.isPlaying && !z && !E && Q(!1);
+        o.isPlaying && !E && !I && X(!1);
       },
       tabIndex: 0,
       role: "region",
@@ -1338,69 +1784,69 @@ const ae = (d) => {
                 }
             ` }),
         o.theme === "hacker" && /* @__PURE__ */ t("div", { className: "strata-scanlines" }),
-        !a && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center bg-zinc-950 z-50", children: /* @__PURE__ */ t(ne, { className: "w-10 h-10 text-[var(--accent)] animate-spin" }) }),
-        a && /* @__PURE__ */ c($, { children: [
-          /* @__PURE__ */ t(ui, { notifications: o.notifications }),
-          /* @__PURE__ */ t(hi, { cues: o.activeCues, settings: o.subtitleSettings }),
-          /* @__PURE__ */ t("div", { className: "absolute inset-0 z-0", onClick: We, "aria-hidden": "true" }),
-          s && !k && /* @__PURE__ */ t(
+        !n && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center bg-zinc-950 z-50", children: /* @__PURE__ */ t(le, { className: "w-10 h-10 text-[var(--accent)] animate-spin" }) }),
+        n && /* @__PURE__ */ d(A, { children: [
+          /* @__PURE__ */ t(gi, { notifications: o.notifications }),
+          /* @__PURE__ */ t(yi, { cues: o.activeCues, settings: o.subtitleSettings }),
+          /* @__PURE__ */ t("div", { className: "absolute inset-0 z-0", onClick: Ke, "aria-hidden": "true" }),
+          s && !C && /* @__PURE__ */ t(
             "div",
             {
               className: "absolute inset-0 bg-cover bg-center z-[5] pointer-events-none",
               style: { backgroundImage: `url(${s})` }
             }
           ),
-          q && /* @__PURE__ */ t("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 ${q.type === "rewind" ? "left-0 rounded-r-[4rem]" : "right-0 rounded-l-[4rem]"}`, onAnimationEnd: () => te(null), children: /* @__PURE__ */ c("div", { className: "flex flex-col items-center text-white drop-shadow-lg", children: [
-            q.type === "rewind" ? /* @__PURE__ */ t(Ae, { className: "w-12 h-12 animate-pulse" }) : /* @__PURE__ */ t(Be, { className: "w-12 h-12 animate-pulse" }),
-            /* @__PURE__ */ t("span", { className: "font-bold text-sm mt-2 font-mono", children: q.type === "rewind" ? "-10s" : "+10s" })
-          ] }) }, q.id),
-          o.isBuffering && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center z-20 pointer-events-none", children: /* @__PURE__ */ t(ne, { className: "w-12 h-12 text-[var(--accent)] animate-spin drop-shadow-lg" }) }),
-          o.error && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center z-30 bg-black/90 backdrop-blur-md animate-in fade-in", children: /* @__PURE__ */ c("div", { className: "flex flex-col items-center gap-4 text-red-500 p-8 max-w-md text-center", children: [
+          G && /* @__PURE__ */ t("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 ${G.type === "rewind" ? "left-0 rounded-r-[4rem]" : "right-0 rounded-l-[4rem]"}`, onAnimationEnd: () => ie(null), children: /* @__PURE__ */ d("div", { className: "flex flex-col items-center text-white drop-shadow-lg", children: [
+            G.type === "rewind" ? /* @__PURE__ */ t(Ve, { className: "w-12 h-12 animate-pulse" }) : /* @__PURE__ */ t(Oe, { className: "w-12 h-12 animate-pulse" }),
+            /* @__PURE__ */ t("span", { className: "font-bold text-sm mt-2 font-mono", children: G.type === "rewind" ? "-10s" : "+10s" })
+          ] }) }, G.id),
+          o.isBuffering && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center z-20 pointer-events-none", children: /* @__PURE__ */ t(le, { className: "w-12 h-12 text-[var(--accent)] animate-spin drop-shadow-lg" }) }),
+          o.error && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center z-30 bg-black/90 backdrop-blur-md animate-in fade-in", children: /* @__PURE__ */ d("div", { className: "flex flex-col items-center gap-4 text-red-500 p-8 max-w-md text-center", children: [
             /* @__PURE__ */ t("span", { className: "text-5xl mb-2", children: "⚠️" }),
             /* @__PURE__ */ t("h3", { className: "text-xl font-bold text-white", children: "Playback Error" }),
             /* @__PURE__ */ t("p", { className: "text-zinc-400 text-sm", children: o.error }),
-            /* @__PURE__ */ t("button", { onClick: () => a.load(a.store.get().sources[a.store.get().currentSourceIndex] || { url: e || "" }, m), 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" })
+            /* @__PURE__ */ t("button", { onClick: () => n.load(n.store.get().sources[n.store.get().currentSourceIndex] || { url: e || "" }, m), 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" })
           ] }) }),
-          (!o.isPlaying && !o.isBuffering && !o.error || Y) && !o.isBuffering ? /* @__PURE__ */ t("div", { className: `absolute inset-0 flex items-center justify-center z-10 transition-opacity duration-300 pointer-events-none ${Y || !o.isPlaying ? "opacity-100" : "opacity-0"}`, children: /* @__PURE__ */ c("div", { className: "flex items-center gap-8 md:gap-16 pointer-events-auto", children: [
-            /* @__PURE__ */ t("button", { onClick: (r) => {
-              r.stopPropagation(), R(!1), A(!1), X("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 ${j.skipBtn}`, children: /* @__PURE__ */ t(Ae, { className: j.skipIcon }) }),
-            /* @__PURE__ */ t("button", { onClick: (r) => {
-              r.stopPropagation(), R(!1), A(!1), a.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 ${j.playBtn}`, children: o.isPlaying ? /* @__PURE__ */ t(Le, { className: `${j.playIcon} text-white fill-current` }) : /* @__PURE__ */ t($e, { className: `${j.playIcon} text-white ml-1 fill-current` }) }),
-            /* @__PURE__ */ t("button", { onClick: (r) => {
-              r.stopPropagation(), R(!1), A(!1), X("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 ${j.skipBtn}`, children: /* @__PURE__ */ t(Be, { className: j.skipIcon }) })
+          (!o.isPlaying && !o.isBuffering && !o.error || Z) && !o.isBuffering ? /* @__PURE__ */ t("div", { className: `absolute inset-0 flex items-center justify-center z-10 transition-opacity duration-300 pointer-events-none ${Z || !o.isPlaying ? "opacity-100" : "opacity-0"}`, children: /* @__PURE__ */ d("div", { className: "flex items-center gap-8 md:gap-16 pointer-events-auto", children: [
+            /* @__PURE__ */ t("button", { onClick: (a) => {
+              a.stopPropagation(), P(!1), B(!1), J("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 ${H.skipBtn}`, children: /* @__PURE__ */ t(Ve, { className: H.skipIcon }) }),
+            /* @__PURE__ */ t("button", { onClick: (a) => {
+              a.stopPropagation(), P(!1), B(!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 ${H.playBtn}`, children: o.isPlaying ? /* @__PURE__ */ t(Be, { className: `${H.playIcon} text-white fill-current` }) : /* @__PURE__ */ t(Ae, { className: `${H.playIcon} text-white ml-1 fill-current` }) }),
+            /* @__PURE__ */ t("button", { onClick: (a) => {
+              a.stopPropagation(), P(!1), B(!1), J("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 ${H.skipBtn}`, children: /* @__PURE__ */ t(Oe, { className: H.skipIcon }) })
           ] }) }) : null,
-          /* @__PURE__ */ c("div", { className: `absolute inset-x-0 bottom-0 z-30 transition-all duration-300 px-4 md:px-6 pb-4 md:pb-6 pt-24 bg-gradient-to-t from-black/95 via-black/70 to-transparent ${Y ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`, onClick: (r) => {
-            r.target === r.currentTarget && (R(!1), A(!1)), r.stopPropagation();
+          /* @__PURE__ */ d("div", { className: `absolute inset-x-0 bottom-0 z-30 transition-all duration-300 px-4 md:px-6 pb-4 md:pb-6 pt-24 bg-gradient-to-t from-black/95 via-black/70 to-transparent ${Z ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`, onClick: (a) => {
+            a.target === a.currentTarget && (P(!1), B(!1)), a.stopPropagation();
           }, children: [
-            /* @__PURE__ */ c(
+            /* @__PURE__ */ d(
               "div",
               {
-                ref: ie,
+                ref: se,
                 className: "relative w-full h-3 group/slider mb-3 cursor-pointer touch-none flex items-center",
-                onMouseMove: Ge,
+                onMouseMove: Je,
                 onMouseLeave: () => {
-                  xe(null), we(null);
+                  we(null), ke(null);
                 },
-                onMouseDown: Ne,
-                onTouchStart: Ne,
+                onMouseDown: Se,
+                onTouchStart: Se,
                 children: [
-                  ge !== null && /* @__PURE__ */ c("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, ${qe}%, calc(100% - 70px))` }, children: [
-                    B && /* @__PURE__ */ t("div", { className: "bg-black/90 border border-white/10 shadow-2xl overflow-hidden backdrop-blur-sm", style: { width: `${B.w * 0.5}px`, height: `${B.h * 0.5}px`, borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t("div", { style: { backgroundImage: `url("${B.url}")`, width: `${B.w}px`, height: `${B.h}px`, backgroundPosition: `-${B.x}px -${B.y}px`, backgroundRepeat: "no-repeat", transform: "scale(0.5)", transformOrigin: "top left" } }) }),
-                    /* @__PURE__ */ t("div", { className: "strata-tooltip px-2 py-0.5 text-[11px] font-bold font-mono shadow-lg tabular-nums mt-1", children: ae(ge) })
+                  xe !== null && /* @__PURE__ */ d("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, ${Qe}%, calc(100% - 70px))` }, children: [
+                    V && /* @__PURE__ */ t("div", { className: "bg-black/90 border border-white/10 shadow-2xl overflow-hidden backdrop-blur-sm", style: { width: `${V.w * 0.5}px`, height: `${V.h * 0.5}px`, borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t("div", { style: { backgroundImage: `url("${V.url}")`, width: `${V.w}px`, height: `${V.h}px`, backgroundPosition: `-${V.x}px -${V.y}px`, backgroundRepeat: "no-repeat", transform: "scale(0.5)", transformOrigin: "top left" } }) }),
+                    /* @__PURE__ */ t("div", { className: "strata-tooltip px-2 py-0.5 text-[11px] font-bold font-mono shadow-lg tabular-nums mt-1", children: ne(xe) })
                   ] }),
-                  /* @__PURE__ */ c("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((r, f) => /* @__PURE__ */ t("div", { className: "absolute top-0 bottom-0 bg-white/20", style: { left: `${r.start / o.duration * 100}%`, width: `${(r.end - r.start) / o.duration * 100}%` } }, f)),
-                    /* @__PURE__ */ t("div", { className: "absolute left-0 top-0 bottom-0 bg-[var(--accent)]", style: { width: `${(Z ? ee : o.currentTime) / o.duration * 100}%` } })
+                  /* @__PURE__ */ d("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((a, p) => /* @__PURE__ */ t("div", { className: "absolute top-0 bottom-0 bg-white/20", style: { left: `${a.start / o.duration * 100}%`, width: `${(a.end - a.start) / o.duration * 100}%` } }, p)),
+                    /* @__PURE__ */ t("div", { className: "absolute left-0 top-0 bottom-0 bg-[var(--accent)]", style: { width: `${(ee ? te : o.currentTime) / o.duration * 100}%` } })
                   ] }),
                   /* @__PURE__ */ t(
                     "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: `${(Z ? ee : o.currentTime) / o.duration * 100}%`,
+                        left: `${(ee ? te : o.currentTime) / o.duration * 100}%`,
                         borderRadius: "var(--radius-full)"
                       }
                     }
@@ -1408,16 +1854,16 @@ const ae = (d) => {
                 ]
               }
             ),
-            /* @__PURE__ */ c("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ c("div", { className: "flex items-center gap-3", children: [
-                /* @__PURE__ */ t("button", { onClick: () => a.togglePlay(), className: `strata-control-btn text-zinc-300 hover:text-white transition-colors hover:bg-white/10 focus:outline-none ${V}`, style: { borderRadius: "var(--radius)" }, children: o.isPlaying ? /* @__PURE__ */ t(Le, { className: `${M} fill-current` }) : /* @__PURE__ */ t($e, { className: `${M} fill-current` }) }),
-                /* @__PURE__ */ c("div", { className: "flex items-center gap-2 group/vol relative", onMouseEnter: () => pe(!0), onMouseLeave: () => pe(!1), children: [
-                  /* @__PURE__ */ t("button", { onClick: () => a.toggleMute(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 focus:outline-none ${V}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t(Qe, { className: M }) }),
-                  /* @__PURE__ */ t("div", { className: `relative h-8 flex items-center transition-all duration-300 ease-out overflow-hidden ${fe || he ? "w-28 opacity-100 ml-1" : "w-0 opacity-0"}`, children: /* @__PURE__ */ c("div", { ref: se, className: "relative w-full h-full flex items-center cursor-pointer px-2", onMouseDown: Ce, onTouchStart: Ce, children: [
+            /* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ d("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ t("button", { onClick: () => n.togglePlay(), className: `strata-control-btn text-zinc-300 hover:text-white transition-colors hover:bg-white/10 focus:outline-none ${F}`, style: { borderRadius: "var(--radius)" }, children: o.isPlaying ? /* @__PURE__ */ t(Be, { className: `${$} fill-current` }) : /* @__PURE__ */ t(Ae, { className: `${$} fill-current` }) }),
+                /* @__PURE__ */ d("div", { className: "flex items-center gap-2 group/vol relative", onMouseEnter: () => be(!0), onMouseLeave: () => be(!1), children: [
+                  /* @__PURE__ */ t("button", { onClick: () => n.toggleMute(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 focus:outline-none ${F}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t(Ye, { className: $ }) }),
+                  /* @__PURE__ */ t("div", { className: `relative h-8 flex items-center transition-all duration-300 ease-out overflow-hidden ${ve || pe ? "w-28 opacity-100 ml-1" : "w-0 opacity-0"}`, children: /* @__PURE__ */ d("div", { ref: ae, className: "relative w-full h-full flex items-center cursor-pointer px-2", onMouseDown: ze, onTouchStart: ze, children: [
                     /* @__PURE__ */ t("div", { className: "w-full h-1 bg-white/20 overflow-hidden", style: { borderRadius: "var(--radius-full)" }, children: /* @__PURE__ */ t("div", { className: "h-full bg-white", style: { width: `${(o.isMuted ? 0 : o.volume) * 100}%`, borderRadius: "var(--radius-full)" } }) }),
                     /* @__PURE__ */ t("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)" } })
                   ] }) }),
-                  (fe || he) && /* @__PURE__ */ t(
+                  (ve || pe) && /* @__PURE__ */ t(
                     "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",
@@ -1426,115 +1872,131 @@ const ae = (d) => {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ c("div", { className: "text-xs font-medium text-zinc-400 font-mono select-none hidden sm:block tabular-nums", children: [
-                  ae(Z ? ee : o.currentTime),
+                /* @__PURE__ */ d("div", { className: "text-xs font-medium text-zinc-400 font-mono select-none hidden sm:block tabular-nums", children: [
+                  ne(ee ? te : o.currentTime),
                   " ",
                   /* @__PURE__ */ t("span", { className: "text-zinc-600", children: "/" }),
                   " ",
-                  ae(o.duration)
+                  ne(o.duration)
                 ] })
               ] }),
-              /* @__PURE__ */ c("div", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ c("div", { className: "relative", children: [
-                  /* @__PURE__ */ t("button", { onClick: (r) => {
-                    r.stopPropagation(), A(!E), R(!1);
-                  }, className: `strata-control-btn transition-colors focus:outline-none ${V} ${E ? "text-[var(--accent)] bg-white/10" : "text-zinc-300 hover:text-white hover:bg-white/10"}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t(Qt, { className: M }) }),
-                  ce.isMounted && /* @__PURE__ */ t(fi, { tracks: o.subtitleTracks, current: o.currentSubtitle, onSelect: (r) => a.setSubtitle(r), onUpload: (r) => a.addTextTrack(r, r.name), onClose: () => A(!1), settings: o.subtitleSettings, onSettingsChange: (r) => a.updateSubtitleSettings(r), onReset: () => a.resetSubtitleSettings(), offset: o.subtitleOffset, maxHeight: Te, animationClass: ce.isVisible ? "opacity-100 translate-y-0 scale-100" : "opacity-0 translate-y-2 scale-95" })
+              /* @__PURE__ */ d("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ d("div", { className: "relative", children: [
+                  /* @__PURE__ */ t("button", { onClick: (a) => {
+                    a.stopPropagation(), B(!I), P(!1);
+                  }, className: `strata-control-btn transition-colors focus:outline-none ${F} ${I ? "text-[var(--accent)] bg-white/10" : "text-zinc-300 hover:text-white hover:bg-white/10"}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t(ti, { className: $ }) }),
+                  ue.isMounted && /* @__PURE__ */ t(
+                    wi,
+                    {
+                      tracks: o.subtitleTracks,
+                      current: o.currentSubtitle,
+                      onSelect: (a) => n.setSubtitle(a),
+                      onUpload: (a) => n.addTextTrack(a, a.name),
+                      onClose: () => B(!1),
+                      settings: o.subtitleSettings,
+                      onSettingsChange: (a) => n.updateSubtitleSettings(a),
+                      onReset: () => n.resetSubtitleSettings(),
+                      offset: o.subtitleOffset,
+                      onOffsetChange: (a) => n.setSubtitleOffset(a),
+                      maxHeight: Me,
+                      animationClass: ue.isVisible ? "opacity-100 translate-y-0 scale-100" : "opacity-0 translate-y-2 scale-95"
+                    }
+                  )
                 ] }),
-                /* @__PURE__ */ t("button", { onClick: () => a.togglePip(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 transition-colors hidden sm:block focus:outline-none ${V}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t(Wt, { className: M }) }),
-                /* @__PURE__ */ t("button", { onClick: () => a.download(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 transition-colors hidden sm:block focus:outline-none ${V}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t(Xt, { className: M }) }),
-                /* @__PURE__ */ c("div", { className: "relative", children: [
-                  /* @__PURE__ */ t("button", { onClick: (r) => {
-                    r.stopPropagation(), R(!z), A(!1), N("main");
-                  }, className: `strata-control-btn transition-all duration-300 focus:outline-none ${V} ${z ? "rotate-90 text-[var(--accent)] bg-white/10" : "text-zinc-300 hover:text-white hover:bg-white/10"}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t(Gt, { className: M }) }),
-                  le.isMounted && /* @__PURE__ */ t(He, { onClose: () => R(!1), align: "right", maxHeight: Te, className: le.isVisible ? "opacity-100 translate-y-0 scale-100" : "opacity-0 translate-y-2 scale-95", children: /* @__PURE__ */ c("div", { className: "w-full", children: [
-                    P === "main" && /* @__PURE__ */ c("div", { className: "animate-in slide-in-from-left-4 fade-in duration-200", children: [
+                /* @__PURE__ */ t("button", { onClick: () => n.togglePip(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 transition-colors hidden sm:block focus:outline-none ${F}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t(ei, { className: $ }) }),
+                /* @__PURE__ */ t("button", { onClick: () => n.download(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 transition-colors hidden sm:block focus:outline-none ${F}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t(ii, { className: $ }) }),
+                /* @__PURE__ */ d("div", { className: "relative", children: [
+                  /* @__PURE__ */ t("button", { onClick: (a) => {
+                    a.stopPropagation(), P(!E), B(!1), N("main");
+                  }, className: `strata-control-btn transition-all duration-300 focus:outline-none ${F} ${E ? "rotate-90 text-[var(--accent)] bg-white/10" : "text-zinc-300 hover:text-white hover:bg-white/10"}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t(Zt, { className: $ }) }),
+                  de.isMounted && /* @__PURE__ */ t(_e, { onClose: () => P(!1), align: "right", maxHeight: Me, className: de.isVisible ? "opacity-100 translate-y-0 scale-100" : "opacity-0 translate-y-2 scale-95", children: /* @__PURE__ */ d("div", { className: "w-full", children: [
+                    L === "main" && /* @__PURE__ */ d("div", { className: "animate-in slide-in-from-left-4 fade-in duration-200", children: [
                       /* @__PURE__ */ t("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__ */ t("span", { children: "Settings" }) }),
-                      o.sources.length > 1 && /* @__PURE__ */ t(y, { label: "Source", value: ((ze = o.sources[o.currentSourceIndex]) == null ? void 0 : ze.name) || `Source ${o.currentSourceIndex + 1}`, onClick: () => N("sources"), hasSubmenu: !0 }),
-                      /* @__PURE__ */ t(y, { label: "Speed", value: `${o.playbackRate}x`, onClick: () => N("speed"), hasSubmenu: !0 }),
-                      /* @__PURE__ */ t(y, { label: "Quality", value: o.currentQuality === -1 ? "Auto" : `${(Ee = o.qualityLevels[o.currentQuality]) == null ? void 0 : Ee.height}p`, onClick: () => N("quality"), hasSubmenu: !0 }),
-                      /* @__PURE__ */ t(y, { label: "Audio", value: ((Ie = o.audioTracks[o.currentAudioTrack]) == null ? void 0 : Ie.label) || "Default", onClick: () => N("audio"), hasSubmenu: !0 }),
-                      /* @__PURE__ */ t(y, { label: "Audio Boost", value: o.audioGain > 1 ? `${o.audioGain}x` : "Off", onClick: () => N("boost"), hasSubmenu: !0 }),
-                      /* @__PURE__ */ t(Oe, {}),
-                      /* @__PURE__ */ t(y, { label: "Watch Party", icon: /* @__PURE__ */ t(Zt, { className: "w-4 h-4" }), onClick: () => N("party"), hasSubmenu: !0 }),
-                      /* @__PURE__ */ t(y, { label: "Cast to Device", icon: /* @__PURE__ */ t(Yt, { className: "w-4 h-4" }), onClick: () => {
-                        a.requestCast(), R(!1);
+                      o.sources.length > 1 && /* @__PURE__ */ t(k, { label: "Source", value: ((Ee = o.sources[o.currentSourceIndex]) == null ? void 0 : Ee.name) || `Source ${o.currentSourceIndex + 1}`, onClick: () => N("sources"), hasSubmenu: !0 }),
+                      /* @__PURE__ */ t(k, { label: "Speed", value: `${o.playbackRate}x`, onClick: () => N("speed"), hasSubmenu: !0 }),
+                      /* @__PURE__ */ t(k, { label: "Quality", value: o.currentQuality === -1 ? "Auto" : `${(Ie = o.qualityLevels[o.currentQuality]) == null ? void 0 : Ie.height}p`, onClick: () => N("quality"), hasSubmenu: !0 }),
+                      /* @__PURE__ */ t(k, { label: "Audio", value: ((Re = o.audioTracks[o.currentAudioTrack]) == null ? void 0 : Re.label) || "Default", onClick: () => N("audio"), hasSubmenu: !0 }),
+                      /* @__PURE__ */ t(k, { label: "Audio Boost", value: o.audioGain > 1 ? `${o.audioGain}x` : "Off", onClick: () => N("boost"), hasSubmenu: !0 }),
+                      /* @__PURE__ */ t(je, {}),
+                      /* @__PURE__ */ t(k, { label: "Watch Party", icon: /* @__PURE__ */ t(ni, { className: "w-4 h-4" }), onClick: () => N("party"), hasSubmenu: !0 }),
+                      /* @__PURE__ */ t(k, { label: "Cast to Device", icon: /* @__PURE__ */ t(ri, { className: "w-4 h-4" }), onClick: () => {
+                        n.requestCast(), P(!1);
                       } }),
-                      /* @__PURE__ */ t(Oe, {}),
-                      /* @__PURE__ */ t(y, { label: "Appearance", icon: /* @__PURE__ */ t(Ue, { className: "w-4 h-4" }), onClick: () => N("appearance"), hasSubmenu: !0 })
+                      /* @__PURE__ */ t(je, {}),
+                      /* @__PURE__ */ t(k, { label: "Appearance", icon: /* @__PURE__ */ t(We, { className: "w-4 h-4" }), onClick: () => N("appearance"), hasSubmenu: !0 })
                     ] }),
-                    ["speed", "quality", "audio", "boost", "party", "appearance", "sources"].includes(P) && /* @__PURE__ */ c("div", { className: "animate-in slide-in-from-right-4 fade-in duration-200", children: [
-                      P === "sources" && /* @__PURE__ */ c($, { children: [
-                        /* @__PURE__ */ t(F, { label: "Select Source", onBack: () => N("main") }),
-                        o.sources.map((r, f) => /* @__PURE__ */ t(y, { label: r.name || `Source ${f + 1}`, value: r.type, active: o.currentSourceIndex === f, onClick: () => a.switchSource(f) }, f))
+                    ["speed", "quality", "audio", "boost", "party", "appearance", "sources"].includes(L) && /* @__PURE__ */ d("div", { className: "animate-in slide-in-from-right-4 fade-in duration-200", children: [
+                      L === "sources" && /* @__PURE__ */ d(A, { children: [
+                        /* @__PURE__ */ t(j, { label: "Select Source", onBack: () => N("main") }),
+                        o.sources.map((a, p) => /* @__PURE__ */ t(k, { label: a.name || `Source ${p + 1}`, value: a.type, active: o.currentSourceIndex === p, onClick: () => n.switchSource(p) }, p))
                       ] }),
-                      P === "speed" && /* @__PURE__ */ c($, { children: [
-                        /* @__PURE__ */ t(F, { label: "Speed", onBack: () => N("main") }),
-                        [0.5, 1, 1.5, 2].map((r) => /* @__PURE__ */ t(y, { label: `${r}x`, active: o.playbackRate === r, onClick: () => a.video.playbackRate = r }, r))
+                      L === "speed" && /* @__PURE__ */ d(A, { children: [
+                        /* @__PURE__ */ t(j, { label: "Speed", onBack: () => N("main") }),
+                        [0.5, 1, 1.5, 2].map((a) => /* @__PURE__ */ t(k, { label: `${a}x`, active: o.playbackRate === a, onClick: () => n.video.playbackRate = a }, a))
                       ] }),
-                      P === "quality" && /* @__PURE__ */ c($, { children: [
-                        /* @__PURE__ */ t(F, { label: "Quality", onBack: () => N("main") }),
-                        /* @__PURE__ */ t(y, { label: "Auto", active: o.currentQuality === -1, onClick: () => a.setQuality(-1) }),
-                        o.qualityLevels.map((r) => /* @__PURE__ */ t(y, { label: `${r.height}p`, value: `${Math.round(r.bitrate / 1e3)}k`, active: o.currentQuality === r.index, onClick: () => a.setQuality(r.index) }, r.index))
+                      L === "quality" && /* @__PURE__ */ d(A, { children: [
+                        /* @__PURE__ */ t(j, { label: "Quality", onBack: () => N("main") }),
+                        /* @__PURE__ */ t(k, { label: "Auto", active: o.currentQuality === -1, onClick: () => n.setQuality(-1) }),
+                        o.qualityLevels.map((a) => /* @__PURE__ */ t(k, { label: `${a.height}p`, value: `${Math.round(a.bitrate / 1e3)}k`, active: o.currentQuality === a.index, onClick: () => n.setQuality(a.index) }, a.index))
                       ] }),
-                      P === "audio" && /* @__PURE__ */ c($, { children: [
-                        /* @__PURE__ */ t(F, { label: "Audio Track", onBack: () => N("main") }),
+                      L === "audio" && /* @__PURE__ */ d(A, { children: [
+                        /* @__PURE__ */ t(j, { label: "Audio Track", onBack: () => N("main") }),
                         o.audioTracks.length === 0 && /* @__PURE__ */ t("div", { className: "px-4 py-3 text-zinc-500 text-xs text-center", children: "No tracks available" }),
-                        o.audioTracks.map((r) => /* @__PURE__ */ t(y, { label: r.label, value: r.language, active: o.currentAudioTrack === r.index, onClick: () => a.setAudioTrack(r.index) }, r.index))
+                        o.audioTracks.map((a) => /* @__PURE__ */ t(k, { label: a.label, value: a.language, active: o.currentAudioTrack === a.index, onClick: () => n.setAudioTrack(a.index) }, a.index))
                       ] }),
-                      P === "boost" && /* @__PURE__ */ c($, { children: [
-                        /* @__PURE__ */ t(F, { label: "Audio Boost", onBack: () => N("main") }),
-                        [1, 1.5, 2, 3].map((r) => /* @__PURE__ */ t(y, { label: r === 1 ? "Off" : `${r}x`, active: o.audioGain === r, onClick: () => a.setAudioGain(r) }, r))
+                      L === "boost" && /* @__PURE__ */ d(A, { children: [
+                        /* @__PURE__ */ t(j, { label: "Audio Boost", onBack: () => N("main") }),
+                        [1, 1.5, 2, 3].map((a) => /* @__PURE__ */ t(k, { label: a === 1 ? "Off" : `${a}x`, active: o.audioGain === a, onClick: () => n.setAudioGain(a) }, a))
                       ] }),
-                      P === "party" && /* @__PURE__ */ c($, { children: [
-                        /* @__PURE__ */ t(F, { label: "Watch Party", onBack: () => N("main") }),
-                        /* @__PURE__ */ c("div", { className: "p-4 space-y-3", children: [
+                      L === "party" && /* @__PURE__ */ d(A, { children: [
+                        /* @__PURE__ */ t(j, { label: "Watch Party", onBack: () => N("main") }),
+                        /* @__PURE__ */ d("div", { className: "p-4 space-y-3", children: [
                           /* @__PURE__ */ t("p", { className: "text-xs text-zinc-400 leading-relaxed", children: "Create a synchronized room on WatchParty.me to watch together." }),
-                          /* @__PURE__ */ t("a", { href: `https://www.watchparty.me/create?video=${encodeURIComponent(((Re = o.sources[o.currentSourceIndex]) == null ? void 0 : Re.url) || e || "")}`, 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__ */ t("a", { href: `https://www.watchparty.me/create?video=${encodeURIComponent(((Pe = o.sources[o.currentSourceIndex]) == null ? void 0 : Pe.url) || e || "")}`, 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" })
                         ] })
                       ] }),
-                      P === "appearance" && /* @__PURE__ */ c($, { children: [
-                        /* @__PURE__ */ t(F, { label: "Appearance", onBack: () => N("main") }),
-                        /* @__PURE__ */ c("div", { className: "pb-1", children: [
-                          /* @__PURE__ */ t(U, { title: "Theme", children: /* @__PURE__ */ t("div", { className: "grid grid-cols-2 gap-2 px-3", children: bi.map((r) => /* @__PURE__ */ t(
+                      L === "appearance" && /* @__PURE__ */ d(A, { children: [
+                        /* @__PURE__ */ t(j, { label: "Appearance", onBack: () => N("main") }),
+                        /* @__PURE__ */ d("div", { className: "pb-1", children: [
+                          /* @__PURE__ */ t(D, { title: "Theme", children: /* @__PURE__ */ t("div", { className: "grid grid-cols-2 gap-2 px-3", children: Ci.map((a) => /* @__PURE__ */ t(
                             "button",
                             {
-                              onClick: () => a.setAppearance({ theme: r.value, themeColor: r.color }),
-                              className: `py-2 text-xs font-bold uppercase tracking-wide transition-colors border-[length:var(--border-width)] border-white/10 ${o.theme === r.value ? "bg-[var(--accent)] text-white" : "bg-white/5 text-zinc-400 hover:text-white"}`,
+                              onClick: () => n.setAppearance({ theme: a.value, themeColor: a.color }),
+                              className: `py-2 text-xs font-bold uppercase tracking-wide transition-colors border-[length:var(--border-width)] border-white/10 ${o.theme === a.value ? "bg-[var(--accent)] text-white" : "bg-white/5 text-zinc-400 hover:text-white"}`,
                               style: { borderRadius: "var(--radius)" },
-                              children: r.label
+                              children: a.label
                             },
-                            r.value
+                            a.value
                           )) }) }),
-                          /* @__PURE__ */ t(U, { title: "Icon Size", children: /* @__PURE__ */ t("div", { className: "grid grid-cols-3 gap-1 px-3", children: ["small", "medium", "large"].map((r) => /* @__PURE__ */ t(
+                          /* @__PURE__ */ t(D, { title: "Icon Size", children: /* @__PURE__ */ t("div", { className: "grid grid-cols-3 gap-1 px-3", children: ["small", "medium", "large"].map((a) => /* @__PURE__ */ t(
                             "button",
                             {
-                              onClick: () => a.setAppearance({ iconSize: r }),
-                              className: `py-1.5 text-xs font-medium transition-colors ${o.iconSize === r ? "bg-white text-black" : "bg-white/5 text-zinc-400 hover:text-zinc-200"}`,
+                              onClick: () => n.setAppearance({ iconSize: a }),
+                              className: `py-1.5 text-xs font-medium transition-colors ${o.iconSize === a ? "bg-white text-black" : "bg-white/5 text-zinc-400 hover:text-zinc-200"}`,
                               style: { borderRadius: "var(--radius)" },
-                              children: r.charAt(0).toUpperCase() + r.slice(1)
+                              children: a.charAt(0).toUpperCase() + a.slice(1)
                             },
-                            r
+                            a
                           )) }) }),
-                          /* @__PURE__ */ c(U, { title: "Theme Color", children: [
-                            /* @__PURE__ */ t("div", { className: "grid grid-cols-6 gap-2 px-3", children: pi.map((r) => /* @__PURE__ */ t(
+                          /* @__PURE__ */ d(D, { title: "Theme Color", children: [
+                            /* @__PURE__ */ t("div", { className: "grid grid-cols-6 gap-2 px-3", children: ki.map((a) => /* @__PURE__ */ t(
                               "button",
                               {
-                                title: r.label,
-                                onClick: () => a.setAppearance({ themeColor: r.value }),
-                                className: `w-6 h-6 transition-transform hover:scale-110 ${o.themeColor === r.value ? "ring-2 ring-white scale-110" : "ring-1 ring-white/10"}`,
-                                style: { backgroundColor: r.value, borderRadius: "var(--radius-full)" },
-                                children: o.themeColor === r.value && /* @__PURE__ */ t(De, { className: "w-3 h-3 text-white mx-auto stroke-[3]" })
+                                title: a.label,
+                                onClick: () => n.setAppearance({ themeColor: a.value }),
+                                className: `w-6 h-6 transition-transform hover:scale-110 ${o.themeColor === a.value ? "ring-2 ring-white scale-110" : "ring-1 ring-white/10"}`,
+                                style: { backgroundColor: a.value, borderRadius: "var(--radius-full)" },
+                                children: o.themeColor === a.value && /* @__PURE__ */ t(Ge, { className: "w-3 h-3 text-white mx-auto stroke-[3]" })
                               },
-                              r.value
+                              a.value
                             )) }),
-                            /* @__PURE__ */ t("div", { className: "px-3 pt-4", children: /* @__PURE__ */ c("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__ */ t("div", { className: "px-3 pt-4", children: /* @__PURE__ */ d("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__ */ t("div", { className: "relative w-6 h-6 overflow-hidden ring-1 ring-white/20", style: { borderRadius: "var(--radius-full)" }, children: /* @__PURE__ */ t(
                                 "input",
                                 {
                                   type: "color",
                                   value: o.themeColor,
-                                  onChange: (r) => a.setAppearance({ themeColor: r.target.value }),
+                                  onChange: (a) => n.setAppearance({ themeColor: a.target.value }),
                                   className: "absolute inset-[-4px] w-[150%] h-[150%] cursor-pointer p-0 border-0"
                                 }
                               ) }),
@@ -1547,7 +2009,7 @@ const ae = (d) => {
                     ] })
                   ] }) })
                 ] }),
-                /* @__PURE__ */ t("button", { onClick: () => a.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 ${V}`, style: { borderRadius: "var(--radius)" }, children: o.isFullscreen ? /* @__PURE__ */ t(_t, { className: M }) : /* @__PURE__ */ t(qt, { className: M }) })
+                /* @__PURE__ */ t("button", { onClick: () => 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 ${F}`, style: { borderRadius: "var(--radius)" }, children: o.isFullscreen ? /* @__PURE__ */ t(Yt, { className: $ }) : /* @__PURE__ */ t(Kt, { className: $ }) })
               ] })
             ] })
           ] })
@@ -1555,21 +2017,21 @@ const ae = (d) => {
       ]
     }
   );
-}, Ci = (d, e) => {
-  const i = it(d);
-  return i.render(Pe.createElement(Fe, e)), {
+}, Ri = (c, e) => {
+  const i = nt(c);
+  return i.render(Le.createElement(Fe, e)), {
     unmount: () => {
       i.unmount();
     },
     update: (s) => {
-      i.render(Pe.createElement(Fe, { ...e, ...s }));
+      i.render(Le.createElement(Fe, { ...e, ...s }));
     }
   };
 };
 export {
-  Ft as HlsPlugin,
-  Ot as StrataCore,
+  ut as HlsPlugin,
+  dt as StrataCore,
   Fe as StrataPlayer,
-  Ci as mountStrataPlayer
+  Ri as mountStrataPlayer
 };
 //# sourceMappingURL=strataplayer.es.js.map