@glitchlab/vue-video-player 1.4.0 → 1.6.0

package/dist/index.mjs

@@ -1,27 +1,27 @@
-import { defineComponent as S, ref as k, onMounted as be, watch as R, onBeforeUnmount as ne, openBlock as i, createElementBlock as v, normalizeClass as y, renderSlot as Ee, createElementVNode as l, computed as N, createVNode as U, toDisplayString as O, Fragment as oe, renderList as ae, createCommentVNode as T, createBlock as j, normalizeStyle as ge, unref as ee, withCtx as Se } from "vue";
-import J from "hls.js";
-function xe(t, o, s) {
-  const e = t == null ? void 0 : t.trim();
-  if (e) return e;
-  if (o) {
+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 a = new Intl.DisplayNames(void 0, { type: "language" }).of(o);
-      if (a && a !== o) return a;
+      const v = new Intl.DisplayNames(void 0, { type: "language" }).of(s);
+      if (v && v !== s) return v;
     } catch {
     }
-    return o;
+    return s;
   }
-  return `Audio ${s + 1}`;
+  return `Audio ${t + 1}`;
 }
-const He = {
+const ut = {
   index: -1,
   height: 0,
   label: "Auto"
 };
-function Ae(t, o) {
-  return t > 0 ? `${t}p` : `Level ${o + 1}`;
+function ct(e, s) {
+  return e > 0 ? `${e}p` : `Level ${s + 1}`;
 }
-const Be = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "poster"], Ve = /* @__PURE__ */ S({
+const dt = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "poster"], vt = /* @__PURE__ */ N({
   __name: "HLSPlayer",
   props: {
     src: {},
@@ -38,147 +38,153 @@ const Be = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
     audioTrackIndex: { default: -1 },
     qualityLevelIndex: { default: -1 }
   },
-  emits: ["play", "pause", "audio-tracks", "quality-levels", "current-level"],
-  setup(t, { expose: o, emit: s }) {
-    const e = t, f = s, a = k(null), w = k(null);
-    let m, $;
-    const E = globalThis.window !== void 0 && J.isSupported(), _ = (u) => !!e.isHls || E && u.endsWith(".m3u8");
-    function A() {
-      $ == null || $(), $ = void 0, m == null || m(), m = void 0, w.value && (w.value.destroy(), w.value = null);
-      const u = a.value;
-      if (u) {
-        for (u.pause(), u.removeAttribute("src"); u.firstChild; ) u.firstChild.remove();
-        u.load(), f("audio-tracks", []), f("quality-levels", []), f("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(u) {
-      var W, M, Z;
-      const C = a.value;
-      if (!C || !u) return;
-      A();
-      const B = () => {
-        e.autoPlay && C.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 (_(u)) {
-        const g = new J(e.hlsConfig);
-        w.value = g;
-        const P = () => {
-          const I = g.audioTracks.map((H, z) => ({
-            index: z,
-            label: xe(H.name, H.lang, z),
+      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
           }));
-          f("audio-tracks", I);
-        }, V = () => {
-          const I = g.levels.map((H, z) => ({
-            index: z,
+          o("audio-tracks", F);
+        }, B = () => {
+          const F = C.levels.map((H, R) => ({
+            index: R,
             height: H.height || 0,
-            label: Ae(H.height || 0, z)
+            label: ct(H.height || 0, R)
           }));
-          f("quality-levels", I);
+          o("quality-levels", F);
         };
-        g.on(J.Events.MANIFEST_PARSED, B), g.on(J.Events.MANIFEST_PARSED, V), g.on(J.Events.LEVELS_UPDATED, V), g.on(J.Events.LEVEL_SWITCHED, (I, H) => {
-          f("current-level", H.level);
-        }), g.on(J.Events.AUDIO_TRACKS_UPDATED, P), g.on(J.Events.AUDIO_TRACK_SWITCHED, P), g.on(J.Events.ERROR, (I, H) => {
-          H.fatal && (g.destroy(), w.value = null);
-        }), g.attachMedia(C), g.loadSource(u);
+        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 {
-        C.src = u, C.load(), C.addEventListener("loadedmetadata", B, { once: !0 }), $ = () => {
-          C.removeEventListener("loadedmetadata", B);
+        M.src = f, M.load(), M.addEventListener("loadedmetadata", z, { once: !0 }), E = () => {
+          M.removeEventListener("loadedmetadata", z);
         };
-        const g = C.audioTracks;
-        if (g) {
-          const P = () => {
-            const V = [];
-            for (let I = 0; I < g.length; I++) {
-              const H = g[I];
-              V.push({
-                index: I,
-                label: xe(H.label, H.language, I),
-                lang: H.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
               });
             }
-            f("audio-tracks", V);
+            o("audio-tracks", B);
           };
-          (W = g.addEventListener) == null || W.call(g, "addtrack", P), (M = g.addEventListener) == null || M.call(g, "removetrack", P), (Z = g.addEventListener) == null || Z.call(g, "change", P), g.length > 0 && P(), m = () => {
-            var V, I, H;
-            (V = g.removeEventListener) == null || V.call(g, "addtrack", P), (I = g.removeEventListener) == null || I.call(g, "removetrack", P), (H = g.removeEventListener) == null || H.call(g, "change", P);
+          (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 h(u) {
-      var W;
-      if (u == null || u < 0) return;
-      const C = w.value;
-      if (C) {
-        C.audioTrack !== u && (C.audioTrack = u);
+    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 = (W = a.value) == null ? void 0 : W.audioTracks;
-      if (B)
-        for (let M = 0; M < B.length; M++)
-          B[M].enabled = M === u;
-    }
-    function x(u) {
-      if (u == null) return;
-      const C = w.value;
-      C && C.currentLevel !== u && (C.currentLevel = u);
-    }
-    return be(() => {
-      e.src && b(e.src);
-    }), R(
-      () => e.src,
-      (u) => {
-        u && b(u);
+      const z = (j = v.value) == null ? void 0 : j.audioTracks;
+      if (z)
+        for (let K = 0; K < z.length; K++)
+          z[K].enabled = K === f;
+    }
+    function T(f) {
+      if (f == null) return;
+      const M = d.value;
+      M && M.currentLevel !== f && (M.currentLevel = f);
+    }
+    return He(() => {
+      n.src && w(n.src);
+    }), V(
+      () => n.src,
+      (f) => {
+        f && w(f);
       }
-    ), R(
-      () => e.audioTrackIndex,
-      (u) => h(u)
-    ), R(
-      () => e.qualityLevelIndex,
-      (u) => x(u)
-    ), ne(A), o({ videoEl: a }), (u, C) => (i(), v("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: a,
-      muted: t.muted,
-      loop: t.loop,
-      controls: t.controls,
-      autoplay: t.autoPlay,
-      playsinline: t.playsInline,
-      preload: t.preload,
-      poster: t.poster,
-      class: y(e.class),
-      onPlay: C[0] || (C[0] = (B) => f("play")),
-      onPause: C[1] || (C[1] = (B) => f("pause"))
+      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"))
     }, [
-      Ee(u.$slots, "default")
-    ], 42, Be));
+      Ue(f.$slots, "default")
+    ], 42, dt));
   }
-}), qe = { name: "IconAudio" }, De = /* @__PURE__ */ S({
-  ...qe,
+}), pt = { name: "IconAudio" }, ft = /* @__PURE__ */ N({
+  ...pt,
   props: {
     class: {}
   },
-  setup(t) {
-    const o = t;
-    return (s, e) => (i(), v("svg", {
-      class: y(["gvp-icon", o.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] = [
-      l("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),
-      l("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",
@@ -186,23 +192,23 @@ const Be = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), Re = { name: "IconChevron" }, Le = /* @__PURE__ */ S({
-  ...Re,
+}), mt = { name: "IconChevron" }, Ze = /* @__PURE__ */ N({
+  ...mt,
   props: {
     class: {}
   },
-  setup(t) {
-    const o = t;
-    return (s, e) => (i(), v("svg", {
-      class: y(["gvp-icon", o.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] = [
-      l("path", {
+    }, [...n[0] || (n[0] = [
+      a("path", {
         d: "M6 9L12 15L18 9",
         stroke: "currentColor",
         "stroke-width": "2",
@@ -211,93 +217,93 @@ const Be = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), Fe = ["aria-expanded"], Ne = { class: "gvp-audio-label" }, Oe = {
+}), gt = ["aria-expanded"], ht = { class: "gvp-audio-label" }, kt = {
   key: 0,
   class: "gvp-audio-menu",
   role: "listbox",
   "aria-label": "Audio tracks"
-}, Ue = ["aria-selected", "onClick"], Ze = /* @__PURE__ */ S({
+}, yt = ["aria-selected", "onClick"], bt = /* @__PURE__ */ N({
   __name: "AudioTrackSwitcher",
   props: {
     tracks: {},
     activeIndex: {}
   },
   emits: ["select"],
-  setup(t, { emit: o }) {
-    const s = t, e = o, f = k(!1), a = k(null), w = N(
-      () => s.tracks.find((_) => _.index === s.activeIndex) ?? s.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 m(_) {
-      a.value && !a.value.contains(_.target) && (f.value = !1);
+    function h(S) {
+      v.value && !v.value.contains(S.target) && (o.value = !1);
     }
-    function $(_) {
-      _.key === "Escape" && (f.value = !1);
+    function E(S) {
+      S.key === "Escape" && (o.value = !1);
     }
-    R(f, (_) => {
-      _ ? (document.addEventListener("mousedown", m), document.addEventListener("keydown", $)) : (document.removeEventListener("mousedown", m), document.removeEventListener("keydown", $));
-    }), ne(() => {
-      document.removeEventListener("mousedown", m), document.removeEventListener("keydown", $);
+    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(_) {
-      e("select", _), f.value = !1;
+    function A(S) {
+      n("select", S), o.value = !1;
     }
-    return (_, A) => {
-      var b;
-      return i(), v("div", {
+    return (S, P) => {
+      var w;
+      return r(), c("div", {
         ref_key: "rootEl",
-        ref: a,
+        ref: v,
         class: "gvp-audio"
       }, [
-        l("button", {
+        a("button", {
           type: "button",
           class: "gvp-audio-btn",
           "aria-haspopup": "listbox",
-          "aria-expanded": f.value,
+          "aria-expanded": o.value,
           "aria-label": "Audio track",
-          onClick: A[0] || (A[0] = (h) => f.value = !f.value)
+          onClick: P[0] || (P[0] = ($) => o.value = !o.value)
         }, [
-          U(De),
-          l("span", Ne, O((b = w.value) == null ? void 0 : b.label), 1),
-          U(Le)
-        ], 8, Fe),
-        f.value ? (i(), v("ul", Oe, [
-          (i(!0), v(oe, null, ae(t.tracks, (h) => (i(), v("li", {
-            key: h.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
           }, [
-            l("button", {
+            a("button", {
               type: "button",
               role: "option",
-              "aria-selected": h.index === t.activeIndex,
-              class: y(["gvp-audio-menu-item", { "is-active": h.index === t.activeIndex }]),
-              onClick: (x) => E(h.index)
-            }, O(h.label), 11, Ue)
+              "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))
-        ])) : T("", !0)
+        ])) : x("", !0)
       ], 512);
     };
   }
-}), je = { name: "IconSpeed" }, $e = /* @__PURE__ */ S({
-  ...je,
+}), wt = { name: "IconSpeed" }, xt = /* @__PURE__ */ N({
+  ...wt,
   props: {
     class: {}
   },
-  setup(t) {
-    const o = t;
-    return (s, e) => (i(), v("svg", {
-      class: y(["gvp-icon", o.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] = [
-      l("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),
-      l("path", {
+      a("path", {
         d: "M12 8V12L14.5 14.5",
         stroke: "currentColor",
         "stroke-width": "1.5",
@@ -306,80 +312,80 @@ const Be = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), Qe = ["aria-expanded"], We = { class: "gvp-speed-label" }, ze = {
+}), Ct = ["aria-expanded"], Lt = { class: "gvp-speed-label" }, $t = {
   key: 0,
   class: "gvp-speed-menu",
   role: "listbox",
   "aria-label": "Playback speed"
-}, Ye = ["aria-selected", "onClick"], Ke = /* @__PURE__ */ S({
+}, Et = ["aria-selected", "onClick"], _t = /* @__PURE__ */ N({
   __name: "SpeedSwitcher",
   props: {
     speed: {}
   },
   emits: ["select"],
-  setup(t, { emit: o }) {
-    const s = [0.5, 0.75, 1, 1.25, 1.5, 2], e = o, f = k(!1), a = k(null);
-    function w(E) {
-      a.value && !a.value.contains(E.target) && (f.value = !1);
-    }
-    function m(E) {
-      E.key === "Escape" && (f.value = !1);
-    }
-    R(f, (E) => {
-      E ? (document.addEventListener("mousedown", w), document.addEventListener("keydown", m)) : (document.removeEventListener("mousedown", w), document.removeEventListener("keydown", m));
-    }), ne(() => {
-      document.removeEventListener("mousedown", w), document.removeEventListener("keydown", m);
+  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", E), f.value = !1;
+    function E(A) {
+      n("select", A), o.value = !1;
     }
-    return (E, _) => (i(), v("div", {
+    return (A, S) => (r(), c("div", {
       ref_key: "rootEl",
-      ref: a,
+      ref: v,
       class: "gvp-speed"
     }, [
-      l("button", {
+      a("button", {
         type: "button",
         class: "gvp-speed-btn",
         "aria-haspopup": "listbox",
-        "aria-expanded": f.value,
+        "aria-expanded": o.value,
         "aria-label": "`Playback speed: ${speed === 1 ? '1×' : speed + '×'}`",
-        onClick: _[0] || (_[0] = (A) => f.value = !f.value)
+        onClick: S[0] || (S[0] = (P) => o.value = !o.value)
       }, [
-        U($e),
-        l("span", We, O(t.speed === 1 ? "1×" : `${t.speed}×`), 1),
-        U(Le)
-      ], 8, Qe),
-      f.value ? (i(), v("ul", ze, [
-        (i(), v(oe, null, ae(s, (A) => l("li", { key: A }, [
-          l("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": A === t.speed,
-            class: y(["gvp-speed-menu-item", { "is-active": A === t.speed }]),
-            onClick: (b) => $(A)
-          }, O(A === 1 ? "Normal" : `${A}×`), 11, Ye)
+            "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))
-      ])) : T("", !0)
+      ])) : x("", !0)
     ], 512));
   }
-}), Je = { name: "IconCaptions" }, Pe = /* @__PURE__ */ S({
-  ...Je,
+}), Pt = { name: "IconCaptions" }, Tt = /* @__PURE__ */ N({
+  ...Pt,
   props: {
     class: {}
   },
-  setup(t) {
-    const o = t;
-    return (s, e) => (i(), v("svg", {
-      class: y(["gvp-icon", o.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] = [
-      l("rect", {
+    }, [...n[0] || (n[0] = [
+      a("rect", {
         x: "2",
         y: "5",
         width: "20",
@@ -388,7 +394,7 @@ const Be = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
         stroke: "currentColor",
         "stroke-width": "1.5"
       }, null, -1),
-      l("path", {
+      a("path", {
         d: "M7 12H11M13 12H17M7 15H9M11 15H13M15 15H17",
         stroke: "currentColor",
         "stroke-width": "1.5",
@@ -396,128 +402,128 @@ const Be = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), Xe = ["aria-expanded", "aria-pressed"], Ge = {
+}), Mt = ["aria-expanded", "aria-pressed"], It = {
   key: 0,
   class: "gvp-captions-menu",
   role: "listbox",
   "aria-label": "Captions"
-}, et = ["aria-selected"], tt = ["aria-selected", "onClick"], nt = /* @__PURE__ */ S({
+}, At = ["aria-selected"], St = ["aria-selected", "onClick"], Nt = /* @__PURE__ */ N({
   __name: "CaptionsSwitcher",
   props: {
     video: {}
   },
-  setup(t) {
-    const o = t, s = k([]), e = k(-1), f = k(!1), a = k(null);
-    function w(b) {
-      const h = [];
-      for (let u = 0; u < b.length; u++) {
-        const C = b[u];
-        (C.kind === "subtitles" || C.kind === "captions") && h.push({ index: u, label: C.label || C.language || `Track ${u + 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}` });
       }
-      s.value = h;
-      let x = -1;
-      for (let u = 0; u < b.length; u++)
-        if (b[u].mode === "showing") {
-          x = u;
+      t.value = $;
+      let T = -1;
+      for (let f = 0; f < w.length; f++)
+        if (w[f].mode === "showing") {
+          T = f;
           break;
         }
-      e.value = x;
+      n.value = T;
     }
-    let m = null;
-    R(() => o.video, (b) => {
-      if (m == null || m(), m = null, !b) {
-        s.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 h = b.textTracks;
-      w(h);
-      const x = () => w(h);
-      typeof h.addEventListener == "function" && (h.addEventListener("addtrack", x), h.addEventListener("removetrack", x), h.addEventListener("change", x), m = () => {
-        h.removeEventListener("addtrack", x), h.removeEventListener("removetrack", x), h.removeEventListener("change", x);
+      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(() => {
-      m == null || m(), document.removeEventListener("mousedown", $), document.removeEventListener("keydown", E);
+    }, { immediate: !0 }), ae(() => {
+      h == null || h(), document.removeEventListener("mousedown", E), document.removeEventListener("keydown", A);
     });
-    function $(b) {
-      a.value && !a.value.contains(b.target) && (f.value = !1);
+    function E(w) {
+      v.value && !v.value.contains(w.target) && (o.value = !1);
     }
-    function E(b) {
-      b.key === "Escape" && (f.value = !1);
+    function A(w) {
+      w.key === "Escape" && (o.value = !1);
     }
-    R(f, (b) => {
-      b ? (document.addEventListener("mousedown", $), document.addEventListener("keydown", E)) : (document.removeEventListener("mousedown", $), document.removeEventListener("keydown", E));
+    V(o, (w) => {
+      w ? (document.addEventListener("mousedown", E), document.addEventListener("keydown", A)) : (document.removeEventListener("mousedown", E), document.removeEventListener("keydown", A));
     });
-    function _() {
-      if (!o.video) return;
-      const b = o.video.textTracks;
-      for (let h = 0; h < b.length; h++) b[h].mode = "hidden";
-      e.value = -1, f.value = !1;
-    }
-    function A(b) {
-      if (!o.video) return;
-      const h = o.video.textTracks;
-      for (let x = 0; x < h.length; x++)
-        h[x].mode = x === b ? "showing" : "hidden";
-      e.value = b, f.value = !1;
-    }
-    return (b, h) => s.value.length > 0 ? (i(), v("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: a,
+      ref: v,
       class: "gvp-captions"
     }, [
-      l("button", {
+      a("button", {
         type: "button",
-        class: y(["gvp-captions-btn", { "is-active": e.value >= 0 }]),
+        class: L(["gvp-captions-btn", { "is-active": n.value >= 0 }]),
         "aria-haspopup": "listbox",
-        "aria-expanded": f.value,
-        "aria-pressed": e.value >= 0,
+        "aria-expanded": o.value,
+        "aria-pressed": n.value >= 0,
         "aria-label": "Captions",
-        onClick: h[0] || (h[0] = (x) => f.value = !f.value)
+        onClick: $[0] || ($[0] = (T) => o.value = !o.value)
       }, [
-        U(Pe)
-      ], 10, Xe),
-      f.value ? (i(), v("ul", Ge, [
-        l("li", null, [
-          l("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: y(["gvp-captions-menu-item", { "is-active": e.value === -1 }]),
-            onClick: _
-          }, " Off ", 10, et)
+            "aria-selected": n.value === -1,
+            class: L(["gvp-captions-menu-item", { "is-active": n.value === -1 }]),
+            onClick: S
+          }, " Off ", 10, At)
         ]),
-        (i(!0), v(oe, null, ae(s.value, (x) => (i(), v("li", {
-          key: x.index
+        (r(!0), c(oe, null, pe(t.value, (T) => (r(), c("li", {
+          key: T.index
         }, [
-          l("button", {
+          a("button", {
             type: "button",
             role: "option",
-            "aria-selected": x.index === e.value,
-            class: y(["gvp-captions-menu-item", { "is-active": x.index === e.value }]),
-            onClick: (u) => A(x.index)
-          }, O(x.label), 11, tt)
+            "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))
-      ])) : T("", !0)
-    ], 512)) : T("", !0);
+      ])) : x("", !0)
+    ], 512)) : x("", !0);
   }
-}), lt = { name: "IconPause" }, ot = /* @__PURE__ */ S({
-  ...lt,
+}), Ht = { name: "IconPause" }, Vt = /* @__PURE__ */ N({
+  ...Ht,
   props: {
     class: {}
   },
-  setup(t) {
-    const o = t;
-    return (s, e) => (i(), v("svg", {
-      class: y(["gvp-icon", o.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] = [
-      l("rect", {
+    }, [...n[0] || (n[0] = [
+      a("rect", {
         x: "6",
         y: "5",
         width: "4",
@@ -525,7 +531,7 @@ const Be = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
         rx: "1",
         fill: "currentColor"
       }, null, -1),
-      l("rect", {
+      a("rect", {
         x: "14",
         y: "5",
         width: "4",
@@ -535,164 +541,191 @@ const Be = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), at = { name: "IconPlaySolid" }, st = /* @__PURE__ */ S({
-  ...at,
+}), Bt = { name: "IconPlaySolid" }, Rt = /* @__PURE__ */ N({
+  ...Bt,
   props: {
     class: {}
   },
-  setup(t) {
-    const o = t;
-    return (s, e) => (i(), v("svg", {
-      class: y(["gvp-icon", o.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] = [
-      l("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));
   }
-}), it = { name: "IconVolumeHigh" }, rt = /* @__PURE__ */ S({
-  ...it,
+}), Dt = { name: "IconPrev" }, Ft = /* @__PURE__ */ N({
+  ...Dt,
   props: {
     class: {}
   },
-  setup(t) {
-    const o = t;
-    return (s, e) => (i(), v("svg", {
-      class: y(["gvp-icon", o.class]),
-      width: "18",
-      height: "18",
+  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] = [
-      l("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",
+    }, [...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),
+      a("path", {
+        d: "M6 5V19",
         stroke: "currentColor",
-        "stroke-width": "1.5",
-        "stroke-linejoin": "round"
+        "stroke-width": "2",
+        "stroke-linecap": "round"
+      }, null, -1)
+    ])], 2));
+  }
+}), qt = { name: "IconNext" }, Ot = /* @__PURE__ */ N({
+  ...qt,
+  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: "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),
-      l("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",
+      a("path", {
+        d: "M18 5V19",
         stroke: "currentColor",
-        "stroke-width": "1.5",
+        "stroke-width": "2",
         "stroke-linecap": "round"
       }, null, -1)
     ])], 2));
   }
-}), ut = { name: "IconVolumeLow" }, ct = /* @__PURE__ */ S({
-  ...ut,
+}), jt = { name: "IconVolumeHigh" }, Ut = /* @__PURE__ */ N({
+  ...jt,
   props: {
     class: {}
   },
-  setup(t) {
-    const o = t;
-    return (s, e) => (i(), v("svg", {
-      class: y(["gvp-icon", o.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] = [
-      l("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),
-      l("path", {
-        d: "M16.5 8C17.5 9 18 10.5 18 12C18 13.5 17.5 15 16.5 16",
+      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",
         "stroke-linecap": "round"
       }, null, -1)
     ])], 2));
   }
-}), dt = { name: "IconVolumeMuted" }, vt = /* @__PURE__ */ S({
-  ...dt,
+}), Zt = { name: "IconVolumeLow" }, zt = /* @__PURE__ */ N({
+  ...Zt,
   props: {
     class: {}
   },
-  setup(t) {
-    const o = t;
-    return (s, e) => (i(), v("svg", {
-      class: y(["gvp-icon", o.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] = [
-      l("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),
-      l("path", {
-        d: "M16 9L22 15M22 9L16 15",
+      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",
         "stroke-linecap": "round"
       }, null, -1)
     ])], 2));
   }
-}), pt = { name: "IconQuality" }, ft = /* @__PURE__ */ S({
-  ...pt,
+}), Wt = { name: "IconVolumeMuted" }, Kt = /* @__PURE__ */ N({
+  ...Wt,
   props: {
     class: {}
   },
-  setup(t) {
-    const o = t;
-    return (s, e) => (i(), v("svg", {
-      class: y(["gvp-icon", o.class]),
-      width: "16",
-      height: "16",
+  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] = [
-      l("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",
+    }, [...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-width": "1.5",
+        "stroke-linejoin": "round"
       }, null, -1),
-      l("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",
+      a("path", {
+        d: "M16 9L22 15M22 9L16 15",
         stroke: "currentColor",
         "stroke-width": "1.5",
         "stroke-linecap": "round"
       }, null, -1)
     ])], 2));
   }
-}), mt = { name: "IconPiP" }, Me = /* @__PURE__ */ S({
-  ...mt,
+}), Qt = { name: "IconPiP" }, ze = /* @__PURE__ */ N({
+  ...Qt,
   props: {
     class: {}
   },
-  setup(t) {
-    const o = t;
-    return (s, e) => (i(), v("svg", {
-      class: y(["gvp-icon", o.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] = [
-      l("rect", {
+    }, [...n[0] || (n[0] = [
+      a("rect", {
         x: "2",
         y: "4",
         width: "20",
@@ -701,7 +734,7 @@ const Be = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
         stroke: "currentColor",
         "stroke-width": "1.5"
       }, null, -1),
-      l("rect", {
+      a("rect", {
         x: "12",
         y: "12",
         width: "8",
@@ -711,23 +744,23 @@ const Be = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), ht = { name: "IconFullscreen" }, gt = /* @__PURE__ */ S({
-  ...ht,
+}), Yt = { name: "IconFullscreen" }, Gt = /* @__PURE__ */ N({
+  ...Yt,
   props: {
     class: {}
   },
-  setup(t) {
-    const o = t;
-    return (s, e) => (i(), v("svg", {
-      class: y(["gvp-icon", o.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] = [
-      l("path", {
+    }, [...n[0] || (n[0] = [
+      a("path", {
         d: "M4 9V4H9M15 4H20V9M20 15V20H15M9 20H4V15",
         stroke: "currentColor",
         "stroke-width": "1.75",
@@ -736,23 +769,23 @@ const Be = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), kt = { name: "IconFullscreenExit" }, yt = /* @__PURE__ */ S({
-  ...kt,
+}), Jt = { name: "IconFullscreenExit" }, Xt = /* @__PURE__ */ N({
+  ...Jt,
   props: {
     class: {}
   },
-  setup(t) {
-    const o = t;
-    return (s, e) => (i(), v("svg", {
-      class: y(["gvp-icon", o.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] = [
-      l("path", {
+    }, [...n[0] || (n[0] = [
+      a("path", {
         d: "M9 4V9H4M15 9V4H20M15 20V15H20M9 15H4V20",
         stroke: "currentColor",
         "stroke-width": "1.75",
@@ -761,38 +794,458 @@ const Be = ["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 _e(t) {
-  if (!Number.isFinite(t) || t < 0) return "--:--";
-  const o = Math.floor(t), s = Math.floor(o / 3600), e = Math.floor(o % 3600 / 60), a = (o % 60).toString().padStart(2, "0");
-  if (s > 0) {
-    const w = e.toString().padStart(2, "0");
-    return `${s}:${w}:${a}`;
+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}:${a}`;
+  return `${n}:${v}`;
 }
-const wt = { class: "gvp-controls-row" }, bt = ["aria-label", "aria-pressed"], Ct = { class: "gvp-seek" }, xt = { class: "gvp-seek-track" }, _t = ["value", "disabled", "aria-valuemax", "aria-valuenow"], Et = {
-  class: "gvp-time",
-  "aria-live": "off"
-}, Lt = ["aria-expanded", "aria-label"], $t = { class: "gvp-speed-label" }, Pt = {
-  key: 0,
-  class: "gvp-speed-menu",
-  role: "listbox",
-  "aria-label": "Playback speed"
-}, Mt = ["aria-selected", "onClick"], Tt = ["aria-expanded", "aria-label"], It = { class: "gvp-quality-label" }, St = {
-  key: 0,
-  class: "gvp-quality-menu",
-  role: "listbox",
-  "aria-label": "Quality"
-}, Ht = ["aria-selected"], At = ["aria-selected", "onClick"], Bt = ["aria-expanded", "aria-pressed"], Vt = {
-  key: 0,
-  class: "gvp-captions-menu",
-  role: "listbox",
-  "aria-label": "Captions"
-}, qt = ["aria-selected"], Dt = ["aria-selected", "onClick"], Rt = ["aria-label", "aria-pressed"], Ft = {
+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 $n(e, s) {
+  try {
+    return new URL(e, s).href;
+  } catch {
+    return e;
+  }
+}
+function En(e, s) {
+  const t = [], n = e.replace(/\r/g, "").split(`
+`);
+  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 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 t.sort((o, v) => o.start - v.start), t;
+}
+function _n(e) {
+  return {
+    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 d;
+      }
+      return o;
+    }
+  };
+}
+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 Pn(e) {
+  const s = [], t = e.replace(/\r/g, "").split(`
+`);
+  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 s.sort((n, o) => n.start - o.start), s;
+}
+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: n.start,
+      end: Number.isFinite(n.end) ? n.end : ((v = t[o + 1]) == null ? void 0 : v.start) ?? s,
+      title: n.title
+    };
+  });
+}
+function Mn(e, s) {
+  for (const t of e)
+    if (s >= t.start && s < t.end) return t;
+  return null;
+}
+const In = { class: "gvp-controls-seek" }, An = {
+  key: 1,
+  class: "gvp-seek-preview-chapter"
+}, 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"
-}, Nt = { class: "gvp-volume-track" }, Ot = ["value", "aria-valuenow"], Ut = ["aria-label", "aria-pressed"], Zt = ["aria-label", "aria-pressed"], jt = 3e3, Qt = /* @__PURE__ */ S({
+}, 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: {},
@@ -801,450 +1254,412 @@ const wt = { class: "gvp-controls-row" }, bt = ["aria-label", "aria-pressed"], C
     onTogglePlay: {},
     qualityLevels: { default: () => [] },
     currentLevel: { default: -1 },
-    selectedLevel: { default: -1 }
+    selectedLevel: { default: -1 },
+    thumbnails: {},
+    chapters: {},
+    hasPrev: { type: Boolean, default: !1 },
+    hasNext: { type: Boolean, default: !1 },
+    isLive: { type: Boolean, default: !1 },
+    audioTracks: { default: () => [] },
+    audioTrackIndex: { default: -1 }
   },
-  emits: ["select-level"],
-  setup(t, { emit: o }) {
-    const s = (() => {
+  emits: ["select-level", "select-audio-track", "prev", "next"],
+  setup(e, { emit: s }) {
+    const t = (() => {
       if (typeof navigator > "u") return !1;
-      const n = navigator.userAgent;
-      return /iPad|iPhone|iPod/.test(n) || n.includes("Mac") && navigator.maxTouchPoints > 1;
-    })(), e = typeof navigator > "u" ? !1 : /iPhone|iPod/.test(navigator.userAgent), f = [0.5, 0.75, 1, 1.25, 1.5, 2], a = t, w = o, m = k(!0);
-    let $ = null;
+      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() {
-      $ !== null && (clearTimeout($), $ = null);
-    }
-    function _() {
-      E(), a.isPlaying && ($ = setTimeout(() => {
-        m.value = !1;
-      }, jt));
+      h !== null && (clearTimeout(h), h = null);
     }
     function A() {
-      m.value = !0, _();
-    }
-    R(() => a.isPlaying, (n) => {
-      n ? _() : (E(), m.value = !0);
-    }, { immediate: !0 }), R(() => a.container, (n) => {
-      if (!n) return;
-      const r = () => A();
-      n.addEventListener("mousemove", r), n.addEventListener("touchstart", r), n.addEventListener("focusin", r);
+      E(), o.isPlaying && (h = setTimeout(() => {
+        d.value = !1;
+      }, Qn));
+    }
+    function S() {
+      d.value = !0, A();
+    }
+    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 = k(0), h = k(0), x = k(0);
-    R(() => a.video, (n) => {
-      if (!n) return;
-      const r = () => {
-        b.value = n.currentTime;
-      }, p = () => {
-        h.value = Number.isFinite(n.duration) ? n.duration : 0;
-      }, L = () => {
-        const q = n.buffered;
+    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) {
-          x.value = 0;
+          $.value = 0;
           return;
         }
-        let Ce = q.end(q.length - 1);
-        for (let ie = 0; ie < q.length; ie++)
-          if (q.start(ie) <= n.currentTime && n.currentTime <= q.end(ie)) {
-            Ce = q.end(ie);
+        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;
           }
-        x.value = Ce;
-      };
-      r(), p(), L(), n.addEventListener("timeupdate", r), n.addEventListener("durationchange", p), n.addEventListener("loadedmetadata", p), n.addEventListener("progress", L), n.addEventListener("timeupdate", L);
-    }, { immediate: !0 });
-    const u = () => h.value > 0, C = () => u() ? b.value / h.value * 100 : 0, B = () => u() ? x.value / h.value * 100 : 0;
-    function W(n) {
-      const r = a.video;
-      if (!r || !u()) return;
-      const p = Number(n.target.value) / 100 * h.value;
-      r.currentTime = p, b.value = p;
-    }
-    const M = k(1), Z = k(!1);
-    R(() => a.video, (n) => {
-      if (!n) return;
-      const r = () => {
-        M.value = n.volume, Z.value = n.muted;
+        $.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;
+        }
       };
-      r(), n.addEventListener("volumechange", r);
+      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 });
-    function g() {
-      a.video && (a.video.muted = !a.video.muted);
-    }
-    function P(n) {
-      const r = a.video;
-      if (!r) return;
-      const p = Number(n.target.value) / 100;
-      r.volume = p, p > 0 && r.muted && (r.muted = !1);
-    }
-    const V = k(1), I = k(!1), H = k(null);
-    R(() => a.video, (n) => {
-      if (!n) return;
-      const r = () => {
-        V.value = n.playbackRate;
-      };
-      r(), n.addEventListener("ratechange", r);
+    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(() => {
+        b || (W.value = null);
+      }), ae(() => {
+        b = !0;
+      });
     }, { immediate: !0 });
-    function z(n) {
-      a.video && (a.video.playbackRate = n), V.value = n, I.value = !1;
-    }
-    const X = k(!1), re = k(null), ke = N(() => a.qualityLevels.length >= 2), Q = N(
-      () => [...a.qualityLevels].sort((n, r) => r.height - n.height)
-    ), te = N(
-      () => a.qualityLevels.find((n) => n.index === a.currentLevel)
-    ), se = N(() => {
-      if (a.selectedLevel < 0)
-        return te.value ? `Auto (${te.value.label})` : "Auto";
-      const n = a.qualityLevels.find((r) => r.index === a.selectedLevel);
-      return (n == null ? void 0 : n.label) ?? "Auto";
-    });
-    function ue(n) {
-      w("select-level", n), X.value = !1;
-    }
-    const le = k([]), F = k(-1), Y = k(!1), ce = k(null);
-    function de(n) {
-      const r = [];
-      for (let L = 0; L < n.length; L++) {
-        const q = n[L];
-        (q.kind === "subtitles" || q.kind === "captions") && r.push({ index: L, label: q.label || q.language || `Track ${L + 1}` });
-      }
-      le.value = r;
-      let p = -1;
-      for (let L = 0; L < n.length; L++)
-        if (n[L].mode === "showing") {
-          p = L;
-          break;
-        }
-      F.value = p;
+    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;
     }
-    R(() => a.video, (n) => {
-      if (!n) {
-        le.value = [], F.value = -1;
-        return;
+    function fe() {
+      H.value = !1;
+    }
+    const y = I(
+      () => {
+        var u;
+        return H.value ? ((u = W.value) == null ? void 0 : u.cueAt(D.value)) ?? null : null;
       }
-      const r = n.textTracks;
-      de(r);
-      const p = () => de(r);
-      typeof r.addEventListener == "function" && (r.addEventListener("addtrack", p), r.addEventListener("removetrack", p), r.addEventListener("change", p));
+    ), 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(() => {
+        b || (m.value = []);
+      }), ae(() => {
+        b = !0;
+      });
     }, { immediate: !0 });
-    function ve(n) {
-      var p;
-      const r = (p = a.video) == null ? void 0 : p.textTracks;
-      if (r) {
-        for (let L = 0; L < r.length; L++) r[L].mode = L === n ? "showing" : "hidden";
-        F.value = n, Y.value = !1;
-      }
+    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;
+      };
+      b(), u.addEventListener("volumechange", b);
+    }, { immediate: !0 });
+    function ge() {
+      o.video && (o.video.muted = !o.video.muted);
     }
-    function pe() {
-      var r;
-      const n = (r = a.video) == null ? void 0 : r.textTracks;
-      if (n) {
-        for (let p = 0; p < n.length; p++) n[p].mode = "hidden";
-        F.value = -1, Y.value = !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 c = k(!1), d = typeof document < "u" && !!document.pictureInPictureEnabled;
-    R(() => a.video, (n) => {
-      n && (n.addEventListener("enterpictureinpicture", () => {
-        c.value = !0;
-      }), n.addEventListener("leavepictureinpicture", () => {
-        c.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 D() {
-      a.video && (document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
-      }) : a.video.requestPictureInPicture().catch(() => {
+    function Ae() {
+      o.video && (document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
+      }) : o.video.requestPictureInPicture().catch(() => {
       }));
     }
-    const K = k(!1), fe = typeof document > "u" ? !1 : !!(document.fullscreenEnabled || document.webkitFullscreenEnabled);
-    function me() {
+    const de = g(!1), Pe = typeof document > "u" ? !1 : !!(document.fullscreenEnabled || document.webkitFullscreenEnabled);
+    function xe() {
       return document.fullscreenElement ?? document.webkitFullscreenElement ?? null;
     }
-    function ye(n) {
-      const r = n.requestFullscreen ?? n.webkitRequestFullscreen;
-      return r ? r.call(n) : 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 he() {
-      const n = document.exitFullscreen ?? document.webkitExitFullscreen;
-      return n ? n.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 G() {
-      K.value = me() === a.container;
+    function U() {
+      de.value = xe() === o.container;
     }
-    be(() => {
-      document.addEventListener("fullscreenchange", G), document.addEventListener("webkitfullscreenchange", G);
-    }), ne(() => {
-      E(), document.removeEventListener("fullscreenchange", G), document.removeEventListener("webkitfullscreenchange", G);
+    He(() => {
+      document.addEventListener("fullscreenchange", U), document.addEventListener("webkitfullscreenchange", U);
+    }), ae(() => {
+      E(), document.removeEventListener("fullscreenchange", U), document.removeEventListener("webkitfullscreenchange", U);
     });
-    function Te() {
-      var n, r;
-      if (e) {
-        (r = (n = a.video) == null ? void 0 : n.webkitEnterFullscreen) == null || r.call(n);
+    function Se() {
+      var u, b;
+      if (n) {
+        (b = (u = o.video) == null ? void 0 : u.webkitEnterFullscreen) == null || b.call(u);
         return;
       }
-      K.value ? he().catch(() => {
-      }) : a.container && ye(a.container).catch(() => {
+      de.value ? Le().catch(() => {
+      }) : o.container && Ce(o.container).catch(() => {
       });
     }
-    const Ie = fe || e && a.video !== null && typeof a.video.webkitEnterFullscreen == "function";
-    function we(n, r) {
-      function p(q) {
-        r.value && !r.value.contains(q.target) && (n.value = !1);
-      }
-      function L(q) {
-        q.key === "Escape" && (n.value = !1);
-      }
-      R(n, (q) => {
-        q ? (document.addEventListener("mousedown", p), document.addEventListener("keydown", L)) : (document.removeEventListener("mousedown", p), document.removeEventListener("keydown", L));
-      }), ne(() => {
-        document.removeEventListener("mousedown", p), document.removeEventListener("keydown", L);
-      });
-    }
-    return we(I, H), we(Y, ce), we(X, re), (n, r) => (i(), v("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: y(["gvp-controls", !m.value && "is-hidden"]),
+      class: L(["gvp-controls", !d.value && "is-hidden"]),
       onMouseenter: E,
-      onMouseleave: _
+      onMouseleave: A
     }, [
-      l("div", wt, [
-        l("button", {
-          type: "button",
-          class: "gvp-ctrl-btn",
-          "aria-label": t.isPlaying ? "Pause" : "Play",
-          "aria-pressed": t.isPlaying,
-          onClick: r[0] || (r[0] = //@ts-ignore
-          (...p) => t.onTogglePlay && t.onTogglePlay(...p))
+      a("div", In, [
+        a("div", {
+          class: "gvp-seek",
+          onPointermove: R,
+          onPointerleave: fe
         }, [
-          t.isPlaying ? (i(), j(ot, { key: 0 })) : (i(), j(st, { key: 1 }))
-        ], 8, bt),
-        l("div", Ct, [
-          l("div", xt, [
-            l("div", {
+          a("div", {
+            ref_key: "seekTrackEl",
+            ref: B,
+            class: "gvp-seek-track"
+          }, [
+            a("div", {
               class: "gvp-seek-buffered",
-              style: ge({ width: `${B()}%` })
+              style: ce({ width: `${re()}%` })
             }, null, 4),
-            l("div", {
+            a("div", {
               class: "gvp-seek-progress",
-              style: ge({ width: `${C()}%` })
-            }, null, 4)
-          ]),
-          l("input", {
+              style: ce({ width: `${K()}%` })
+            }, null, 4),
+            j() ? (r(!0), c(oe, { key: 0 }, pe(Q.value, (_) => at((r(), c("div", {
+              key: `${_.start}-${_.title}`,
+              class: "gvp-seek-chapter-tick",
+              style: ce({ left: `${_.start / w.value * 100}%` })
+            }, null, 4)), [
+              [rt, _.start > 0 && _.start < w.value]
+            ])), 128)) : x("", !0)
+          ], 512),
+          H.value && j() ? (r(), c("div", {
+            key: 0,
+            class: L(["gvp-seek-preview", { "has-thumb": p.value }]),
+            style: ce({ left: `${ee.value}px` })
+          }, [
+            p.value && y.value ? (r(), c("div", {
+              key: 0,
+              class: "gvp-seek-preview-thumb",
+              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)) : 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: C(),
-            disabled: !u(),
+            value: K(),
+            disabled: !j(),
             "aria-label": "Seek",
             "aria-valuemin": 0,
-            "aria-valuemax": Math.floor(h.value),
-            "aria-valuenow": Math.floor(b.value),
-            onInput: W
-          }, null, 40, _t)
-        ]),
-        l("span", Et, O(ee(_e)(b.value)) + " / " + O(ee(_e)(h.value)), 1),
-        l("div", {
-          ref_key: "speedRootEl",
-          ref: H,
-          class: "gvp-speed"
-        }, [
-          l("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": I.value,
-            "aria-label": `Playback speed: ${V.value === 1 ? "1×" : V.value + "×"}`,
-            onClick: r[1] || (r[1] = (p) => I.value = !I.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(..._))
           }, [
-            U($e),
-            l("span", $t, O(V.value === 1 ? "1×" : `${V.value}×`), 1)
-          ], 8, Lt),
-          I.value ? (i(), v("ul", Pt, [
-            (i(), v(oe, null, ae(f, (p) => l("li", { key: p }, [
-              l("button", {
-                type: "button",
-                role: "option",
-                "aria-selected": p === V.value,
-                class: y(["gvp-speed-menu-item", { "is-active": p === V.value }]),
-                onClick: (L) => z(p)
-              }, O(p === 1 ? "Normal" : `${p}×`), 11, Mt)
-            ])), 64))
-          ])) : T("", !0)
-        ], 512),
-        ke.value ? (i(), v("div", {
-          key: 0,
-          ref_key: "qualityRootEl",
-          ref: re,
-          class: "gvp-quality"
-        }, [
-          l("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": X.value,
-            "aria-label": `Quality: ${se.value}`,
-            onClick: r[2] || (r[2] = (p) => X.value = !X.value)
+            class: "gvp-ctrl-btn",
+            "aria-label": "Previous video",
+            disabled: !e.hasPrev,
+            onClick: b[1] || (b[1] = (_) => v("prev"))
           }, [
-            U(ft),
-            l("span", It, O(se.value), 1)
-          ], 8, Tt),
-          X.value ? (i(), v("ul", St, [
-            l("li", null, [
-              l("button", {
-                type: "button",
-                role: "option",
-                "aria-selected": t.selectedLevel < 0,
-                class: y(["gvp-quality-menu-item", { "is-active": t.selectedLevel < 0 }]),
-                onClick: r[3] || (r[3] = (p) => ue(ee(He).index))
-              }, O(te.value ? `Auto (${te.value.label})` : "Auto"), 11, Ht)
-            ]),
-            (i(!0), v(oe, null, ae(Q.value, (p) => (i(), v("li", {
-              key: p.index
-            }, [
-              l("button", {
-                type: "button",
-                role: "option",
-                "aria-selected": p.index === t.selectedLevel,
-                class: y(["gvp-quality-menu-item", { "is-active": p.index === t.selectedLevel }]),
-                onClick: (L) => ue(p.index)
-              }, O(p.label), 11, At)
-            ]))), 128))
-          ])) : T("", !0)
-        ], 512)) : T("", !0),
-        le.value.length > 0 ? (i(), v("div", {
-          key: 1,
-          ref_key: "captionsRootEl",
-          ref: ce,
-          class: "gvp-captions"
-        }, [
-          l("button", {
+            O(Ft)
+          ], 8, Rn)) : x("", !0),
+          e.hasPrev || e.hasNext ? (r(), c("button", {
+            key: 1,
             type: "button",
-            class: y(["gvp-ctrl-btn", F.value >= 0 && "is-active"]),
-            "aria-haspopup": "listbox",
-            "aria-expanded": Y.value,
-            "aria-label": "Captions",
-            "aria-pressed": F.value >= 0,
-            onClick: r[4] || (r[4] = (p) => Y.value = !Y.value)
+            class: "gvp-ctrl-btn",
+            "aria-label": "Next video",
+            disabled: !e.hasNext,
+            onClick: b[2] || (b[2] = (_) => v("next"))
           }, [
-            U(Pe)
-          ], 10, Bt),
-          Y.value ? (i(), v("ul", Vt, [
-            l("li", null, [
-              l("button", {
-                type: "button",
-                role: "option",
-                "aria-selected": F.value === -1,
-                class: y(["gvp-captions-menu-item", { "is-active": F.value === -1 }]),
-                onClick: pe
-              }, "Off", 10, qt)
-            ]),
-            (i(!0), v(oe, null, ae(le.value, (p) => (i(), v("li", {
-              key: p.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
             }, [
-              l("button", {
-                type: "button",
-                role: "option",
-                "aria-selected": p.index === F.value,
-                class: y(["gvp-captions-menu-item", { "is-active": p.index === F.value }]),
-                onClick: (L) => ve(p.index)
-              }, O(p.label), 11, Dt)
-            ]))), 128))
-          ])) : T("", !0)
-        ], 512)) : T("", !0),
-        l("div", {
-          class: y(["gvp-volume", !ee(s) && "is-expandable"])
-        }, [
-          l("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": Z.value ? "Unmute" : "Mute",
-            "aria-pressed": Z.value,
-            onClick: g
+            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
           }, [
-            Z.value || M.value === 0 ? (i(), j(vt, { key: 0 })) : M.value < 0.5 ? (i(), j(ct, { key: 1 })) : (i(), j(rt, { key: 2 }))
-          ], 8, Rt),
-          ee(s) ? T("", !0) : (i(), v("div", Ft, [
-            l("div", Nt, [
-              l("div", {
-                class: "gvp-volume-fill",
-                style: ge({ width: `${Z.value ? 0 : Math.round(M.value * 100)}%` })
-              }, null, 4)
-            ]),
-            l("input", {
-              type: "range",
-              class: "gvp-volume-input",
-              min: 0,
-              max: 100,
-              step: 1,
-              value: Z.value ? 0 : Math.round(M.value * 100),
-              "aria-label": "Volume",
-              "aria-valuemin": 0,
-              "aria-valuemax": 100,
-              "aria-valuenow": Z.value ? 0 : Math.round(M.value * 100),
-              onInput: P
-            }, null, 40, Ot)
-          ]))
-        ], 2),
-        ee(d) ? (i(), v("button", {
-          key: 2,
-          type: "button",
-          class: y(["gvp-ctrl-btn", c.value && "is-active"]),
-          "aria-label": c.value ? "Exit picture-in-picture" : "Picture-in-picture",
-          "aria-pressed": c.value,
-          onClick: D
-        }, [
-          U(Me)
-        ], 10, Ut)) : T("", !0),
-        ee(Ie) ? (i(), v("button", {
-          key: 3,
-          type: "button",
-          class: y(["gvp-ctrl-btn", K.value && "is-active"]),
-          "aria-label": K.value ? "Exit fullscreen" : "Enter fullscreen",
-          "aria-pressed": K.value,
-          onClick: Te
-        }, [
-          K.value ? (i(), j(yt, { key: 0 })) : (i(), j(gt, { key: 1 }))
-        ], 10, Zt)) : T("", !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));
   }
-}), Wt = { name: "IconDesktop" }, zt = /* @__PURE__ */ S({
-  ...Wt,
+}), Jn = { name: "IconDesktop" }, Xn = /* @__PURE__ */ N({
+  ...Jn,
   props: {
     class: {}
   },
-  setup(t) {
-    const o = t;
-    return (s, e) => (i(), v("svg", {
-      class: y(["gvp-icon", o.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] = [
-      l("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),
-      l("path", {
+      a("path", {
         d: "M11 15H13",
         stroke: "currentColor",
         "stroke-width": "1.5",
         "stroke-linecap": "round",
         "stroke-linejoin": "round"
       }, null, -1),
-      l("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),
-      l("path", {
+      a("path", {
         d: "M7 22H17",
         stroke: "currentColor",
         "stroke-width": "1.5",
@@ -1252,36 +1667,36 @@ const wt = { class: "gvp-controls-row" }, bt = ["aria-label", "aria-pressed"], C
       }, null, -1)
     ])], 2));
   }
-}), Yt = { name: "IconMobile" }, Kt = /* @__PURE__ */ S({
-  ...Yt,
+}), es = { name: "IconMobile" }, ts = /* @__PURE__ */ N({
+  ...es,
   props: {
     class: {}
   },
-  setup(t) {
-    const o = t;
-    return (s, e) => (i(), v("svg", {
-      class: y(["gvp-icon", o.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] = [
-      l("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),
-      l("path", {
+      a("path", {
         d: "M11 19H13",
         stroke: "currentColor",
         "stroke-width": "2",
         "stroke-linecap": "round",
         "stroke-linejoin": "round"
       }, null, -1),
-      l("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",
@@ -1289,125 +1704,277 @@ const wt = { class: "gvp-controls-row" }, bt = ["aria-label", "aria-pressed"], C
       }, null, -1)
     ])], 2));
   }
-}), Jt = { name: "IconPlay" }, Xt = /* @__PURE__ */ S({
-  ...Jt,
+}), ns = { name: "IconPlay" }, ss = /* @__PURE__ */ N({
+  ...ns,
   props: {
     class: {}
   },
-  setup(t) {
-    const o = t;
-    return (s, e) => (i(), v("svg", {
-      class: y(["gvp-icon", o.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] = [
-      l("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));
   }
-}), Gt = { name: "IconX" }, en = /* @__PURE__ */ S({
-  ...Gt,
+}), ls = { name: "IconX" }, Oe = /* @__PURE__ */ N({
+  ...ls,
   props: {
     class: {}
   },
-  setup(t) {
-    const o = t;
-    return (s, e) => (i(), v("svg", {
-      class: y(["gvp-icon", o.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] = [
-      l("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 tn(t) {
-  if (!t) return null;
-  if (/^[A-Za-z0-9_-]{11}$/.test(t)) return t;
-  let o;
+function us(e) {
+  if (!e) return null;
+  if (/^[A-Za-z0-9_-]{11}$/.test(e)) return e;
+  let s;
   try {
-    o = new URL(t);
+    s = new URL(e);
   } catch {
     return null;
   }
-  const s = o.hostname.replace(/^www\./, "");
-  if (s === "youtu.be") {
-    const e = o.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 (s === "youtube.com" || s === "m.youtube.com" || s === "music.youtube.com" || s === "youtube-nocookie.com") {
-    const e = o.searchParams.get("v");
-    if (e && /^[A-Za-z0-9_-]{11}$/.test(e)) return e;
-    const f = /^\/(?:embed|shorts|v|live)\/([A-Za-z0-9_-]{11})/.exec(
-      o.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 (f) return f[1];
+    if (o) return o[1];
   }
   return null;
 }
-function nn(t) {
+function cs(e) {
   try {
-    const o = new URL(t), s = o.searchParams.get("t") ?? o.searchParams.get("start");
-    if (!s) return null;
-    if (/^\d+s?$/.test(s)) return Number.parseInt(s, 10);
-    const e = /^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/.exec(s);
-    if (e) {
-      const f = Number.parseInt(e[1] ?? "0", 10), a = Number.parseInt(e[2] ?? "0", 10), w = Number.parseInt(e[3] ?? "0", 10), m = f * 3600 + a * 60 + w;
-      return m > 0 ? m : 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 ln(t, o = {}) {
+function ds(e, s = {}) {
   const {
-    autoPlay: s = !1,
-    muted: e = !0,
-    loop: f = !1,
-    controls: a = !0,
-    startSeconds: w
-  } = o, m = 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: a ? "1" : "0"
+    controls: v ? "1" : "0"
   });
-  return s ? (m.set("autoplay", "1"), m.set("mute", "1")) : e && m.set("mute", "1"), f && (m.set("loop", "1"), m.set("playlist", t)), w && w > 0 && m.set("start", String(w)), `https://www.youtube-nocookie.com/embed/${t}?${m.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 on = ["src"], an = {
-  key: 2,
-  class: "gvp-vignette"
-}, sn = {
+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"
-}, rn = { class: "gvp-toggle-pill" }, un = ["aria-pressed"], cn = ["aria-pressed"], dn = ["aria-label", "aria-pressed"], vn = ["aria-label"], pn = {
-  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"
-}, fn = {
+}, Is = {
   key: 0,
   class: "gvp-tooltip",
   role: "tooltip"
-}, mn = {
-  key: 12,
+}, As = {
+  key: 16,
   class: "gvp-bottom-fade"
-}, kn = /* @__PURE__ */ S({
+}, Hs = /* @__PURE__ */ N({
   __name: "VideoPlayer",
   props: {
     src: {},
     poster: {},
+    playlist: {},
+    defaultIndex: { default: 0 },
+    autoAdvance: { type: Boolean, default: !0 },
     showDeviceToggle: { type: Boolean, default: !0 },
     defaultDevice: { default: "desktop" },
     hoverPlay: { type: Boolean, default: !1 },
@@ -1420,299 +1987,543 @@ const on = ["src"], an = {
     aspectRatio: {},
     hlsConfig: {},
     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"],
-  setup(t, { emit: o }) {
-    const s = t, e = o, f = k(null), a = k(s.defaultDevice), w = k(!1), m = k(!1), $ = k(null), E = k([]), _ = k(-1), A = k([]), b = k(-1), h = k(-1), x = k(1), u = k(!1), C = k(!1), B = k(null), W = typeof document < "u" && !!document.pictureInPictureEnabled, M = N(
-      () => s.controls === !0 || s.controls === "custom"
-    ), Z = N(() => s.controls === "native"), g = N(() => tn(s.src)), P = N(() => g.value !== null), V = N(
-      () => g.value ? ln(g.value, {
-        autoPlay: s.autoPlay,
-        muted: s.muted,
-        loop: s.loop,
-        controls: M.value ? !0 : Z.value,
-        startSeconds: nn(s.src)
+  emits: ["close", "play", "pause", "ended", "time-update", "seeked", "volume-change", "milestone", "error", "playlist-change"],
+  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 l;
+        return ((l = ge.value) == null ? void 0 : l.thumbnails) ?? t.thumbnails;
+      }
+    ), Ae = I(
+      () => {
+        var l;
+        return ((l = ge.value) == null ? void 0 : l.chapters) ?? t.chapters;
+      }
+    ), de = I(() => X.value && G.value > 0), Pe = I(
+      () => X.value && G.value < t.playlist.length - 1
+    );
+    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 I(c) {
-      E.value = c, _.value = -1;
+    function Ne(l) {
+      $.value = l, T.value = -1;
     }
-    function H(c) {
-      A.value = c, h.value = -1;
+    function u(l) {
+      f.value = l, z.value = -1;
     }
-    const z = N(
-      () => !P.value && E.value.length > 1
-    ), X = N(
+    const b = I(
+      () => !U.value && $.value.length > 1
+    ), _ = I(
       () => {
-        var c;
-        return _.value >= 0 ? _.value : ((c = E.value[0]) == null ? void 0 : c.index) ?? -1;
+        var l;
+        return T.value >= 0 ? T.value : ((l = $.value[0]) == null ? void 0 : l.index) ?? -1;
       }
-    ), re = N(
+    ), te = I(
       () => {
-        var c, d;
-        return a.value === "mobile" ? ((c = s.aspectRatio) == null ? void 0 : c.mobile) ?? "9/16" : ((d = s.aspectRatio) == null ? void 0 : d.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";
       }
-    ), ke = N(
+    ), he = I(
       () => {
-        var c, d;
-        return a.value === "mobile" ? ((c = s.frameMaxWidth) == null ? void 0 : c.mobile) ?? "420px" : ((d = s.frameMaxWidth) == null ? void 0 : d.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 = N(() => {
-      var c;
-      return ((c = f.value) == null ? void 0 : c.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 te() {
-      const c = Q.value;
-      if (c)
+    async function ke() {
+      const l = q.value;
+      if (l)
         try {
-          c.readyState < 2 && c.load();
-          const d = c.play();
-          $.value = d, await d, w.value = !0;
+          l.readyState < 2 && l.load();
+          const i = l.play();
+          w.value = i, await i, d.value = !0;
         } catch {
-          w.value = !1;
+          d.value = !1;
         } finally {
-          $.value = null;
+          w.value = null;
         }
     }
-    async function se() {
-      const c = Q.value;
-      if (c) {
-        if ($.value)
+    async function ve() {
+      const l = q.value;
+      if (l) {
+        if (w.value)
           try {
-            await $.value;
+            await w.value;
           } catch {
           }
-        c.pause();
+        l.pause();
+      }
+    }
+    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 ue() {
-      !s.hoverPlay || P.value || await te();
+    let ye = null;
+    function Ge() {
+      ye === null && (ye = setTimeout(() => {
+        ye = null, Te();
+      }, 250));
     }
-    async function le() {
-      !s.hoverPlay || P.value || (await se(), w.value = !1);
+    function Je() {
+      ye !== null && (clearTimeout(ye), ye = null), Ve();
     }
-    async function F() {
-      const c = Q.value;
-      c && (c.paused ? await te() : (await se(), w.value = !1));
+    function Xe() {
+      d.value = !1, n("ended"), X.value && t.autoAdvance && Pe.value && Ce(G.value + 1, !0);
     }
-    function Y() {
-      m.value = !0, ue();
+    V(ue, () => {
+      xe && (xe = !1, ke());
+    });
+    function et() {
+      h.value = !0, Qe();
     }
-    function ce() {
-      m.value = !1, le();
+    function tt() {
+      h.value = !1, Ye();
     }
-    function de(c) {
-      x.value = c;
-      const d = Q.value;
-      d && (d.playbackRate = c);
+    function nt(l) {
+      j.value = l;
+      const i = q.value;
+      i && (i.playbackRate = l);
     }
-    R(Q, (c) => {
-      c && (c.addEventListener("ratechange", () => {
-        x.value = c.playbackRate;
-      }), c.addEventListener("enterpictureinpicture", () => {
-        u.value = !0;
-      }), c.addEventListener("leavepictureinpicture", () => {
-        u.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 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 ve() {
-      const c = Q.value;
-      c && (document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
-      }) : c.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 pe(c) {
-      var K, fe, me;
-      const d = Q.value;
-      if (!(!d || !C.value && !((K = B.value) != null && K.contains(document.activeElement)) || c.target.tagName === "INPUT" && c.key !== " "))
-        switch (c.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":
-            c.preventDefault(), F();
+            l.preventDefault(), Te();
             break;
           case "ArrowLeft":
-            c.preventDefault(), d.currentTime = Math.max(0, d.currentTime - 5);
+            l.preventDefault(), i.currentTime = Math.max(0, i.currentTime - 5);
             break;
           case "ArrowRight":
-            c.preventDefault(), d.currentTime = Math.min(d.duration || 0, d.currentTime + 5);
+            l.preventDefault(), i.currentTime = Math.min(i.duration || 0, i.currentTime + 5);
             break;
           case "ArrowUp":
-            c.preventDefault(), d.volume = Math.min(1, d.volume + 0.1), d.muted && (d.muted = !1);
+            l.preventDefault(), i.volume = Math.min(1, i.volume + 0.1), i.muted && (i.muted = !1);
             break;
           case "ArrowDown":
-            c.preventDefault(), d.volume = Math.max(0, d.volume - 0.1);
+            l.preventDefault(), i.volume = Math.max(0, i.volume - 0.1);
             break;
           case "m":
-            d.muted = !d.muted;
+            i.muted = !i.muted;
             break;
-          case "f": {
-            const ye = document.fullscreenElement ?? document.webkitFullscreenElement ?? null, he = ((fe = B.value) == null ? void 0 : fe.requestFullscreen) ?? ((me = B.value) == null ? void 0 : me.webkitRequestFullscreen), G = document.exitFullscreen ?? document.webkitExitFullscreen;
-            ye === B.value ? G == null || G.call(document).catch(() => {
-            }) : he && B.value && he.call(B.value).catch(() => {
-            });
+          case "f":
+            Ve();
             break;
-          }
           case "p":
-            W && ve();
+            W && Be();
             break;
         }
     }
-    return be(() => {
-      document.addEventListener("keydown", pe);
-    }), ne(() => {
-      document.removeEventListener("keydown", pe);
-    }), (c, d) => (i(), v("div", {
-      ref_key: "rootEl",
-      ref: B,
-      class: y(["gvp-root", s.class]),
-      style: ge({ width: ke.value, aspectRatio: re.value }),
-      onMouseenter: d[10] || (d[10] = (D) => {
-        C.value = !0, Y();
-      }),
-      onMouseleave: d[11] || (d[11] = (D) => {
-        C.value = !1, ce();
-      })
+    return He(() => {
+      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 })
     }, [
-      P.value ? (i(), v("iframe", {
+      e.miniPlayer ? (r(), c("div", {
         key: 0,
-        class: "gvp-video gvp-youtube",
-        src: V.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, on)) : (i(), j(Ve, {
+        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: "hlsPlayerRef",
-        ref: f,
-        controls: Z.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": h.value,
-        "plays-inline": !0,
-        poster: t.poster,
-        src: t.src,
-        class: "gvp-video",
-        preload: "metadata",
-        onAudioTracks: I,
-        onQualityLevels: H,
-        onCurrentLevel: d[0] || (d[0] = (D) => b.value = D),
-        onPause: d[1] || (d[1] = (D) => {
-          w.value = !1, e("pause");
+        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: d[2] || (d[2] = (D) => {
-          w.value = !0, e("play");
+        onMouseleave: i[15] || (i[15] = (k) => {
+          re.value = !1, tt();
         })
-      }, {
-        default: Se(() => [
-          Ee(c.$slots, "default")
-        ]),
-        _: 3
-      }, 8, ["controls", "hls-config", "is-hls", "loop", "muted", "auto-play", "audio-track-index", "quality-level-index", "poster", "src"])),
-      P.value ? T("", !0) : (i(), v("div", an)),
-      t.showDeviceToggle ? (i(), v("div", sn, [
-        l("div", rn, [
-          l("button", {
-            "aria-pressed": a.value === "desktop",
-            class: y(["gvp-toggle-btn", { "is-active": a.value === "desktop" }]),
-            "aria-label": "Desktop view",
-            type: "button",
-            onClick: d[3] || (d[3] = (D) => a.value = "desktop")
-          }, [
-            U(zt)
-          ], 10, un),
-          d[12] || (d[12] = l("div", { class: "gvp-toggle-divider" }, null, -1)),
-          l("button", {
-            "aria-pressed": a.value === "mobile",
-            class: y(["gvp-toggle-btn", { "is-active": a.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: d[4] || (d[4] = (D) => a.value = "mobile")
+            class: "gvp-error-retry",
+            onClick: ot
           }, [
-            U(Kt)
-          ], 10, cn)
-        ])
-      ])) : T("", !0),
-      t.closable ? (i(), v("button", {
-        key: 4,
-        "aria-label": "Close",
-        class: "gvp-close",
-        type: "button",
-        onClick: d[5] || (d[5] = (D) => e("close"))
-      }, [
-        U(en)
-      ])) : T("", !0),
-      z.value && !M.value ? (i(), j(Ze, {
-        key: 5,
-        tracks: E.value,
-        "active-index": X.value,
-        onSelect: d[6] || (d[6] = (D) => _.value = D)
-      }, null, 8, ["tracks", "active-index"])) : T("", !0),
-      !P.value && !M.value ? (i(), j(Ke, {
-        key: 6,
-        speed: x.value,
-        onSelect: de
-      }, null, 8, ["speed"])) : T("", !0),
-      !P.value && !M.value ? (i(), j(nt, {
-        key: 7,
-        video: Q.value
-      }, null, 8, ["video"])) : T("", !0),
-      !P.value && ee(W) && !M.value ? (i(), v("button", {
-        key: 8,
-        type: "button",
-        class: y(["gvp-pip-btn", { "is-active": u.value }]),
-        "aria-label": u.value ? "Exit picture-in-picture" : "Picture-in-picture",
-        "aria-pressed": u.value,
-        onClick: ve
-      }, [
-        U(Me)
-      ], 10, dn)) : T("", !0),
-      !P.value && M.value ? (i(), v("button", {
-        key: 9,
-        type: "button",
-        class: "gvp-click-layer",
-        "aria-label": w.value ? "Pause" : "Play",
-        onClick: F
-      }, null, 8, vn)) : T("", !0),
-      !P.value && !M.value && !w.value ? (i(), v("div", pn, [
-        l("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: F,
-          onMouseenter: d[7] || (d[7] = (D) => m.value = !0),
-          onMouseleave: d[8] || (d[8] = (D) => m.value = !1)
+          onClick: i[6] || (i[6] = (k) => n("close"))
         }, [
-          U(Xt),
-          t.tooltipText && m.value ? (i(), v("span", fn, O(t.tooltipText), 1)) : T("", !0)
-        ], 32)
-      ])) : T("", !0),
-      !P.value && M.value ? (i(), j(Qt, {
-        key: 11,
-        video: Q.value,
-        "is-playing": w.value,
-        container: B.value,
-        "on-toggle-play": F,
-        "quality-levels": A.value,
-        "current-level": b.value,
-        "selected-level": h.value,
-        onSelectLevel: d[9] || (d[9] = (D) => h.value = D)
-      }, null, 8, ["video", "is-playing", "container", "quality-levels", "current-level", "selected-level"])) : T("", !0),
-      !P.value && !M.value ? (i(), v("div", mn)) : T("", !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 {
-  Ve as HLSPlayer,
-  kn as VueVideoPlayer,
-  tn as parseYouTubeId,
-  nn as parseYouTubeStart,
-  ln as youTubeEmbedUrl
+  vt as HLSPlayer,
+  Hs as VueVideoPlayer,
+  us as parseYouTubeId,
+  cs as parseYouTubeStart,
+  ds as youTubeEmbedUrl
 };
 //# sourceMappingURL=index.mjs.map