@glitchlab/vue-video-player 1.5.0 → 1.6.1

package/dist/index.mjs

@@ -1,27 +1,27 @@
-import { defineComponent as I, ref as y, onMounted as He, watch as R, onBeforeUnmount as ne, openBlock as d, createElementBlock as f, normalizeClass as w, renderSlot as Fe, createElementVNode as r, computed as T, createVNode as Z, toDisplayString as U, Fragment as ie, renderList as ue, createCommentVNode as M, createBlock as z, normalizeStyle as re, withDirectives as We, vShow as ze, unref as te, withCtx as Ye } from "vue";
-import ee from "hls.js";
-function Ve(t, a, n) {
-  const e = t == null ? void 0 : t.trim();
-  if (e) return e;
-  if (a) {
+import { defineComponent as N, ref as g, onMounted as Be, watch as H, onBeforeUnmount as oe, openBlock as r, createElementBlock as c, normalizeClass as L, renderSlot as Ue, createElementVNode as o, computed as I, createVNode as O, toDisplayString as Z, Fragment as ae, renderList as pe, createCommentVNode as x, createBlock as J, unref as se, normalizeStyle as ce, withDirectives as ot, vShow as rt, withCtx as it } from "vue";
+import le from "hls.js";
+function De(e, l, t) {
+  const n = e == null ? void 0 : e.trim();
+  if (n) return n;
+  if (l) {
     try {
-      const o = new Intl.DisplayNames(void 0, { type: "language" }).of(a);
-      if (o && o !== a) return o;
+      const v = new Intl.DisplayNames(void 0, { type: "language" }).of(l);
+      if (v && v !== l) return v;
     } catch {
     }
-    return a;
+    return l;
   }
-  return `Audio ${n + 1}`;
+  return `Audio ${t + 1}`;
 }
-const Ke = {
+const ut = {
   index: -1,
   height: 0,
   label: "Auto"
 };
-function Xe(t, a) {
-  return t > 0 ? `${t}p` : `Level ${a + 1}`;
+function ct(e, l) {
+  return e > 0 ? `${e}p` : `Level ${l + 1}`;
 }
-const Je = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "poster"], Ge = /* @__PURE__ */ I({
+const dt = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "poster"], vt = /* @__PURE__ */ N({
   __name: "HLSPlayer",
   props: {
     src: {},
@@ -38,148 +38,153 @@ const Je = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
     audioTrackIndex: { default: -1 },
     qualityLevelIndex: { default: -1 }
   },
-  emits: ["play", "pause", "ended", "audio-tracks", "quality-levels", "current-level"],
-  setup(t, { expose: a, emit: n }) {
-    const e = t, c = n, o = y(null), h = y(null);
-    let g, E;
-    const _ = globalThis.window !== void 0 && ee.isSupported(), $ = (p) => !!e.isHls || _ && p.endsWith(".m3u8");
-    function S() {
-      E == null || E(), E = void 0, g == null || g(), g = void 0, h.value && (h.value.destroy(), h.value = null);
-      const p = o.value;
-      if (p) {
-        for (p.pause(), p.removeAttribute("src"); p.firstChild; ) p.firstChild.remove();
-        p.load(), c("audio-tracks", []), c("quality-levels", []), c("current-level", -1);
+  emits: ["play", "pause", "ended", "fatal-error", "live-change", "audio-tracks", "quality-levels", "current-level"],
+  setup(e, { expose: l, emit: t }) {
+    const n = e, a = t, v = g(null), d = g(null);
+    let h, E;
+    const S = globalThis.window !== void 0 && le.isSupported(), A = (f) => !!n.isHls || S && f.endsWith(".m3u8");
+    function P() {
+      E == null || E(), E = void 0, h == null || h(), h = void 0, d.value && (d.value.destroy(), d.value = null);
+      const f = v.value;
+      if (f) {
+        for (f.pause(), f.removeAttribute("src"); f.firstChild; ) f.firstChild.remove();
+        f.load(), a("audio-tracks", []), a("quality-levels", []), a("current-level", -1), a("live-change", !1);
       }
     }
-    function b(p) {
-      var Y, A, J;
-      const x = o.value;
-      if (!x || !p) return;
-      S();
-      const B = () => {
-        e.autoPlay && x.play().catch(() => {
+    function w(f) {
+      var j, K, re;
+      const M = v.value;
+      if (!M || !f) return;
+      P();
+      const z = () => {
+        n.autoPlay && M.play().catch(() => {
         });
       };
-      if ($(p)) {
-        const k = new ee(e.hlsConfig);
-        h.value = k;
-        const N = () => {
-          const H = k.audioTracks.map((V, O) => ({
-            index: O,
-            label: Ve(V.name, V.lang, O),
-            lang: V.lang || void 0
+      if (A(f)) {
+        const C = new le(n.hlsConfig);
+        d.value = C;
+        const W = () => {
+          const F = C.audioTracks.map((B, R) => ({
+            index: R,
+            label: De(B.name, B.lang, R),
+            lang: B.lang || void 0
           }));
-          c("audio-tracks", H);
-        }, D = () => {
-          const H = k.levels.map((V, O) => ({
-            index: O,
-            height: V.height || 0,
-            label: Xe(V.height || 0, O)
+          a("audio-tracks", F);
+        }, V = () => {
+          const F = C.levels.map((B, R) => ({
+            index: R,
+            height: B.height || 0,
+            label: ct(B.height || 0, R)
           }));
-          c("quality-levels", H);
+          a("quality-levels", F);
         };
-        k.on(ee.Events.MANIFEST_PARSED, B), k.on(ee.Events.MANIFEST_PARSED, D), k.on(ee.Events.LEVELS_UPDATED, D), k.on(ee.Events.LEVEL_SWITCHED, (H, V) => {
-          c("current-level", V.level);
-        }), k.on(ee.Events.AUDIO_TRACKS_UPDATED, N), k.on(ee.Events.AUDIO_TRACK_SWITCHED, N), k.on(ee.Events.ERROR, (H, V) => {
-          V.fatal && (k.destroy(), h.value = null);
-        }), k.attachMedia(x), k.loadSource(p);
+        C.on(le.Events.MANIFEST_PARSED, z), C.on(le.Events.MANIFEST_PARSED, V), C.on(le.Events.LEVELS_UPDATED, V), C.on(le.Events.LEVEL_SWITCHED, (F, B) => {
+          a("current-level", B.level);
+        }), C.on(le.Events.AUDIO_TRACKS_UPDATED, W), C.on(le.Events.AUDIO_TRACK_SWITCHED, W), C.on(le.Events.LEVEL_LOADED, (F, B) => {
+          var R;
+          a("live-change", !!((R = B.details) != null && R.live));
+        });
+        let D = !1;
+        C.on(le.Events.ERROR, (F, B) => {
+          B.fatal && (B.type === le.ErrorTypes.NETWORK_ERROR && !D ? (D = !0, C.startLoad()) : B.type === le.ErrorTypes.MEDIA_ERROR && !D ? (D = !0, C.recoverMediaError()) : (C.destroy(), d.value = null, a("fatal-error")));
+        }), C.attachMedia(M), C.loadSource(f);
       } else {
-        x.src = p, x.load(), x.addEventListener("loadedmetadata", B, { once: !0 }), E = () => {
-          x.removeEventListener("loadedmetadata", B);
+        M.src = f, M.load(), M.addEventListener("loadedmetadata", z, { once: !0 }), E = () => {
+          M.removeEventListener("loadedmetadata", z);
         };
-        const k = x.audioTracks;
-        if (k) {
-          const N = () => {
-            const D = [];
-            for (let H = 0; H < k.length; H++) {
-              const V = k[H];
-              D.push({
-                index: H,
-                label: Ve(V.label, V.language, H),
-                lang: V.language || void 0
+        const C = M.audioTracks;
+        if (C) {
+          const W = () => {
+            const V = [];
+            for (let D = 0; D < C.length; D++) {
+              const F = C[D];
+              V.push({
+                index: D,
+                label: De(F.label, F.language, D),
+                lang: F.language || void 0
               });
             }
-            c("audio-tracks", D);
+            a("audio-tracks", V);
           };
-          (Y = k.addEventListener) == null || Y.call(k, "addtrack", N), (A = k.addEventListener) == null || A.call(k, "removetrack", N), (J = k.addEventListener) == null || J.call(k, "change", N), k.length > 0 && N(), g = () => {
-            var D, H, V;
-            (D = k.removeEventListener) == null || D.call(k, "addtrack", N), (H = k.removeEventListener) == null || H.call(k, "removetrack", N), (V = k.removeEventListener) == null || V.call(k, "change", N);
+          (j = C.addEventListener) == null || j.call(C, "addtrack", W), (K = C.addEventListener) == null || K.call(C, "removetrack", W), (re = C.addEventListener) == null || re.call(C, "change", W), C.length > 0 && W(), h = () => {
+            var V, D, F;
+            (V = C.removeEventListener) == null || V.call(C, "addtrack", W), (D = C.removeEventListener) == null || D.call(C, "removetrack", W), (F = C.removeEventListener) == null || F.call(C, "change", W);
           };
         }
       }
     }
-    function m(p) {
-      var Y;
-      if (p == null || p < 0) return;
-      const x = h.value;
-      if (x) {
-        x.audioTrack !== p && (x.audioTrack = p);
+    function $(f) {
+      var j;
+      if (f == null || f < 0) return;
+      const M = d.value;
+      if (M) {
+        M.audioTrack !== f && (M.audioTrack = f);
         return;
       }
-      const B = (Y = o.value) == null ? void 0 : Y.audioTracks;
-      if (B)
-        for (let A = 0; A < B.length; A++)
-          B[A].enabled = A === p;
-    }
-    function C(p) {
-      if (p == null) return;
-      const x = h.value;
-      x && x.currentLevel !== p && (x.currentLevel = p);
-    }
-    return He(() => {
-      e.src && b(e.src);
-    }), R(
-      () => e.src,
-      (p) => {
-        p && b(p);
+      const z = (j = v.value) == null ? void 0 : j.audioTracks;
+      if (z)
+        for (let K = 0; K < z.length; K++)
+          z[K].enabled = K === f;
+    }
+    function T(f) {
+      if (f == null) return;
+      const M = d.value;
+      M && M.currentLevel !== f && (M.currentLevel = f);
+    }
+    return Be(() => {
+      n.src && w(n.src);
+    }), H(
+      () => n.src,
+      (f) => {
+        f && w(f);
       }
-    ), R(
-      () => e.audioTrackIndex,
-      (p) => m(p)
-    ), R(
-      () => e.qualityLevelIndex,
-      (p) => C(p)
-    ), ne(S), a({ videoEl: o }), (p, x) => (d(), f("video", {
+    ), H(
+      () => n.audioTrackIndex,
+      (f) => $(f)
+    ), H(
+      () => n.qualityLevelIndex,
+      (f) => T(f)
+    ), oe(P), l({ videoEl: v }), (f, M) => (r(), c("video", {
       ref_key: "videoEl",
-      ref: o,
-      muted: t.muted,
-      loop: t.loop,
-      controls: t.controls,
-      autoplay: t.autoPlay,
-      playsinline: t.playsInline,
-      preload: t.preload,
-      poster: t.poster,
-      class: w(e.class),
-      onPlay: x[0] || (x[0] = (B) => c("play")),
-      onPause: x[1] || (x[1] = (B) => c("pause")),
-      onEnded: x[2] || (x[2] = (B) => c("ended"))
+      ref: v,
+      muted: e.muted,
+      loop: e.loop,
+      controls: e.controls,
+      autoplay: e.autoPlay,
+      playsinline: e.playsInline,
+      preload: e.preload,
+      poster: e.poster,
+      class: L(n.class),
+      onPlay: M[0] || (M[0] = (z) => a("play")),
+      onPause: M[1] || (M[1] = (z) => a("pause")),
+      onEnded: M[2] || (M[2] = (z) => a("ended"))
     }, [
-      Fe(p.$slots, "default")
-    ], 42, Je));
+      Ue(f.$slots, "default")
+    ], 42, dt));
   }
-}), et = { name: "IconAudio" }, tt = /* @__PURE__ */ I({
-  ...et,
+}), pt = { name: "IconAudio" }, ft = /* @__PURE__ */ N({
+  ...pt,
   props: {
     class: {}
   },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
       width: "16",
       height: "16",
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, [...e[0] || (e[0] = [
-      r("path", {
+    }, [...n[0] || (n[0] = [
+      o("path", {
         d: "M3 14V10C3 9.44772 3.44772 9 4 9H6.58579C6.851 9 7.10536 8.89464 7.29289 8.70711L11.2929 4.70711C11.9229 4.07714 13 4.52331 13 5.41421V18.5858C13 19.4767 11.9229 19.9229 11.2929 19.2929L7.29289 15.2929C7.10536 15.1054 6.851 15 6.58579 15H4C3.44772 15 3 14.5523 3 14Z",
         stroke: "currentColor",
         "stroke-width": "1.5",
         "stroke-linejoin": "round"
       }, null, -1),
-      r("path", {
+      o("path", {
         d: "M16.5 8C17.5 9 18 10.5 18 12C18 13.5 17.5 15 16.5 16M19 5.5C20.5 7 21.5 9.5 21.5 12C21.5 14.5 20.5 17 19 18.5",
         stroke: "currentColor",
         "stroke-width": "1.5",
@@ -187,23 +192,23 @@ const Je = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), nt = { name: "IconChevron" }, Re = /* @__PURE__ */ I({
-  ...nt,
+}), mt = { name: "IconChevron" }, Ze = /* @__PURE__ */ N({
+  ...mt,
   props: {
     class: {}
   },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
       width: "12",
       height: "12",
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, [...e[0] || (e[0] = [
-      r("path", {
+    }, [...n[0] || (n[0] = [
+      o("path", {
         d: "M6 9L12 15L18 9",
         stroke: "currentColor",
         "stroke-width": "2",
@@ -212,93 +217,93 @@ const Je = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), lt = ["aria-expanded"], at = { class: "gvp-audio-label" }, ot = {
+}), gt = ["aria-expanded"], ht = { class: "gvp-audio-label" }, kt = {
   key: 0,
   class: "gvp-audio-menu",
   role: "listbox",
   "aria-label": "Audio tracks"
-}, st = ["aria-selected", "onClick"], rt = /* @__PURE__ */ I({
+}, yt = ["aria-selected", "onClick"], bt = /* @__PURE__ */ N({
   __name: "AudioTrackSwitcher",
   props: {
     tracks: {},
     activeIndex: {}
   },
   emits: ["select"],
-  setup(t, { emit: a }) {
-    const n = t, e = a, c = y(!1), o = y(null), h = T(
-      () => n.tracks.find(($) => $.index === n.activeIndex) ?? n.tracks[0]
+  setup(e, { emit: l }) {
+    const t = e, n = l, a = g(!1), v = g(null), d = I(
+      () => t.tracks.find((A) => A.index === t.activeIndex) ?? t.tracks[0]
     );
-    function g($) {
-      o.value && !o.value.contains($.target) && (c.value = !1);
+    function h(A) {
+      v.value && !v.value.contains(A.target) && (a.value = !1);
     }
-    function E($) {
-      $.key === "Escape" && (c.value = !1);
+    function E(A) {
+      A.key === "Escape" && (a.value = !1);
     }
-    R(c, ($) => {
-      $ ? (document.addEventListener("mousedown", g), document.addEventListener("keydown", E)) : (document.removeEventListener("mousedown", g), document.removeEventListener("keydown", E));
-    }), ne(() => {
-      document.removeEventListener("mousedown", g), document.removeEventListener("keydown", E);
+    H(a, (A) => {
+      A ? (document.addEventListener("mousedown", h), document.addEventListener("keydown", E)) : (document.removeEventListener("mousedown", h), document.removeEventListener("keydown", E));
+    }), oe(() => {
+      document.removeEventListener("mousedown", h), document.removeEventListener("keydown", E);
     });
-    function _($) {
-      e("select", $), c.value = !1;
+    function S(A) {
+      n("select", A), a.value = !1;
     }
-    return ($, S) => {
-      var b;
-      return d(), f("div", {
+    return (A, P) => {
+      var w;
+      return r(), c("div", {
         ref_key: "rootEl",
-        ref: o,
+        ref: v,
         class: "gvp-audio"
       }, [
-        r("button", {
+        o("button", {
           type: "button",
           class: "gvp-audio-btn",
           "aria-haspopup": "listbox",
-          "aria-expanded": c.value,
+          "aria-expanded": a.value,
           "aria-label": "Audio track",
-          onClick: S[0] || (S[0] = (m) => c.value = !c.value)
+          onClick: P[0] || (P[0] = ($) => a.value = !a.value)
         }, [
-          Z(tt),
-          r("span", at, U((b = h.value) == null ? void 0 : b.label), 1),
-          Z(Re)
-        ], 8, lt),
-        c.value ? (d(), f("ul", ot, [
-          (d(!0), f(ie, null, ue(t.tracks, (m) => (d(), f("li", {
-            key: m.index
+          O(ft),
+          o("span", ht, Z((w = d.value) == null ? void 0 : w.label), 1),
+          O(Ze)
+        ], 8, gt),
+        a.value ? (r(), c("ul", kt, [
+          (r(!0), c(ae, null, pe(e.tracks, ($) => (r(), c("li", {
+            key: $.index
           }, [
-            r("button", {
+            o("button", {
               type: "button",
               role: "option",
-              "aria-selected": m.index === t.activeIndex,
-              class: w(["gvp-audio-menu-item", { "is-active": m.index === t.activeIndex }]),
-              onClick: (C) => _(m.index)
-            }, U(m.label), 11, st)
+              "aria-selected": $.index === e.activeIndex,
+              class: L(["gvp-audio-menu-item", { "is-active": $.index === e.activeIndex }]),
+              onClick: (T) => S($.index)
+            }, Z($.label), 11, yt)
           ]))), 128))
-        ])) : M("", !0)
+        ])) : x("", !0)
       ], 512);
     };
   }
-}), it = { name: "IconSpeed" }, Oe = /* @__PURE__ */ I({
-  ...it,
+}), wt = { name: "IconSpeed" }, xt = /* @__PURE__ */ N({
+  ...wt,
   props: {
     class: {}
   },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
       width: "16",
       height: "16",
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, [...e[0] || (e[0] = [
-      r("path", {
+    }, [...n[0] || (n[0] = [
+      o("path", {
         d: "M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z",
         stroke: "currentColor",
         "stroke-width": "1.5"
       }, null, -1),
-      r("path", {
+      o("path", {
         d: "M12 8V12L14.5 14.5",
         stroke: "currentColor",
         "stroke-width": "1.5",
@@ -307,80 +312,80 @@ const Je = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), ut = ["aria-expanded"], ct = { class: "gvp-speed-label" }, dt = {
+}), Ct = ["aria-expanded"], Lt = { class: "gvp-speed-label" }, $t = {
   key: 0,
   class: "gvp-speed-menu",
   role: "listbox",
   "aria-label": "Playback speed"
-}, vt = ["aria-selected", "onClick"], pt = /* @__PURE__ */ I({
+}, Et = ["aria-selected", "onClick"], _t = /* @__PURE__ */ N({
   __name: "SpeedSwitcher",
   props: {
     speed: {}
   },
   emits: ["select"],
-  setup(t, { emit: a }) {
-    const n = [0.5, 0.75, 1, 1.25, 1.5, 2], e = a, c = y(!1), o = y(null);
-    function h(_) {
-      o.value && !o.value.contains(_.target) && (c.value = !1);
-    }
-    function g(_) {
-      _.key === "Escape" && (c.value = !1);
-    }
-    R(c, (_) => {
-      _ ? (document.addEventListener("mousedown", h), document.addEventListener("keydown", g)) : (document.removeEventListener("mousedown", h), document.removeEventListener("keydown", g));
-    }), ne(() => {
-      document.removeEventListener("mousedown", h), document.removeEventListener("keydown", g);
+  setup(e, { emit: l }) {
+    const t = [0.5, 0.75, 1, 1.25, 1.5, 2], n = l, a = g(!1), v = g(null);
+    function d(S) {
+      v.value && !v.value.contains(S.target) && (a.value = !1);
+    }
+    function h(S) {
+      S.key === "Escape" && (a.value = !1);
+    }
+    H(a, (S) => {
+      S ? (document.addEventListener("mousedown", d), document.addEventListener("keydown", h)) : (document.removeEventListener("mousedown", d), document.removeEventListener("keydown", h));
+    }), oe(() => {
+      document.removeEventListener("mousedown", d), document.removeEventListener("keydown", h);
     });
-    function E(_) {
-      e("select", _), c.value = !1;
+    function E(S) {
+      n("select", S), a.value = !1;
     }
-    return (_, $) => (d(), f("div", {
+    return (S, A) => (r(), c("div", {
       ref_key: "rootEl",
-      ref: o,
+      ref: v,
       class: "gvp-speed"
     }, [
-      r("button", {
+      o("button", {
         type: "button",
         class: "gvp-speed-btn",
         "aria-haspopup": "listbox",
-        "aria-expanded": c.value,
+        "aria-expanded": a.value,
         "aria-label": "`Playback speed: ${speed === 1 ? '1×' : speed + '×'}`",
-        onClick: $[0] || ($[0] = (S) => c.value = !c.value)
+        onClick: A[0] || (A[0] = (P) => a.value = !a.value)
       }, [
-        Z(Oe),
-        r("span", ct, U(t.speed === 1 ? "1×" : `${t.speed}×`), 1),
-        Z(Re)
-      ], 8, ut),
-      c.value ? (d(), f("ul", dt, [
-        (d(), f(ie, null, ue(n, (S) => r("li", { key: S }, [
-          r("button", {
+        O(xt),
+        o("span", Lt, Z(e.speed === 1 ? "1×" : `${e.speed}×`), 1),
+        O(Ze)
+      ], 8, Ct),
+      a.value ? (r(), c("ul", $t, [
+        (r(), c(ae, null, pe(t, (P) => o("li", { key: P }, [
+          o("button", {
             type: "button",
             role: "option",
-            "aria-selected": S === t.speed,
-            class: w(["gvp-speed-menu-item", { "is-active": S === t.speed }]),
-            onClick: (b) => E(S)
-          }, U(S === 1 ? "Normal" : `${S}×`), 11, vt)
+            "aria-selected": P === e.speed,
+            class: L(["gvp-speed-menu-item", { "is-active": P === e.speed }]),
+            onClick: (w) => E(P)
+          }, Z(P === 1 ? "Normal" : `${P}×`), 11, Et)
         ])), 64))
-      ])) : M("", !0)
+      ])) : x("", !0)
     ], 512));
   }
-}), ft = { name: "IconCaptions" }, Ue = /* @__PURE__ */ I({
-  ...ft,
+}), Pt = { name: "IconCaptions" }, Tt = /* @__PURE__ */ N({
+  ...Pt,
   props: {
     class: {}
   },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
       width: "18",
       height: "18",
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, [...e[0] || (e[0] = [
-      r("rect", {
+    }, [...n[0] || (n[0] = [
+      o("rect", {
         x: "2",
         y: "5",
         width: "20",
@@ -389,7 +394,7 @@ const Je = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
         stroke: "currentColor",
         "stroke-width": "1.5"
       }, null, -1),
-      r("path", {
+      o("path", {
         d: "M7 12H11M13 12H17M7 15H9M11 15H13M15 15H17",
         stroke: "currentColor",
         "stroke-width": "1.5",
@@ -397,128 +402,128 @@ const Je = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), mt = ["aria-expanded", "aria-pressed"], ht = {
+}), Mt = ["aria-expanded", "aria-pressed"], It = {
   key: 0,
   class: "gvp-captions-menu",
   role: "listbox",
   "aria-label": "Captions"
-}, gt = ["aria-selected"], kt = ["aria-selected", "onClick"], yt = /* @__PURE__ */ I({
+}, St = ["aria-selected"], At = ["aria-selected", "onClick"], Nt = /* @__PURE__ */ N({
   __name: "CaptionsSwitcher",
   props: {
     video: {}
   },
-  setup(t) {
-    const a = t, n = y([]), e = y(-1), c = y(!1), o = y(null);
-    function h(b) {
-      const m = [];
-      for (let p = 0; p < b.length; p++) {
-        const x = b[p];
-        (x.kind === "subtitles" || x.kind === "captions") && m.push({ index: p, label: x.label || x.language || `Track ${p + 1}` });
+  setup(e) {
+    const l = e, t = g([]), n = g(-1), a = g(!1), v = g(null);
+    function d(w) {
+      const $ = [];
+      for (let f = 0; f < w.length; f++) {
+        const M = w[f];
+        (M.kind === "subtitles" || M.kind === "captions") && $.push({ index: f, label: M.label || M.language || `Track ${f + 1}` });
       }
-      n.value = m;
-      let C = -1;
-      for (let p = 0; p < b.length; p++)
-        if (b[p].mode === "showing") {
-          C = p;
+      t.value = $;
+      let T = -1;
+      for (let f = 0; f < w.length; f++)
+        if (w[f].mode === "showing") {
+          T = f;
           break;
         }
-      e.value = C;
+      n.value = T;
     }
-    let g = null;
-    R(() => a.video, (b) => {
-      if (g == null || g(), g = null, !b) {
-        n.value = [], e.value = -1;
+    let h = null;
+    H(() => l.video, (w) => {
+      if (h == null || h(), h = null, !w) {
+        t.value = [], n.value = -1;
         return;
       }
-      const m = b.textTracks;
-      h(m);
-      const C = () => h(m);
-      typeof m.addEventListener == "function" && (m.addEventListener("addtrack", C), m.addEventListener("removetrack", C), m.addEventListener("change", C), g = () => {
-        m.removeEventListener("addtrack", C), m.removeEventListener("removetrack", C), m.removeEventListener("change", C);
+      const $ = w.textTracks;
+      d($);
+      const T = () => d($);
+      typeof $.addEventListener == "function" && ($.addEventListener("addtrack", T), $.addEventListener("removetrack", T), $.addEventListener("change", T), h = () => {
+        $.removeEventListener("addtrack", T), $.removeEventListener("removetrack", T), $.removeEventListener("change", T);
       });
-    }, { immediate: !0 }), ne(() => {
-      g == null || g(), document.removeEventListener("mousedown", E), document.removeEventListener("keydown", _);
+    }, { immediate: !0 }), oe(() => {
+      h == null || h(), document.removeEventListener("mousedown", E), document.removeEventListener("keydown", S);
     });
-    function E(b) {
-      o.value && !o.value.contains(b.target) && (c.value = !1);
+    function E(w) {
+      v.value && !v.value.contains(w.target) && (a.value = !1);
     }
-    function _(b) {
-      b.key === "Escape" && (c.value = !1);
+    function S(w) {
+      w.key === "Escape" && (a.value = !1);
     }
-    R(c, (b) => {
-      b ? (document.addEventListener("mousedown", E), document.addEventListener("keydown", _)) : (document.removeEventListener("mousedown", E), document.removeEventListener("keydown", _));
+    H(a, (w) => {
+      w ? (document.addEventListener("mousedown", E), document.addEventListener("keydown", S)) : (document.removeEventListener("mousedown", E), document.removeEventListener("keydown", S));
     });
-    function $() {
-      if (!a.video) return;
-      const b = a.video.textTracks;
-      for (let m = 0; m < b.length; m++) b[m].mode = "hidden";
-      e.value = -1, c.value = !1;
-    }
-    function S(b) {
-      if (!a.video) return;
-      const m = a.video.textTracks;
-      for (let C = 0; C < m.length; C++)
-        m[C].mode = C === b ? "showing" : "hidden";
-      e.value = b, c.value = !1;
-    }
-    return (b, m) => n.value.length > 0 ? (d(), f("div", {
+    function A() {
+      if (!l.video) return;
+      const w = l.video.textTracks;
+      for (let $ = 0; $ < w.length; $++) w[$].mode = "hidden";
+      n.value = -1, a.value = !1;
+    }
+    function P(w) {
+      if (!l.video) return;
+      const $ = l.video.textTracks;
+      for (let T = 0; T < $.length; T++)
+        $[T].mode = T === w ? "showing" : "hidden";
+      n.value = w, a.value = !1;
+    }
+    return (w, $) => t.value.length > 0 ? (r(), c("div", {
       key: 0,
       ref_key: "rootEl",
-      ref: o,
+      ref: v,
       class: "gvp-captions"
     }, [
-      r("button", {
+      o("button", {
         type: "button",
-        class: w(["gvp-captions-btn", { "is-active": e.value >= 0 }]),
+        class: L(["gvp-captions-btn", { "is-active": n.value >= 0 }]),
         "aria-haspopup": "listbox",
-        "aria-expanded": c.value,
-        "aria-pressed": e.value >= 0,
+        "aria-expanded": a.value,
+        "aria-pressed": n.value >= 0,
         "aria-label": "Captions",
-        onClick: m[0] || (m[0] = (C) => c.value = !c.value)
+        onClick: $[0] || ($[0] = (T) => a.value = !a.value)
       }, [
-        Z(Ue)
-      ], 10, mt),
-      c.value ? (d(), f("ul", ht, [
-        r("li", null, [
-          r("button", {
+        O(Tt)
+      ], 10, Mt),
+      a.value ? (r(), c("ul", It, [
+        o("li", null, [
+          o("button", {
             type: "button",
             role: "option",
-            "aria-selected": e.value === -1,
-            class: w(["gvp-captions-menu-item", { "is-active": e.value === -1 }]),
-            onClick: $
-          }, " Off ", 10, gt)
+            "aria-selected": n.value === -1,
+            class: L(["gvp-captions-menu-item", { "is-active": n.value === -1 }]),
+            onClick: A
+          }, " Off ", 10, St)
         ]),
-        (d(!0), f(ie, null, ue(n.value, (C) => (d(), f("li", {
-          key: C.index
+        (r(!0), c(ae, null, pe(t.value, (T) => (r(), c("li", {
+          key: T.index
         }, [
-          r("button", {
+          o("button", {
             type: "button",
             role: "option",
-            "aria-selected": C.index === e.value,
-            class: w(["gvp-captions-menu-item", { "is-active": C.index === e.value }]),
-            onClick: (p) => S(C.index)
-          }, U(C.label), 11, kt)
+            "aria-selected": T.index === n.value,
+            class: L(["gvp-captions-menu-item", { "is-active": T.index === n.value }]),
+            onClick: (f) => P(T.index)
+          }, Z(T.label), 11, At)
         ]))), 128))
-      ])) : M("", !0)
-    ], 512)) : M("", !0);
+      ])) : x("", !0)
+    ], 512)) : x("", !0);
   }
-}), wt = { name: "IconPause" }, bt = /* @__PURE__ */ I({
-  ...wt,
+}), Bt = { name: "IconPause" }, Ht = /* @__PURE__ */ N({
+  ...Bt,
   props: {
     class: {}
   },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
       width: "16",
       height: "16",
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, [...e[0] || (e[0] = [
-      r("rect", {
+    }, [...n[0] || (n[0] = [
+      o("rect", {
         x: "6",
         y: "5",
         width: "4",
@@ -526,7 +531,7 @@ const Je = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
         rx: "1",
         fill: "currentColor"
       }, null, -1),
-      r("rect", {
+      o("rect", {
         x: "14",
         y: "5",
         width: "4",
@@ -536,49 +541,49 @@ const Je = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), Ct = { name: "IconPlaySolid" }, xt = /* @__PURE__ */ I({
-  ...Ct,
+}), Vt = { name: "IconPlaySolid" }, Rt = /* @__PURE__ */ N({
+  ...Vt,
   props: {
     class: {}
   },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
       width: "16",
       height: "16",
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, [...e[0] || (e[0] = [
-      r("path", {
+    }, [...n[0] || (n[0] = [
+      o("path", {
         d: "M7 5.5V18.5C7 19.2659 7.84856 19.7261 8.4899 19.3071L19.0801 12.4014C19.6644 12.0204 19.6644 11.9796 19.0801 11.5986L8.4899 4.69288C7.84856 4.27388 7 4.73408 7 5.5Z",
         fill: "currentColor"
       }, null, -1)
     ])], 2));
   }
-}), Lt = { name: "IconPrev" }, Et = /* @__PURE__ */ I({
-  ...Lt,
+}), Dt = { name: "IconPrev" }, Ft = /* @__PURE__ */ N({
+  ...Dt,
   props: {
     class: {}
   },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
       width: "16",
       height: "16",
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, [...e[0] || (e[0] = [
-      r("path", {
+    }, [...n[0] || (n[0] = [
+      o("path", {
         d: "M16.5 18.5V5.5C16.5 4.73408 15.6514 4.27388 15.0101 4.69288L6.91993 9.98432C6.33563 10.3653 6.33563 11.0347 6.91993 11.4157L15.0101 16.7071C15.6514 17.1261 16.5 16.6659 16.5 15.9V18.5Z",
         fill: "currentColor"
       }, null, -1),
-      r("path", {
+      o("path", {
         d: "M6 5V19",
         stroke: "currentColor",
         "stroke-width": "2",
@@ -586,27 +591,27 @@ const Je = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), _t = { name: "IconNext" }, $t = /* @__PURE__ */ I({
-  ..._t,
+}), qt = { name: "IconNext" }, Ot = /* @__PURE__ */ N({
+  ...qt,
   props: {
     class: {}
   },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
       width: "16",
       height: "16",
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, [...e[0] || (e[0] = [
-      r("path", {
+    }, [...n[0] || (n[0] = [
+      o("path", {
         d: "M7.5 5.5V18.5C7.5 19.2659 8.34856 19.7261 8.98990 19.3071L17.0801 14.0157C17.6644 13.6347 17.6644 12.9653 17.0801 12.5843L8.98990 7.29288C8.34856 6.87388 7.5 7.33408 7.5 8.1V5.5Z",
         fill: "currentColor"
       }, null, -1),
-      r("path", {
+      o("path", {
         d: "M18 5V19",
         stroke: "currentColor",
         "stroke-width": "2",
@@ -614,29 +619,29 @@ const Je = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), Pt = { name: "IconVolumeHigh" }, Mt = /* @__PURE__ */ I({
-  ...Pt,
+}), jt = { name: "IconVolumeHigh" }, Ut = /* @__PURE__ */ N({
+  ...jt,
   props: {
     class: {}
   },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
       width: "18",
       height: "18",
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, [...e[0] || (e[0] = [
-      r("path", {
+    }, [...n[0] || (n[0] = [
+      o("path", {
         d: "M3 14V10C3 9.44772 3.44772 9 4 9H6.58579C6.851 9 7.10536 8.89464 7.29289 8.70711L11.2929 4.70711C11.9229 4.07714 13 4.52331 13 5.41421V18.5858C13 19.4767 11.9229 19.9229 11.2929 19.2929L7.29289 15.2929C7.10536 15.1054 6.851 15 6.58579 15H4C3.44772 15 3 14.5523 3 14Z",
         stroke: "currentColor",
         "stroke-width": "1.5",
         "stroke-linejoin": "round"
       }, null, -1),
-      r("path", {
+      o("path", {
         d: "M16.5 8C17.5 9 18 10.5 18 12C18 13.5 17.5 15 16.5 16M19 5.5C20.5 7 21.5 9.5 21.5 12C21.5 14.5 20.5 17 19 18.5",
         stroke: "currentColor",
         "stroke-width": "1.5",
@@ -644,29 +649,29 @@ const Je = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), Tt = { name: "IconVolumeLow" }, It = /* @__PURE__ */ I({
-  ...Tt,
+}), Zt = { name: "IconVolumeLow" }, zt = /* @__PURE__ */ N({
+  ...Zt,
   props: {
     class: {}
   },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
       width: "18",
       height: "18",
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, [...e[0] || (e[0] = [
-      r("path", {
+    }, [...n[0] || (n[0] = [
+      o("path", {
         d: "M3 14V10C3 9.44772 3.44772 9 4 9H6.58579C6.851 9 7.10536 8.89464 7.29289 8.70711L11.2929 4.70711C11.9229 4.07714 13 4.52331 13 5.41421V18.5858C13 19.4767 11.9229 19.9229 11.2929 19.2929L7.29289 15.2929C7.10536 15.1054 6.851 15 6.58579 15H4C3.44772 15 3 14.5523 3 14Z",
         stroke: "currentColor",
         "stroke-width": "1.5",
         "stroke-linejoin": "round"
       }, null, -1),
-      r("path", {
+      o("path", {
         d: "M16.5 8C17.5 9 18 10.5 18 12C18 13.5 17.5 15 16.5 16",
         stroke: "currentColor",
         "stroke-width": "1.5",
@@ -674,29 +679,29 @@ const Je = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), St = { name: "IconVolumeMuted" }, Nt = /* @__PURE__ */ I({
-  ...St,
+}), Wt = { name: "IconVolumeMuted" }, Kt = /* @__PURE__ */ N({
+  ...Wt,
   props: {
     class: {}
   },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
       width: "18",
       height: "18",
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, [...e[0] || (e[0] = [
-      r("path", {
+    }, [...n[0] || (n[0] = [
+      o("path", {
         d: "M3 14V10C3 9.44772 3.44772 9 4 9H6.58579C6.851 9 7.10536 8.89464 7.29289 8.70711L11.2929 4.70711C11.9229 4.07714 13 4.52331 13 5.41421V18.5858C13 19.4767 11.9229 19.9229 11.2929 19.2929L7.29289 15.2929C7.10536 15.1054 6.851 15 6.58579 15H4C3.44772 15 3 14.5523 3 14Z",
         stroke: "currentColor",
         "stroke-width": "1.5",
         "stroke-linejoin": "round"
       }, null, -1),
-      r("path", {
+      o("path", {
         d: "M16 9L22 15M22 9L16 15",
         stroke: "currentColor",
         "stroke-width": "1.5",
@@ -704,52 +709,23 @@ const Je = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), At = { name: "IconQuality" }, Ht = /* @__PURE__ */ I({
-  ...At,
+}), Qt = { name: "IconPiP" }, ze = /* @__PURE__ */ N({
+  ...Qt,
   props: {
     class: {}
   },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      "aria-hidden": "true"
-    }, [...e[0] || (e[0] = [
-      r("path", {
-        d: "M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z",
-        stroke: "currentColor",
-        "stroke-width": "1.5"
-      }, null, -1),
-      r("path", {
-        d: "M3 12C3 12.6 3.08 13.18 3.23 13.73L4.6 14.5C4.86 14.65 5.02 14.94 5 15.24C4.98 15.58 4.96 15.92 5.07 16.24C5.18 16.56 5.39 16.83 5.62 17.08C5.83 17.3 6.13 17.4 6.42 17.36L7.99 17.13C8.28 17.09 8.57 17.21 8.74 17.45C9.07 17.93 9.49 18.34 9.97 18.66C10.21 18.83 10.34 19.11 10.31 19.4L10.13 20.97C10.1 21.26 10.21 21.55 10.43 21.74C10.91 22.16 11.45 22 12 22C12.55 22 13.09 22.16 13.57 21.74C13.79 21.55 13.9 21.26 13.87 20.97L13.69 19.4C13.66 19.11 13.79 18.83 14.03 18.66",
-        stroke: "currentColor",
-        "stroke-width": "1.5",
-        "stroke-linecap": "round"
-      }, null, -1)
-    ])], 2));
-  }
-}), Bt = { name: "IconPiP" }, Ze = /* @__PURE__ */ I({
-  ...Bt,
-  props: {
-    class: {}
-  },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
       width: "18",
       height: "18",
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, [...e[0] || (e[0] = [
-      r("rect", {
+    }, [...n[0] || (n[0] = [
+      o("rect", {
         x: "2",
         y: "4",
         width: "20",
@@ -758,7 +734,7 @@ const Je = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
         stroke: "currentColor",
         "stroke-width": "1.5"
       }, null, -1),
-      r("rect", {
+      o("rect", {
         x: "12",
         y: "12",
         width: "8",
@@ -768,23 +744,23 @@ const Je = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), Vt = { name: "IconFullscreen" }, qt = /* @__PURE__ */ I({
-  ...Vt,
+}), Yt = { name: "IconFullscreen" }, Gt = /* @__PURE__ */ N({
+  ...Yt,
   props: {
     class: {}
   },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
       width: "18",
       height: "18",
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, [...e[0] || (e[0] = [
-      r("path", {
+    }, [...n[0] || (n[0] = [
+      o("path", {
         d: "M4 9V4H9M15 4H20V9M20 15V20H15M9 20H4V15",
         stroke: "currentColor",
         "stroke-width": "1.75",
@@ -793,154 +769,477 @@ const Je = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), Dt = { name: "IconFullscreenExit" }, Ft = /* @__PURE__ */ I({
-  ...Dt,
+}), Jt = { name: "IconFullscreenExit" }, Xt = /* @__PURE__ */ N({
+  ...Jt,
   props: {
     class: {}
   },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
       width: "18",
       height: "18",
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, [...e[0] || (e[0] = [
-      r("path", {
-        d: "M9 4V9H4M15 9V4H20M15 20V15H20M9 15H4V20",
+    }, [...n[0] || (n[0] = [
+      o("path", {
+        d: "M9 4V7A2 2 0 0 1 7 9H4M15 4V7A2 2 0 0 0 17 9H20M15 20V17A2 2 0 0 1 17 15H20M9 20V17A2 2 0 0 0 7 15H4",
         stroke: "currentColor",
-        "stroke-width": "1.75",
+        "stroke-width": "2",
         "stroke-linecap": "round",
         "stroke-linejoin": "round"
       }, null, -1)
     ])], 2));
   }
+}), en = { name: "IconGear" }, tn = /* @__PURE__ */ N({
+  ...en,
+  props: {
+    class: {}
+  },
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, [...n[0] || (n[0] = [
+      o("path", {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        d: "M10.5 2.25a1 1 0 0 0-.98.804l-.39 1.93a7.5 7.5 0 0 0-1.62.94l-1.86-.64a1 1 0 0 0-1.2.46l-1.5 2.6a1 1 0 0 0 .22 1.26l1.47 1.29a7.6 7.6 0 0 0 0 1.88l-1.47 1.29a1 1 0 0 0-.22 1.26l1.5 2.6a1 1 0 0 0 1.2.46l1.86-.64c.5.38 1.04.7 1.62.94l.39 1.93a1 1 0 0 0 .98.804h3a1 1 0 0 0 .98-.804l.39-1.93c.58-.24 1.12-.56 1.62-.94l1.86.64a1 1 0 0 0 1.2-.46l1.5-2.6a1 1 0 0 0-.22-1.26l-1.47-1.29a7.6 7.6 0 0 0 0-1.88l1.47-1.29a1 1 0 0 0 .22-1.26l-1.5-2.6a1 1 0 0 0-1.2-.46l-1.86.64a7.5 7.5 0 0 0-1.62-.94l-.39-1.93a1 1 0 0 0-.98-.804h-3ZM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z",
+        fill: "currentColor"
+      }, null, -1)
+    ])], 2));
+  }
+}), nn = { name: "IconChevronRight" }, Ee = /* @__PURE__ */ N({
+  ...nn,
+  props: {
+    class: {}
+  },
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, [...n[0] || (n[0] = [
+      o("path", {
+        d: "M9 6L15 12L9 18",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }, null, -1)
+    ])], 2));
+  }
+}), ln = { name: "IconCheck" }, we = /* @__PURE__ */ N({
+  ...ln,
+  props: {
+    class: {}
+  },
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, [...n[0] || (n[0] = [
+      o("path", {
+        d: "M5 12L10 17L19 7",
+        stroke: "currentColor",
+        "stroke-width": "2.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }, null, -1)
+    ])], 2));
+  }
+}), sn = ["aria-expanded"], an = {
+  key: 0,
+  class: "gvp-settings-menu",
+  role: "menu"
+}, on = { class: "gvp-settings-row-value" }, rn = { class: "gvp-settings-row-value" }, un = { class: "gvp-settings-row-value" }, cn = { class: "gvp-settings-row-value" }, dn = ["aria-checked", "onClick"], vn = { class: "gvp-settings-check" }, pn = ["aria-checked"], fn = { class: "gvp-settings-check" }, mn = ["aria-checked", "onClick"], gn = { class: "gvp-settings-check" }, hn = ["aria-checked"], kn = { class: "gvp-settings-check" }, yn = ["aria-checked", "onClick"], bn = { class: "gvp-settings-check" }, wn = ["aria-checked", "onClick"], xn = { class: "gvp-settings-check" }, Cn = { name: "SettingsMenu" }, Ln = /* @__PURE__ */ N({
+  ...Cn,
+  props: {
+    video: {},
+    qualityLevels: { default: () => [] },
+    currentLevel: { default: -1 },
+    selectedLevel: { default: -1 },
+    audioTracks: { default: () => [] },
+    audioTrackIndex: { default: -1 }
+  },
+  emits: ["select-level", "select-audio-track"],
+  setup(e, { emit: l }) {
+    const t = e, n = l, a = [0.5, 0.75, 1, 1.25, 1.5, 2], v = g(!1), d = g("root"), h = g(null), E = g(1);
+    H(() => t.video, (y) => {
+      if (!y) return;
+      const p = () => {
+        E.value = y.playbackRate;
+      };
+      p(), y.addEventListener("ratechange", p);
+    }, { immediate: !0 });
+    function S(y) {
+      t.video && (t.video.playbackRate = y), E.value = y, d.value = "root";
+    }
+    const A = g([]), P = g(-1);
+    function w(y) {
+      const p = [];
+      for (let m = 0; m < y.length; m++) {
+        const Q = y[m];
+        (Q.kind === "subtitles" || Q.kind === "captions") && p.push({ index: m, label: Q.label || Q.language || `Track ${m + 1}` });
+      }
+      A.value = p;
+      let ee = -1;
+      for (let m = 0; m < y.length; m++)
+        if (y[m].mode === "showing") {
+          ee = m;
+          break;
+        }
+      P.value = ee;
+    }
+    H(() => t.video, (y) => {
+      if (!y) {
+        A.value = [], P.value = -1;
+        return;
+      }
+      const p = y.textTracks;
+      w(p);
+      const ee = () => w(p);
+      typeof p.addEventListener == "function" && (p.addEventListener("addtrack", ee), p.addEventListener("removetrack", ee), p.addEventListener("change", ee));
+    }, { immediate: !0 });
+    function $(y) {
+      var ee;
+      const p = (ee = t.video) == null ? void 0 : ee.textTracks;
+      if (p)
+        for (let m = 0; m < p.length; m++)
+          p[m].mode = m === y ? "showing" : "hidden";
+      P.value = y, d.value = "root";
+    }
+    const T = I(
+      () => [...t.qualityLevels].sort((y, p) => p.height - y.height)
+    ), f = I(
+      () => t.qualityLevels.find((y) => y.index === t.currentLevel)
+    ), M = I(() => {
+      var y;
+      return t.selectedLevel < 0 ? f.value ? `Auto (${f.value.label})` : "Auto" : ((y = t.qualityLevels.find((p) => p.index === t.selectedLevel)) == null ? void 0 : y.label) ?? "Auto";
+    });
+    function z(y) {
+      n("select-level", y), d.value = "root";
+    }
+    const j = I(
+      () => t.audioTracks.find((y) => y.index === t.audioTrackIndex) ?? t.audioTracks[0]
+    );
+    function K(y) {
+      n("select-audio-track", y), d.value = "root";
+    }
+    const re = I(() => t.qualityLevels.length >= 2), C = I(() => A.value.length > 0), W = I(() => t.audioTracks.length > 1), V = I(() => E.value === 1 ? "Normal" : `${E.value}×`), D = I(
+      () => {
+        var y;
+        return P.value < 0 ? "Off" : ((y = A.value.find((p) => p.index === P.value)) == null ? void 0 : y.label) ?? "Off";
+      }
+    );
+    function F() {
+      v.value = !1, d.value = "root";
+    }
+    function B(y) {
+      h.value && !h.value.contains(y.target) && F();
+    }
+    function R(y) {
+      y.key === "Escape" && F();
+    }
+    H(v, (y) => {
+      y ? (document.addEventListener("mousedown", B), document.addEventListener("keydown", R)) : (document.removeEventListener("mousedown", B), document.removeEventListener("keydown", R));
+    }), oe(() => {
+      document.removeEventListener("mousedown", B), document.removeEventListener("keydown", R);
+    });
+    function fe() {
+      v.value = !v.value, d.value = "root";
+    }
+    return (y, p) => {
+      var ee;
+      return r(), c("div", {
+        ref_key: "rootEl",
+        ref: h,
+        class: "gvp-settings"
+      }, [
+        o("button", {
+          type: "button",
+          class: L(["gvp-ctrl-btn", { "is-active": v.value }]),
+          "aria-haspopup": "menu",
+          "aria-expanded": v.value,
+          "aria-label": "Settings",
+          onClick: fe
+        }, [
+          O(tn)
+        ], 10, sn),
+        v.value ? (r(), c("div", an, [
+          d.value === "root" ? (r(), c(ae, { key: 0 }, [
+            o("button", {
+              type: "button",
+              role: "menuitem",
+              class: "gvp-settings-row",
+              onClick: p[0] || (p[0] = (m) => d.value = "speed")
+            }, [
+              p[7] || (p[7] = o("span", { class: "gvp-settings-row-label" }, "Speed", -1)),
+              o("span", on, Z(V.value), 1),
+              O(Ee, { class: "gvp-settings-chevron" })
+            ]),
+            re.value ? (r(), c("button", {
+              key: 0,
+              type: "button",
+              role: "menuitem",
+              class: "gvp-settings-row",
+              onClick: p[1] || (p[1] = (m) => d.value = "quality")
+            }, [
+              p[8] || (p[8] = o("span", { class: "gvp-settings-row-label" }, "Quality", -1)),
+              o("span", rn, Z(M.value), 1),
+              O(Ee, { class: "gvp-settings-chevron" })
+            ])) : x("", !0),
+            C.value ? (r(), c("button", {
+              key: 1,
+              type: "button",
+              role: "menuitem",
+              class: "gvp-settings-row",
+              onClick: p[2] || (p[2] = (m) => d.value = "captions")
+            }, [
+              p[9] || (p[9] = o("span", { class: "gvp-settings-row-label" }, "Subtitles", -1)),
+              o("span", un, Z(D.value), 1),
+              O(Ee, { class: "gvp-settings-chevron" })
+            ])) : x("", !0),
+            W.value ? (r(), c("button", {
+              key: 2,
+              type: "button",
+              role: "menuitem",
+              class: "gvp-settings-row",
+              onClick: p[3] || (p[3] = (m) => d.value = "audio")
+            }, [
+              p[10] || (p[10] = o("span", { class: "gvp-settings-row-label" }, "Audio", -1)),
+              o("span", cn, Z((ee = j.value) == null ? void 0 : ee.label), 1),
+              O(Ee, { class: "gvp-settings-chevron" })
+            ])) : x("", !0)
+          ], 64)) : x("", !0),
+          d.value !== "root" ? (r(), c("button", {
+            key: 1,
+            type: "button",
+            class: "gvp-settings-back",
+            onClick: p[4] || (p[4] = (m) => d.value = "root")
+          }, [
+            O(Ee, { class: "gvp-settings-back-icon" }),
+            o("span", null, Z(d.value === "speed" ? "Speed" : d.value === "quality" ? "Quality" : d.value === "captions" ? "Subtitles" : "Audio"), 1)
+          ])) : x("", !0),
+          d.value === "speed" ? (r(), c(ae, { key: 2 }, pe(a, (m) => o("button", {
+            key: m,
+            type: "button",
+            role: "menuitemradio",
+            "aria-checked": m === E.value,
+            class: L(["gvp-settings-option", { "is-active": m === E.value }]),
+            onClick: (Q) => S(m)
+          }, [
+            o("span", vn, [
+              m === E.value ? (r(), J(we, { key: 0 })) : x("", !0)
+            ]),
+            o("span", null, Z(m === 1 ? "Normal" : `${m}×`), 1)
+          ], 10, dn)), 64)) : x("", !0),
+          d.value === "quality" ? (r(), c(ae, { key: 3 }, [
+            o("button", {
+              type: "button",
+              role: "menuitemradio",
+              "aria-checked": e.selectedLevel < 0,
+              class: L(["gvp-settings-option", { "is-active": e.selectedLevel < 0 }]),
+              onClick: p[5] || (p[5] = (m) => z(se(ut).index))
+            }, [
+              o("span", fn, [
+                e.selectedLevel < 0 ? (r(), J(we, { key: 0 })) : x("", !0)
+              ]),
+              o("span", null, Z(f.value ? `Auto (${f.value.label})` : "Auto"), 1)
+            ], 10, pn),
+            (r(!0), c(ae, null, pe(T.value, (m) => (r(), c("button", {
+              key: m.index,
+              type: "button",
+              role: "menuitemradio",
+              "aria-checked": m.index === e.selectedLevel,
+              class: L(["gvp-settings-option", { "is-active": m.index === e.selectedLevel }]),
+              onClick: (Q) => z(m.index)
+            }, [
+              o("span", gn, [
+                m.index === e.selectedLevel ? (r(), J(we, { key: 0 })) : x("", !0)
+              ]),
+              o("span", null, Z(m.label), 1)
+            ], 10, mn))), 128))
+          ], 64)) : x("", !0),
+          d.value === "captions" ? (r(), c(ae, { key: 4 }, [
+            o("button", {
+              type: "button",
+              role: "menuitemradio",
+              "aria-checked": P.value === -1,
+              class: L(["gvp-settings-option", { "is-active": P.value === -1 }]),
+              onClick: p[6] || (p[6] = (m) => $(-1))
+            }, [
+              o("span", kn, [
+                P.value === -1 ? (r(), J(we, { key: 0 })) : x("", !0)
+              ]),
+              p[11] || (p[11] = o("span", null, "Off", -1))
+            ], 10, hn),
+            (r(!0), c(ae, null, pe(A.value, (m) => (r(), c("button", {
+              key: m.index,
+              type: "button",
+              role: "menuitemradio",
+              "aria-checked": m.index === P.value,
+              class: L(["gvp-settings-option", { "is-active": m.index === P.value }]),
+              onClick: (Q) => $(m.index)
+            }, [
+              o("span", bn, [
+                m.index === P.value ? (r(), J(we, { key: 0 })) : x("", !0)
+              ]),
+              o("span", null, Z(m.label), 1)
+            ], 10, yn))), 128))
+          ], 64)) : x("", !0),
+          d.value === "audio" ? (r(!0), c(ae, { key: 5 }, pe(e.audioTracks, (m) => {
+            var Q, Y, X;
+            return r(), c("button", {
+              key: m.index,
+              type: "button",
+              role: "menuitemradio",
+              "aria-checked": m.index === (((Q = j.value) == null ? void 0 : Q.index) ?? -1),
+              class: L([
+                "gvp-settings-option",
+                { "is-active": m.index === (((Y = j.value) == null ? void 0 : Y.index) ?? -1) }
+              ]),
+              onClick: (G) => K(m.index)
+            }, [
+              o("span", xn, [
+                m.index === (((X = j.value) == null ? void 0 : X.index) ?? -1) ? (r(), J(we, { key: 0 })) : x("", !0)
+              ]),
+              o("span", null, Z(m.label), 1)
+            ], 10, wn);
+          }), 128)) : x("", !0)
+        ])) : x("", !0)
+      ], 512);
+    };
+  }
 });
-function Ae(t) {
-  if (!Number.isFinite(t) || t < 0) return "--:--";
-  const a = Math.floor(t), n = Math.floor(a / 3600), e = Math.floor(a % 3600 / 60), o = (a % 60).toString().padStart(2, "0");
-  if (n > 0) {
-    const h = e.toString().padStart(2, "0");
-    return `${n}:${h}:${o}`;
+function _e(e) {
+  if (!Number.isFinite(e) || e < 0) return "--:--";
+  const l = Math.floor(e), t = Math.floor(l / 3600), n = Math.floor(l % 3600 / 60), v = (l % 60).toString().padStart(2, "0");
+  if (t > 0) {
+    const d = n.toString().padStart(2, "0");
+    return `${t}:${d}:${v}`;
   }
-  return `${e}:${o}`;
+  return `${n}:${v}`;
 }
-function qe(t) {
-  const a = t.trim().split(":");
-  if (a.length < 2 || a.length > 3) return NaN;
-  const n = a.map(Number);
-  return n.some((e) => !Number.isFinite(e)) ? NaN : n.length === 3 ? n[0] * 3600 + n[1] * 60 + n[2] : n[0] * 60 + n[1];
+function Fe(e) {
+  const l = e.trim().split(":");
+  if (l.length < 2 || l.length > 3) return NaN;
+  const t = l.map(Number);
+  return t.some((n) => !Number.isFinite(n)) ? NaN : t.length === 3 ? t[0] * 3600 + t[1] * 60 + t[2] : t[0] * 60 + t[1];
 }
-function Rt(t, a) {
+function $n(e, l) {
   try {
-    return new URL(t, a).href;
+    return new URL(e, l).href;
   } catch {
-    return t;
+    return e;
   }
 }
-function Ot(t, a) {
-  const n = [], e = t.replace(/\r/g, "").split(`
+function En(e, l) {
+  const t = [], n = e.replace(/\r/g, "").split(`
 `);
-  for (let c = 0; c < e.length; c++) {
-    const o = e[c].indexOf("-->");
-    if (o === -1) continue;
-    const h = qe(e[c].slice(0, o)), g = qe(e[c].slice(o + 3));
-    if (!Number.isFinite(h) || !Number.isFinite(g)) continue;
-    const E = (e[c + 1] ?? "").trim();
+  for (let a = 0; a < n.length; a++) {
+    const v = n[a].indexOf("-->");
+    if (v === -1) continue;
+    const d = Fe(n[a].slice(0, v)), h = Fe(n[a].slice(v + 3));
+    if (!Number.isFinite(d) || !Number.isFinite(h)) continue;
+    const E = (n[a + 1] ?? "").trim();
     if (!E) continue;
-    const _ = E.indexOf("#xywh=");
-    let $ = E, S = 0, b = 0, m = 0, C = 0;
-    if (_ !== -1) {
-      $ = E.slice(0, _);
-      const p = E.slice(_ + 6).split(",").map(Number);
-      p.length === 4 && p.every(Number.isFinite) && ([S, b, m, C] = p);
-    }
-    n.push({ start: h, end: g, url: Rt($, a), x: S, y: b, w: m, h: C });
+    const S = E.indexOf("#xywh=");
+    let A = E, P = 0, w = 0, $ = 0, T = 0;
+    if (S !== -1) {
+      A = E.slice(0, S);
+      const f = E.slice(S + 6).split(",").map(Number);
+      f.length === 4 && f.every(Number.isFinite) && ([P, w, $, T] = f);
+    }
+    t.push({ start: d, end: h, url: $n(A, l), x: P, y: w, w: $, h: T });
   }
-  return n.sort((c, o) => c.start - o.start), n;
+  return t.sort((a, v) => a.start - v.start), t;
 }
-function Ut(t) {
+function _n(e) {
   return {
-    cues: t,
-    cueAt(a) {
-      if (t.length === 0) return null;
-      let n = 0, e = t.length - 1, c = t[0];
-      for (; n <= e; ) {
-        const o = n + e >> 1, h = t[o];
-        if (a < h.start)
-          e = o - 1;
-        else if (a > h.end)
-          c = h, n = o + 1;
+    cues: e,
+    cueAt(l) {
+      if (e.length === 0) return null;
+      let t = 0, n = e.length - 1, a = e[0];
+      for (; t <= n; ) {
+        const v = t + n >> 1, d = e[v];
+        if (l < d.start)
+          n = v - 1;
+        else if (l > d.end)
+          a = d, t = v + 1;
         else
-          return h;
+          return d;
       }
-      return c;
+      return a;
     }
   };
 }
-function De(t) {
-  const a = t.trim().split(":");
-  if (a.length < 2 || a.length > 3) return NaN;
-  const n = a.map(Number);
-  return n.some((e) => !Number.isFinite(e)) ? NaN : n.length === 3 ? n[0] * 3600 + n[1] * 60 + n[2] : n[0] * 60 + n[1];
+function qe(e) {
+  const l = e.trim().split(":");
+  if (l.length < 2 || l.length > 3) return NaN;
+  const t = l.map(Number);
+  return t.some((n) => !Number.isFinite(n)) ? NaN : t.length === 3 ? t[0] * 3600 + t[1] * 60 + t[2] : t[0] * 60 + t[1];
 }
-function Zt(t) {
-  const a = [], n = t.replace(/\r/g, "").split(`
+function Pn(e) {
+  const l = [], t = e.replace(/\r/g, "").split(`
 `);
-  for (let e = 0; e < n.length; e++) {
-    const c = n[e].indexOf("-->");
-    if (c === -1) continue;
-    const o = De(n[e].slice(0, c)), h = De(n[e].slice(c + 3));
-    if (!Number.isFinite(o) || !Number.isFinite(h)) continue;
-    const g = (n[e + 1] ?? "").trim();
-    g && a.push({ start: o, end: h, title: g });
+  for (let n = 0; n < t.length; n++) {
+    const a = t[n].indexOf("-->");
+    if (a === -1) continue;
+    const v = qe(t[n].slice(0, a)), d = qe(t[n].slice(a + 3));
+    if (!Number.isFinite(v) || !Number.isFinite(d)) continue;
+    const h = (t[n + 1] ?? "").trim();
+    h && l.push({ start: v, end: d, title: h });
   }
-  return a.sort((e, c) => e.start - c.start), a;
+  return l.sort((n, a) => n.start - a.start), l;
 }
-function jt(t, a) {
-  const n = t.filter((e) => Number.isFinite(e.start) && e.start >= 0 && e.title).sort((e, c) => e.start - c.start);
-  return n.map((e, c) => {
-    var o;
+function Tn(e, l) {
+  const t = e.filter((n) => Number.isFinite(n.start) && n.start >= 0 && n.title).sort((n, a) => n.start - a.start);
+  return t.map((n, a) => {
+    var v;
     return {
-      start: e.start,
-      end: Number.isFinite(e.end) ? e.end : ((o = n[c + 1]) == null ? void 0 : o.start) ?? a,
-      title: e.title
+      start: n.start,
+      end: Number.isFinite(n.end) ? n.end : ((v = t[a + 1]) == null ? void 0 : v.start) ?? l,
+      title: n.title
     };
   });
 }
-function Qt(t, a) {
-  for (const n of t)
-    if (a >= n.start && a < n.end) return n;
+function Mn(e, l) {
+  for (const t of e)
+    if (l >= t.start && l < t.end) return t;
   return null;
 }
-const Wt = { class: "gvp-controls-row" }, zt = ["disabled"], Yt = ["aria-label", "aria-pressed"], Kt = ["disabled"], Xt = {
+const In = { class: "gvp-controls-seek" }, Sn = {
   key: 1,
   class: "gvp-seek-preview-chapter"
-}, Jt = { class: "gvp-seek-preview-time" }, Gt = ["value", "disabled", "aria-valuemax", "aria-valuenow"], en = {
-  class: "gvp-time",
-  "aria-live": "off"
-}, tn = ["aria-expanded", "aria-label"], nn = { class: "gvp-speed-label" }, ln = {
-  key: 0,
-  class: "gvp-speed-menu",
-  role: "listbox",
-  "aria-label": "Playback speed"
-}, an = ["aria-selected", "onClick"], on = ["aria-expanded", "aria-label"], sn = { class: "gvp-quality-label" }, rn = {
-  key: 0,
-  class: "gvp-quality-menu",
-  role: "listbox",
-  "aria-label": "Quality"
-}, un = ["aria-selected"], cn = ["aria-selected", "onClick"], dn = ["aria-expanded", "aria-pressed"], vn = {
-  key: 0,
-  class: "gvp-captions-menu",
-  role: "listbox",
-  "aria-label": "Captions"
-}, pn = ["aria-selected"], fn = ["aria-selected", "onClick"], mn = ["aria-label", "aria-pressed"], hn = {
+}, An = { class: "gvp-seek-preview-time" }, Nn = ["value", "disabled", "aria-valuemax", "aria-valuenow", "aria-valuetext"], Bn = { class: "gvp-controls-row" }, Hn = { class: "gvp-controls-left" }, Vn = ["aria-label", "aria-pressed"], Rn = ["disabled"], Dn = ["disabled"], Fn = ["aria-label", "aria-pressed"], qn = {
   key: 0,
   class: "gvp-volume-slider-wrap"
-}, gn = { class: "gvp-volume-track" }, kn = ["value", "aria-valuenow"], yn = ["aria-label", "aria-pressed"], wn = ["aria-label", "aria-pressed"], bn = 3e3, Cn = /* @__PURE__ */ I({
+}, On = { class: "gvp-volume-track" }, jn = ["value", "aria-valuenow", "aria-valuetext"], Un = {
+  key: 2,
+  class: "gvp-time",
+  "aria-live": "off"
+}, Zn = ["disabled", "aria-label"], zn = { class: "gvp-controls-right" }, Wn = ["aria-label", "aria-pressed"], Kn = ["aria-label", "aria-pressed"], Qn = 3e3, Yn = 10, Gn = /* @__PURE__ */ N({
   __name: "ControlBar",
   props: {
     video: {},
@@ -953,554 +1252,408 @@ const Wt = { class: "gvp-controls-row" }, zt = ["disabled"], Yt = ["aria-label",
     thumbnails: {},
     chapters: {},
     hasPrev: { type: Boolean, default: !1 },
-    hasNext: { type: Boolean, default: !1 }
+    hasNext: { type: Boolean, default: !1 },
+    isLive: { type: Boolean, default: !1 },
+    audioTracks: { default: () => [] },
+    audioTrackIndex: { default: -1 }
   },
-  emits: ["select-level", "prev", "next"],
-  setup(t, { emit: a }) {
-    const n = (() => {
+  emits: ["select-level", "select-audio-track", "prev", "next"],
+  setup(e, { emit: l }) {
+    const t = (() => {
       if (typeof navigator > "u") return !1;
-      const l = navigator.userAgent;
-      return /iPad|iPhone|iPod/.test(l) || l.includes("Mac") && navigator.maxTouchPoints > 1;
-    })(), e = typeof navigator > "u" ? !1 : /iPhone|iPod/.test(navigator.userAgent), c = [0.5, 0.75, 1, 1.25, 1.5, 2], o = t, h = a, g = y(!0);
-    let E = null;
-    function _() {
-      E !== null && (clearTimeout(E), E = null);
-    }
-    function $() {
-      _(), o.isPlaying && (E = setTimeout(() => {
-        g.value = !1;
-      }, bn));
+      const u = navigator.userAgent;
+      return /iPad|iPhone|iPod/.test(u) || u.includes("Mac") && navigator.maxTouchPoints > 1;
+    })(), n = typeof navigator > "u" ? !1 : /iPhone|iPod/.test(navigator.userAgent), a = e, v = l, d = g(!0);
+    let h = null;
+    function E() {
+      h !== null && (clearTimeout(h), h = null);
     }
     function S() {
-      g.value = !0, $();
-    }
-    R(() => o.isPlaying, (l) => {
-      l ? $() : (_(), g.value = !0);
-    }, { immediate: !0 }), R(() => o.container, (l) => {
-      if (!l) return;
-      const s = () => S();
-      l.addEventListener("mousemove", s), l.addEventListener("touchstart", s), l.addEventListener("focusin", s);
+      E(), a.isPlaying && (h = setTimeout(() => {
+        d.value = !1;
+      }, Qn));
+    }
+    function A() {
+      d.value = !0, S();
+    }
+    H(() => a.isPlaying, (u) => {
+      u ? S() : (E(), d.value = !0);
+    }, { immediate: !0 }), H(() => a.container, (u) => {
+      if (!u) return;
+      const b = () => A();
+      u.addEventListener("mousemove", b), u.addEventListener("touchstart", b), u.addEventListener("focusin", b);
     }, { immediate: !0 });
-    const b = y(0), m = y(0), C = y(0);
-    R(() => o.video, (l) => {
-      if (!l) return;
-      const s = () => {
-        b.value = l.currentTime;
-      }, i = () => {
-        m.value = Number.isFinite(l.duration) ? l.duration : 0;
-      }, L = () => {
-        const F = l.buffered;
-        if (!F || F.length === 0) {
-          C.value = 0;
+    const P = g(0), w = g(0), $ = g(0), T = g(!1), f = g(!0), M = I(() => a.isLive || T.value);
+    H(() => a.video, (u) => {
+      if (!u) return;
+      const b = () => {
+        P.value = u.currentTime;
+      }, _ = () => {
+        w.value = Number.isFinite(u.duration) ? u.duration : 0;
+      }, te = () => {
+        const q = u.buffered;
+        if (!q || q.length === 0) {
+          $.value = 0;
           return;
         }
-        let Be = F.end(F.length - 1);
-        for (let ye = 0; ye < F.length; ye++)
-          if (F.start(ye) <= l.currentTime && l.currentTime <= F.end(ye)) {
-            Be = F.end(ye);
+        let ke = q.end(q.length - 1);
+        for (let ve = 0; ve < q.length; ve++)
+          if (q.start(ve) <= u.currentTime && u.currentTime <= q.end(ve)) {
+            ke = q.end(ve);
             break;
           }
-        C.value = Be;
+        $.value = ke;
+      }, he = () => {
+        if (T.value = !Number.isFinite(u.duration) && u.duration > 0, M.value && u.seekable.length > 0) {
+          const q = u.seekable.end(u.seekable.length - 1);
+          f.value = q - u.currentTime <= Yn;
+        }
       };
-      s(), i(), L(), l.addEventListener("timeupdate", s), l.addEventListener("durationchange", i), l.addEventListener("loadedmetadata", i), l.addEventListener("progress", L), l.addEventListener("timeupdate", L);
+      b(), _(), te(), he(), u.addEventListener("timeupdate", b), u.addEventListener("durationchange", _), u.addEventListener("loadedmetadata", _), u.addEventListener("progress", te), u.addEventListener("timeupdate", te), u.addEventListener("durationchange", he), u.addEventListener("loadedmetadata", he), u.addEventListener("timeupdate", he);
     }, { immediate: !0 });
-    const p = () => m.value > 0, x = () => p() ? b.value / m.value * 100 : 0, B = () => p() ? C.value / m.value * 100 : 0;
-    function Y(l) {
-      const s = o.video;
-      if (!s || !p()) return;
-      const i = Number(l.target.value) / 100 * m.value;
-      s.currentTime = i, b.value = i;
-    }
-    const A = y(null), J = y(null), k = y(0), N = y(0), D = y(!1);
-    R(() => o.thumbnails, (l) => {
-      if (A.value = null, !l) return;
-      let s = !1;
-      fetch(l).then((i) => i.ok ? i.text() : Promise.reject(new Error("fetch failed"))).then((i) => {
-        if (s) return;
-        const L = Ot(i, new URL(l, location.href).href);
-        A.value = L.length > 0 ? Ut(L) : null;
+    function z() {
+      const u = a.video;
+      !u || u.seekable.length === 0 || (u.currentTime = u.seekable.end(u.seekable.length - 1));
+    }
+    const j = () => w.value > 0, K = () => j() ? P.value / w.value * 100 : 0, re = () => j() ? $.value / w.value * 100 : 0;
+    function C(u) {
+      const b = a.video;
+      if (!b || !j()) return;
+      const _ = Number(u.target.value) / 100 * w.value;
+      b.currentTime = _, P.value = _;
+    }
+    const W = g(null), V = g(null), D = g(0), F = g(0), B = g(!1);
+    H(() => a.thumbnails, (u) => {
+      if (W.value = null, !u) return;
+      let b = !1;
+      fetch(u).then((_) => _.ok ? _.text() : Promise.reject(new Error("fetch failed"))).then((_) => {
+        if (b) return;
+        const te = En(_, new URL(u, location.href).href);
+        W.value = te.length > 0 ? _n(te) : null;
       }).catch(() => {
-        s || (A.value = null);
-      }), ne(() => {
-        s = !0;
+        b || (W.value = null);
+      }), oe(() => {
+        b = !0;
       });
     }, { immediate: !0 });
-    function H(l) {
-      const s = J.value;
-      if (!s || !p()) return;
-      const i = s.getBoundingClientRect(), L = Math.min(Math.max(l.clientX - i.left, 0), i.width);
-      N.value = L, k.value = L / i.width * m.value, D.value = !0;
+    function R(u) {
+      const b = V.value;
+      if (!b || !j()) return;
+      const _ = b.getBoundingClientRect(), te = Math.min(Math.max(u.clientX - _.left, 0), _.width);
+      F.value = te, D.value = te / _.width * w.value, B.value = !0;
     }
-    function V() {
-      D.value = !1;
+    function fe() {
+      B.value = !1;
     }
-    const O = T(
+    const y = I(
       () => {
-        var l;
-        return D.value ? ((l = A.value) == null ? void 0 : l.cueAt(k.value)) ?? null : null;
+        var u;
+        return B.value ? ((u = W.value) == null ? void 0 : u.cueAt(D.value)) ?? null : null;
       }
-    ), me = T(() => {
-      const l = O.value;
-      return l !== null && l.w > 0 && l.h > 0;
-    }), Pe = T(() => {
-      var L;
-      const l = O.value, s = ((L = J.value) == null ? void 0 : L.clientWidth) ?? 0;
-      if (!me.value || !l || s === 0) return N.value;
-      const i = l.w / 2;
-      return Math.min(Math.max(N.value, i), s - i);
-    }), oe = y([]);
-    R(() => o.chapters, (l) => {
-      if (oe.value = [], typeof l != "string" || !l) return;
-      let s = !1;
-      fetch(l).then((i) => i.ok ? i.text() : Promise.reject(new Error("fetch failed"))).then((i) => {
-        s || (oe.value = Zt(i));
+    ), p = I(() => {
+      const u = y.value;
+      return u !== null && u.w > 0 && u.h > 0;
+    }), ee = I(() => {
+      var te;
+      const u = y.value, b = ((te = V.value) == null ? void 0 : te.clientWidth) ?? 0;
+      if (!p.value || !u || b === 0) return F.value;
+      const _ = u.w / 2;
+      return Math.min(Math.max(F.value, _), b - _);
+    }), m = g([]);
+    H(() => a.chapters, (u) => {
+      if (m.value = [], typeof u != "string" || !u) return;
+      let b = !1;
+      fetch(u).then((_) => _.ok ? _.text() : Promise.reject(new Error("fetch failed"))).then((_) => {
+        b || (m.value = Pn(_));
       }).catch(() => {
-        s || (oe.value = []);
-      }), ne(() => {
-        s = !0;
+        b || (m.value = []);
+      }), oe(() => {
+        b = !0;
       });
     }, { immediate: !0 });
-    const ce = T(() => typeof o.chapters == "string" ? oe.value : Array.isArray(o.chapters) ? jt(o.chapters, m.value) : []), de = T(
-      () => D.value ? Qt(ce.value, k.value) : null
-    ), K = y(1), q = y(!1);
-    R(() => o.video, (l) => {
-      if (!l) return;
-      const s = () => {
-        K.value = l.volume, q.value = l.muted;
-      };
-      s(), l.addEventListener("volumechange", s);
-    }, { immediate: !0 });
-    function Me() {
-      o.video && (o.video.muted = !o.video.muted);
-    }
-    function Te(l) {
-      const s = o.video;
-      if (!s) return;
-      const i = Number(l.target.value) / 100;
-      s.volume = i, i > 0 && s.muted && (s.muted = !1);
-    }
-    const X = y(1), le = y(!1), we = y(null);
-    R(() => o.video, (l) => {
-      if (!l) return;
-      const s = () => {
-        X.value = l.playbackRate;
+    const Q = I(() => typeof a.chapters == "string" ? m.value : Array.isArray(a.chapters) ? Tn(a.chapters, w.value) : []), Y = I(
+      () => B.value ? Mn(Q.value, D.value) : null
+    ), X = g(1), G = g(!1);
+    H(() => a.video, (u) => {
+      if (!u) return;
+      const b = () => {
+        X.value = u.volume, G.value = u.muted;
       };
-      s(), l.addEventListener("ratechange", s);
-    }, { immediate: !0 });
-    function Ie(l) {
-      o.video && (o.video.playbackRate = l), X.value = l, le.value = !1;
-    }
-    const ae = y(!1), Q = y(null), he = T(() => o.qualityLevels.length >= 2), be = T(
-      () => [...o.qualityLevels].sort((l, s) => s.height - l.height)
-    ), ve = T(
-      () => o.qualityLevels.find((l) => l.index === o.currentLevel)
-    ), Ce = T(() => {
-      if (o.selectedLevel < 0)
-        return ve.value ? `Auto (${ve.value.label})` : "Auto";
-      const l = o.qualityLevels.find((s) => s.index === o.selectedLevel);
-      return (l == null ? void 0 : l.label) ?? "Auto";
-    });
-    function se(l) {
-      h("select-level", l), ae.value = !1;
-    }
-    const pe = y([]), W = y(-1), G = y(!1), xe = y(null);
-    function ge(l) {
-      const s = [];
-      for (let L = 0; L < l.length; L++) {
-        const F = l[L];
-        (F.kind === "subtitles" || F.kind === "captions") && s.push({ index: L, label: F.label || F.language || `Track ${L + 1}` });
-      }
-      pe.value = s;
-      let i = -1;
-      for (let L = 0; L < l.length; L++)
-        if (l[L].mode === "showing") {
-          i = L;
-          break;
-        }
-      W.value = i;
-    }
-    R(() => o.video, (l) => {
-      if (!l) {
-        pe.value = [], W.value = -1;
-        return;
-      }
-      const s = l.textTracks;
-      ge(s);
-      const i = () => ge(s);
-      typeof s.addEventListener == "function" && (s.addEventListener("addtrack", i), s.addEventListener("removetrack", i), s.addEventListener("change", i));
+      b(), u.addEventListener("volumechange", b);
     }, { immediate: !0 });
-    function Le(l) {
-      var i;
-      const s = (i = o.video) == null ? void 0 : i.textTracks;
-      if (s) {
-        for (let L = 0; L < s.length; L++) s[L].mode = L === l ? "showing" : "hidden";
-        W.value = l, G.value = !1;
-      }
+    function ge() {
+      a.video && (a.video.muted = !a.video.muted);
     }
-    function u() {
-      var s;
-      const l = (s = o.video) == null ? void 0 : s.textTracks;
-      if (l) {
-        for (let i = 0; i < l.length; i++) l[i].mode = "hidden";
-        W.value = -1, G.value = !1;
-      }
+    function ue(u) {
+      const b = a.video;
+      if (!b) return;
+      const _ = Number(u.target.value) / 100;
+      b.volume = _, _ > 0 && b.muted && (b.muted = !1);
     }
-    const v = y(!1), P = typeof document < "u" && !!document.pictureInPictureEnabled;
-    R(() => o.video, (l) => {
-      l && (l.addEventListener("enterpictureinpicture", () => {
-        v.value = !0;
-      }), l.addEventListener("leavepictureinpicture", () => {
-        v.value = !1;
+    const me = g(!1), Ie = typeof document < "u" && !!document.pictureInPictureEnabled;
+    H(() => a.video, (u) => {
+      u && (u.addEventListener("enterpictureinpicture", () => {
+        me.value = !0;
+      }), u.addEventListener("leavepictureinpicture", () => {
+        me.value = !1;
       }));
     }, { immediate: !0 });
-    function fe() {
-      o.video && (document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
-      }) : o.video.requestPictureInPicture().catch(() => {
+    function Se() {
+      a.video && (document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
+      }) : a.video.requestPictureInPicture().catch(() => {
       }));
     }
-    const j = y(!1), Ee = typeof document > "u" ? !1 : !!(document.fullscreenEnabled || document.webkitFullscreenEnabled);
-    function Se() {
+    const de = g(!1), Pe = typeof document > "u" ? !1 : !!(document.fullscreenEnabled || document.webkitFullscreenEnabled);
+    function xe() {
       return document.fullscreenElement ?? document.webkitFullscreenElement ?? null;
     }
-    function _e(l) {
-      const s = l.requestFullscreen ?? l.webkitRequestFullscreen;
-      return s ? s.call(l) : Promise.reject(new Error("unsupported"));
+    function Ce(u) {
+      const b = u.requestFullscreen ?? u.webkitRequestFullscreen;
+      return b ? b.call(u) : Promise.reject(new Error("unsupported"));
     }
-    function ke() {
-      const l = document.exitFullscreen ?? document.webkitExitFullscreen;
-      return l ? l.call(document) : Promise.reject(new Error("unsupported"));
+    function Le() {
+      const u = document.exitFullscreen ?? document.webkitExitFullscreen;
+      return u ? u.call(document) : Promise.reject(new Error("unsupported"));
     }
-    function $e() {
-      j.value = Se() === o.container;
+    function U() {
+      de.value = xe() === a.container;
     }
-    He(() => {
-      document.addEventListener("fullscreenchange", $e), document.addEventListener("webkitfullscreenchange", $e);
-    }), ne(() => {
-      _(), document.removeEventListener("fullscreenchange", $e), document.removeEventListener("webkitfullscreenchange", $e);
+    Be(() => {
+      document.addEventListener("fullscreenchange", U), document.addEventListener("webkitfullscreenchange", U);
+    }), oe(() => {
+      E(), document.removeEventListener("fullscreenchange", U), document.removeEventListener("webkitfullscreenchange", U);
     });
-    function je() {
-      var l, s;
-      if (e) {
-        (s = (l = o.video) == null ? void 0 : l.webkitEnterFullscreen) == null || s.call(l);
+    function Ae() {
+      var u, b;
+      if (n) {
+        (b = (u = a.video) == null ? void 0 : u.webkitEnterFullscreen) == null || b.call(u);
         return;
       }
-      j.value ? ke().catch(() => {
-      }) : o.container && _e(o.container).catch(() => {
+      de.value ? Le().catch(() => {
+      }) : a.container && Ce(a.container).catch(() => {
       });
     }
-    const Qe = Ee || e && o.video !== null && typeof o.video.webkitEnterFullscreen == "function";
-    function Ne(l, s) {
-      function i(F) {
-        s.value && !s.value.contains(F.target) && (l.value = !1);
-      }
-      function L(F) {
-        F.key === "Escape" && (l.value = !1);
-      }
-      R(l, (F) => {
-        F ? (document.addEventListener("mousedown", i), document.addEventListener("keydown", L)) : (document.removeEventListener("mousedown", i), document.removeEventListener("keydown", L));
-      }), ne(() => {
-        document.removeEventListener("mousedown", i), document.removeEventListener("keydown", L);
-      });
-    }
-    return Ne(le, we), Ne(G, xe), Ne(ae, Q), (l, s) => (d(), f("div", {
+    const Ne = Pe || n && a.video !== null && typeof a.video.webkitEnterFullscreen == "function";
+    return (u, b) => (r(), c("div", {
       role: "toolbar",
       "aria-label": "Video controls",
-      class: w(["gvp-controls", !g.value && "is-hidden"]),
-      onMouseenter: _,
-      onMouseleave: $
+      class: L(["gvp-controls", !d.value && "is-hidden"]),
+      onMouseenter: E,
+      onMouseleave: S
     }, [
-      r("div", Wt, [
-        t.hasPrev || t.hasNext ? (d(), f("button", {
-          key: 0,
-          type: "button",
-          class: "gvp-ctrl-btn",
-          "aria-label": "Previous video",
-          disabled: !t.hasPrev,
-          onClick: s[0] || (s[0] = (i) => h("prev"))
-        }, [
-          Z(Et)
-        ], 8, zt)) : M("", !0),
-        r("button", {
-          type: "button",
-          class: "gvp-ctrl-btn",
-          "aria-label": t.isPlaying ? "Pause" : "Play",
-          "aria-pressed": t.isPlaying,
-          onClick: s[1] || (s[1] = //@ts-ignore
-          (...i) => t.onTogglePlay && t.onTogglePlay(...i))
-        }, [
-          t.isPlaying ? (d(), z(bt, { key: 0 })) : (d(), z(xt, { key: 1 }))
-        ], 8, Yt),
-        t.hasPrev || t.hasNext ? (d(), f("button", {
-          key: 1,
-          type: "button",
-          class: "gvp-ctrl-btn",
-          "aria-label": "Next video",
-          disabled: !t.hasNext,
-          onClick: s[2] || (s[2] = (i) => h("next"))
-        }, [
-          Z($t)
-        ], 8, Kt)) : M("", !0),
-        r("div", {
+      o("div", In, [
+        o("div", {
           class: "gvp-seek",
-          onPointermove: H,
-          onPointerleave: V
+          onPointermove: R,
+          onPointerleave: fe
         }, [
-          r("div", {
+          o("div", {
             ref_key: "seekTrackEl",
-            ref: J,
+            ref: V,
             class: "gvp-seek-track"
           }, [
-            r("div", {
+            o("div", {
               class: "gvp-seek-buffered",
-              style: re({ width: `${B()}%` })
+              style: ce({ width: `${re()}%` })
             }, null, 4),
-            r("div", {
+            o("div", {
               class: "gvp-seek-progress",
-              style: re({ width: `${x()}%` })
+              style: ce({ width: `${K()}%` })
             }, null, 4),
-            p() ? (d(!0), f(ie, { key: 0 }, ue(ce.value, (i) => We((d(), f("div", {
-              key: `${i.start}-${i.title}`,
+            j() ? (r(!0), c(ae, { key: 0 }, pe(Q.value, (_) => ot((r(), c("div", {
+              key: `${_.start}-${_.title}`,
               class: "gvp-seek-chapter-tick",
-              style: re({ left: `${i.start / m.value * 100}%` })
+              style: ce({ left: `${_.start / w.value * 100}%` })
             }, null, 4)), [
-              [ze, i.start > 0 && i.start < m.value]
-            ])), 128)) : M("", !0)
+              [rt, _.start > 0 && _.start < w.value]
+            ])), 128)) : x("", !0)
           ], 512),
-          D.value && p() ? (d(), f("div", {
+          B.value && j() ? (r(), c("div", {
             key: 0,
-            class: w(["gvp-seek-preview", { "has-thumb": me.value }]),
-            style: re({ left: `${Pe.value}px` })
+            class: L(["gvp-seek-preview", { "has-thumb": p.value }]),
+            style: ce({ left: `${ee.value}px` })
           }, [
-            me.value && O.value ? (d(), f("div", {
+            p.value && y.value ? (r(), c("div", {
               key: 0,
               class: "gvp-seek-preview-thumb",
-              style: re({
-                width: `${O.value.w}px`,
-                height: `${O.value.h}px`,
-                backgroundImage: `url(${JSON.stringify(O.value.url)})`,
-                backgroundPosition: `-${O.value.x}px -${O.value.y}px`
+              style: ce({
+                width: `${y.value.w}px`,
+                height: `${y.value.h}px`,
+                backgroundImage: `url(${JSON.stringify(y.value.url)})`,
+                backgroundPosition: `-${y.value.x}px -${y.value.y}px`
               })
-            }, null, 4)) : M("", !0),
-            de.value ? (d(), f("span", Xt, U(de.value.title), 1)) : M("", !0),
-            r("span", Jt, U(te(Ae)(k.value)), 1)
-          ], 6)) : M("", !0),
-          r("input", {
+            }, null, 4)) : x("", !0),
+            Y.value ? (r(), c("span", Sn, Z(Y.value.title), 1)) : x("", !0),
+            o("span", An, Z(se(_e)(D.value)), 1)
+          ], 6)) : x("", !0),
+          o("input", {
             type: "range",
             class: "gvp-seek-input",
             min: 0,
             max: 100,
             step: 0.1,
-            value: x(),
-            disabled: !p(),
+            value: K(),
+            disabled: !j(),
             "aria-label": "Seek",
             "aria-valuemin": 0,
-            "aria-valuemax": Math.floor(m.value),
-            "aria-valuenow": Math.floor(b.value),
-            onInput: Y
-          }, null, 40, Gt)
-        ], 32),
-        r("span", en, U(te(Ae)(b.value)) + " / " + U(te(Ae)(m.value)), 1),
-        r("div", {
-          ref_key: "speedRootEl",
-          ref: we,
-          class: "gvp-speed"
-        }, [
-          r("button", {
+            "aria-valuemax": Math.floor(w.value),
+            "aria-valuenow": Math.floor(P.value),
+            "aria-valuetext": `${se(_e)(P.value)} of ${se(_e)(w.value)}`,
+            onInput: C
+          }, null, 40, Nn)
+        ], 32)
+      ]),
+      o("div", Bn, [
+        o("div", Hn, [
+          o("button", {
             type: "button",
-            class: "gvp-ctrl-btn gvp-speed-btn",
-            "aria-haspopup": "listbox",
-            "aria-expanded": le.value,
-            "aria-label": `Playback speed: ${X.value === 1 ? "1×" : X.value + "×"}`,
-            onClick: s[3] || (s[3] = (i) => le.value = !le.value)
+            class: "gvp-ctrl-btn",
+            "aria-label": e.isPlaying ? "Pause" : "Play",
+            "aria-pressed": e.isPlaying,
+            onClick: b[0] || (b[0] = //@ts-ignore
+            (..._) => e.onTogglePlay && e.onTogglePlay(..._))
           }, [
-            Z(Oe),
-            r("span", nn, U(X.value === 1 ? "1×" : `${X.value}×`), 1)
-          ], 8, tn),
-          le.value ? (d(), f("ul", ln, [
-            (d(), f(ie, null, ue(c, (i) => r("li", { key: i }, [
-              r("button", {
-                type: "button",
-                role: "option",
-                "aria-selected": i === X.value,
-                class: w(["gvp-speed-menu-item", { "is-active": i === X.value }]),
-                onClick: (L) => Ie(i)
-              }, U(i === 1 ? "Normal" : `${i}×`), 11, an)
-            ])), 64))
-          ])) : M("", !0)
-        ], 512),
-        he.value ? (d(), f("div", {
-          key: 2,
-          ref_key: "qualityRootEl",
-          ref: Q,
-          class: "gvp-quality"
-        }, [
-          r("button", {
+            e.isPlaying ? (r(), J(Ht, { key: 0 })) : (r(), J(Rt, { key: 1 }))
+          ], 8, Vn),
+          e.hasPrev || e.hasNext ? (r(), c("button", {
+            key: 0,
             type: "button",
-            class: "gvp-ctrl-btn gvp-quality-btn",
-            "aria-haspopup": "listbox",
-            "aria-expanded": ae.value,
-            "aria-label": `Quality: ${Ce.value}`,
-            onClick: s[4] || (s[4] = (i) => ae.value = !ae.value)
+            class: "gvp-ctrl-btn",
+            "aria-label": "Previous video",
+            disabled: !e.hasPrev,
+            onClick: b[1] || (b[1] = (_) => v("prev"))
           }, [
-            Z(Ht),
-            r("span", sn, U(Ce.value), 1)
-          ], 8, on),
-          ae.value ? (d(), f("ul", rn, [
-            r("li", null, [
-              r("button", {
-                type: "button",
-                role: "option",
-                "aria-selected": t.selectedLevel < 0,
-                class: w(["gvp-quality-menu-item", { "is-active": t.selectedLevel < 0 }]),
-                onClick: s[5] || (s[5] = (i) => se(te(Ke).index))
-              }, U(ve.value ? `Auto (${ve.value.label})` : "Auto"), 11, un)
-            ]),
-            (d(!0), f(ie, null, ue(be.value, (i) => (d(), f("li", {
-              key: i.index
-            }, [
-              r("button", {
-                type: "button",
-                role: "option",
-                "aria-selected": i.index === t.selectedLevel,
-                class: w(["gvp-quality-menu-item", { "is-active": i.index === t.selectedLevel }]),
-                onClick: (L) => se(i.index)
-              }, U(i.label), 11, cn)
-            ]))), 128))
-          ])) : M("", !0)
-        ], 512)) : M("", !0),
-        pe.value.length > 0 ? (d(), f("div", {
-          key: 3,
-          ref_key: "captionsRootEl",
-          ref: xe,
-          class: "gvp-captions"
-        }, [
-          r("button", {
+            O(Ft)
+          ], 8, Rn)) : x("", !0),
+          e.hasPrev || e.hasNext ? (r(), c("button", {
+            key: 1,
             type: "button",
-            class: w(["gvp-ctrl-btn", W.value >= 0 && "is-active"]),
-            "aria-haspopup": "listbox",
-            "aria-expanded": G.value,
-            "aria-label": "Captions",
-            "aria-pressed": W.value >= 0,
-            onClick: s[6] || (s[6] = (i) => G.value = !G.value)
+            class: "gvp-ctrl-btn",
+            "aria-label": "Next video",
+            disabled: !e.hasNext,
+            onClick: b[2] || (b[2] = (_) => v("next"))
           }, [
-            Z(Ue)
-          ], 10, dn),
-          G.value ? (d(), f("ul", vn, [
-            r("li", null, [
-              r("button", {
-                type: "button",
-                role: "option",
-                "aria-selected": W.value === -1,
-                class: w(["gvp-captions-menu-item", { "is-active": W.value === -1 }]),
-                onClick: u
-              }, "Off", 10, pn)
-            ]),
-            (d(!0), f(ie, null, ue(pe.value, (i) => (d(), f("li", {
-              key: i.index
+            O(Ot)
+          ], 8, Dn)) : x("", !0),
+          o("div", {
+            class: L(["gvp-volume", !se(t) && "is-expandable"])
+          }, [
+            o("button", {
+              type: "button",
+              class: "gvp-ctrl-btn",
+              "aria-label": G.value ? "Unmute" : "Mute",
+              "aria-pressed": G.value,
+              onClick: ge
             }, [
-              r("button", {
-                type: "button",
-                role: "option",
-                "aria-selected": i.index === W.value,
-                class: w(["gvp-captions-menu-item", { "is-active": i.index === W.value }]),
-                onClick: (L) => Le(i.index)
-              }, U(i.label), 11, fn)
-            ]))), 128))
-          ])) : M("", !0)
-        ], 512)) : M("", !0),
-        r("div", {
-          class: w(["gvp-volume", !te(n) && "is-expandable"])
-        }, [
-          r("button", {
+              G.value || X.value === 0 ? (r(), J(Kt, { key: 0 })) : X.value < 0.5 ? (r(), J(zt, { key: 1 })) : (r(), J(Ut, { key: 2 }))
+            ], 8, Fn),
+            se(t) ? x("", !0) : (r(), c("div", qn, [
+              o("div", On, [
+                o("div", {
+                  class: "gvp-volume-fill",
+                  style: ce({ width: `${G.value ? 0 : Math.round(X.value * 100)}%` })
+                }, null, 4)
+              ]),
+              o("input", {
+                type: "range",
+                class: "gvp-volume-input",
+                min: 0,
+                max: 100,
+                step: 1,
+                value: G.value ? 0 : Math.round(X.value * 100),
+                "aria-label": "Volume",
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-valuenow": G.value ? 0 : Math.round(X.value * 100),
+                "aria-valuetext": `${G.value ? 0 : Math.round(X.value * 100)}%`,
+                onInput: ue
+              }, null, 40, jn)
+            ]))
+          ], 2),
+          M.value ? x("", !0) : (r(), c("span", Un, Z(se(_e)(P.value)) + " / " + Z(se(_e)(w.value)), 1)),
+          M.value ? (r(), c("button", {
+            key: 3,
             type: "button",
-            class: "gvp-ctrl-btn",
-            "aria-label": q.value ? "Unmute" : "Mute",
-            "aria-pressed": q.value,
-            onClick: Me
+            class: L(["gvp-live", { "is-at-edge": f.value }]),
+            disabled: f.value,
+            "aria-label": f.value ? "Live" : "Go to live edge",
+            onClick: z
+          }, [...b[5] || (b[5] = [
+            o("span", { class: "gvp-live-dot" }, null, -1),
+            o("span", null, "LIVE", -1)
+          ])], 10, Zn)) : x("", !0)
+        ]),
+        o("div", zn, [
+          O(Ln, {
+            video: e.video,
+            "quality-levels": e.qualityLevels,
+            "current-level": e.currentLevel,
+            "selected-level": e.selectedLevel,
+            "audio-tracks": e.audioTracks,
+            "audio-track-index": e.audioTrackIndex,
+            onSelectLevel: b[3] || (b[3] = (_) => v("select-level", _)),
+            onSelectAudioTrack: b[4] || (b[4] = (_) => v("select-audio-track", _))
+          }, null, 8, ["video", "quality-levels", "current-level", "selected-level", "audio-tracks", "audio-track-index"]),
+          se(Ie) ? (r(), c("button", {
+            key: 0,
+            type: "button",
+            class: L(["gvp-ctrl-btn", me.value && "is-active"]),
+            "aria-label": me.value ? "Exit picture-in-picture" : "Picture-in-picture",
+            "aria-pressed": me.value,
+            onClick: Se
           }, [
-            q.value || K.value === 0 ? (d(), z(Nt, { key: 0 })) : K.value < 0.5 ? (d(), z(It, { key: 1 })) : (d(), z(Mt, { key: 2 }))
-          ], 8, mn),
-          te(n) ? M("", !0) : (d(), f("div", hn, [
-            r("div", gn, [
-              r("div", {
-                class: "gvp-volume-fill",
-                style: re({ width: `${q.value ? 0 : Math.round(K.value * 100)}%` })
-              }, null, 4)
-            ]),
-            r("input", {
-              type: "range",
-              class: "gvp-volume-input",
-              min: 0,
-              max: 100,
-              step: 1,
-              value: q.value ? 0 : Math.round(K.value * 100),
-              "aria-label": "Volume",
-              "aria-valuemin": 0,
-              "aria-valuemax": 100,
-              "aria-valuenow": q.value ? 0 : Math.round(K.value * 100),
-              onInput: Te
-            }, null, 40, kn)
-          ]))
-        ], 2),
-        te(P) ? (d(), f("button", {
-          key: 4,
-          type: "button",
-          class: w(["gvp-ctrl-btn", v.value && "is-active"]),
-          "aria-label": v.value ? "Exit picture-in-picture" : "Picture-in-picture",
-          "aria-pressed": v.value,
-          onClick: fe
-        }, [
-          Z(Ze)
-        ], 10, yn)) : M("", !0),
-        te(Qe) ? (d(), f("button", {
-          key: 5,
-          type: "button",
-          class: w(["gvp-ctrl-btn", j.value && "is-active"]),
-          "aria-label": j.value ? "Exit fullscreen" : "Enter fullscreen",
-          "aria-pressed": j.value,
-          onClick: je
-        }, [
-          j.value ? (d(), z(Ft, { key: 0 })) : (d(), z(qt, { key: 1 }))
-        ], 10, wn)) : M("", !0)
+            O(ze)
+          ], 10, Wn)) : x("", !0),
+          se(Ne) ? (r(), c("button", {
+            key: 1,
+            type: "button",
+            class: L(["gvp-ctrl-btn", de.value && "is-active"]),
+            "aria-label": de.value ? "Exit fullscreen" : "Enter fullscreen",
+            "aria-pressed": de.value,
+            onClick: Ae
+          }, [
+            de.value ? (r(), J(Xt, { key: 0 })) : (r(), J(Gt, { key: 1 }))
+          ], 10, Kn)) : x("", !0)
+        ])
       ])
     ], 34));
   }
-}), xn = { name: "IconDesktop" }, Ln = /* @__PURE__ */ I({
-  ...xn,
+}), Jn = { name: "IconDesktop" }, Xn = /* @__PURE__ */ N({
+  ...Jn,
   props: {
     class: {}
   },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
       width: "20",
       height: "20",
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, [...e[0] || (e[0] = [
-      r("path", {
+    }, [...n[0] || (n[0] = [
+      o("path", {
         d: "M14 2H10C6.72077 2 5.08116 2 3.91891 2.81382C3.48891 3.1149 3.1149 3.48891 2.81382 3.91891C2 5.08116 2 6.72077 2 10C2 13.2792 2 14.9188 2.81382 16.0811C3.1149 16.5111 3.48891 16.8851 3.91891 17.1862C5.08116 18 6.72077 18 10 18H14C17.2792 18 18.9188 18 20.0811 17.1862C20.5111 16.8851 20.8851 16.5111 21.1862 16.0811C22 14.9188 22 13.2792 22 10C22 6.72077 22 5.08116 21.1862 3.91891C20.8851 3.48891 20.5111 3.1149 20.0811 2.81382C18.9188 2 17.2792 2 14 2Z",
         stroke: "currentColor",
         "stroke-width": "1.5",
         "stroke-linecap": "round"
       }, null, -1),
-      r("path", {
+      o("path", {
         d: "M11 15H13",
         stroke: "currentColor",
         "stroke-width": "1.5",
         "stroke-linecap": "round",
         "stroke-linejoin": "round"
       }, null, -1),
-      r("path", {
+      o("path", {
         d: "M14.5 22L14.1845 21.5811C13.4733 20.6369 13.2969 19.1944 13.7468 18M9.5 22L9.8155 21.5811C10.5267 20.6369 10.7031 19.1944 10.2532 18",
         stroke: "currentColor",
         "stroke-width": "1.5",
         "stroke-linecap": "round"
       }, null, -1),
-      r("path", {
+      o("path", {
         d: "M7 22H17",
         stroke: "currentColor",
         "stroke-width": "1.5",
@@ -1508,36 +1661,36 @@ const Wt = { class: "gvp-controls-row" }, zt = ["disabled"], Yt = ["aria-label",
       }, null, -1)
     ])], 2));
   }
-}), En = { name: "IconMobile" }, _n = /* @__PURE__ */ I({
-  ...En,
+}), el = { name: "IconMobile" }, tl = /* @__PURE__ */ N({
+  ...el,
   props: {
     class: {}
   },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
       width: "20",
       height: "20",
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, [...e[0] || (e[0] = [
-      r("path", {
+    }, [...n[0] || (n[0] = [
+      o("path", {
         d: "M5 9C5 5.70017 5 4.05025 6.02513 3.02513C7.05025 2 8.70017 2 12 2C15.2998 2 16.9497 2 17.9749 3.02513C19 4.05025 19 5.70017 19 9V15C19 18.2998 19 19.9497 17.9749 20.9749C16.9497 22 15.2998 22 12 22C8.70017 22 7.05025 22 6.02513 20.9749C5 19.9497 5 18.2998 5 15V9Z",
         stroke: "currentColor",
         "stroke-width": "2",
         "stroke-linecap": "round"
       }, null, -1),
-      r("path", {
+      o("path", {
         d: "M11 19H13",
         stroke: "currentColor",
         "stroke-width": "2",
         "stroke-linecap": "round",
         "stroke-linejoin": "round"
       }, null, -1),
-      r("path", {
+      o("path", {
         d: "M9 2L9.089 2.53402C9.28188 3.69129 9.37832 4.26993 9.77519 4.62204C10.1892 4.98934 10.7761 5 12 5C13.2239 5 13.8108 4.98934 14.2248 4.62204C14.6217 4.26993 14.7181 3.69129 14.911 2.53402L15 2",
         stroke: "currentColor",
         "stroke-width": "2",
@@ -1545,121 +1698,270 @@ const Wt = { class: "gvp-controls-row" }, zt = ["disabled"], Yt = ["aria-label",
       }, null, -1)
     ])], 2));
   }
-}), $n = { name: "IconPlay" }, Pn = /* @__PURE__ */ I({
-  ...$n,
+}), nl = { name: "IconPlay" }, ll = /* @__PURE__ */ N({
+  ...nl,
   props: {
     class: {}
   },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
       width: "22",
       height: "22",
       viewBox: "0 0 16 16",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, [...e[0] || (e[0] = [
-      r("path", {
+    }, [...n[0] || (n[0] = [
+      o("path", {
         d: "M5.3335 11.45V4.54997C5.3335 4.36108 5.40016 4.20275 5.5335 4.07497C5.66683 3.94719 5.82238 3.8833 6.00016 3.8833C6.05572 3.8833 6.11405 3.89163 6.17516 3.9083C6.23627 3.92497 6.29461 3.94997 6.35016 3.9833L11.7835 7.4333C11.8835 7.49997 11.9585 7.5833 12.0085 7.6833C12.0585 7.7833 12.0835 7.88886 12.0835 7.99997C12.0835 8.11108 12.0585 8.21663 12.0085 8.31663C11.9585 8.41663 11.8835 8.49997 11.7835 8.56663L6.35016 12.0166C6.29461 12.05 6.23627 12.075 6.17516 12.0916C6.11405 12.1083 6.05572 12.1166 6.00016 12.1166C5.82238 12.1166 5.66683 12.0527 5.5335 11.925C5.40016 11.7972 5.3335 11.6389 5.3335 11.45Z",
         fill: "currentColor"
       }, null, -1)
     ])], 2));
   }
-}), Mn = { name: "IconX" }, Tn = /* @__PURE__ */ I({
-  ...Mn,
+}), sl = { name: "IconX" }, Oe = /* @__PURE__ */ N({
+  ...sl,
   props: {
     class: {}
   },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
       width: "14",
       height: "14",
       viewBox: "0 0 14 14",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, [...e[0] || (e[0] = [
-      r("path", {
+    }, [...n[0] || (n[0] = [
+      o("path", {
         d: "M6.94994 5.53594L12.1929 0.292938C12.5834 -0.0975275 13.2165 -0.0975279 13.6069 0.292938C13.9974 0.683403 13.9974 1.31647 13.6069 1.70694L8.36394 6.94994L13.6069 12.1929C13.9974 12.5834 13.9974 13.2165 13.6069 13.6069C13.2165 13.9974 12.5834 13.9974 12.1929 13.6069L6.94994 8.36394L1.70694 13.6069C1.31647 13.9974 0.683403 13.9974 0.292938 13.6069C-0.0975279 13.2165 -0.0975277 12.5834 0.292938 12.1929L5.53594 6.94994L0.292938 1.70694C-0.0975279 1.31647 -0.0975279 0.683403 0.292938 0.292938C0.683403 -0.0975279 1.31647 -0.0975277 1.70694 0.292938L6.94994 5.53594Z",
         fill: "currentColor"
       }, null, -1)
     ])], 2));
   }
+}), al = { name: "IconAlert" }, ol = /* @__PURE__ */ N({
+  ...al,
+  props: {
+    class: {}
+  },
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
+      width: "32",
+      height: "32",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, [...n[0] || (n[0] = [
+      o("path", {
+        d: "M12 9V13M12 17H12.01M10.29 3.86L1.82 18A2 2 0 0 0 3.53 21H20.47A2 2 0 0 0 22.18 18L13.71 3.86A2 2 0 0 0 10.29 3.86Z",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }, null, -1)
+    ])], 2));
+  }
+}), rl = { name: "IconRefresh" }, il = /* @__PURE__ */ N({
+  ...rl,
+  props: {
+    class: {}
+  },
+  setup(e) {
+    const l = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", l.class]),
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, [...n[0] || (n[0] = [
+      o("path", {
+        d: "M21 12A9 9 0 1 1 18.36 5.64M21 3V9H15",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }, null, -1)
+    ])], 2));
+  }
 });
-function In(t) {
-  if (!t) return null;
-  if (/^[A-Za-z0-9_-]{11}$/.test(t)) return t;
-  let a;
+function ul(e) {
+  if (!e) return null;
+  if (/^[A-Za-z0-9_-]{11}$/.test(e)) return e;
+  let l;
   try {
-    a = new URL(t);
+    l = new URL(e);
   } catch {
     return null;
   }
-  const n = a.hostname.replace(/^www\./, "");
-  if (n === "youtu.be") {
-    const e = a.pathname.slice(1).split("/")[0];
-    return /^[A-Za-z0-9_-]{11}$/.test(e) ? e : null;
+  const t = l.hostname.replace(/^www\./, "");
+  if (t === "youtu.be") {
+    const n = l.pathname.slice(1).split("/")[0];
+    return /^[A-Za-z0-9_-]{11}$/.test(n) ? n : null;
   }
-  if (n === "youtube.com" || n === "m.youtube.com" || n === "music.youtube.com" || n === "youtube-nocookie.com") {
-    const e = a.searchParams.get("v");
-    if (e && /^[A-Za-z0-9_-]{11}$/.test(e)) return e;
-    const c = /^\/(?:embed|shorts|v|live)\/([A-Za-z0-9_-]{11})/.exec(
-      a.pathname
+  if (t === "youtube.com" || t === "m.youtube.com" || t === "music.youtube.com" || t === "youtube-nocookie.com") {
+    const n = l.searchParams.get("v");
+    if (n && /^[A-Za-z0-9_-]{11}$/.test(n)) return n;
+    const a = /^\/(?:embed|shorts|v|live)\/([A-Za-z0-9_-]{11})/.exec(
+      l.pathname
     );
-    if (c) return c[1];
+    if (a) return a[1];
   }
   return null;
 }
-function Sn(t) {
+function cl(e) {
   try {
-    const a = new URL(t), n = a.searchParams.get("t") ?? a.searchParams.get("start");
-    if (!n) return null;
-    if (/^\d+s?$/.test(n)) return Number.parseInt(n, 10);
-    const e = /^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/.exec(n);
-    if (e) {
-      const c = Number.parseInt(e[1] ?? "0", 10), o = Number.parseInt(e[2] ?? "0", 10), h = Number.parseInt(e[3] ?? "0", 10), g = c * 3600 + o * 60 + h;
-      return g > 0 ? g : null;
+    const l = new URL(e), t = l.searchParams.get("t") ?? l.searchParams.get("start");
+    if (!t) return null;
+    if (/^\d+s?$/.test(t)) return Number.parseInt(t, 10);
+    const n = /^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/.exec(t);
+    if (n) {
+      const a = Number.parseInt(n[1] ?? "0", 10), v = Number.parseInt(n[2] ?? "0", 10), d = Number.parseInt(n[3] ?? "0", 10), h = a * 3600 + v * 60 + d;
+      return h > 0 ? h : null;
     }
   } catch {
   }
   return null;
 }
-function Nn(t, a = {}) {
+function dl(e, l = {}) {
   const {
-    autoPlay: n = !1,
-    muted: e = !0,
-    loop: c = !1,
-    controls: o = !0,
-    startSeconds: h
-  } = a, g = new URLSearchParams({
+    autoPlay: t = !1,
+    muted: n = !0,
+    loop: a = !1,
+    controls: v = !0,
+    startSeconds: d
+  } = l, h = new URLSearchParams({
     rel: "0",
     modestbranding: "1",
     playsinline: "1",
-    controls: o ? "1" : "0"
+    controls: v ? "1" : "0"
   });
-  return n ? (g.set("autoplay", "1"), g.set("mute", "1")) : e && g.set("mute", "1"), c && (g.set("loop", "1"), g.set("playlist", t)), h && h > 0 && g.set("start", String(h)), `https://www.youtube-nocookie.com/embed/${t}?${g.toString()}`;
+  return t ? (h.set("autoplay", "1"), h.set("mute", "1")) : n && h.set("mute", "1"), a && (h.set("loop", "1"), h.set("playlist", e)), d && d > 0 && h.set("start", String(d)), `https://www.youtube-nocookie.com/embed/${e}?${h.toString()}`;
 }
-const An = ["src"], Hn = {
-  key: 2,
-  class: "gvp-vignette"
-}, Bn = {
+const vl = "gvp:prefs:";
+function We(e) {
+  return vl + e;
+}
+function Me(e) {
+  if (typeof localStorage > "u") return {};
+  try {
+    const l = localStorage.getItem(We(e));
+    if (!l) return {};
+    const t = JSON.parse(l);
+    return typeof t == "object" && t !== null ? t : {};
+  } catch {
+    return {};
+  }
+}
+function Ke(e, l) {
+  if (!(typeof localStorage > "u"))
+    try {
+      const n = { ...Me(e), ...l };
+      localStorage.setItem(We(e), JSON.stringify(n));
+    } catch {
+    }
+}
+function je(e, l, t) {
+  if (typeof localStorage > "u" || !l) return;
+  const a = { ...Me(e).positions };
+  t > 0 ? a[l] = t : delete a[l], Ke(e, { positions: a });
+}
+function pl(e, l) {
+  var a;
+  const n = (a = Me(e).positions) == null ? void 0 : a[l];
+  return typeof n == "number" && n > 0 ? n : 0;
+}
+function fl(e) {
+  const l = e.trim().replace(/^#/, "");
+  if (/^[0-9a-f]{3}$/i.test(l))
+    return [
+      parseInt(l[0] + l[0], 16),
+      parseInt(l[1] + l[1], 16),
+      parseInt(l[2] + l[2], 16)
+    ];
+  if (/^[0-9a-f]{6}$/i.test(l))
+    return [
+      parseInt(l.slice(0, 2), 16),
+      parseInt(l.slice(2, 4), 16),
+      parseInt(l.slice(4, 6), 16)
+    ];
+  const t = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i.exec(e);
+  return t ? [Number(t[1]), Number(t[2]), Number(t[3])] : null;
+}
+function ml(e, l) {
+  const t = fl(e);
+  return t ? `rgba(${t[0]}, ${t[1]}, ${t[2]}, ${l})` : e;
+}
+function gl(e, l) {
+  if (!l) return "";
+  const t = [];
+  if (l.fontSize && t.push(`font-size: ${l.fontSize};`), l.textColor && t.push(`color: ${l.textColor};`), l.backgroundColor) {
+    const n = typeof l.backgroundOpacity == "number" ? ml(l.backgroundColor, l.backgroundOpacity) : l.backgroundColor;
+    t.push(`background-color: ${n};`);
+  } else typeof l.backgroundOpacity == "number" && t.push(`background-color: rgba(0, 0, 0, ${l.backgroundOpacity});`);
+  return t.length === 0 ? "" : `.${e}::cue { ${t.join(" ")} }`;
+}
+function hl(e) {
+  const l = e.trim().replace(/^#/, "");
+  if (/^[0-9a-f]{3}$/i.test(l)) {
+    const n = parseInt(l[0] + l[0], 16), a = parseInt(l[1] + l[1], 16), v = parseInt(l[2] + l[2], 16);
+    return `${n} ${a} ${v}`;
+  }
+  if (/^[0-9a-f]{6}$/i.test(l)) {
+    const n = parseInt(l.slice(0, 2), 16), a = parseInt(l.slice(2, 4), 16), v = parseInt(l.slice(4, 6), 16);
+    return `${n} ${a} ${v}`;
+  }
+  const t = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i.exec(e);
+  return t ? `${t[1]} ${t[2]} ${t[3]}` : null;
+}
+function kl(e) {
+  if (!e) return {};
+  const l = {};
+  if (e.accent) {
+    const t = hl(e.accent);
+    t ? l["--gvp-accent-rgb"] = t : l["--gvp-accent"] = e.accent;
+  }
+  return e.radius && (l["--gvp-radius"] = e.radius), l;
+}
+const yl = ["src"], bl = {
   key: 3,
+  class: "gvp-vignette"
+}, wl = {
+  key: 4,
+  class: "gvp-sr-only",
+  role: "status",
+  "aria-live": "polite"
+}, xl = {
+  key: 5,
+  class: "gvp-loading",
+  role: "status",
+  "aria-live": "polite"
+}, Cl = {
+  key: 6,
+  class: "gvp-error",
+  role: "alert"
+}, Ll = {
+  key: 7,
   class: "gvp-toggle"
-}, Vn = { class: "gvp-toggle-pill" }, qn = ["aria-pressed"], Dn = ["aria-pressed"], Fn = ["aria-label", "aria-pressed"], Rn = ["aria-label"], On = {
-  key: 10,
+}, $l = { class: "gvp-toggle-pill" }, El = ["aria-pressed"], _l = ["aria-pressed"], Pl = ["aria-label", "aria-pressed"], Tl = ["aria-label"], Ml = {
+  key: 14,
   class: "gvp-play-wrap"
-}, Un = {
+}, Il = {
   key: 0,
   class: "gvp-tooltip",
   role: "tooltip"
-}, Zn = {
-  key: 12,
+}, Sl = {
+  key: 16,
   class: "gvp-bottom-fade"
-}, Wn = /* @__PURE__ */ I({
+}, Bl = /* @__PURE__ */ N({
   __name: "VideoPlayer",
   props: {
     src: {},
@@ -1681,358 +1983,541 @@ const An = ["src"], Hn = {
     isHls: { type: Boolean },
     thumbnails: {},
     chapters: {},
+    persistKey: {},
+    captionStyle: {},
+    theme: {},
+    miniPlayer: { type: Boolean, default: !1 },
+    miniPlayerPosition: { default: "bottom-right" },
+    ambientMode: { type: Boolean, default: !1 },
     class: { default: "" },
     closable: { type: Boolean, default: !1 }
   },
   emits: ["close", "play", "pause", "ended", "time-update", "seeked", "volume-change", "milestone", "error", "playlist-change"],
-  setup(t, { emit: a }) {
-    const n = t, e = a, c = y(null), o = y(n.defaultDevice), h = y(!1), g = y(!1), E = y(null), _ = y([]), $ = y(-1), S = y([]), b = y(-1), m = y(-1), C = y(1), p = y(!1), x = y(!1), B = y(null), Y = typeof document < "u" && !!document.pictureInPictureEnabled, A = T(
-      () => n.controls === !0 || n.controls === "custom"
-    ), J = T(() => n.controls === "native"), k = T(
-      () => Array.isArray(n.playlist) && n.playlist.length > 0
-    ), N = y(
-      k.value ? Math.min(Math.max(n.defaultIndex, 0), n.playlist.length - 1) : 0
-    ), D = T(
-      () => k.value ? n.playlist[Math.min(N.value, n.playlist.length - 1)] : null
-    ), H = T(() => {
-      var u;
-      return ((u = D.value) == null ? void 0 : u.src) ?? n.src ?? "";
-    }), V = T(() => {
-      var u;
-      return ((u = D.value) == null ? void 0 : u.poster) ?? n.poster;
-    }), O = T(
+  setup(e, { emit: l }) {
+    const t = e, n = l, a = g(null), v = g(t.defaultDevice), d = g(!1), h = g(!1), E = g(!1), S = g(!1), A = g(!1), P = g(0), w = g(null), $ = g([]), T = g(-1), f = g([]), M = g(-1), z = g(-1), j = g(1), K = g(!1), re = g(!1), C = g(null), W = typeof document < "u" && !!document.pictureInPictureEnabled, V = I(
+      () => t.controls === !0 || t.controls === "custom"
+    ), D = I(() => t.controls === "native"), F = `gvp-video-${Math.random().toString(36).slice(2, 10)}`, B = I(() => kl(t.theme)), R = g(!1), fe = g(!1), y = g(null);
+    let p = null;
+    H(y, (s) => {
+      p == null || p.disconnect(), p = null, !(!t.miniPlayer || !s || typeof IntersectionObserver > "u") && (p = new IntersectionObserver(
+        ([i]) => {
+          i.isIntersecting ? (R.value = !1, fe.value = !1) : d.value && !fe.value && (R.value = !0);
+        },
+        { threshold: 0 }
+      ), p.observe(s));
+    }), H(d, (s) => {
+      s || (R.value = !1);
+    });
+    function ee() {
+      R.value = !1, fe.value = !0;
+    }
+    const m = g(null);
+    let Q = 0;
+    oe(() => {
+      p == null || p.disconnect(), p = null, cancelAnimationFrame(Q);
+    });
+    let Y = null;
+    H(
+      () => t.captionStyle,
+      (s) => {
+        if (typeof document > "u") return;
+        const i = gl(F, s);
+        if (!i) {
+          Y == null || Y.remove(), Y = null;
+          return;
+        }
+        Y || (Y = document.createElement("style"), document.head.appendChild(Y)), Y.textContent = i;
+      },
+      { immediate: !0, deep: !0 }
+    ), oe(() => {
+      Y == null || Y.remove(), Y = null;
+    });
+    const X = I(
+      () => Array.isArray(t.playlist) && t.playlist.length > 0
+    ), G = g(
+      X.value ? Math.min(Math.max(t.defaultIndex, 0), t.playlist.length - 1) : 0
+    ), ge = I(
+      () => X.value ? t.playlist[Math.min(G.value, t.playlist.length - 1)] : null
+    ), ue = I(() => {
+      var s;
+      return ((s = ge.value) == null ? void 0 : s.src) ?? t.src ?? "";
+    }), me = I(() => {
+      var s;
+      return ((s = ge.value) == null ? void 0 : s.poster) ?? t.poster;
+    }), Ie = I(
       () => {
-        var u;
-        return ((u = D.value) == null ? void 0 : u.thumbnails) ?? n.thumbnails;
+        var s;
+        return ((s = ge.value) == null ? void 0 : s.thumbnails) ?? t.thumbnails;
       }
-    ), me = T(
+    ), Se = I(
       () => {
-        var u;
-        return ((u = D.value) == null ? void 0 : u.chapters) ?? n.chapters;
+        var s;
+        return ((s = ge.value) == null ? void 0 : s.chapters) ?? t.chapters;
       }
-    ), Pe = T(() => k.value && N.value > 0), oe = T(
-      () => k.value && N.value < n.playlist.length - 1
+    ), de = I(() => X.value && G.value > 0), Pe = I(
+      () => X.value && G.value < t.playlist.length - 1
     );
-    let ce = !1;
-    function de(u, v = !1) {
-      if (!k.value) return;
-      const P = Math.min(Math.max(u, 0), n.playlist.length - 1);
-      P !== N.value && (ce = v, N.value = P, e("playlist-change", P, n.playlist[P]));
-    }
-    const K = T(() => In(H.value)), q = T(() => K.value !== null), Me = T(
-      () => K.value ? Nn(K.value, {
-        autoPlay: n.autoPlay,
-        muted: n.muted,
-        loop: n.loop,
-        controls: A.value ? !0 : J.value,
-        startSeconds: Sn(H.value)
+    let xe = !1;
+    function Ce(s, i = !1) {
+      if (!X.value) return;
+      const k = Math.min(Math.max(s, 0), t.playlist.length - 1);
+      k !== G.value && (xe = i, G.value = k, n("playlist-change", k, t.playlist[k]));
+    }
+    const Le = I(() => ul(ue.value)), U = I(() => Le.value !== null), Ae = I(
+      () => Le.value ? dl(Le.value, {
+        autoPlay: t.autoPlay,
+        muted: t.muted,
+        loop: t.loop,
+        controls: V.value ? !0 : D.value,
+        startSeconds: cl(ue.value)
       }) : null
     );
-    function Te(u) {
-      _.value = u, $.value = -1;
+    function Ne(s) {
+      $.value = s, T.value = -1;
     }
-    function X(u) {
-      S.value = u, m.value = -1;
+    function u(s) {
+      f.value = s, z.value = -1;
     }
-    const le = T(
-      () => !q.value && _.value.length > 1
-    ), we = T(
+    const b = I(
+      () => !U.value && $.value.length > 1
+    ), _ = I(
       () => {
-        var u;
-        return $.value >= 0 ? $.value : ((u = _.value[0]) == null ? void 0 : u.index) ?? -1;
+        var s;
+        return T.value >= 0 ? T.value : ((s = $.value[0]) == null ? void 0 : s.index) ?? -1;
       }
-    ), Ie = T(
+    ), te = I(
       () => {
-        var u, v;
-        return o.value === "mobile" ? ((u = n.aspectRatio) == null ? void 0 : u.mobile) ?? "9/16" : ((v = n.aspectRatio) == null ? void 0 : v.desktop) ?? "16/9";
+        var s, i;
+        return v.value === "mobile" ? ((s = t.aspectRatio) == null ? void 0 : s.mobile) ?? "9/16" : ((i = t.aspectRatio) == null ? void 0 : i.desktop) ?? "16/9";
       }
-    ), ae = T(
+    ), he = I(
       () => {
-        var u, v;
-        return o.value === "mobile" ? ((u = n.frameMaxWidth) == null ? void 0 : u.mobile) ?? "420px" : ((v = n.frameMaxWidth) == null ? void 0 : v.desktop) ?? "960px";
+        var s, i;
+        return v.value === "mobile" ? ((s = t.frameMaxWidth) == null ? void 0 : s.mobile) ?? "420px" : ((i = t.frameMaxWidth) == null ? void 0 : i.desktop) ?? "960px";
       }
-    ), Q = T(() => {
-      var u;
-      return ((u = c.value) == null ? void 0 : u.videoEl) ?? null;
+    ), q = I(() => {
+      var s;
+      return ((s = a.value) == null ? void 0 : s.videoEl) ?? null;
+    });
+    H([m, q], ([s, i]) => {
+      if (cancelAnimationFrame(Q), !t.ambientMode || !s || !i || U.value) return;
+      const k = s.getContext("2d");
+      if (!k) return;
+      let ne = 0;
+      const ie = ($e) => {
+        if (Q = requestAnimationFrame(ie), !($e - ne < 250) && (ne = $e, !(i.readyState < 2 || i.paused)))
+          try {
+            k.drawImage(i, 0, 0, s.width, s.height);
+          } catch {
+          }
+      };
+      Q = requestAnimationFrame(ie);
     });
-    async function he() {
-      const u = Q.value;
-      if (u)
+    async function ke() {
+      const s = q.value;
+      if (s)
         try {
-          u.readyState < 2 && u.load();
-          const v = u.play();
-          E.value = v, await v, h.value = !0;
+          s.readyState < 2 && s.load();
+          const i = s.play();
+          w.value = i, await i, d.value = !0;
         } catch {
-          h.value = !1;
+          d.value = !1;
         } finally {
-          E.value = null;
+          w.value = null;
         }
     }
-    async function be() {
-      const u = Q.value;
-      if (u) {
-        if (E.value)
+    async function ve() {
+      const s = q.value;
+      if (s) {
+        if (w.value)
           try {
-            await E.value;
+            await w.value;
           } catch {
           }
-        u.pause();
+        s.pause();
       }
     }
-    async function ve() {
-      !n.hoverPlay || q.value || await he();
+    async function Qe() {
+      !t.hoverPlay || U.value || await ke();
     }
-    async function Ce() {
-      !n.hoverPlay || q.value || (await be(), h.value = !1);
+    async function Ye() {
+      !t.hoverPlay || U.value || (await ve(), d.value = !1);
     }
-    async function se() {
-      const u = Q.value;
-      u && (u.paused ? await he() : (await be(), h.value = !1));
+    async function Te() {
+      const s = q.value;
+      s && (s.paused ? await ke() : (await ve(), d.value = !1));
     }
-    function pe() {
-      h.value = !1, e("ended"), k.value && n.autoAdvance && oe.value && de(N.value + 1, !0);
+    function He() {
+      const s = C.value;
+      if (!s) return;
+      if ((document.fullscreenElement ?? document.webkitFullscreenElement ?? null) === s) {
+        const k = document.exitFullscreen ?? document.webkitExitFullscreen;
+        k == null || k.call(document).catch(() => {
+        });
+      } else {
+        const k = s.requestFullscreen ?? s.webkitRequestFullscreen;
+        k == null || k.call(s).catch(() => {
+        });
+      }
     }
-    R(H, () => {
-      ce && (ce = !1, he());
+    let ye = null;
+    function Ge() {
+      ye === null && (ye = setTimeout(() => {
+        ye = null, Te();
+      }, 250));
+    }
+    function Je() {
+      ye !== null && (clearTimeout(ye), ye = null), He();
+    }
+    function Xe() {
+      d.value = !1, n("ended"), X.value && t.autoAdvance && Pe.value && Ce(G.value + 1, !0);
+    }
+    H(ue, () => {
+      xe && (xe = !1, ke());
     });
-    function W() {
-      g.value = !0, ve();
+    function et() {
+      h.value = !0, Qe();
     }
-    function G() {
-      g.value = !1, Ce();
+    function tt() {
+      h.value = !1, Ye();
     }
-    function xe(u) {
-      C.value = u;
-      const v = Q.value;
-      v && (v.playbackRate = u);
+    function nt(s) {
+      j.value = s;
+      const i = q.value;
+      i && (i.playbackRate = s);
     }
-    R(Q, (u) => {
-      if (!u) return;
-      u.addEventListener("ratechange", () => {
-        C.value = u.playbackRate;
-      }), u.addEventListener("enterpictureinpicture", () => {
-        p.value = !0;
-      }), u.addEventListener("leavepictureinpicture", () => {
-        p.value = !1;
+    H(q, (s) => {
+      if (!s) return;
+      s.addEventListener("ratechange", () => {
+        j.value = s.playbackRate;
+      }), s.addEventListener("enterpictureinpicture", () => {
+        K.value = !0;
+      }), s.addEventListener("leavepictureinpicture", () => {
+        K.value = !1;
       });
-      const v = /* @__PURE__ */ new Set();
-      u.addEventListener("timeupdate", () => {
-        const P = u.duration;
-        if (e("time-update", u.currentTime, Number.isFinite(P) ? P : 0), !Number.isFinite(P) || P <= 0) return;
-        const fe = u.currentTime / P * 100;
-        for (const j of [25, 50, 75, 100])
-          fe >= j && !v.has(j) && (v.add(j), e("milestone", j));
-      }), u.addEventListener("seeked", () => {
-        e("seeked", u.currentTime);
-      }), u.addEventListener("volumechange", () => {
-        e("volume-change", u.volume, u.muted);
-      }), u.addEventListener("error", () => {
-        e("error");
+      const i = /* @__PURE__ */ new Set();
+      s.addEventListener("timeupdate", () => {
+        const k = s.duration;
+        if (n("time-update", s.currentTime, Number.isFinite(k) ? k : 0), !Number.isFinite(k) || k <= 0) return;
+        const ne = s.currentTime / k * 100;
+        for (const ie of [25, 50, 75, 100])
+          ne >= ie && !i.has(ie) && (i.add(ie), n("milestone", ie));
+      }), s.addEventListener("seeked", () => {
+        n("seeked", s.currentTime);
+      }), s.addEventListener("volumechange", () => {
+        n("volume-change", s.volume, s.muted);
+      }), s.addEventListener("error", () => {
+        S.value = !0, E.value = !1, n("error");
+      }), s.addEventListener("waiting", () => {
+        E.value = !0;
+      }), s.addEventListener("stalled", () => {
+        E.value = !0;
+      }), s.addEventListener("playing", () => {
+        E.value = !1;
+      }), s.addEventListener("canplay", () => {
+        E.value = !1;
+      }), s.addEventListener("seeked", () => {
+        E.value = !1;
       });
+    }), H(ue, () => {
+      S.value = !1, E.value = !1;
     });
-    function ge() {
-      const u = Q.value;
-      u && (document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
-      }) : u.requestPictureInPicture().catch(() => {
+    function lt() {
+      S.value = !0, E.value = !1, n("error");
+    }
+    const st = I(() => S.value ? "Video failed to load" : E.value ? "Loading" : d.value ? "Playing" : "Paused");
+    function at() {
+      S.value = !1, E.value = !1, P.value += 1;
+    }
+    H(q, (s) => {
+      if (!s || !t.persistKey) return;
+      const i = t.persistKey, k = Me(i);
+      typeof k.volume == "number" && (s.volume = k.volume), typeof k.muted == "boolean" && (s.muted = k.muted), typeof k.speed == "number" && (s.playbackRate = k.speed);
+      const ne = () => {
+        Ke(i, {
+          volume: s.volume,
+          muted: s.muted,
+          speed: s.playbackRate
+        });
+      };
+      s.addEventListener("volumechange", ne), s.addEventListener("ratechange", ne);
+    }), H([q, ue], ([s, i]) => {
+      if (!s || !t.persistKey || !i) return;
+      const k = t.persistKey, ne = () => {
+        const be = pl(k, i);
+        be > 0 && (!Number.isFinite(s.duration) || be < s.duration - 1) && (s.currentTime = be);
+      };
+      s.readyState >= 1 ? ne() : s.addEventListener("loadedmetadata", ne, { once: !0 });
+      let ie = 0;
+      const $e = () => {
+        const be = Date.now();
+        be - ie < 1e3 || (ie = be, je(k, i, s.currentTime));
+      };
+      s.addEventListener("timeupdate", $e), s.addEventListener("pause", $e), s.addEventListener("ended", () => je(k, i, 0));
+    }, { immediate: !0 });
+    function Ve() {
+      const s = q.value;
+      s && (document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
+      }) : s.requestPictureInPicture().catch(() => {
       }));
     }
-    function Le(u) {
-      var fe, j, Ee;
-      const v = Q.value;
-      if (!(!v || !x.value && !((fe = B.value) != null && fe.contains(document.activeElement)) || u.target.tagName === "INPUT" && u.key !== " "))
-        switch (u.key) {
+    function Re(s) {
+      var ne;
+      const i = q.value;
+      if (!(!i || !re.value && !((ne = C.value) != null && ne.contains(document.activeElement)) || s.target.tagName === "INPUT" && s.key !== " "))
+        switch (s.key) {
           case " ":
           case "k":
-            u.preventDefault(), se();
+            s.preventDefault(), Te();
             break;
           case "ArrowLeft":
-            u.preventDefault(), v.currentTime = Math.max(0, v.currentTime - 5);
+            s.preventDefault(), i.currentTime = Math.max(0, i.currentTime - 5);
             break;
           case "ArrowRight":
-            u.preventDefault(), v.currentTime = Math.min(v.duration || 0, v.currentTime + 5);
+            s.preventDefault(), i.currentTime = Math.min(i.duration || 0, i.currentTime + 5);
             break;
           case "ArrowUp":
-            u.preventDefault(), v.volume = Math.min(1, v.volume + 0.1), v.muted && (v.muted = !1);
+            s.preventDefault(), i.volume = Math.min(1, i.volume + 0.1), i.muted && (i.muted = !1);
             break;
           case "ArrowDown":
-            u.preventDefault(), v.volume = Math.max(0, v.volume - 0.1);
+            s.preventDefault(), i.volume = Math.max(0, i.volume - 0.1);
             break;
           case "m":
-            v.muted = !v.muted;
+            i.muted = !i.muted;
             break;
-          case "f": {
-            const Se = document.fullscreenElement ?? document.webkitFullscreenElement ?? null, _e = ((j = B.value) == null ? void 0 : j.requestFullscreen) ?? ((Ee = B.value) == null ? void 0 : Ee.webkitRequestFullscreen), ke = document.exitFullscreen ?? document.webkitExitFullscreen;
-            Se === B.value ? ke == null || ke.call(document).catch(() => {
-            }) : _e && B.value && _e.call(B.value).catch(() => {
-            });
+          case "f":
+            He();
             break;
-          }
           case "p":
-            Y && ge();
+            W && Ve();
             break;
         }
     }
-    return He(() => {
-      document.addEventListener("keydown", Le);
-    }), ne(() => {
-      document.removeEventListener("keydown", Le);
-    }), (u, v) => (d(), f("div", {
-      ref_key: "rootEl",
-      ref: B,
-      class: w(["gvp-root", n.class]),
-      style: re({ width: ae.value, aspectRatio: Ie.value }),
-      onMouseenter: v[12] || (v[12] = (P) => {
-        x.value = !0, W();
-      }),
-      onMouseleave: v[13] || (v[13] = (P) => {
-        x.value = !1, G();
-      })
+    return Be(() => {
+      document.addEventListener("keydown", Re);
+    }), oe(() => {
+      document.removeEventListener("keydown", Re);
+    }), (s, i) => (r(), c("div", {
+      class: L(["gvp-ambient-wrap", { "is-ambient": e.ambientMode }]),
+      style: ce({ width: he.value })
     }, [
-      q.value ? (d(), f("iframe", {
+      e.miniPlayer ? (r(), c("div", {
         key: 0,
-        class: "gvp-video gvp-youtube",
-        src: Me.value ?? void 0,
-        title: "YouTube video player",
-        allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
-        allowfullscreen: "",
-        referrerpolicy: "strict-origin-when-cross-origin"
-      }, null, 8, An)) : (d(), z(Ge, {
-        ref_key: "hlsPlayerRef",
-        ref: c,
-        key: H.value,
-        controls: J.value,
-        "hls-config": t.hlsConfig,
-        "is-hls": t.isHls,
-        loop: t.loop,
-        muted: t.muted,
-        "auto-play": t.autoPlay,
-        "audio-track-index": $.value,
-        "quality-level-index": m.value,
-        "plays-inline": !0,
-        poster: V.value,
-        src: H.value,
-        class: "gvp-video",
-        preload: "metadata",
-        onAudioTracks: Te,
-        onQualityLevels: X,
-        onCurrentLevel: v[0] || (v[0] = (P) => b.value = P),
-        onEnded: pe,
-        onPause: v[1] || (v[1] = (P) => {
-          h.value = !1, e("pause");
+        ref_key: "miniSentinelEl",
+        ref: y,
+        class: "gvp-mini-sentinel",
+        "aria-hidden": "true"
+      }, null, 512)) : x("", !0),
+      e.ambientMode && !U.value && !R.value ? (r(), c("canvas", {
+        key: 1,
+        ref_key: "ambientCanvasEl",
+        ref: m,
+        class: "gvp-ambient-canvas",
+        width: "32",
+        height: "18"
+      }, null, 512)) : x("", !0),
+      R.value ? (r(), c("div", {
+        key: 2,
+        class: "gvp-mini-placeholder",
+        style: ce({ width: "100%", aspectRatio: te.value }),
+        "aria-hidden": "true"
+      }, null, 4)) : x("", !0),
+      o("div", {
+        ref_key: "rootEl",
+        ref: C,
+        class: L([
+          "gvp-root",
+          t.class,
+          { "gvp-mini": R.value },
+          R.value ? `gvp-mini-${e.miniPlayerPosition}` : ""
+        ]),
+        style: ce({ width: "100%", aspectRatio: te.value, ...B.value }),
+        onMouseenter: i[14] || (i[14] = (k) => {
+          re.value = !0, et();
         }),
-        onPlay: v[2] || (v[2] = (P) => {
-          h.value = !0, e("play");
+        onMouseleave: i[15] || (i[15] = (k) => {
+          re.value = !1, tt();
         })
-      }, {
-        default: Ye(() => [
-          Fe(u.$slots, "default")
-        ]),
-        _: 3
-      }, 8, ["controls", "hls-config", "is-hls", "loop", "muted", "auto-play", "audio-track-index", "quality-level-index", "poster", "src"])),
-      q.value ? M("", !0) : (d(), f("div", Hn)),
-      t.showDeviceToggle ? (d(), f("div", Bn, [
-        r("div", Vn, [
-          r("button", {
-            "aria-pressed": o.value === "desktop",
-            class: w(["gvp-toggle-btn", { "is-active": o.value === "desktop" }]),
-            "aria-label": "Desktop view",
-            type: "button",
-            onClick: v[3] || (v[3] = (P) => o.value = "desktop")
-          }, [
-            Z(Ln)
-          ], 10, qn),
-          v[14] || (v[14] = r("div", { class: "gvp-toggle-divider" }, null, -1)),
-          r("button", {
-            "aria-pressed": o.value === "mobile",
-            class: w(["gvp-toggle-btn", { "is-active": o.value === "mobile" }]),
-            "aria-label": "Mobile view",
+      }, [
+        R.value ? (r(), c("button", {
+          key: 0,
+          type: "button",
+          class: "gvp-mini-close",
+          "aria-label": "Close mini player",
+          onClick: ee
+        }, [
+          O(Oe)
+        ])) : x("", !0),
+        U.value ? (r(), c("iframe", {
+          key: 1,
+          class: "gvp-video gvp-youtube",
+          src: Ae.value ?? void 0,
+          title: "YouTube video player",
+          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+          allowfullscreen: "",
+          referrerpolicy: "strict-origin-when-cross-origin"
+        }, null, 8, yl)) : (r(), J(vt, {
+          ref_key: "hlsPlayerRef",
+          ref: a,
+          key: `${ue.value}#${P.value}`,
+          controls: D.value,
+          "hls-config": e.hlsConfig,
+          "is-hls": e.isHls,
+          loop: e.loop,
+          muted: e.muted,
+          "auto-play": e.autoPlay,
+          "audio-track-index": T.value,
+          "quality-level-index": z.value,
+          "plays-inline": !0,
+          poster: me.value,
+          src: ue.value,
+          class: L(["gvp-video", F]),
+          preload: "metadata",
+          onAudioTracks: Ne,
+          onQualityLevels: u,
+          onCurrentLevel: i[0] || (i[0] = (k) => M.value = k),
+          onEnded: Xe,
+          onFatalError: lt,
+          onLiveChange: i[1] || (i[1] = (k) => A.value = k),
+          onPause: i[2] || (i[2] = (k) => {
+            d.value = !1, n("pause");
+          }),
+          onPlay: i[3] || (i[3] = (k) => {
+            d.value = !0, n("play");
+          })
+        }, {
+          default: it(() => [
+            Ue(s.$slots, "default")
+          ]),
+          _: 3
+        }, 8, ["controls", "hls-config", "is-hls", "loop", "muted", "auto-play", "audio-track-index", "quality-level-index", "poster", "src", "class"])),
+        U.value ? x("", !0) : (r(), c("div", bl)),
+        U.value ? x("", !0) : (r(), c("span", wl, Z(st.value), 1)),
+        !U.value && E.value && !S.value ? (r(), c("div", xl, [...i[16] || (i[16] = [
+          o("div", { class: "gvp-spinner" }, null, -1),
+          o("span", { class: "gvp-sr-only" }, "Loading…", -1)
+        ])])) : x("", !0),
+        !U.value && S.value ? (r(), c("div", Cl, [
+          O(ol, { class: "gvp-error-icon" }),
+          i[18] || (i[18] = o("p", { class: "gvp-error-text" }, "This video couldn't be played.", -1)),
+          o("button", {
             type: "button",
-            onClick: v[4] || (v[4] = (P) => o.value = "mobile")
+            class: "gvp-error-retry",
+            onClick: at
           }, [
-            Z(_n)
-          ], 10, Dn)
-        ])
-      ])) : M("", !0),
-      t.closable ? (d(), f("button", {
-        key: 4,
-        "aria-label": "Close",
-        class: "gvp-close",
-        type: "button",
-        onClick: v[5] || (v[5] = (P) => e("close"))
-      }, [
-        Z(Tn)
-      ])) : M("", !0),
-      le.value && !A.value ? (d(), z(rt, {
-        key: 5,
-        tracks: _.value,
-        "active-index": we.value,
-        onSelect: v[6] || (v[6] = (P) => $.value = P)
-      }, null, 8, ["tracks", "active-index"])) : M("", !0),
-      !q.value && !A.value ? (d(), z(pt, {
-        key: 6,
-        speed: C.value,
-        onSelect: xe
-      }, null, 8, ["speed"])) : M("", !0),
-      !q.value && !A.value ? (d(), z(yt, {
-        key: 7,
-        video: Q.value
-      }, null, 8, ["video"])) : M("", !0),
-      !q.value && te(Y) && !A.value ? (d(), f("button", {
-        key: 8,
-        type: "button",
-        class: w(["gvp-pip-btn", { "is-active": p.value }]),
-        "aria-label": p.value ? "Exit picture-in-picture" : "Picture-in-picture",
-        "aria-pressed": p.value,
-        onClick: ge
-      }, [
-        Z(Ze)
-      ], 10, Fn)) : M("", !0),
-      !q.value && A.value ? (d(), f("button", {
-        key: 9,
-        type: "button",
-        class: "gvp-click-layer",
-        "aria-label": h.value ? "Pause" : "Play",
-        onClick: se
-      }, null, 8, Rn)) : M("", !0),
-      !q.value && !A.value && !h.value ? (d(), f("div", On, [
-        r("button", {
-          "aria-label": "Play",
-          class: "gvp-play",
+            O(il),
+            i[17] || (i[17] = o("span", null, "Retry", -1))
+          ])
+        ])) : x("", !0),
+        e.showDeviceToggle ? (r(), c("div", Ll, [
+          o("div", $l, [
+            o("button", {
+              "aria-pressed": v.value === "desktop",
+              class: L(["gvp-toggle-btn", { "is-active": v.value === "desktop" }]),
+              "aria-label": "Desktop view",
+              type: "button",
+              onClick: i[4] || (i[4] = (k) => v.value = "desktop")
+            }, [
+              O(Xn)
+            ], 10, El),
+            i[19] || (i[19] = o("div", { class: "gvp-toggle-divider" }, null, -1)),
+            o("button", {
+              "aria-pressed": v.value === "mobile",
+              class: L(["gvp-toggle-btn", { "is-active": v.value === "mobile" }]),
+              "aria-label": "Mobile view",
+              type: "button",
+              onClick: i[5] || (i[5] = (k) => v.value = "mobile")
+            }, [
+              O(tl)
+            ], 10, _l)
+          ])
+        ])) : x("", !0),
+        e.closable ? (r(), c("button", {
+          key: 8,
+          "aria-label": "Close",
+          class: "gvp-close",
           type: "button",
-          onClick: se,
-          onMouseenter: v[7] || (v[7] = (P) => g.value = !0),
-          onMouseleave: v[8] || (v[8] = (P) => g.value = !1)
+          onClick: i[6] || (i[6] = (k) => n("close"))
         }, [
-          Z(Pn),
-          t.tooltipText && g.value ? (d(), f("span", Un, U(t.tooltipText), 1)) : M("", !0)
-        ], 32)
-      ])) : M("", !0),
-      !q.value && A.value ? (d(), z(Cn, {
-        key: 11,
-        video: Q.value,
-        "is-playing": h.value,
-        container: B.value,
-        "on-toggle-play": se,
-        "quality-levels": S.value,
-        "current-level": b.value,
-        "selected-level": m.value,
-        thumbnails: O.value,
-        chapters: me.value,
-        "has-prev": Pe.value,
-        "has-next": oe.value,
-        onSelectLevel: v[9] || (v[9] = (P) => m.value = P),
-        onPrev: v[10] || (v[10] = (P) => de(N.value - 1, !0)),
-        onNext: v[11] || (v[11] = (P) => de(N.value + 1, !0))
-      }, null, 8, ["video", "is-playing", "container", "quality-levels", "current-level", "selected-level", "thumbnails", "chapters", "has-prev", "has-next"])) : M("", !0),
-      !q.value && !A.value ? (d(), f("div", Zn)) : M("", !0)
-    ], 38));
+          O(Oe)
+        ])) : x("", !0),
+        b.value && !V.value ? (r(), J(bt, {
+          key: 9,
+          tracks: $.value,
+          "active-index": _.value,
+          onSelect: i[7] || (i[7] = (k) => T.value = k)
+        }, null, 8, ["tracks", "active-index"])) : x("", !0),
+        !U.value && !V.value ? (r(), J(_t, {
+          key: 10,
+          speed: j.value,
+          onSelect: nt
+        }, null, 8, ["speed"])) : x("", !0),
+        !U.value && !V.value ? (r(), J(Nt, {
+          key: 11,
+          video: q.value
+        }, null, 8, ["video"])) : x("", !0),
+        !U.value && se(W) && !V.value ? (r(), c("button", {
+          key: 12,
+          type: "button",
+          class: L(["gvp-pip-btn", { "is-active": K.value }]),
+          "aria-label": K.value ? "Exit picture-in-picture" : "Picture-in-picture",
+          "aria-pressed": K.value,
+          onClick: Ve
+        }, [
+          O(ze)
+        ], 10, Pl)) : x("", !0),
+        !U.value && V.value ? (r(), c("button", {
+          key: 13,
+          type: "button",
+          class: "gvp-click-layer",
+          "aria-label": d.value ? "Pause" : "Play",
+          onClick: Ge,
+          onDblclick: Je
+        }, null, 40, Tl)) : x("", !0),
+        !U.value && !V.value && !d.value ? (r(), c("div", Ml, [
+          o("button", {
+            "aria-label": "Play",
+            class: "gvp-play",
+            type: "button",
+            onClick: Te,
+            onMouseenter: i[8] || (i[8] = (k) => h.value = !0),
+            onMouseleave: i[9] || (i[9] = (k) => h.value = !1)
+          }, [
+            O(ll),
+            e.tooltipText && h.value ? (r(), c("span", Il, Z(e.tooltipText), 1)) : x("", !0)
+          ], 32)
+        ])) : x("", !0),
+        !U.value && V.value ? (r(), J(Gn, {
+          key: 15,
+          video: q.value,
+          "is-playing": d.value,
+          container: C.value,
+          "on-toggle-play": Te,
+          "quality-levels": f.value,
+          "current-level": M.value,
+          "selected-level": z.value,
+          thumbnails: Ie.value,
+          chapters: Se.value,
+          "has-prev": de.value,
+          "has-next": Pe.value,
+          "is-live": A.value,
+          "audio-tracks": $.value,
+          "audio-track-index": _.value,
+          onSelectLevel: i[10] || (i[10] = (k) => z.value = k),
+          onSelectAudioTrack: i[11] || (i[11] = (k) => T.value = k),
+          onPrev: i[12] || (i[12] = (k) => Ce(G.value - 1, !0)),
+          onNext: i[13] || (i[13] = (k) => Ce(G.value + 1, !0))
+        }, null, 8, ["video", "is-playing", "container", "quality-levels", "current-level", "selected-level", "thumbnails", "chapters", "has-prev", "has-next", "is-live", "audio-tracks", "audio-track-index"])) : x("", !0),
+        !U.value && !V.value ? (r(), c("div", Sl)) : x("", !0)
+      ], 38)
+    ], 6));
   }
 });
 export {
-  Ge as HLSPlayer,
-  Wn as VueVideoPlayer,
-  In as parseYouTubeId,
-  Sn as parseYouTubeStart,
-  Nn as youTubeEmbedUrl
+  vt as HLSPlayer,
+  Bl as VueVideoPlayer,
+  ul as parseYouTubeId,
+  cl as parseYouTubeStart,
+  dl as youTubeEmbedUrl
 };
 //# sourceMappingURL=index.mjs.map