@glitchlab/vue-video-player 1.5.0 → 1.6.0

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 He, watch as V, onBeforeUnmount as ae, openBlock as r, createElementBlock as c, normalizeClass as L, renderSlot as Ue, createElementVNode as a, computed as I, createVNode as O, toDisplayString as Z, Fragment as oe, renderList as pe, createCommentVNode as x, createBlock as J, unref as le, normalizeStyle as ce, withDirectives as at, vShow as rt, withCtx as it } from "vue";
+import se from "hls.js";
+function De(e, s, t) {
+  const n = e == null ? void 0 : e.trim();
+  if (n) return n;
+  if (s) {
     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(s);
+      if (v && v !== s) return v;
     } catch {
     }
-    return a;
+    return s;
   }
-  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, s) {
+  return e > 0 ? `${e}p` : `Level ${s + 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: s, emit: t }) {
+    const n = e, o = t, v = g(null), d = g(null);
+    let h, E;
+    const A = globalThis.window !== void 0 && se.isSupported(), S = (f) => !!n.isHls || A && 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(), o("audio-tracks", []), o("quality-levels", []), o("current-level", -1), o("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 (S(f)) {
+        const C = new se(n.hlsConfig);
+        d.value = C;
+        const W = () => {
+          const F = C.audioTracks.map((H, R) => ({
+            index: R,
+            label: De(H.name, H.lang, R),
+            lang: H.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)
+          o("audio-tracks", F);
+        }, B = () => {
+          const F = C.levels.map((H, R) => ({
+            index: R,
+            height: H.height || 0,
+            label: ct(H.height || 0, R)
           }));
-          c("quality-levels", H);
+          o("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(se.Events.MANIFEST_PARSED, z), C.on(se.Events.MANIFEST_PARSED, B), C.on(se.Events.LEVELS_UPDATED, B), C.on(se.Events.LEVEL_SWITCHED, (F, H) => {
+          o("current-level", H.level);
+        }), C.on(se.Events.AUDIO_TRACKS_UPDATED, W), C.on(se.Events.AUDIO_TRACK_SWITCHED, W), C.on(se.Events.LEVEL_LOADED, (F, H) => {
+          var R;
+          o("live-change", !!((R = H.details) != null && R.live));
+        });
+        let D = !1;
+        C.on(se.Events.ERROR, (F, H) => {
+          H.fatal && (H.type === se.ErrorTypes.NETWORK_ERROR && !D ? (D = !0, C.startLoad()) : H.type === se.ErrorTypes.MEDIA_ERROR && !D ? (D = !0, C.recoverMediaError()) : (C.destroy(), d.value = null, o("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 B = [];
+            for (let D = 0; D < C.length; D++) {
+              const F = C[D];
+              B.push({
+                index: D,
+                label: De(F.label, F.language, D),
+                lang: F.language || void 0
               });
             }
-            c("audio-tracks", D);
+            o("audio-tracks", B);
           };
-          (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 B, D, F;
+            (B = C.removeEventListener) == null || B.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;
+      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 C(p) {
-      if (p == null) return;
-      const x = h.value;
-      x && x.currentLevel !== p && (x.currentLevel = p);
+    function T(f) {
+      if (f == null) return;
+      const M = d.value;
+      M && M.currentLevel !== f && (M.currentLevel = f);
     }
     return He(() => {
-      e.src && b(e.src);
-    }), R(
-      () => e.src,
-      (p) => {
-        p && b(p);
+      n.src && w(n.src);
+    }), V(
+      () => 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", {
+    ), V(
+      () => n.audioTrackIndex,
+      (f) => $(f)
+    ), V(
+      () => n.qualityLevelIndex,
+      (f) => T(f)
+    ), ae(P), s({ 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) => o("play")),
+      onPause: M[1] || (M[1] = (z) => o("pause")),
+      onEnded: M[2] || (M[2] = (z) => o("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 s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("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", {
+      a("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 s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("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: s }) {
+    const t = e, n = s, o = g(!1), v = g(null), d = I(
+      () => t.tracks.find((S) => S.index === t.activeIndex) ?? t.tracks[0]
     );
-    function g($) {
-      o.value && !o.value.contains($.target) && (c.value = !1);
+    function h(S) {
+      v.value && !v.value.contains(S.target) && (o.value = !1);
     }
-    function E($) {
-      $.key === "Escape" && (c.value = !1);
+    function E(S) {
+      S.key === "Escape" && (o.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);
+    V(o, (S) => {
+      S ? (document.addEventListener("mousedown", h), document.addEventListener("keydown", E)) : (document.removeEventListener("mousedown", h), document.removeEventListener("keydown", E));
+    }), ae(() => {
+      document.removeEventListener("mousedown", h), document.removeEventListener("keydown", E);
     });
-    function _($) {
-      e("select", $), c.value = !1;
+    function A(S) {
+      n("select", S), o.value = !1;
     }
-    return ($, S) => {
-      var b;
-      return d(), f("div", {
+    return (S, P) => {
+      var w;
+      return r(), c("div", {
         ref_key: "rootEl",
-        ref: o,
+        ref: v,
         class: "gvp-audio"
       }, [
-        r("button", {
+        a("button", {
           type: "button",
           class: "gvp-audio-btn",
           "aria-haspopup": "listbox",
-          "aria-expanded": c.value,
+          "aria-expanded": o.value,
           "aria-label": "Audio track",
-          onClick: S[0] || (S[0] = (m) => c.value = !c.value)
+          onClick: P[0] || (P[0] = ($) => o.value = !o.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),
+          a("span", ht, Z((w = d.value) == null ? void 0 : w.label), 1),
+          O(Ze)
+        ], 8, gt),
+        o.value ? (r(), c("ul", kt, [
+          (r(!0), c(oe, null, pe(e.tracks, ($) => (r(), c("li", {
+            key: $.index
           }, [
-            r("button", {
+            a("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) => A($.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 s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("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", {
+      a("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: s }) {
+    const t = [0.5, 0.75, 1, 1.25, 1.5, 2], n = s, o = g(!1), v = g(null);
+    function d(A) {
+      v.value && !v.value.contains(A.target) && (o.value = !1);
+    }
+    function h(A) {
+      A.key === "Escape" && (o.value = !1);
+    }
+    V(o, (A) => {
+      A ? (document.addEventListener("mousedown", d), document.addEventListener("keydown", h)) : (document.removeEventListener("mousedown", d), document.removeEventListener("keydown", h));
+    }), ae(() => {
+      document.removeEventListener("mousedown", d), document.removeEventListener("keydown", h);
     });
-    function E(_) {
-      e("select", _), c.value = !1;
+    function E(A) {
+      n("select", A), o.value = !1;
     }
-    return (_, $) => (d(), f("div", {
+    return (A, S) => (r(), c("div", {
       ref_key: "rootEl",
-      ref: o,
+      ref: v,
       class: "gvp-speed"
     }, [
-      r("button", {
+      a("button", {
         type: "button",
         class: "gvp-speed-btn",
         "aria-haspopup": "listbox",
-        "aria-expanded": c.value,
+        "aria-expanded": o.value,
         "aria-label": "`Playback speed: ${speed === 1 ? '1×' : speed + '×'}`",
-        onClick: $[0] || ($[0] = (S) => c.value = !c.value)
+        onClick: S[0] || (S[0] = (P) => o.value = !o.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),
+        a("span", Lt, Z(e.speed === 1 ? "1×" : `${e.speed}×`), 1),
+        O(Ze)
+      ], 8, Ct),
+      o.value ? (r(), c("ul", $t, [
+        (r(), c(oe, null, pe(t, (P) => a("li", { key: P }, [
+          a("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 s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("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", {
+      a("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({
+}, At = ["aria-selected"], St = ["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 s = e, t = g([]), n = g(-1), o = 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;
+    V(() => s.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 }), ae(() => {
+      h == null || h(), document.removeEventListener("mousedown", E), document.removeEventListener("keydown", A);
     });
-    function E(b) {
-      o.value && !o.value.contains(b.target) && (c.value = !1);
+    function E(w) {
+      v.value && !v.value.contains(w.target) && (o.value = !1);
     }
-    function _(b) {
-      b.key === "Escape" && (c.value = !1);
+    function A(w) {
+      w.key === "Escape" && (o.value = !1);
     }
-    R(c, (b) => {
-      b ? (document.addEventListener("mousedown", E), document.addEventListener("keydown", _)) : (document.removeEventListener("mousedown", E), document.removeEventListener("keydown", _));
+    V(o, (w) => {
+      w ? (document.addEventListener("mousedown", E), document.addEventListener("keydown", A)) : (document.removeEventListener("mousedown", E), document.removeEventListener("keydown", A));
     });
-    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 S() {
+      if (!s.video) return;
+      const w = s.video.textTracks;
+      for (let $ = 0; $ < w.length; $++) w[$].mode = "hidden";
+      n.value = -1, o.value = !1;
+    }
+    function P(w) {
+      if (!s.video) return;
+      const $ = s.video.textTracks;
+      for (let T = 0; T < $.length; T++)
+        $[T].mode = T === w ? "showing" : "hidden";
+      n.value = w, o.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", {
+      a("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": o.value,
+        "aria-pressed": n.value >= 0,
         "aria-label": "Captions",
-        onClick: m[0] || (m[0] = (C) => c.value = !c.value)
+        onClick: $[0] || ($[0] = (T) => o.value = !o.value)
       }, [
-        Z(Ue)
-      ], 10, mt),
-      c.value ? (d(), f("ul", ht, [
-        r("li", null, [
-          r("button", {
+        O(Tt)
+      ], 10, Mt),
+      o.value ? (r(), c("ul", It, [
+        a("li", null, [
+          a("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: S
+          }, " Off ", 10, At)
         ]),
-        (d(!0), f(ie, null, ue(n.value, (C) => (d(), f("li", {
-          key: C.index
+        (r(!0), c(oe, null, pe(t.value, (T) => (r(), c("li", {
+          key: T.index
         }, [
-          r("button", {
+          a("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, St)
         ]))), 128))
-      ])) : M("", !0)
-    ], 512)) : M("", !0);
+      ])) : x("", !0)
+    ], 512)) : x("", !0);
   }
-}), wt = { name: "IconPause" }, bt = /* @__PURE__ */ I({
-  ...wt,
+}), Ht = { name: "IconPause" }, Vt = /* @__PURE__ */ N({
+  ...Ht,
   props: {
     class: {}
   },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
+  setup(e) {
+    const s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("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", {
+      a("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,
+}), Bt = { name: "IconPlaySolid" }, Rt = /* @__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 s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("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 s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("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", {
+      a("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 s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("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", {
+      a("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 s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("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", {
+      a("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 s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("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", {
+      a("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 s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("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", {
+      a("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,
-  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,
+}), 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]),
+  setup(e) {
+    const s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("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", {
+      a("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 s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("path", {
         d: "M4 9V4H9M15 4H20V9M20 15V20H15M9 20H4V15",
         stroke: "currentColor",
         "stroke-width": "1.75",
@@ -793,23 +769,23 @@ 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 s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("path", {
         d: "M9 4V9H4M15 9V4H20M15 20V15H20M9 15H4V20",
         stroke: "currentColor",
         "stroke-width": "1.75",
@@ -818,129 +794,458 @@ const Je = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
+}), en = { name: "IconGear" }, tn = /* @__PURE__ */ N({
+  ...en,
+  props: {
+    class: {}
+  },
+  setup(e) {
+    const s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("path", {
+        d: "M12 15.5A3.5 3.5 0 1 0 12 8.5A3.5 3.5 0 0 0 12 15.5Z",
+        stroke: "currentColor",
+        "stroke-width": "2"
+      }, null, -1),
+      a("path", {
+        d: "M19.4 13A1.65 1.65 0 0 0 19.73 14.82L19.79 14.88A2 2 0 1 1 16.96 17.71L16.9 17.65A1.65 1.65 0 0 0 15.08 17.32A1.65 1.65 0 0 0 14 18.83V19A2 2 0 1 1 10 19V18.91A1.65 1.65 0 0 0 8.83 17.4A1.65 1.65 0 0 0 7.01 17.73L6.95 17.79A2 2 0 1 1 4.12 14.96L4.18 14.9A1.65 1.65 0 0 0 4.51 13.08A1.65 1.65 0 0 0 3 12H2.91A2 2 0 1 1 2.91 8H3A1.65 1.65 0 0 0 4.51 6.83A1.65 1.65 0 0 0 4.18 5.01L4.12 4.95A2 2 0 1 1 6.95 2.12L7.01 2.18A1.65 1.65 0 0 0 8.83 2.51H8.91A1.65 1.65 0 0 0 10 1V0.91A2 2 0 1 1 14 0.91V1A1.65 1.65 0 0 0 15.08 2.51A1.65 1.65 0 0 0 16.9 2.18L16.96 2.12A2 2 0 1 1 19.79 4.95L19.73 5.01A1.65 1.65 0 0 0 19.4 6.83V6.91A1.65 1.65 0 0 0 21 8H21.09A2 2 0 1 1 21.09 12H21A1.65 1.65 0 0 0 19.4 13Z",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }, null, -1)
+    ])], 2));
+  }
+}), nn = { name: "IconChevronRight" }, Ee = /* @__PURE__ */ N({
+  ...nn,
+  props: {
+    class: {}
+  },
+  setup(e) {
+    const s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("path", {
+        d: "M9 6L15 12L9 18",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }, null, -1)
+    ])], 2));
+  }
+}), sn = { name: "IconCheck" }, we = /* @__PURE__ */ N({
+  ...sn,
+  props: {
+    class: {}
+  },
+  setup(e) {
+    const s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("path", {
+        d: "M5 12L10 17L19 7",
+        stroke: "currentColor",
+        "stroke-width": "2.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }, null, -1)
+    ])], 2));
+  }
+}), ln = ["aria-expanded"], on = {
+  key: 0,
+  class: "gvp-settings-menu",
+  role: "menu"
+}, an = { 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: s }) {
+    const t = e, n = s, o = [0.5, 0.75, 1, 1.25, 1.5, 2], v = g(!1), d = g("root"), h = g(null), E = g(1);
+    V(() => t.video, (y) => {
+      if (!y) return;
+      const p = () => {
+        E.value = y.playbackRate;
+      };
+      p(), y.addEventListener("ratechange", p);
+    }, { immediate: !0 });
+    function A(y) {
+      t.video && (t.video.playbackRate = y), E.value = y, d.value = "root";
+    }
+    const S = 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}` });
+      }
+      S.value = p;
+      let ee = -1;
+      for (let m = 0; m < y.length; m++)
+        if (y[m].mode === "showing") {
+          ee = m;
+          break;
+        }
+      P.value = ee;
+    }
+    V(() => t.video, (y) => {
+      if (!y) {
+        S.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(() => S.value.length > 0), W = I(() => t.audioTracks.length > 1), B = I(() => E.value === 1 ? "Normal" : `${E.value}×`), D = I(
+      () => {
+        var y;
+        return P.value < 0 ? "Off" : ((y = S.value.find((p) => p.index === P.value)) == null ? void 0 : y.label) ?? "Off";
+      }
+    );
+    function F() {
+      v.value = !1, d.value = "root";
+    }
+    function H(y) {
+      h.value && !h.value.contains(y.target) && F();
+    }
+    function R(y) {
+      y.key === "Escape" && F();
+    }
+    V(v, (y) => {
+      y ? (document.addEventListener("mousedown", H), document.addEventListener("keydown", R)) : (document.removeEventListener("mousedown", H), document.removeEventListener("keydown", R));
+    }), ae(() => {
+      document.removeEventListener("mousedown", H), 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"
+      }, [
+        a("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, ln),
+        v.value ? (r(), c("div", on, [
+          d.value === "root" ? (r(), c(oe, { key: 0 }, [
+            a("button", {
+              type: "button",
+              role: "menuitem",
+              class: "gvp-settings-row",
+              onClick: p[0] || (p[0] = (m) => d.value = "speed")
+            }, [
+              p[7] || (p[7] = a("span", { class: "gvp-settings-row-label" }, "Speed", -1)),
+              a("span", an, Z(B.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] = a("span", { class: "gvp-settings-row-label" }, "Quality", -1)),
+              a("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] = a("span", { class: "gvp-settings-row-label" }, "Subtitles", -1)),
+              a("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] = a("span", { class: "gvp-settings-row-label" }, "Audio", -1)),
+              a("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" }),
+            a("span", null, Z(d.value === "speed" ? "Speed" : d.value === "quality" ? "Quality" : d.value === "captions" ? "Subtitles" : "Audio"), 1)
+          ])) : x("", !0),
+          d.value === "speed" ? (r(), c(oe, { key: 2 }, pe(o, (m) => a("button", {
+            key: m,
+            type: "button",
+            role: "menuitemradio",
+            "aria-checked": m === E.value,
+            class: L(["gvp-settings-option", { "is-active": m === E.value }]),
+            onClick: (Q) => A(m)
+          }, [
+            a("span", vn, [
+              m === E.value ? (r(), J(we, { key: 0 })) : x("", !0)
+            ]),
+            a("span", null, Z(m === 1 ? "Normal" : `${m}×`), 1)
+          ], 10, dn)), 64)) : x("", !0),
+          d.value === "quality" ? (r(), c(oe, { key: 3 }, [
+            a("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(le(ut).index))
+            }, [
+              a("span", fn, [
+                e.selectedLevel < 0 ? (r(), J(we, { key: 0 })) : x("", !0)
+              ]),
+              a("span", null, Z(f.value ? `Auto (${f.value.label})` : "Auto"), 1)
+            ], 10, pn),
+            (r(!0), c(oe, 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)
+            }, [
+              a("span", gn, [
+                m.index === e.selectedLevel ? (r(), J(we, { key: 0 })) : x("", !0)
+              ]),
+              a("span", null, Z(m.label), 1)
+            ], 10, mn))), 128))
+          ], 64)) : x("", !0),
+          d.value === "captions" ? (r(), c(oe, { key: 4 }, [
+            a("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))
+            }, [
+              a("span", kn, [
+                P.value === -1 ? (r(), J(we, { key: 0 })) : x("", !0)
+              ]),
+              p[11] || (p[11] = a("span", null, "Off", -1))
+            ], 10, hn),
+            (r(!0), c(oe, null, pe(S.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)
+            }, [
+              a("span", bn, [
+                m.index === P.value ? (r(), J(we, { key: 0 })) : x("", !0)
+              ]),
+              a("span", null, Z(m.label), 1)
+            ], 10, yn))), 128))
+          ], 64)) : x("", !0),
+          d.value === "audio" ? (r(!0), c(oe, { 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)
+            }, [
+              a("span", xn, [
+                m.index === (((X = j.value) == null ? void 0 : X.index) ?? -1) ? (r(), J(we, { key: 0 })) : x("", !0)
+              ]),
+              a("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 s = Math.floor(e), t = Math.floor(s / 3600), n = Math.floor(s % 3600 / 60), v = (s % 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 s = e.trim().split(":");
+  if (s.length < 2 || s.length > 3) return NaN;
+  const t = s.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, s) {
   try {
-    return new URL(t, a).href;
+    return new URL(e, s).href;
   } catch {
-    return t;
+    return e;
   }
 }
-function Ot(t, a) {
-  const n = [], e = t.replace(/\r/g, "").split(`
+function En(e, s) {
+  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 o = 0; o < n.length; o++) {
+    const v = n[o].indexOf("-->");
+    if (v === -1) continue;
+    const d = Fe(n[o].slice(0, v)), h = Fe(n[o].slice(v + 3));
+    if (!Number.isFinite(d) || !Number.isFinite(h)) continue;
+    const E = (n[o + 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 A = E.indexOf("#xywh=");
+    let S = E, P = 0, w = 0, $ = 0, T = 0;
+    if (A !== -1) {
+      S = E.slice(0, A);
+      const f = E.slice(A + 6).split(",").map(Number);
+      f.length === 4 && f.every(Number.isFinite) && ([P, w, $, T] = f);
+    }
+    t.push({ start: d, end: h, url: $n(S, s), x: P, y: w, w: $, h: T });
   }
-  return n.sort((c, o) => c.start - o.start), n;
+  return t.sort((o, v) => o.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(s) {
+      if (e.length === 0) return null;
+      let t = 0, n = e.length - 1, o = e[0];
+      for (; t <= n; ) {
+        const v = t + n >> 1, d = e[v];
+        if (s < d.start)
+          n = v - 1;
+        else if (s > d.end)
+          o = d, t = v + 1;
         else
-          return h;
+          return d;
       }
-      return c;
+      return o;
     }
   };
 }
-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 s = e.trim().split(":");
+  if (s.length < 2 || s.length > 3) return NaN;
+  const t = s.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 s = [], 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 o = t[n].indexOf("-->");
+    if (o === -1) continue;
+    const v = qe(t[n].slice(0, o)), d = qe(t[n].slice(o + 3));
+    if (!Number.isFinite(v) || !Number.isFinite(d)) continue;
+    const h = (t[n + 1] ?? "").trim();
+    h && s.push({ start: v, end: d, title: h });
   }
-  return a.sort((e, c) => e.start - c.start), a;
+  return s.sort((n, o) => n.start - o.start), s;
 }
-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, s) {
+  const t = e.filter((n) => Number.isFinite(n.start) && n.start >= 0 && n.title).sort((n, o) => n.start - o.start);
+  return t.map((n, o) => {
+    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[o + 1]) == null ? void 0 : v.start) ?? s,
+      title: n.title
     };
   });
 }
-function Qt(t, a) {
-  for (const n of t)
-    if (a >= n.start && a < n.end) return n;
+function Mn(e, s) {
+  for (const t of e)
+    if (s >= t.start && s < 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" }, An = {
   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 = {
+}, Sn = { class: "gvp-seek-preview-time" }, Nn = ["value", "disabled", "aria-valuemax", "aria-valuenow", "aria-valuetext"], Hn = { class: "gvp-controls-row" }, Vn = { class: "gvp-controls-left" }, Bn = ["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 +1258,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: s }) {
+    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), o = e, v = s, d = g(!0);
+    let h = null;
+    function E() {
+      h !== null && (clearTimeout(h), h = null);
+    }
+    function A() {
+      E(), o.isPlaying && (h = setTimeout(() => {
+        d.value = !1;
+      }, Qn));
     }
     function S() {
-      g.value = !0, $();
+      d.value = !0, A();
     }
-    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);
+    V(() => o.isPlaying, (u) => {
+      u ? A() : (E(), d.value = !0);
+    }, { immediate: !0 }), V(() => o.container, (u) => {
+      if (!u) return;
+      const b = () => S();
+      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(() => o.isLive || T.value);
+    V(() => o.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 = o.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 = o.video;
+      if (!b || !j()) return;
+      const _ = Number(u.target.value) / 100 * w.value;
+      b.currentTime = _, P.value = _;
+    }
+    const W = g(null), B = g(null), D = g(0), F = g(0), H = g(!1);
+    V(() => o.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);
+      }), ae(() => {
+        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 = B.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, H.value = !0;
     }
-    function V() {
-      D.value = !1;
+    function fe() {
+      H.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 H.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 = B.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([]);
+    V(() => o.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 = []);
+      }), ae(() => {
+        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;
+    const Q = I(() => typeof o.chapters == "string" ? m.value : Array.isArray(o.chapters) ? Tn(o.chapters, w.value) : []), Y = I(
+      () => H.value ? Mn(Q.value, D.value) : null
+    ), X = g(1), G = g(!1);
+    V(() => o.video, (u) => {
+      if (!u) return;
+      const b = () => {
+        X.value = u.volume, G.value = u.muted;
       };
-      s(), l.addEventListener("volumechange", s);
+      b(), u.addEventListener("volumechange", b);
     }, { immediate: !0 });
-    function Me() {
+    function ge() {
       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);
+    function ue(u) {
+      const b = o.video;
+      if (!b) return;
+      const _ = Number(u.target.value) / 100;
+      b.volume = _, _ > 0 && b.muted && (b.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;
-      };
-      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));
-    }, { 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 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;
-      }
-    }
-    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;
+    V(() => o.video, (u) => {
+      u && (u.addEventListener("enterpictureinpicture", () => {
+        me.value = !0;
+      }), u.addEventListener("leavepictureinpicture", () => {
+        me.value = !1;
       }));
     }, { immediate: !0 });
-    function fe() {
+    function Ae() {
       o.video && (document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
       }) : o.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() === o.container;
     }
     He(() => {
-      document.addEventListener("fullscreenchange", $e), document.addEventListener("webkitfullscreenchange", $e);
-    }), ne(() => {
-      _(), document.removeEventListener("fullscreenchange", $e), document.removeEventListener("webkitfullscreenchange", $e);
+      document.addEventListener("fullscreenchange", U), document.addEventListener("webkitfullscreenchange", U);
+    }), ae(() => {
+      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 Se() {
+      var u, b;
+      if (n) {
+        (b = (u = o.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(() => {
+      }) : o.container && Ce(o.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 && o.video !== null && typeof o.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: A
     }, [
-      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", {
+      a("div", In, [
+        a("div", {
           class: "gvp-seek",
-          onPointermove: H,
-          onPointerleave: V
+          onPointermove: R,
+          onPointerleave: fe
         }, [
-          r("div", {
+          a("div", {
             ref_key: "seekTrackEl",
-            ref: J,
+            ref: B,
             class: "gvp-seek-track"
           }, [
-            r("div", {
+            a("div", {
               class: "gvp-seek-buffered",
-              style: re({ width: `${B()}%` })
+              style: ce({ width: `${re()}%` })
             }, null, 4),
-            r("div", {
+            a("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(oe, { key: 0 }, pe(Q.value, (_) => at((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", {
+          H.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", An, Z(Y.value.title), 1)) : x("", !0),
+            a("span", Sn, Z(le(_e)(D.value)), 1)
+          ], 6)) : x("", !0),
+          a("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": `${le(_e)(P.value)} of ${le(_e)(w.value)}`,
+            onInput: C
+          }, null, 40, Nn)
+        ], 32)
+      ]),
+      a("div", Hn, [
+        a("div", Vn, [
+          a("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(Vt, { key: 0 })) : (r(), J(Rt, { key: 1 }))
+          ], 8, Bn),
+          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),
+          a("div", {
+            class: L(["gvp-volume", !le(t) && "is-expandable"])
+          }, [
+            a("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),
+            le(t) ? x("", !0) : (r(), c("div", qn, [
+              a("div", On, [
+                a("div", {
+                  class: "gvp-volume-fill",
+                  style: ce({ width: `${G.value ? 0 : Math.round(X.value * 100)}%` })
+                }, null, 4)
+              ]),
+              a("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(le(_e)(P.value)) + " / " + Z(le(_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] = [
+            a("span", { class: "gvp-live-dot" }, null, -1),
+            a("span", null, "LIVE", -1)
+          ])], 10, Zn)) : x("", !0)
+        ]),
+        a("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"]),
+          le(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: Ae
           }, [
-            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),
+          le(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: Se
+          }, [
+            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 s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("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", {
+      a("path", {
         d: "M11 15H13",
         stroke: "currentColor",
         "stroke-width": "1.5",
         "stroke-linecap": "round",
         "stroke-linejoin": "round"
       }, null, -1),
-      r("path", {
+      a("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", {
+      a("path", {
         d: "M7 22H17",
         stroke: "currentColor",
         "stroke-width": "1.5",
@@ -1508,36 +1667,36 @@ const Wt = { class: "gvp-controls-row" }, zt = ["disabled"], Yt = ["aria-label",
       }, null, -1)
     ])], 2));
   }
-}), En = { name: "IconMobile" }, _n = /* @__PURE__ */ I({
-  ...En,
+}), es = { name: "IconMobile" }, ts = /* @__PURE__ */ N({
+  ...es,
   props: {
     class: {}
   },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
+  setup(e) {
+    const s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("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", {
+      a("path", {
         d: "M11 19H13",
         stroke: "currentColor",
         "stroke-width": "2",
         "stroke-linecap": "round",
         "stroke-linejoin": "round"
       }, null, -1),
-      r("path", {
+      a("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 +1704,270 @@ const Wt = { class: "gvp-controls-row" }, zt = ["disabled"], Yt = ["aria-label",
       }, null, -1)
     ])], 2));
   }
-}), $n = { name: "IconPlay" }, Pn = /* @__PURE__ */ I({
-  ...$n,
+}), ns = { name: "IconPlay" }, ss = /* @__PURE__ */ N({
+  ...ns,
   props: {
     class: {}
   },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
+  setup(e) {
+    const s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("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,
+}), ls = { name: "IconX" }, Oe = /* @__PURE__ */ N({
+  ...ls,
   props: {
     class: {}
   },
-  setup(t) {
-    const a = t;
-    return (n, e) => (d(), f("svg", {
-      class: w(["gvp-icon", a.class]),
+  setup(e) {
+    const s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("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));
   }
+}), os = { name: "IconAlert" }, as = /* @__PURE__ */ N({
+  ...os,
+  props: {
+    class: {}
+  },
+  setup(e) {
+    const s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("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));
+  }
+}), rs = { name: "IconRefresh" }, is = /* @__PURE__ */ N({
+  ...rs,
+  props: {
+    class: {}
+  },
+  setup(e) {
+    const s = e;
+    return (t, n) => (r(), c("svg", {
+      class: L(["gvp-icon", s.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] = [
+      a("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 us(e) {
+  if (!e) return null;
+  if (/^[A-Za-z0-9_-]{11}$/.test(e)) return e;
+  let s;
   try {
-    a = new URL(t);
+    s = 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 = s.hostname.replace(/^www\./, "");
+  if (t === "youtu.be") {
+    const n = s.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 = s.searchParams.get("v");
+    if (n && /^[A-Za-z0-9_-]{11}$/.test(n)) return n;
+    const o = /^\/(?:embed|shorts|v|live)\/([A-Za-z0-9_-]{11})/.exec(
+      s.pathname
     );
-    if (c) return c[1];
+    if (o) return o[1];
   }
   return null;
 }
-function Sn(t) {
+function cs(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 s = new URL(e), t = s.searchParams.get("t") ?? s.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 o = Number.parseInt(n[1] ?? "0", 10), v = Number.parseInt(n[2] ?? "0", 10), d = Number.parseInt(n[3] ?? "0", 10), h = o * 3600 + v * 60 + d;
+      return h > 0 ? h : null;
     }
   } catch {
   }
   return null;
 }
-function Nn(t, a = {}) {
+function ds(e, s = {}) {
   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: o = !1,
+    controls: v = !0,
+    startSeconds: d
+  } = s, 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"), o && (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 vs = "gvp:prefs:";
+function We(e) {
+  return vs + e;
+}
+function Me(e) {
+  if (typeof localStorage > "u") return {};
+  try {
+    const s = localStorage.getItem(We(e));
+    if (!s) return {};
+    const t = JSON.parse(s);
+    return typeof t == "object" && t !== null ? t : {};
+  } catch {
+    return {};
+  }
+}
+function Ke(e, s) {
+  if (!(typeof localStorage > "u"))
+    try {
+      const n = { ...Me(e), ...s };
+      localStorage.setItem(We(e), JSON.stringify(n));
+    } catch {
+    }
+}
+function je(e, s, t) {
+  if (typeof localStorage > "u" || !s) return;
+  const o = { ...Me(e).positions };
+  t > 0 ? o[s] = t : delete o[s], Ke(e, { positions: o });
+}
+function ps(e, s) {
+  var o;
+  const n = (o = Me(e).positions) == null ? void 0 : o[s];
+  return typeof n == "number" && n > 0 ? n : 0;
+}
+function fs(e) {
+  const s = e.trim().replace(/^#/, "");
+  if (/^[0-9a-f]{3}$/i.test(s))
+    return [
+      parseInt(s[0] + s[0], 16),
+      parseInt(s[1] + s[1], 16),
+      parseInt(s[2] + s[2], 16)
+    ];
+  if (/^[0-9a-f]{6}$/i.test(s))
+    return [
+      parseInt(s.slice(0, 2), 16),
+      parseInt(s.slice(2, 4), 16),
+      parseInt(s.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 ms(e, s) {
+  const t = fs(e);
+  return t ? `rgba(${t[0]}, ${t[1]}, ${t[2]}, ${s})` : e;
+}
+function gs(e, s) {
+  if (!s) return "";
+  const t = [];
+  if (s.fontSize && t.push(`font-size: ${s.fontSize};`), s.textColor && t.push(`color: ${s.textColor};`), s.backgroundColor) {
+    const n = typeof s.backgroundOpacity == "number" ? ms(s.backgroundColor, s.backgroundOpacity) : s.backgroundColor;
+    t.push(`background-color: ${n};`);
+  } else typeof s.backgroundOpacity == "number" && t.push(`background-color: rgba(0, 0, 0, ${s.backgroundOpacity});`);
+  return t.length === 0 ? "" : `.${e}::cue { ${t.join(" ")} }`;
+}
+function hs(e) {
+  const s = e.trim().replace(/^#/, "");
+  if (/^[0-9a-f]{3}$/i.test(s)) {
+    const n = parseInt(s[0] + s[0], 16), o = parseInt(s[1] + s[1], 16), v = parseInt(s[2] + s[2], 16);
+    return `${n} ${o} ${v}`;
+  }
+  if (/^[0-9a-f]{6}$/i.test(s)) {
+    const n = parseInt(s.slice(0, 2), 16), o = parseInt(s.slice(2, 4), 16), v = parseInt(s.slice(4, 6), 16);
+    return `${n} ${o} ${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 ks(e) {
+  if (!e) return {};
+  const s = {};
+  if (e.accent) {
+    const t = hs(e.accent);
+    t ? s["--gvp-accent-rgb"] = t : s["--gvp-accent"] = e.accent;
+  }
+  return e.radius && (s["--gvp-radius"] = e.radius), s;
+}
+const ys = ["src"], bs = {
   key: 3,
+  class: "gvp-vignette"
+}, ws = {
+  key: 4,
+  class: "gvp-sr-only",
+  role: "status",
+  "aria-live": "polite"
+}, xs = {
+  key: 5,
+  class: "gvp-loading",
+  role: "status",
+  "aria-live": "polite"
+}, Cs = {
+  key: 6,
+  class: "gvp-error",
+  role: "alert"
+}, Ls = {
+  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,
+}, $s = { class: "gvp-toggle-pill" }, Es = ["aria-pressed"], _s = ["aria-pressed"], Ps = ["aria-label", "aria-pressed"], Ts = ["aria-label"], Ms = {
+  key: 14,
   class: "gvp-play-wrap"
-}, Un = {
+}, Is = {
   key: 0,
   class: "gvp-tooltip",
   role: "tooltip"
-}, Zn = {
-  key: 12,
+}, As = {
+  key: 16,
   class: "gvp-bottom-fade"
-}, Wn = /* @__PURE__ */ I({
+}, Hs = /* @__PURE__ */ N({
   __name: "VideoPlayer",
   props: {
     src: {},
@@ -1681,358 +1989,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: s }) {
+    const t = e, n = s, o = g(null), v = g(t.defaultDevice), d = g(!1), h = g(!1), E = g(!1), A = g(!1), S = 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, B = I(
+      () => t.controls === !0 || t.controls === "custom"
+    ), D = I(() => t.controls === "native"), F = `gvp-video-${Math.random().toString(36).slice(2, 10)}`, H = I(() => ks(t.theme)), R = g(!1), fe = g(!1), y = g(null);
+    let p = null;
+    V(y, (l) => {
+      p == null || p.disconnect(), p = null, !(!t.miniPlayer || !l || 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(l));
+    }), V(d, (l) => {
+      l || (R.value = !1);
+    });
+    function ee() {
+      R.value = !1, fe.value = !0;
+    }
+    const m = g(null);
+    let Q = 0;
+    ae(() => {
+      p == null || p.disconnect(), p = null, cancelAnimationFrame(Q);
+    });
+    let Y = null;
+    V(
+      () => t.captionStyle,
+      (l) => {
+        if (typeof document > "u") return;
+        const i = gs(F, l);
+        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 }
+    ), ae(() => {
+      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 l;
+      return ((l = ge.value) == null ? void 0 : l.src) ?? t.src ?? "";
+    }), me = I(() => {
+      var l;
+      return ((l = ge.value) == null ? void 0 : l.poster) ?? t.poster;
+    }), Ie = I(
       () => {
-        var u;
-        return ((u = D.value) == null ? void 0 : u.thumbnails) ?? n.thumbnails;
+        var l;
+        return ((l = ge.value) == null ? void 0 : l.thumbnails) ?? t.thumbnails;
       }
-    ), me = T(
+    ), Ae = I(
       () => {
-        var u;
-        return ((u = D.value) == null ? void 0 : u.chapters) ?? n.chapters;
+        var l;
+        return ((l = ge.value) == null ? void 0 : l.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(l, i = !1) {
+      if (!X.value) return;
+      const k = Math.min(Math.max(l, 0), t.playlist.length - 1);
+      k !== G.value && (xe = i, G.value = k, n("playlist-change", k, t.playlist[k]));
+    }
+    const Le = I(() => us(ue.value)), U = I(() => Le.value !== null), Se = I(
+      () => Le.value ? ds(Le.value, {
+        autoPlay: t.autoPlay,
+        muted: t.muted,
+        loop: t.loop,
+        controls: B.value ? !0 : D.value,
+        startSeconds: cs(ue.value)
       }) : null
     );
-    function Te(u) {
-      _.value = u, $.value = -1;
+    function Ne(l) {
+      $.value = l, T.value = -1;
     }
-    function X(u) {
-      S.value = u, m.value = -1;
+    function u(l) {
+      f.value = l, 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 l;
+        return T.value >= 0 ? T.value : ((l = $.value[0]) == null ? void 0 : l.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 l, i;
+        return v.value === "mobile" ? ((l = t.aspectRatio) == null ? void 0 : l.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 l, i;
+        return v.value === "mobile" ? ((l = t.frameMaxWidth) == null ? void 0 : l.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 l;
+      return ((l = o.value) == null ? void 0 : l.videoEl) ?? null;
+    });
+    V([m, q], ([l, i]) => {
+      if (cancelAnimationFrame(Q), !t.ambientMode || !l || !i || U.value) return;
+      const k = l.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, l.width, l.height);
+          } catch {
+          }
+      };
+      Q = requestAnimationFrame(ie);
     });
-    async function he() {
-      const u = Q.value;
-      if (u)
+    async function ke() {
+      const l = q.value;
+      if (l)
         try {
-          u.readyState < 2 && u.load();
-          const v = u.play();
-          E.value = v, await v, h.value = !0;
+          l.readyState < 2 && l.load();
+          const i = l.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 l = q.value;
+      if (l) {
+        if (w.value)
           try {
-            await E.value;
+            await w.value;
           } catch {
           }
-        u.pause();
+        l.pause();
       }
     }
-    async function ve() {
-      !n.hoverPlay || q.value || await he();
+    async function Qe() {
+      !t.hoverPlay || U.value || await ke();
+    }
+    async function Ye() {
+      !t.hoverPlay || U.value || (await ve(), d.value = !1);
+    }
+    async function Te() {
+      const l = q.value;
+      l && (l.paused ? await ke() : (await ve(), d.value = !1));
+    }
+    function Ve() {
+      const l = C.value;
+      if (!l) return;
+      if ((document.fullscreenElement ?? document.webkitFullscreenElement ?? null) === l) {
+        const k = document.exitFullscreen ?? document.webkitExitFullscreen;
+        k == null || k.call(document).catch(() => {
+        });
+      } else {
+        const k = l.requestFullscreen ?? l.webkitRequestFullscreen;
+        k == null || k.call(l).catch(() => {
+        });
+      }
     }
-    async function Ce() {
-      !n.hoverPlay || q.value || (await be(), h.value = !1);
+    let ye = null;
+    function Ge() {
+      ye === null && (ye = setTimeout(() => {
+        ye = null, Te();
+      }, 250));
     }
-    async function se() {
-      const u = Q.value;
-      u && (u.paused ? await he() : (await be(), h.value = !1));
+    function Je() {
+      ye !== null && (clearTimeout(ye), ye = null), Ve();
     }
-    function pe() {
-      h.value = !1, e("ended"), k.value && n.autoAdvance && oe.value && de(N.value + 1, !0);
+    function Xe() {
+      d.value = !1, n("ended"), X.value && t.autoAdvance && Pe.value && Ce(G.value + 1, !0);
     }
-    R(H, () => {
-      ce && (ce = !1, he());
+    V(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(l) {
+      j.value = l;
+      const i = q.value;
+      i && (i.playbackRate = l);
     }
-    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;
+    V(q, (l) => {
+      if (!l) return;
+      l.addEventListener("ratechange", () => {
+        j.value = l.playbackRate;
+      }), l.addEventListener("enterpictureinpicture", () => {
+        K.value = !0;
+      }), l.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();
+      l.addEventListener("timeupdate", () => {
+        const k = l.duration;
+        if (n("time-update", l.currentTime, Number.isFinite(k) ? k : 0), !Number.isFinite(k) || k <= 0) return;
+        const ne = l.currentTime / k * 100;
+        for (const ie of [25, 50, 75, 100])
+          ne >= ie && !i.has(ie) && (i.add(ie), n("milestone", ie));
+      }), l.addEventListener("seeked", () => {
+        n("seeked", l.currentTime);
+      }), l.addEventListener("volumechange", () => {
+        n("volume-change", l.volume, l.muted);
+      }), l.addEventListener("error", () => {
+        A.value = !0, E.value = !1, n("error");
+      }), l.addEventListener("waiting", () => {
+        E.value = !0;
+      }), l.addEventListener("stalled", () => {
+        E.value = !0;
+      }), l.addEventListener("playing", () => {
+        E.value = !1;
+      }), l.addEventListener("canplay", () => {
+        E.value = !1;
+      }), l.addEventListener("seeked", () => {
+        E.value = !1;
       });
+    }), V(ue, () => {
+      A.value = !1, E.value = !1;
     });
-    function ge() {
-      const u = Q.value;
-      u && (document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
-      }) : u.requestPictureInPicture().catch(() => {
+    function st() {
+      A.value = !0, E.value = !1, n("error");
+    }
+    const lt = I(() => A.value ? "Video failed to load" : E.value ? "Loading" : d.value ? "Playing" : "Paused");
+    function ot() {
+      A.value = !1, E.value = !1, P.value += 1;
+    }
+    V(q, (l) => {
+      if (!l || !t.persistKey) return;
+      const i = t.persistKey, k = Me(i);
+      typeof k.volume == "number" && (l.volume = k.volume), typeof k.muted == "boolean" && (l.muted = k.muted), typeof k.speed == "number" && (l.playbackRate = k.speed);
+      const ne = () => {
+        Ke(i, {
+          volume: l.volume,
+          muted: l.muted,
+          speed: l.playbackRate
+        });
+      };
+      l.addEventListener("volumechange", ne), l.addEventListener("ratechange", ne);
+    }), V([q, ue], ([l, i]) => {
+      if (!l || !t.persistKey || !i) return;
+      const k = t.persistKey, ne = () => {
+        const be = ps(k, i);
+        be > 0 && (!Number.isFinite(l.duration) || be < l.duration - 1) && (l.currentTime = be);
+      };
+      l.readyState >= 1 ? ne() : l.addEventListener("loadedmetadata", ne, { once: !0 });
+      let ie = 0;
+      const $e = () => {
+        const be = Date.now();
+        be - ie < 1e3 || (ie = be, je(k, i, l.currentTime));
+      };
+      l.addEventListener("timeupdate", $e), l.addEventListener("pause", $e), l.addEventListener("ended", () => je(k, i, 0));
+    }, { immediate: !0 });
+    function Be() {
+      const l = q.value;
+      l && (document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
+      }) : l.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(l) {
+      var ne;
+      const i = q.value;
+      if (!(!i || !re.value && !((ne = C.value) != null && ne.contains(document.activeElement)) || l.target.tagName === "INPUT" && l.key !== " "))
+        switch (l.key) {
           case " ":
           case "k":
-            u.preventDefault(), se();
+            l.preventDefault(), Te();
             break;
           case "ArrowLeft":
-            u.preventDefault(), v.currentTime = Math.max(0, v.currentTime - 5);
+            l.preventDefault(), i.currentTime = Math.max(0, i.currentTime - 5);
             break;
           case "ArrowRight":
-            u.preventDefault(), v.currentTime = Math.min(v.duration || 0, v.currentTime + 5);
+            l.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);
+            l.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);
+            l.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":
+            Ve();
             break;
-          }
           case "p":
-            Y && ge();
+            W && Be();
             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();
-      })
+      document.addEventListener("keydown", Re);
+    }), ae(() => {
+      document.removeEventListener("keydown", Re);
+    }), (l, 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),
+      a("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, ...H.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: Se.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, ys)) : (r(), J(vt, {
+          ref_key: "hlsPlayerRef",
+          ref: o,
+          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: st,
+          onLiveChange: i[1] || (i[1] = (k) => S.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(l.$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", bs)),
+        U.value ? x("", !0) : (r(), c("span", ws, Z(lt.value), 1)),
+        !U.value && E.value && !A.value ? (r(), c("div", xs, [...i[16] || (i[16] = [
+          a("div", { class: "gvp-spinner" }, null, -1),
+          a("span", { class: "gvp-sr-only" }, "Loading…", -1)
+        ])])) : x("", !0),
+        !U.value && A.value ? (r(), c("div", Cs, [
+          O(as, { class: "gvp-error-icon" }),
+          i[18] || (i[18] = a("p", { class: "gvp-error-text" }, "This video couldn't be played.", -1)),
+          a("button", {
             type: "button",
-            onClick: v[4] || (v[4] = (P) => o.value = "mobile")
+            class: "gvp-error-retry",
+            onClick: ot
           }, [
-            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(is),
+            i[17] || (i[17] = a("span", null, "Retry", -1))
+          ])
+        ])) : x("", !0),
+        e.showDeviceToggle ? (r(), c("div", Ls, [
+          a("div", $s, [
+            a("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, Es),
+            i[19] || (i[19] = a("div", { class: "gvp-toggle-divider" }, null, -1)),
+            a("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(ts)
+            ], 10, _s)
+          ])
+        ])) : 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 && !B.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 && !B.value ? (r(), J(_t, {
+          key: 10,
+          speed: j.value,
+          onSelect: nt
+        }, null, 8, ["speed"])) : x("", !0),
+        !U.value && !B.value ? (r(), J(Nt, {
+          key: 11,
+          video: q.value
+        }, null, 8, ["video"])) : x("", !0),
+        !U.value && le(W) && !B.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: Be
+        }, [
+          O(ze)
+        ], 10, Ps)) : x("", !0),
+        !U.value && B.value ? (r(), c("button", {
+          key: 13,
+          type: "button",
+          class: "gvp-click-layer",
+          "aria-label": d.value ? "Pause" : "Play",
+          onClick: Ge,
+          onDblclick: Je
+        }, null, 40, Ts)) : x("", !0),
+        !U.value && !B.value && !d.value ? (r(), c("div", Ms, [
+          a("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(ss),
+            e.tooltipText && h.value ? (r(), c("span", Is, Z(e.tooltipText), 1)) : x("", !0)
+          ], 32)
+        ])) : x("", !0),
+        !U.value && B.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: Ae.value,
+          "has-prev": de.value,
+          "has-next": Pe.value,
+          "is-live": S.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 && !B.value ? (r(), c("div", As)) : x("", !0)
+      ], 38)
+    ], 6));
   }
 });
 export {
-  Ge as HLSPlayer,
-  Wn as VueVideoPlayer,
-  In as parseYouTubeId,
-  Sn as parseYouTubeStart,
-  Nn as youTubeEmbedUrl
+  vt as HLSPlayer,
+  Hs as VueVideoPlayer,
+  us as parseYouTubeId,
+  cs as parseYouTubeStart,
+  ds as youTubeEmbedUrl
 };
 //# sourceMappingURL=index.mjs.map