@glitchlab/vue-video-player 1.3.0 → 1.5.0

package/dist/index.mjs

@@ -1,19 +1,27 @@
-import { defineComponent as T, ref as w, onMounted as fe, watch as F, onBeforeUnmount as X, openBlock as i, createElementBlock as v, normalizeClass as C, renderSlot as ke, createElementVNode as s, computed as Z, createVNode as j, toDisplayString as q, Fragment as oe, renderList as ae, createCommentVNode as M, createBlock as U, normalizeStyle as ce, unref as J, withCtx as xe } from "vue";
+import { defineComponent as I, ref as y, onMounted as He, watch as R, onBeforeUnmount as ne, openBlock as d, createElementBlock as f, normalizeClass as w, renderSlot as Fe, createElementVNode as r, computed as T, createVNode as Z, toDisplayString as U, Fragment as ie, renderList as ue, createCommentVNode as M, createBlock as z, normalizeStyle as re, withDirectives as We, vShow as ze, unref as te, withCtx as Ye } from "vue";
 import ee from "hls.js";
-function he(t, a, l) {
+function Ve(t, a, n) {
   const e = t == null ? void 0 : t.trim();
   if (e) return e;
   if (a) {
     try {
-      const m = new Intl.DisplayNames(void 0, { type: "language" }).of(a);
-      if (m && m !== a) return m;
+      const o = new Intl.DisplayNames(void 0, { type: "language" }).of(a);
+      if (o && o !== a) return o;
     } catch {
     }
     return a;
   }
-  return `Audio ${l + 1}`;
+  return `Audio ${n + 1}`;
 }
-const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "poster"], Ee = /* @__PURE__ */ T({
+const Ke = {
+  index: -1,
+  height: 0,
+  label: "Auto"
+};
+function Xe(t, a) {
+  return t > 0 ? `${t}p` : `Level ${a + 1}`;
+}
+const Je = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "poster"], Ge = /* @__PURE__ */ I({
   __name: "HLSPlayer",
   props: {
     src: {},
@@ -27,95 +35,113 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
     preload: { default: "metadata" },
     poster: {},
     class: {},
-    audioTrackIndex: { default: -1 }
+    audioTrackIndex: { default: -1 },
+    qualityLevelIndex: { default: -1 }
   },
-  emits: ["play", "pause", "audio-tracks"],
-  setup(t, { expose: a, emit: l }) {
-    const e = t, o = l, m = w(null), g = w(null);
-    let p, L;
-    const P = globalThis.window !== void 0 && ee.isSupported(), x = (r) => !!e.isHls || P && r.endsWith(".m3u8");
-    function _() {
-      L == null || L(), L = void 0, p == null || p(), p = void 0, g.value && (g.value.destroy(), g.value = null);
-      const r = m.value;
-      if (r) {
-        for (r.pause(), r.removeAttribute("src"); r.firstChild; ) r.firstChild.remove();
-        r.load(), o("audio-tracks", []);
+  emits: ["play", "pause", "ended", "audio-tracks", "quality-levels", "current-level"],
+  setup(t, { expose: a, emit: n }) {
+    const e = t, c = n, o = y(null), h = y(null);
+    let g, E;
+    const _ = globalThis.window !== void 0 && ee.isSupported(), $ = (p) => !!e.isHls || _ && p.endsWith(".m3u8");
+    function S() {
+      E == null || E(), E = void 0, g == null || g(), g = void 0, h.value && (h.value.destroy(), h.value = null);
+      const p = o.value;
+      if (p) {
+        for (p.pause(), p.removeAttribute("src"); p.firstChild; ) p.firstChild.remove();
+        p.load(), c("audio-tracks", []), c("quality-levels", []), c("current-level", -1);
       }
     }
-    function k(r) {
-      var R, H, A;
-      const b = m.value;
-      if (!b || !r) return;
-      _();
-      const E = () => {
-        e.autoPlay && b.play().catch(() => {
+    function b(p) {
+      var Y, A, J;
+      const x = o.value;
+      if (!x || !p) return;
+      S();
+      const B = () => {
+        e.autoPlay && x.play().catch(() => {
         });
       };
-      if (x(r)) {
-        const y = new ee(e.hlsConfig);
-        g.value = y;
-        const I = () => {
-          const D = y.audioTracks.map((B, N) => ({
-            index: N,
-            label: he(B.name, B.lang, N),
-            lang: B.lang || void 0
+      if ($(p)) {
+        const k = new ee(e.hlsConfig);
+        h.value = k;
+        const N = () => {
+          const H = k.audioTracks.map((V, O) => ({
+            index: O,
+            label: Ve(V.name, V.lang, O),
+            lang: V.lang || void 0
           }));
-          o("audio-tracks", D);
+          c("audio-tracks", H);
+        }, D = () => {
+          const H = k.levels.map((V, O) => ({
+            index: O,
+            height: V.height || 0,
+            label: Xe(V.height || 0, O)
+          }));
+          c("quality-levels", H);
         };
-        y.on(ee.Events.MANIFEST_PARSED, E), y.on(ee.Events.AUDIO_TRACKS_UPDATED, I), y.on(ee.Events.AUDIO_TRACK_SWITCHED, I), y.on(ee.Events.ERROR, (D, B) => {
-          B.fatal && (y.destroy(), g.value = null);
-        }), y.attachMedia(b), y.loadSource(r);
+        k.on(ee.Events.MANIFEST_PARSED, B), k.on(ee.Events.MANIFEST_PARSED, D), k.on(ee.Events.LEVELS_UPDATED, D), k.on(ee.Events.LEVEL_SWITCHED, (H, V) => {
+          c("current-level", V.level);
+        }), k.on(ee.Events.AUDIO_TRACKS_UPDATED, N), k.on(ee.Events.AUDIO_TRACK_SWITCHED, N), k.on(ee.Events.ERROR, (H, V) => {
+          V.fatal && (k.destroy(), h.value = null);
+        }), k.attachMedia(x), k.loadSource(p);
       } else {
-        b.src = r, b.load(), b.addEventListener("loadedmetadata", E, { once: !0 }), L = () => {
-          b.removeEventListener("loadedmetadata", E);
+        x.src = p, x.load(), x.addEventListener("loadedmetadata", B, { once: !0 }), E = () => {
+          x.removeEventListener("loadedmetadata", B);
         };
-        const y = b.audioTracks;
-        if (y) {
-          const I = () => {
+        const k = x.audioTracks;
+        if (k) {
+          const N = () => {
             const D = [];
-            for (let B = 0; B < y.length; B++) {
-              const N = y[B];
+            for (let H = 0; H < k.length; H++) {
+              const V = k[H];
               D.push({
-                index: B,
-                label: he(N.label, N.language, B),
-                lang: N.language || void 0
+                index: H,
+                label: Ve(V.label, V.language, H),
+                lang: V.language || void 0
               });
             }
-            o("audio-tracks", D);
+            c("audio-tracks", D);
           };
-          (R = y.addEventListener) == null || R.call(y, "addtrack", I), (H = y.addEventListener) == null || H.call(y, "removetrack", I), (A = y.addEventListener) == null || A.call(y, "change", I), y.length > 0 && I(), p = () => {
-            var D, B, N;
-            (D = y.removeEventListener) == null || D.call(y, "addtrack", I), (B = y.removeEventListener) == null || B.call(y, "removetrack", I), (N = y.removeEventListener) == null || N.call(y, "change", I);
+          (Y = k.addEventListener) == null || Y.call(k, "addtrack", N), (A = k.addEventListener) == null || A.call(k, "removetrack", N), (J = k.addEventListener) == null || J.call(k, "change", N), k.length > 0 && N(), g = () => {
+            var D, H, V;
+            (D = k.removeEventListener) == null || D.call(k, "addtrack", N), (H = k.removeEventListener) == null || H.call(k, "removetrack", N), (V = k.removeEventListener) == null || V.call(k, "change", N);
           };
         }
       }
     }
-    function h(r) {
-      var R;
-      if (r == null || r < 0) return;
-      const b = g.value;
-      if (b) {
-        b.audioTrack !== r && (b.audioTrack = r);
+    function m(p) {
+      var Y;
+      if (p == null || p < 0) return;
+      const x = h.value;
+      if (x) {
+        x.audioTrack !== p && (x.audioTrack = p);
         return;
       }
-      const E = (R = m.value) == null ? void 0 : R.audioTracks;
-      if (E)
-        for (let H = 0; H < E.length; H++)
-          E[H].enabled = H === r;
+      const B = (Y = o.value) == null ? void 0 : Y.audioTracks;
+      if (B)
+        for (let A = 0; A < B.length; A++)
+          B[A].enabled = A === p;
+    }
+    function C(p) {
+      if (p == null) return;
+      const x = h.value;
+      x && x.currentLevel !== p && (x.currentLevel = p);
     }
-    return fe(() => {
-      e.src && k(e.src);
-    }), F(
+    return He(() => {
+      e.src && b(e.src);
+    }), R(
       () => e.src,
-      (r) => {
-        r && k(r);
+      (p) => {
+        p && b(p);
       }
-    ), F(
+    ), R(
       () => e.audioTrackIndex,
-      (r) => h(r)
-    ), X(_), a({ videoEl: m }), (r, b) => (i(), v("video", {
+      (p) => m(p)
+    ), R(
+      () => e.qualityLevelIndex,
+      (p) => C(p)
+    ), ne(S), a({ videoEl: o }), (p, x) => (d(), f("video", {
       ref_key: "videoEl",
-      ref: m,
+      ref: o,
       muted: t.muted,
       loop: t.loop,
       controls: t.controls,
@@ -123,22 +149,23 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       playsinline: t.playsInline,
       preload: t.preload,
       poster: t.poster,
-      class: C(e.class),
-      onPlay: b[0] || (b[0] = (E) => o("play")),
-      onPause: b[1] || (b[1] = (E) => o("pause"))
+      class: w(e.class),
+      onPlay: x[0] || (x[0] = (B) => c("play")),
+      onPause: x[1] || (x[1] = (B) => c("pause")),
+      onEnded: x[2] || (x[2] = (B) => c("ended"))
     }, [
-      ke(r.$slots, "default")
-    ], 42, _e));
+      Fe(p.$slots, "default")
+    ], 42, Je));
   }
-}), $e = { name: "IconAudio" }, Le = /* @__PURE__ */ T({
-  ...$e,
+}), et = { name: "IconAudio" }, tt = /* @__PURE__ */ I({
+  ...et,
   props: {
     class: {}
   },
   setup(t) {
     const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    return (n, e) => (d(), f("svg", {
+      class: w(["gvp-icon", a.class]),
       width: "16",
       height: "16",
       viewBox: "0 0 24 24",
@@ -146,13 +173,13 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
     }, [...e[0] || (e[0] = [
-      s("path", {
+      r("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),
-      s("path", {
+      r("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",
@@ -160,15 +187,15 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), Pe = { name: "IconChevron" }, ye = /* @__PURE__ */ T({
-  ...Pe,
+}), nt = { name: "IconChevron" }, Re = /* @__PURE__ */ I({
+  ...nt,
   props: {
     class: {}
   },
   setup(t) {
     const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    return (n, e) => (d(), f("svg", {
+      class: w(["gvp-icon", a.class]),
       width: "12",
       height: "12",
       viewBox: "0 0 24 24",
@@ -176,7 +203,7 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
     }, [...e[0] || (e[0] = [
-      s("path", {
+      r("path", {
         d: "M6 9L12 15L18 9",
         stroke: "currentColor",
         "stroke-width": "2",
@@ -185,12 +212,12 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), Me = ["aria-expanded"], Te = { class: "gvp-audio-label" }, Ie = {
+}), lt = ["aria-expanded"], at = { class: "gvp-audio-label" }, ot = {
   key: 0,
   class: "gvp-audio-menu",
   role: "listbox",
   "aria-label": "Audio tracks"
-}, Se = ["aria-selected", "onClick"], He = /* @__PURE__ */ T({
+}, st = ["aria-selected", "onClick"], rt = /* @__PURE__ */ I({
   __name: "AudioTrackSwitcher",
   props: {
     tracks: {},
@@ -198,67 +225,67 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
   },
   emits: ["select"],
   setup(t, { emit: a }) {
-    const l = t, e = a, o = w(!1), m = w(null), g = Z(
-      () => l.tracks.find((x) => x.index === l.activeIndex) ?? l.tracks[0]
+    const n = t, e = a, c = y(!1), o = y(null), h = T(
+      () => n.tracks.find(($) => $.index === n.activeIndex) ?? n.tracks[0]
     );
-    function p(x) {
-      m.value && !m.value.contains(x.target) && (o.value = !1);
+    function g($) {
+      o.value && !o.value.contains($.target) && (c.value = !1);
     }
-    function L(x) {
-      x.key === "Escape" && (o.value = !1);
+    function E($) {
+      $.key === "Escape" && (c.value = !1);
     }
-    F(o, (x) => {
-      x ? (document.addEventListener("mousedown", p), document.addEventListener("keydown", L)) : (document.removeEventListener("mousedown", p), document.removeEventListener("keydown", L));
-    }), X(() => {
-      document.removeEventListener("mousedown", p), document.removeEventListener("keydown", L);
+    R(c, ($) => {
+      $ ? (document.addEventListener("mousedown", g), document.addEventListener("keydown", E)) : (document.removeEventListener("mousedown", g), document.removeEventListener("keydown", E));
+    }), ne(() => {
+      document.removeEventListener("mousedown", g), document.removeEventListener("keydown", E);
     });
-    function P(x) {
-      e("select", x), o.value = !1;
+    function _($) {
+      e("select", $), c.value = !1;
     }
-    return (x, _) => {
-      var k;
-      return i(), v("div", {
+    return ($, S) => {
+      var b;
+      return d(), f("div", {
         ref_key: "rootEl",
-        ref: m,
+        ref: o,
         class: "gvp-audio"
       }, [
-        s("button", {
+        r("button", {
           type: "button",
           class: "gvp-audio-btn",
           "aria-haspopup": "listbox",
-          "aria-expanded": o.value,
+          "aria-expanded": c.value,
           "aria-label": "Audio track",
-          onClick: _[0] || (_[0] = (h) => o.value = !o.value)
+          onClick: S[0] || (S[0] = (m) => c.value = !c.value)
         }, [
-          j(Le),
-          s("span", Te, q((k = g.value) == null ? void 0 : k.label), 1),
-          j(ye)
-        ], 8, Me),
-        o.value ? (i(), v("ul", Ie, [
-          (i(!0), v(oe, null, ae(t.tracks, (h) => (i(), v("li", {
-            key: h.index
+          Z(tt),
+          r("span", at, U((b = h.value) == null ? void 0 : b.label), 1),
+          Z(Re)
+        ], 8, lt),
+        c.value ? (d(), f("ul", ot, [
+          (d(!0), f(ie, null, ue(t.tracks, (m) => (d(), f("li", {
+            key: m.index
           }, [
-            s("button", {
+            r("button", {
               type: "button",
               role: "option",
-              "aria-selected": h.index === t.activeIndex,
-              class: C(["gvp-audio-menu-item", { "is-active": h.index === t.activeIndex }]),
-              onClick: (r) => P(h.index)
-            }, q(h.label), 11, Se)
+              "aria-selected": m.index === t.activeIndex,
+              class: w(["gvp-audio-menu-item", { "is-active": m.index === t.activeIndex }]),
+              onClick: (C) => _(m.index)
+            }, U(m.label), 11, st)
           ]))), 128))
         ])) : M("", !0)
       ], 512);
     };
   }
-}), Be = { name: "IconSpeed" }, we = /* @__PURE__ */ T({
-  ...Be,
+}), it = { name: "IconSpeed" }, Oe = /* @__PURE__ */ I({
+  ...it,
   props: {
     class: {}
   },
   setup(t) {
     const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    return (n, e) => (d(), f("svg", {
+      class: w(["gvp-icon", a.class]),
       width: "16",
       height: "16",
       viewBox: "0 0 24 24",
@@ -266,12 +293,12 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
     }, [...e[0] || (e[0] = [
-      s("path", {
+      r("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),
-      s("path", {
+      r("path", {
         d: "M12 8V12L14.5 14.5",
         stroke: "currentColor",
         "stroke-width": "1.5",
@@ -280,72 +307,72 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), Ve = ["aria-expanded"], Ae = { class: "gvp-speed-label" }, De = {
+}), ut = ["aria-expanded"], ct = { class: "gvp-speed-label" }, dt = {
   key: 0,
   class: "gvp-speed-menu",
   role: "listbox",
   "aria-label": "Playback speed"
-}, Re = ["aria-selected", "onClick"], Fe = /* @__PURE__ */ T({
+}, vt = ["aria-selected", "onClick"], pt = /* @__PURE__ */ I({
   __name: "SpeedSwitcher",
   props: {
     speed: {}
   },
   emits: ["select"],
   setup(t, { emit: a }) {
-    const l = [0.5, 0.75, 1, 1.25, 1.5, 2], e = a, o = w(!1), m = w(null);
-    function g(P) {
-      m.value && !m.value.contains(P.target) && (o.value = !1);
+    const n = [0.5, 0.75, 1, 1.25, 1.5, 2], e = a, c = y(!1), o = y(null);
+    function h(_) {
+      o.value && !o.value.contains(_.target) && (c.value = !1);
     }
-    function p(P) {
-      P.key === "Escape" && (o.value = !1);
+    function g(_) {
+      _.key === "Escape" && (c.value = !1);
     }
-    F(o, (P) => {
-      P ? (document.addEventListener("mousedown", g), document.addEventListener("keydown", p)) : (document.removeEventListener("mousedown", g), document.removeEventListener("keydown", p));
-    }), X(() => {
-      document.removeEventListener("mousedown", g), document.removeEventListener("keydown", p);
+    R(c, (_) => {
+      _ ? (document.addEventListener("mousedown", h), document.addEventListener("keydown", g)) : (document.removeEventListener("mousedown", h), document.removeEventListener("keydown", g));
+    }), ne(() => {
+      document.removeEventListener("mousedown", h), document.removeEventListener("keydown", g);
     });
-    function L(P) {
-      e("select", P), o.value = !1;
+    function E(_) {
+      e("select", _), c.value = !1;
     }
-    return (P, x) => (i(), v("div", {
+    return (_, $) => (d(), f("div", {
       ref_key: "rootEl",
-      ref: m,
+      ref: o,
       class: "gvp-speed"
     }, [
-      s("button", {
+      r("button", {
         type: "button",
         class: "gvp-speed-btn",
         "aria-haspopup": "listbox",
-        "aria-expanded": o.value,
+        "aria-expanded": c.value,
         "aria-label": "`Playback speed: ${speed === 1 ? '1×' : speed + '×'}`",
-        onClick: x[0] || (x[0] = (_) => o.value = !o.value)
+        onClick: $[0] || ($[0] = (S) => c.value = !c.value)
       }, [
-        j(we),
-        s("span", Ae, q(t.speed === 1 ? "1×" : `${t.speed}×`), 1),
-        j(ye)
-      ], 8, Ve),
-      o.value ? (i(), v("ul", De, [
-        (i(), v(oe, null, ae(l, (_) => s("li", { key: _ }, [
-          s("button", {
+        Z(Oe),
+        r("span", ct, U(t.speed === 1 ? "1×" : `${t.speed}×`), 1),
+        Z(Re)
+      ], 8, ut),
+      c.value ? (d(), f("ul", dt, [
+        (d(), f(ie, null, ue(n, (S) => r("li", { key: S }, [
+          r("button", {
             type: "button",
             role: "option",
-            "aria-selected": _ === t.speed,
-            class: C(["gvp-speed-menu-item", { "is-active": _ === t.speed }]),
-            onClick: (k) => L(_)
-          }, q(_ === 1 ? "Normal" : `${_}×`), 11, Re)
+            "aria-selected": S === t.speed,
+            class: w(["gvp-speed-menu-item", { "is-active": S === t.speed }]),
+            onClick: (b) => E(S)
+          }, U(S === 1 ? "Normal" : `${S}×`), 11, vt)
         ])), 64))
       ])) : M("", !0)
     ], 512));
   }
-}), Ne = { name: "IconCaptions" }, be = /* @__PURE__ */ T({
-  ...Ne,
+}), ft = { name: "IconCaptions" }, Ue = /* @__PURE__ */ I({
+  ...ft,
   props: {
     class: {}
   },
   setup(t) {
     const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    return (n, e) => (d(), f("svg", {
+      class: w(["gvp-icon", a.class]),
       width: "18",
       height: "18",
       viewBox: "0 0 24 24",
@@ -353,7 +380,7 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
     }, [...e[0] || (e[0] = [
-      s("rect", {
+      r("rect", {
         x: "2",
         y: "5",
         width: "20",
@@ -362,7 +389,7 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
         stroke: "currentColor",
         "stroke-width": "1.5"
       }, null, -1),
-      s("path", {
+      r("path", {
         d: "M7 12H11M13 12H17M7 15H9M11 15H13M15 15H17",
         stroke: "currentColor",
         "stroke-width": "1.5",
@@ -370,120 +397,120 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), Oe = ["aria-expanded", "aria-pressed"], je = {
+}), mt = ["aria-expanded", "aria-pressed"], ht = {
   key: 0,
   class: "gvp-captions-menu",
   role: "listbox",
   "aria-label": "Captions"
-}, Ue = ["aria-selected"], Ze = ["aria-selected", "onClick"], qe = /* @__PURE__ */ T({
+}, gt = ["aria-selected"], kt = ["aria-selected", "onClick"], yt = /* @__PURE__ */ I({
   __name: "CaptionsSwitcher",
   props: {
     video: {}
   },
   setup(t) {
-    const a = t, l = w([]), e = w(-1), o = w(!1), m = w(null);
-    function g(k) {
-      const h = [];
-      for (let b = 0; b < k.length; b++) {
-        const E = k[b];
-        (E.kind === "subtitles" || E.kind === "captions") && h.push({ index: b, label: E.label || E.language || `Track ${b + 1}` });
+    const a = t, n = y([]), e = y(-1), c = y(!1), o = y(null);
+    function h(b) {
+      const m = [];
+      for (let p = 0; p < b.length; p++) {
+        const x = b[p];
+        (x.kind === "subtitles" || x.kind === "captions") && m.push({ index: p, label: x.label || x.language || `Track ${p + 1}` });
       }
-      l.value = h;
-      let r = -1;
-      for (let b = 0; b < k.length; b++)
-        if (k[b].mode === "showing") {
-          r = b;
+      n.value = m;
+      let C = -1;
+      for (let p = 0; p < b.length; p++)
+        if (b[p].mode === "showing") {
+          C = p;
           break;
         }
-      e.value = r;
+      e.value = C;
     }
-    let p = null;
-    F(() => a.video, (k) => {
-      if (p == null || p(), p = null, !k) {
-        l.value = [], e.value = -1;
+    let g = null;
+    R(() => a.video, (b) => {
+      if (g == null || g(), g = null, !b) {
+        n.value = [], e.value = -1;
         return;
       }
-      const h = k.textTracks;
-      g(h);
-      const r = () => g(h);
-      typeof h.addEventListener == "function" && (h.addEventListener("addtrack", r), h.addEventListener("removetrack", r), h.addEventListener("change", r), p = () => {
-        h.removeEventListener("addtrack", r), h.removeEventListener("removetrack", r), h.removeEventListener("change", r);
+      const m = b.textTracks;
+      h(m);
+      const C = () => h(m);
+      typeof m.addEventListener == "function" && (m.addEventListener("addtrack", C), m.addEventListener("removetrack", C), m.addEventListener("change", C), g = () => {
+        m.removeEventListener("addtrack", C), m.removeEventListener("removetrack", C), m.removeEventListener("change", C);
       });
-    }, { immediate: !0 }), X(() => {
-      p == null || p(), document.removeEventListener("mousedown", L), document.removeEventListener("keydown", P);
+    }, { immediate: !0 }), ne(() => {
+      g == null || g(), document.removeEventListener("mousedown", E), document.removeEventListener("keydown", _);
     });
-    function L(k) {
-      m.value && !m.value.contains(k.target) && (o.value = !1);
+    function E(b) {
+      o.value && !o.value.contains(b.target) && (c.value = !1);
     }
-    function P(k) {
-      k.key === "Escape" && (o.value = !1);
+    function _(b) {
+      b.key === "Escape" && (c.value = !1);
     }
-    F(o, (k) => {
-      k ? (document.addEventListener("mousedown", L), document.addEventListener("keydown", P)) : (document.removeEventListener("mousedown", L), document.removeEventListener("keydown", P));
+    R(c, (b) => {
+      b ? (document.addEventListener("mousedown", E), document.addEventListener("keydown", _)) : (document.removeEventListener("mousedown", E), document.removeEventListener("keydown", _));
     });
-    function x() {
+    function $() {
       if (!a.video) return;
-      const k = a.video.textTracks;
-      for (let h = 0; h < k.length; h++) k[h].mode = "hidden";
-      e.value = -1, o.value = !1;
+      const b = a.video.textTracks;
+      for (let m = 0; m < b.length; m++) b[m].mode = "hidden";
+      e.value = -1, c.value = !1;
     }
-    function _(k) {
+    function S(b) {
       if (!a.video) return;
-      const h = a.video.textTracks;
-      for (let r = 0; r < h.length; r++)
-        h[r].mode = r === k ? "showing" : "hidden";
-      e.value = k, o.value = !1;
+      const m = a.video.textTracks;
+      for (let C = 0; C < m.length; C++)
+        m[C].mode = C === b ? "showing" : "hidden";
+      e.value = b, c.value = !1;
     }
-    return (k, h) => l.value.length > 0 ? (i(), v("div", {
+    return (b, m) => n.value.length > 0 ? (d(), f("div", {
       key: 0,
       ref_key: "rootEl",
-      ref: m,
+      ref: o,
       class: "gvp-captions"
     }, [
-      s("button", {
+      r("button", {
         type: "button",
-        class: C(["gvp-captions-btn", { "is-active": e.value >= 0 }]),
+        class: w(["gvp-captions-btn", { "is-active": e.value >= 0 }]),
         "aria-haspopup": "listbox",
-        "aria-expanded": o.value,
+        "aria-expanded": c.value,
         "aria-pressed": e.value >= 0,
         "aria-label": "Captions",
-        onClick: h[0] || (h[0] = (r) => o.value = !o.value)
+        onClick: m[0] || (m[0] = (C) => c.value = !c.value)
       }, [
-        j(be)
-      ], 10, Oe),
-      o.value ? (i(), v("ul", je, [
-        s("li", null, [
-          s("button", {
+        Z(Ue)
+      ], 10, mt),
+      c.value ? (d(), f("ul", ht, [
+        r("li", null, [
+          r("button", {
             type: "button",
             role: "option",
             "aria-selected": e.value === -1,
-            class: C(["gvp-captions-menu-item", { "is-active": e.value === -1 }]),
-            onClick: x
-          }, " Off ", 10, Ue)
+            class: w(["gvp-captions-menu-item", { "is-active": e.value === -1 }]),
+            onClick: $
+          }, " Off ", 10, gt)
         ]),
-        (i(!0), v(oe, null, ae(l.value, (r) => (i(), v("li", {
-          key: r.index
+        (d(!0), f(ie, null, ue(n.value, (C) => (d(), f("li", {
+          key: C.index
         }, [
-          s("button", {
+          r("button", {
             type: "button",
             role: "option",
-            "aria-selected": r.index === e.value,
-            class: C(["gvp-captions-menu-item", { "is-active": r.index === e.value }]),
-            onClick: (b) => _(r.index)
-          }, q(r.label), 11, Ze)
+            "aria-selected": C.index === e.value,
+            class: w(["gvp-captions-menu-item", { "is-active": C.index === e.value }]),
+            onClick: (p) => S(C.index)
+          }, U(C.label), 11, kt)
         ]))), 128))
       ])) : M("", !0)
     ], 512)) : M("", !0);
   }
-}), ze = { name: "IconPause" }, We = /* @__PURE__ */ T({
-  ...ze,
+}), wt = { name: "IconPause" }, bt = /* @__PURE__ */ I({
+  ...wt,
   props: {
     class: {}
   },
   setup(t) {
     const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    return (n, e) => (d(), f("svg", {
+      class: w(["gvp-icon", a.class]),
       width: "16",
       height: "16",
       viewBox: "0 0 24 24",
@@ -491,7 +518,7 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
     }, [...e[0] || (e[0] = [
-      s("rect", {
+      r("rect", {
         x: "6",
         y: "5",
         width: "4",
@@ -499,7 +526,7 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
         rx: "1",
         fill: "currentColor"
       }, null, -1),
-      s("rect", {
+      r("rect", {
         x: "14",
         y: "5",
         width: "4",
@@ -509,15 +536,15 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), Ye = { name: "IconPlaySolid" }, Ke = /* @__PURE__ */ T({
-  ...Ye,
+}), Ct = { name: "IconPlaySolid" }, xt = /* @__PURE__ */ I({
+  ...Ct,
   props: {
     class: {}
   },
   setup(t) {
     const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    return (n, e) => (d(), f("svg", {
+      class: w(["gvp-icon", a.class]),
       width: "16",
       height: "16",
       viewBox: "0 0 24 24",
@@ -525,21 +552,77 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
     }, [...e[0] || (e[0] = [
-      s("path", {
+      r("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));
   }
-}), Je = { name: "IconVolumeHigh" }, Xe = /* @__PURE__ */ T({
-  ...Je,
+}), Lt = { name: "IconPrev" }, Et = /* @__PURE__ */ I({
+  ...Lt,
+  props: {
+    class: {}
+  },
+  setup(t) {
+    const a = t;
+    return (n, e) => (d(), f("svg", {
+      class: w(["gvp-icon", a.class]),
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, [...e[0] || (e[0] = [
+      r("path", {
+        d: "M16.5 18.5V5.5C16.5 4.73408 15.6514 4.27388 15.0101 4.69288L6.91993 9.98432C6.33563 10.3653 6.33563 11.0347 6.91993 11.4157L15.0101 16.7071C15.6514 17.1261 16.5 16.6659 16.5 15.9V18.5Z",
+        fill: "currentColor"
+      }, null, -1),
+      r("path", {
+        d: "M6 5V19",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round"
+      }, null, -1)
+    ])], 2));
+  }
+}), _t = { name: "IconNext" }, $t = /* @__PURE__ */ I({
+  ..._t,
+  props: {
+    class: {}
+  },
+  setup(t) {
+    const a = t;
+    return (n, e) => (d(), f("svg", {
+      class: w(["gvp-icon", a.class]),
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, [...e[0] || (e[0] = [
+      r("path", {
+        d: "M7.5 5.5V18.5C7.5 19.2659 8.34856 19.7261 8.98990 19.3071L17.0801 14.0157C17.6644 13.6347 17.6644 12.9653 17.0801 12.5843L8.98990 7.29288C8.34856 6.87388 7.5 7.33408 7.5 8.1V5.5Z",
+        fill: "currentColor"
+      }, null, -1),
+      r("path", {
+        d: "M18 5V19",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round"
+      }, null, -1)
+    ])], 2));
+  }
+}), Pt = { name: "IconVolumeHigh" }, Mt = /* @__PURE__ */ I({
+  ...Pt,
   props: {
     class: {}
   },
   setup(t) {
     const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    return (n, e) => (d(), f("svg", {
+      class: w(["gvp-icon", a.class]),
       width: "18",
       height: "18",
       viewBox: "0 0 24 24",
@@ -547,13 +630,13 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
     }, [...e[0] || (e[0] = [
-      s("path", {
+      r("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),
-      s("path", {
+      r("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",
@@ -561,15 +644,15 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), Ge = { name: "IconVolumeLow" }, Qe = /* @__PURE__ */ T({
-  ...Ge,
+}), Tt = { name: "IconVolumeLow" }, It = /* @__PURE__ */ I({
+  ...Tt,
   props: {
     class: {}
   },
   setup(t) {
     const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    return (n, e) => (d(), f("svg", {
+      class: w(["gvp-icon", a.class]),
       width: "18",
       height: "18",
       viewBox: "0 0 24 24",
@@ -577,13 +660,13 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
     }, [...e[0] || (e[0] = [
-      s("path", {
+      r("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),
-      s("path", {
+      r("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",
@@ -591,15 +674,15 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), et = { name: "IconVolumeMuted" }, tt = /* @__PURE__ */ T({
-  ...et,
+}), St = { name: "IconVolumeMuted" }, Nt = /* @__PURE__ */ I({
+  ...St,
   props: {
     class: {}
   },
   setup(t) {
     const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    return (n, e) => (d(), f("svg", {
+      class: w(["gvp-icon", a.class]),
       width: "18",
       height: "18",
       viewBox: "0 0 24 24",
@@ -607,13 +690,13 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
     }, [...e[0] || (e[0] = [
-      s("path", {
+      r("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),
-      s("path", {
+      r("path", {
         d: "M16 9L22 15M22 9L16 15",
         stroke: "currentColor",
         "stroke-width": "1.5",
@@ -621,15 +704,44 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), nt = { name: "IconPiP" }, Ce = /* @__PURE__ */ T({
-  ...nt,
+}), At = { name: "IconQuality" }, Ht = /* @__PURE__ */ I({
+  ...At,
+  props: {
+    class: {}
+  },
+  setup(t) {
+    const a = t;
+    return (n, e) => (d(), f("svg", {
+      class: w(["gvp-icon", a.class]),
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, [...e[0] || (e[0] = [
+      r("path", {
+        d: "M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z",
+        stroke: "currentColor",
+        "stroke-width": "1.5"
+      }, null, -1),
+      r("path", {
+        d: "M3 12C3 12.6 3.08 13.18 3.23 13.73L4.6 14.5C4.86 14.65 5.02 14.94 5 15.24C4.98 15.58 4.96 15.92 5.07 16.24C5.18 16.56 5.39 16.83 5.62 17.08C5.83 17.3 6.13 17.4 6.42 17.36L7.99 17.13C8.28 17.09 8.57 17.21 8.74 17.45C9.07 17.93 9.49 18.34 9.97 18.66C10.21 18.83 10.34 19.11 10.31 19.4L10.13 20.97C10.1 21.26 10.21 21.55 10.43 21.74C10.91 22.16 11.45 22 12 22C12.55 22 13.09 22.16 13.57 21.74C13.79 21.55 13.9 21.26 13.87 20.97L13.69 19.4C13.66 19.11 13.79 18.83 14.03 18.66",
+        stroke: "currentColor",
+        "stroke-width": "1.5",
+        "stroke-linecap": "round"
+      }, null, -1)
+    ])], 2));
+  }
+}), Bt = { name: "IconPiP" }, Ze = /* @__PURE__ */ I({
+  ...Bt,
   props: {
     class: {}
   },
   setup(t) {
     const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    return (n, e) => (d(), f("svg", {
+      class: w(["gvp-icon", a.class]),
       width: "18",
       height: "18",
       viewBox: "0 0 24 24",
@@ -637,7 +749,7 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
     }, [...e[0] || (e[0] = [
-      s("rect", {
+      r("rect", {
         x: "2",
         y: "4",
         width: "20",
@@ -646,7 +758,7 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
         stroke: "currentColor",
         "stroke-width": "1.5"
       }, null, -1),
-      s("rect", {
+      r("rect", {
         x: "12",
         y: "12",
         width: "8",
@@ -656,15 +768,15 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), ot = { name: "IconFullscreen" }, at = /* @__PURE__ */ T({
-  ...ot,
+}), Vt = { name: "IconFullscreen" }, qt = /* @__PURE__ */ I({
+  ...Vt,
   props: {
     class: {}
   },
   setup(t) {
     const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    return (n, e) => (d(), f("svg", {
+      class: w(["gvp-icon", a.class]),
       width: "18",
       height: "18",
       viewBox: "0 0 24 24",
@@ -672,7 +784,7 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
     }, [...e[0] || (e[0] = [
-      s("path", {
+      r("path", {
         d: "M4 9V4H9M15 4H20V9M20 15V20H15M9 20H4V15",
         stroke: "currentColor",
         "stroke-width": "1.75",
@@ -681,15 +793,15 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), st = { name: "IconFullscreenExit" }, lt = /* @__PURE__ */ T({
-  ...st,
+}), Dt = { name: "IconFullscreenExit" }, Ft = /* @__PURE__ */ I({
+  ...Dt,
   props: {
     class: {}
   },
   setup(t) {
     const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    return (n, e) => (d(), f("svg", {
+      class: w(["gvp-icon", a.class]),
       width: "18",
       height: "18",
       viewBox: "0 0 24 24",
@@ -697,7 +809,7 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
     }, [...e[0] || (e[0] = [
-      s("path", {
+      r("path", {
         d: "M9 4V9H4M15 9V4H20M15 20V15H20M9 15H4V20",
         stroke: "currentColor",
         "stroke-width": "1.75",
@@ -707,400 +819,661 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
     ])], 2));
   }
 });
-function ge(t) {
+function Ae(t) {
   if (!Number.isFinite(t) || t < 0) return "--:--";
-  const a = Math.floor(t), l = Math.floor(a / 3600), e = Math.floor(a % 3600 / 60), m = (a % 60).toString().padStart(2, "0");
-  if (l > 0) {
-    const g = e.toString().padStart(2, "0");
-    return `${l}:${g}:${m}`;
+  const a = Math.floor(t), n = Math.floor(a / 3600), e = Math.floor(a % 3600 / 60), o = (a % 60).toString().padStart(2, "0");
+  if (n > 0) {
+    const h = e.toString().padStart(2, "0");
+    return `${n}:${h}:${o}`;
+  }
+  return `${e}:${o}`;
+}
+function qe(t) {
+  const a = t.trim().split(":");
+  if (a.length < 2 || a.length > 3) return NaN;
+  const n = a.map(Number);
+  return n.some((e) => !Number.isFinite(e)) ? NaN : n.length === 3 ? n[0] * 3600 + n[1] * 60 + n[2] : n[0] * 60 + n[1];
+}
+function Rt(t, a) {
+  try {
+    return new URL(t, a).href;
+  } catch {
+    return t;
+  }
+}
+function Ot(t, a) {
+  const n = [], e = t.replace(/\r/g, "").split(`
+`);
+  for (let c = 0; c < e.length; c++) {
+    const o = e[c].indexOf("-->");
+    if (o === -1) continue;
+    const h = qe(e[c].slice(0, o)), g = qe(e[c].slice(o + 3));
+    if (!Number.isFinite(h) || !Number.isFinite(g)) continue;
+    const E = (e[c + 1] ?? "").trim();
+    if (!E) continue;
+    const _ = E.indexOf("#xywh=");
+    let $ = E, S = 0, b = 0, m = 0, C = 0;
+    if (_ !== -1) {
+      $ = E.slice(0, _);
+      const p = E.slice(_ + 6).split(",").map(Number);
+      p.length === 4 && p.every(Number.isFinite) && ([S, b, m, C] = p);
+    }
+    n.push({ start: h, end: g, url: Rt($, a), x: S, y: b, w: m, h: C });
+  }
+  return n.sort((c, o) => c.start - o.start), n;
+}
+function Ut(t) {
+  return {
+    cues: t,
+    cueAt(a) {
+      if (t.length === 0) return null;
+      let n = 0, e = t.length - 1, c = t[0];
+      for (; n <= e; ) {
+        const o = n + e >> 1, h = t[o];
+        if (a < h.start)
+          e = o - 1;
+        else if (a > h.end)
+          c = h, n = o + 1;
+        else
+          return h;
+      }
+      return c;
+    }
+  };
+}
+function De(t) {
+  const a = t.trim().split(":");
+  if (a.length < 2 || a.length > 3) return NaN;
+  const n = a.map(Number);
+  return n.some((e) => !Number.isFinite(e)) ? NaN : n.length === 3 ? n[0] * 3600 + n[1] * 60 + n[2] : n[0] * 60 + n[1];
+}
+function Zt(t) {
+  const a = [], n = t.replace(/\r/g, "").split(`
+`);
+  for (let e = 0; e < n.length; e++) {
+    const c = n[e].indexOf("-->");
+    if (c === -1) continue;
+    const o = De(n[e].slice(0, c)), h = De(n[e].slice(c + 3));
+    if (!Number.isFinite(o) || !Number.isFinite(h)) continue;
+    const g = (n[e + 1] ?? "").trim();
+    g && a.push({ start: o, end: h, title: g });
   }
-  return `${e}:${m}`;
+  return a.sort((e, c) => e.start - c.start), a;
+}
+function jt(t, a) {
+  const n = t.filter((e) => Number.isFinite(e.start) && e.start >= 0 && e.title).sort((e, c) => e.start - c.start);
+  return n.map((e, c) => {
+    var o;
+    return {
+      start: e.start,
+      end: Number.isFinite(e.end) ? e.end : ((o = n[c + 1]) == null ? void 0 : o.start) ?? a,
+      title: e.title
+    };
+  });
 }
-const rt = { class: "gvp-controls-row" }, it = ["aria-label", "aria-pressed"], ut = { class: "gvp-seek" }, ct = { class: "gvp-seek-track" }, dt = ["value", "disabled", "aria-valuemax", "aria-valuenow"], vt = {
+function Qt(t, a) {
+  for (const n of t)
+    if (a >= n.start && a < n.end) return n;
+  return null;
+}
+const Wt = { class: "gvp-controls-row" }, zt = ["disabled"], Yt = ["aria-label", "aria-pressed"], Kt = ["disabled"], Xt = {
+  key: 1,
+  class: "gvp-seek-preview-chapter"
+}, Jt = { class: "gvp-seek-preview-time" }, Gt = ["value", "disabled", "aria-valuemax", "aria-valuenow"], en = {
   class: "gvp-time",
   "aria-live": "off"
-}, pt = ["aria-expanded", "aria-label"], ft = { class: "gvp-speed-label" }, mt = {
+}, tn = ["aria-expanded", "aria-label"], nn = { class: "gvp-speed-label" }, ln = {
   key: 0,
   class: "gvp-speed-menu",
   role: "listbox",
   "aria-label": "Playback speed"
-}, ht = ["aria-selected", "onClick"], gt = ["aria-expanded", "aria-pressed"], kt = {
+}, an = ["aria-selected", "onClick"], on = ["aria-expanded", "aria-label"], sn = { class: "gvp-quality-label" }, rn = {
+  key: 0,
+  class: "gvp-quality-menu",
+  role: "listbox",
+  "aria-label": "Quality"
+}, un = ["aria-selected"], cn = ["aria-selected", "onClick"], dn = ["aria-expanded", "aria-pressed"], vn = {
   key: 0,
   class: "gvp-captions-menu",
   role: "listbox",
   "aria-label": "Captions"
-}, yt = ["aria-selected"], wt = ["aria-selected", "onClick"], bt = ["aria-label", "aria-pressed"], Ct = {
+}, pn = ["aria-selected"], fn = ["aria-selected", "onClick"], mn = ["aria-label", "aria-pressed"], hn = {
   key: 0,
   class: "gvp-volume-slider-wrap"
-}, xt = { class: "gvp-volume-track" }, _t = ["value", "aria-valuenow"], Et = ["aria-label", "aria-pressed"], $t = ["aria-label", "aria-pressed"], Lt = 3e3, Pt = /* @__PURE__ */ T({
+}, gn = { class: "gvp-volume-track" }, kn = ["value", "aria-valuenow"], yn = ["aria-label", "aria-pressed"], wn = ["aria-label", "aria-pressed"], bn = 3e3, Cn = /* @__PURE__ */ I({
   __name: "ControlBar",
   props: {
     video: {},
     isPlaying: { type: Boolean },
     container: {},
-    onTogglePlay: { type: Function }
+    onTogglePlay: {},
+    qualityLevels: { default: () => [] },
+    currentLevel: { default: -1 },
+    selectedLevel: { default: -1 },
+    thumbnails: {},
+    chapters: {},
+    hasPrev: { type: Boolean, default: !1 },
+    hasNext: { type: Boolean, default: !1 }
   },
-  setup(t) {
-    const a = (() => {
+  emits: ["select-level", "prev", "next"],
+  setup(t, { emit: a }) {
+    const n = (() => {
       if (typeof navigator > "u") return !1;
-      const n = navigator.userAgent;
-      return /iPad|iPhone|iPod/.test(n) || n.includes("Mac") && navigator.maxTouchPoints > 1;
-    })(), l = typeof navigator > "u" ? !1 : /iPhone|iPod/.test(navigator.userAgent), e = [0.5, 0.75, 1, 1.25, 1.5, 2], o = t, m = w(!0);
-    let g = null;
-    function p() {
-      g !== null && (clearTimeout(g), g = null);
+      const l = navigator.userAgent;
+      return /iPad|iPhone|iPod/.test(l) || l.includes("Mac") && navigator.maxTouchPoints > 1;
+    })(), e = typeof navigator > "u" ? !1 : /iPhone|iPod/.test(navigator.userAgent), c = [0.5, 0.75, 1, 1.25, 1.5, 2], o = t, h = a, g = y(!0);
+    let E = null;
+    function _() {
+      E !== null && (clearTimeout(E), E = null);
     }
-    function L() {
-      p(), o.isPlaying && (g = setTimeout(() => {
-        m.value = !1;
-      }, Lt));
+    function $() {
+      _(), o.isPlaying && (E = setTimeout(() => {
+        g.value = !1;
+      }, bn));
     }
-    function P() {
-      m.value = !0, L();
+    function S() {
+      g.value = !0, $();
     }
-    F(() => o.isPlaying, (n) => {
-      n ? L() : (p(), m.value = !0);
-    }, { immediate: !0 }), F(() => o.container, (n) => {
-      if (!n) return;
-      const u = () => P();
-      n.addEventListener("mousemove", u), n.addEventListener("touchstart", u), n.addEventListener("focusin", u);
+    R(() => o.isPlaying, (l) => {
+      l ? $() : (_(), g.value = !0);
+    }, { immediate: !0 }), R(() => o.container, (l) => {
+      if (!l) return;
+      const s = () => S();
+      l.addEventListener("mousemove", s), l.addEventListener("touchstart", s), l.addEventListener("focusin", s);
     }, { immediate: !0 });
-    const x = w(0), _ = w(0), k = w(0);
-    F(() => o.video, (n) => {
-      if (!n) return;
-      const u = () => {
-        x.value = n.currentTime;
-      }, f = () => {
-        _.value = Number.isFinite(n.duration) ? n.duration : 0;
-      }, $ = () => {
-        const V = n.buffered;
-        if (!V || V.length === 0) {
-          k.value = 0;
+    const b = y(0), m = y(0), C = y(0);
+    R(() => o.video, (l) => {
+      if (!l) return;
+      const s = () => {
+        b.value = l.currentTime;
+      }, i = () => {
+        m.value = Number.isFinite(l.duration) ? l.duration : 0;
+      }, L = () => {
+        const F = l.buffered;
+        if (!F || F.length === 0) {
+          C.value = 0;
           return;
         }
-        let me = V.end(V.length - 1);
-        for (let ne = 0; ne < V.length; ne++)
-          if (V.start(ne) <= n.currentTime && n.currentTime <= V.end(ne)) {
-            me = V.end(ne);
+        let Be = F.end(F.length - 1);
+        for (let ye = 0; ye < F.length; ye++)
+          if (F.start(ye) <= l.currentTime && l.currentTime <= F.end(ye)) {
+            Be = F.end(ye);
             break;
           }
-        k.value = me;
+        C.value = Be;
       };
-      u(), f(), $(), n.addEventListener("timeupdate", u), n.addEventListener("durationchange", f), n.addEventListener("loadedmetadata", f), n.addEventListener("progress", $), n.addEventListener("timeupdate", $);
+      s(), i(), L(), l.addEventListener("timeupdate", s), l.addEventListener("durationchange", i), l.addEventListener("loadedmetadata", i), l.addEventListener("progress", L), l.addEventListener("timeupdate", L);
+    }, { immediate: !0 });
+    const p = () => m.value > 0, x = () => p() ? b.value / m.value * 100 : 0, B = () => p() ? C.value / m.value * 100 : 0;
+    function Y(l) {
+      const s = o.video;
+      if (!s || !p()) return;
+      const i = Number(l.target.value) / 100 * m.value;
+      s.currentTime = i, b.value = i;
+    }
+    const A = y(null), J = y(null), k = y(0), N = y(0), D = y(!1);
+    R(() => o.thumbnails, (l) => {
+      if (A.value = null, !l) return;
+      let s = !1;
+      fetch(l).then((i) => i.ok ? i.text() : Promise.reject(new Error("fetch failed"))).then((i) => {
+        if (s) return;
+        const L = Ot(i, new URL(l, location.href).href);
+        A.value = L.length > 0 ? Ut(L) : null;
+      }).catch(() => {
+        s || (A.value = null);
+      }), ne(() => {
+        s = !0;
+      });
     }, { immediate: !0 });
-    const h = () => _.value > 0, r = () => h() ? x.value / _.value * 100 : 0, b = () => h() ? k.value / _.value * 100 : 0;
-    function E(n) {
-      const u = o.video;
-      if (!u || !h()) return;
-      const f = Number(n.target.value) / 100 * _.value;
-      u.currentTime = f, x.value = f;
+    function H(l) {
+      const s = J.value;
+      if (!s || !p()) return;
+      const i = s.getBoundingClientRect(), L = Math.min(Math.max(l.clientX - i.left, 0), i.width);
+      N.value = L, k.value = L / i.width * m.value, D.value = !0;
+    }
+    function V() {
+      D.value = !1;
     }
-    const R = w(1), H = w(!1);
-    F(() => o.video, (n) => {
-      if (!n) return;
-      const u = () => {
-        R.value = n.volume, H.value = n.muted;
+    const O = T(
+      () => {
+        var l;
+        return D.value ? ((l = A.value) == null ? void 0 : l.cueAt(k.value)) ?? null : null;
+      }
+    ), me = T(() => {
+      const l = O.value;
+      return l !== null && l.w > 0 && l.h > 0;
+    }), Pe = T(() => {
+      var L;
+      const l = O.value, s = ((L = J.value) == null ? void 0 : L.clientWidth) ?? 0;
+      if (!me.value || !l || s === 0) return N.value;
+      const i = l.w / 2;
+      return Math.min(Math.max(N.value, i), s - i);
+    }), oe = y([]);
+    R(() => o.chapters, (l) => {
+      if (oe.value = [], typeof l != "string" || !l) return;
+      let s = !1;
+      fetch(l).then((i) => i.ok ? i.text() : Promise.reject(new Error("fetch failed"))).then((i) => {
+        s || (oe.value = Zt(i));
+      }).catch(() => {
+        s || (oe.value = []);
+      }), ne(() => {
+        s = !0;
+      });
+    }, { immediate: !0 });
+    const ce = T(() => typeof o.chapters == "string" ? oe.value : Array.isArray(o.chapters) ? jt(o.chapters, m.value) : []), de = T(
+      () => D.value ? Qt(ce.value, k.value) : null
+    ), K = y(1), q = y(!1);
+    R(() => o.video, (l) => {
+      if (!l) return;
+      const s = () => {
+        K.value = l.volume, q.value = l.muted;
       };
-      u(), n.addEventListener("volumechange", u);
+      s(), l.addEventListener("volumechange", s);
     }, { immediate: !0 });
-    function A() {
+    function Me() {
       o.video && (o.video.muted = !o.video.muted);
     }
-    function y(n) {
-      const u = o.video;
-      if (!u) return;
-      const f = Number(n.target.value) / 100;
-      u.volume = f, f > 0 && u.muted && (u.muted = !1);
+    function Te(l) {
+      const s = o.video;
+      if (!s) return;
+      const i = Number(l.target.value) / 100;
+      s.volume = i, i > 0 && s.muted && (s.muted = !1);
     }
-    const I = w(1), D = w(!1), B = w(null);
-    F(() => o.video, (n) => {
-      if (!n) return;
-      const u = () => {
-        I.value = n.playbackRate;
+    const X = y(1), le = y(!1), we = y(null);
+    R(() => o.video, (l) => {
+      if (!l) return;
+      const s = () => {
+        X.value = l.playbackRate;
       };
-      u(), n.addEventListener("ratechange", u);
+      s(), l.addEventListener("ratechange", s);
     }, { immediate: !0 });
-    function N(n) {
-      o.video && (o.video.playbackRate = n), I.value = n, D.value = !1;
+    function Ie(l) {
+      o.video && (o.video.playbackRate = l), X.value = l, le.value = !1;
+    }
+    const ae = y(!1), Q = y(null), he = T(() => o.qualityLevels.length >= 2), be = T(
+      () => [...o.qualityLevels].sort((l, s) => s.height - l.height)
+    ), ve = T(
+      () => o.qualityLevels.find((l) => l.index === o.currentLevel)
+    ), Ce = T(() => {
+      if (o.selectedLevel < 0)
+        return ve.value ? `Auto (${ve.value.label})` : "Auto";
+      const l = o.qualityLevels.find((s) => s.index === o.selectedLevel);
+      return (l == null ? void 0 : l.label) ?? "Auto";
+    });
+    function se(l) {
+      h("select-level", l), ae.value = !1;
     }
-    const G = w([]), S = w(-1), z = w(!1), te = w(null);
-    function se(n) {
-      const u = [];
-      for (let $ = 0; $ < n.length; $++) {
-        const V = n[$];
-        (V.kind === "subtitles" || V.kind === "captions") && u.push({ index: $, label: V.label || V.language || `Track ${$ + 1}` });
+    const pe = y([]), W = y(-1), G = y(!1), xe = y(null);
+    function ge(l) {
+      const s = [];
+      for (let L = 0; L < l.length; L++) {
+        const F = l[L];
+        (F.kind === "subtitles" || F.kind === "captions") && s.push({ index: L, label: F.label || F.language || `Track ${L + 1}` });
       }
-      G.value = u;
-      let f = -1;
-      for (let $ = 0; $ < n.length; $++)
-        if (n[$].mode === "showing") {
-          f = $;
+      pe.value = s;
+      let i = -1;
+      for (let L = 0; L < l.length; L++)
+        if (l[L].mode === "showing") {
+          i = L;
           break;
         }
-      S.value = f;
+      W.value = i;
     }
-    F(() => o.video, (n) => {
-      if (!n) {
-        G.value = [], S.value = -1;
+    R(() => o.video, (l) => {
+      if (!l) {
+        pe.value = [], W.value = -1;
         return;
       }
-      const u = n.textTracks;
-      se(u);
-      const f = () => se(u);
-      typeof u.addEventListener == "function" && (u.addEventListener("addtrack", f), u.addEventListener("removetrack", f), u.addEventListener("change", f));
+      const s = l.textTracks;
+      ge(s);
+      const i = () => ge(s);
+      typeof s.addEventListener == "function" && (s.addEventListener("addtrack", i), s.addEventListener("removetrack", i), s.addEventListener("change", i));
     }, { immediate: !0 });
-    function de(n) {
-      var f;
-      const u = (f = o.video) == null ? void 0 : f.textTracks;
-      if (u) {
-        for (let $ = 0; $ < u.length; $++) u[$].mode = $ === n ? "showing" : "hidden";
-        S.value = n, z.value = !1;
+    function Le(l) {
+      var i;
+      const s = (i = o.video) == null ? void 0 : i.textTracks;
+      if (s) {
+        for (let L = 0; L < s.length; L++) s[L].mode = L === l ? "showing" : "hidden";
+        W.value = l, G.value = !1;
       }
     }
-    function Q() {
-      var u;
-      const n = (u = o.video) == null ? void 0 : u.textTracks;
-      if (n) {
-        for (let f = 0; f < n.length; f++) n[f].mode = "hidden";
-        S.value = -1, z.value = !1;
+    function u() {
+      var s;
+      const l = (s = o.video) == null ? void 0 : s.textTracks;
+      if (l) {
+        for (let i = 0; i < l.length; i++) l[i].mode = "hidden";
+        W.value = -1, G.value = !1;
       }
     }
-    const Y = w(!1), ve = typeof document < "u" && !!document.pictureInPictureEnabled;
-    F(() => o.video, (n) => {
-      n && (n.addEventListener("enterpictureinpicture", () => {
-        Y.value = !0;
-      }), n.addEventListener("leavepictureinpicture", () => {
-        Y.value = !1;
+    const v = y(!1), P = typeof document < "u" && !!document.pictureInPictureEnabled;
+    R(() => o.video, (l) => {
+      l && (l.addEventListener("enterpictureinpicture", () => {
+        v.value = !0;
+      }), l.addEventListener("leavepictureinpicture", () => {
+        v.value = !1;
       }));
     }, { immediate: !0 });
-    function pe() {
+    function fe() {
       o.video && (document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
       }) : o.video.requestPictureInPicture().catch(() => {
       }));
     }
-    const W = w(!1), le = typeof document > "u" ? !1 : !!(document.fullscreenEnabled || document.webkitFullscreenEnabled);
-    function d() {
+    const j = y(!1), Ee = typeof document > "u" ? !1 : !!(document.fullscreenEnabled || document.webkitFullscreenEnabled);
+    function Se() {
       return document.fullscreenElement ?? document.webkitFullscreenElement ?? null;
     }
-    function c(n) {
-      const u = n.requestFullscreen ?? n.webkitRequestFullscreen;
-      return u ? u.call(n) : Promise.reject(new Error("unsupported"));
+    function _e(l) {
+      const s = l.requestFullscreen ?? l.webkitRequestFullscreen;
+      return s ? s.call(l) : Promise.reject(new Error("unsupported"));
     }
-    function O() {
-      const n = document.exitFullscreen ?? document.webkitExitFullscreen;
-      return n ? n.call(document) : Promise.reject(new Error("unsupported"));
+    function ke() {
+      const l = document.exitFullscreen ?? document.webkitExitFullscreen;
+      return l ? l.call(document) : Promise.reject(new Error("unsupported"));
     }
-    function K() {
-      W.value = d() === o.container;
+    function $e() {
+      j.value = Se() === o.container;
     }
-    fe(() => {
-      document.addEventListener("fullscreenchange", K), document.addEventListener("webkitfullscreenchange", K);
-    }), X(() => {
-      p(), document.removeEventListener("fullscreenchange", K), document.removeEventListener("webkitfullscreenchange", K);
+    He(() => {
+      document.addEventListener("fullscreenchange", $e), document.addEventListener("webkitfullscreenchange", $e);
+    }), ne(() => {
+      _(), document.removeEventListener("fullscreenchange", $e), document.removeEventListener("webkitfullscreenchange", $e);
     });
-    function re() {
-      var n, u;
-      if (l) {
-        (u = (n = o.video) == null ? void 0 : n.webkitEnterFullscreen) == null || u.call(n);
+    function je() {
+      var l, s;
+      if (e) {
+        (s = (l = o.video) == null ? void 0 : l.webkitEnterFullscreen) == null || s.call(l);
         return;
       }
-      W.value ? O().catch(() => {
-      }) : o.container && c(o.container).catch(() => {
+      j.value ? ke().catch(() => {
+      }) : o.container && _e(o.container).catch(() => {
       });
     }
-    const ie = le || l && o.video !== null && typeof o.video.webkitEnterFullscreen == "function";
-    function ue(n, u) {
-      function f(V) {
-        u.value && !u.value.contains(V.target) && (n.value = !1);
+    const Qe = Ee || e && o.video !== null && typeof o.video.webkitEnterFullscreen == "function";
+    function Ne(l, s) {
+      function i(F) {
+        s.value && !s.value.contains(F.target) && (l.value = !1);
       }
-      function $(V) {
-        V.key === "Escape" && (n.value = !1);
+      function L(F) {
+        F.key === "Escape" && (l.value = !1);
       }
-      F(n, (V) => {
-        V ? (document.addEventListener("mousedown", f), document.addEventListener("keydown", $)) : (document.removeEventListener("mousedown", f), document.removeEventListener("keydown", $));
-      }), X(() => {
-        document.removeEventListener("mousedown", f), document.removeEventListener("keydown", $);
+      R(l, (F) => {
+        F ? (document.addEventListener("mousedown", i), document.addEventListener("keydown", L)) : (document.removeEventListener("mousedown", i), document.removeEventListener("keydown", L));
+      }), ne(() => {
+        document.removeEventListener("mousedown", i), document.removeEventListener("keydown", L);
       });
     }
-    return ue(D, B), ue(z, te), (n, u) => (i(), v("div", {
+    return Ne(le, we), Ne(G, xe), Ne(ae, Q), (l, s) => (d(), f("div", {
       role: "toolbar",
       "aria-label": "Video controls",
-      class: C(["gvp-controls", !m.value && "is-hidden"]),
-      onMouseenter: p,
-      onMouseleave: L
+      class: w(["gvp-controls", !g.value && "is-hidden"]),
+      onMouseenter: _,
+      onMouseleave: $
     }, [
-      s("div", rt, [
-        s("button", {
+      r("div", Wt, [
+        t.hasPrev || t.hasNext ? (d(), f("button", {
+          key: 0,
+          type: "button",
+          class: "gvp-ctrl-btn",
+          "aria-label": "Previous video",
+          disabled: !t.hasPrev,
+          onClick: s[0] || (s[0] = (i) => h("prev"))
+        }, [
+          Z(Et)
+        ], 8, zt)) : M("", !0),
+        r("button", {
           type: "button",
           class: "gvp-ctrl-btn",
           "aria-label": t.isPlaying ? "Pause" : "Play",
           "aria-pressed": t.isPlaying,
-          onClick: u[0] || (u[0] = //@ts-ignore
-          (...f) => t.onTogglePlay && t.onTogglePlay(...f))
+          onClick: s[1] || (s[1] = //@ts-ignore
+          (...i) => t.onTogglePlay && t.onTogglePlay(...i))
+        }, [
+          t.isPlaying ? (d(), z(bt, { key: 0 })) : (d(), z(xt, { key: 1 }))
+        ], 8, Yt),
+        t.hasPrev || t.hasNext ? (d(), f("button", {
+          key: 1,
+          type: "button",
+          class: "gvp-ctrl-btn",
+          "aria-label": "Next video",
+          disabled: !t.hasNext,
+          onClick: s[2] || (s[2] = (i) => h("next"))
+        }, [
+          Z($t)
+        ], 8, Kt)) : M("", !0),
+        r("div", {
+          class: "gvp-seek",
+          onPointermove: H,
+          onPointerleave: V
         }, [
-          t.isPlaying ? (i(), U(We, { key: 0 })) : (i(), U(Ke, { key: 1 }))
-        ], 8, it),
-        s("div", ut, [
-          s("div", ct, [
-            s("div", {
+          r("div", {
+            ref_key: "seekTrackEl",
+            ref: J,
+            class: "gvp-seek-track"
+          }, [
+            r("div", {
               class: "gvp-seek-buffered",
-              style: ce({ width: `${b()}%` })
+              style: re({ width: `${B()}%` })
             }, null, 4),
-            s("div", {
+            r("div", {
               class: "gvp-seek-progress",
-              style: ce({ width: `${r()}%` })
-            }, null, 4)
-          ]),
-          s("input", {
+              style: re({ width: `${x()}%` })
+            }, null, 4),
+            p() ? (d(!0), f(ie, { key: 0 }, ue(ce.value, (i) => We((d(), f("div", {
+              key: `${i.start}-${i.title}`,
+              class: "gvp-seek-chapter-tick",
+              style: re({ left: `${i.start / m.value * 100}%` })
+            }, null, 4)), [
+              [ze, i.start > 0 && i.start < m.value]
+            ])), 128)) : M("", !0)
+          ], 512),
+          D.value && p() ? (d(), f("div", {
+            key: 0,
+            class: w(["gvp-seek-preview", { "has-thumb": me.value }]),
+            style: re({ left: `${Pe.value}px` })
+          }, [
+            me.value && O.value ? (d(), f("div", {
+              key: 0,
+              class: "gvp-seek-preview-thumb",
+              style: re({
+                width: `${O.value.w}px`,
+                height: `${O.value.h}px`,
+                backgroundImage: `url(${JSON.stringify(O.value.url)})`,
+                backgroundPosition: `-${O.value.x}px -${O.value.y}px`
+              })
+            }, null, 4)) : M("", !0),
+            de.value ? (d(), f("span", Xt, U(de.value.title), 1)) : M("", !0),
+            r("span", Jt, U(te(Ae)(k.value)), 1)
+          ], 6)) : M("", !0),
+          r("input", {
             type: "range",
             class: "gvp-seek-input",
             min: 0,
             max: 100,
             step: 0.1,
-            value: r(),
-            disabled: !h(),
+            value: x(),
+            disabled: !p(),
             "aria-label": "Seek",
             "aria-valuemin": 0,
-            "aria-valuemax": Math.floor(_.value),
-            "aria-valuenow": Math.floor(x.value),
-            onInput: E
-          }, null, 40, dt)
-        ]),
-        s("span", vt, q(J(ge)(x.value)) + " / " + q(J(ge)(_.value)), 1),
-        s("div", {
+            "aria-valuemax": Math.floor(m.value),
+            "aria-valuenow": Math.floor(b.value),
+            onInput: Y
+          }, null, 40, Gt)
+        ], 32),
+        r("span", en, U(te(Ae)(b.value)) + " / " + U(te(Ae)(m.value)), 1),
+        r("div", {
           ref_key: "speedRootEl",
-          ref: B,
+          ref: we,
           class: "gvp-speed"
         }, [
-          s("button", {
+          r("button", {
             type: "button",
             class: "gvp-ctrl-btn gvp-speed-btn",
             "aria-haspopup": "listbox",
-            "aria-expanded": D.value,
-            "aria-label": `Playback speed: ${I.value === 1 ? "1×" : I.value + "×"}`,
-            onClick: u[1] || (u[1] = (f) => D.value = !D.value)
+            "aria-expanded": le.value,
+            "aria-label": `Playback speed: ${X.value === 1 ? "1×" : X.value + "×"}`,
+            onClick: s[3] || (s[3] = (i) => le.value = !le.value)
           }, [
-            j(we),
-            s("span", ft, q(I.value === 1 ? "1×" : `${I.value}×`), 1)
-          ], 8, pt),
-          D.value ? (i(), v("ul", mt, [
-            (i(), v(oe, null, ae(e, (f) => s("li", { key: f }, [
-              s("button", {
+            Z(Oe),
+            r("span", nn, U(X.value === 1 ? "1×" : `${X.value}×`), 1)
+          ], 8, tn),
+          le.value ? (d(), f("ul", ln, [
+            (d(), f(ie, null, ue(c, (i) => r("li", { key: i }, [
+              r("button", {
                 type: "button",
                 role: "option",
-                "aria-selected": f === I.value,
-                class: C(["gvp-speed-menu-item", { "is-active": f === I.value }]),
-                onClick: ($) => N(f)
-              }, q(f === 1 ? "Normal" : `${f}×`), 11, ht)
+                "aria-selected": i === X.value,
+                class: w(["gvp-speed-menu-item", { "is-active": i === X.value }]),
+                onClick: (L) => Ie(i)
+              }, U(i === 1 ? "Normal" : `${i}×`), 11, an)
             ])), 64))
           ])) : M("", !0)
         ], 512),
-        G.value.length > 0 ? (i(), v("div", {
-          key: 0,
+        he.value ? (d(), f("div", {
+          key: 2,
+          ref_key: "qualityRootEl",
+          ref: Q,
+          class: "gvp-quality"
+        }, [
+          r("button", {
+            type: "button",
+            class: "gvp-ctrl-btn gvp-quality-btn",
+            "aria-haspopup": "listbox",
+            "aria-expanded": ae.value,
+            "aria-label": `Quality: ${Ce.value}`,
+            onClick: s[4] || (s[4] = (i) => ae.value = !ae.value)
+          }, [
+            Z(Ht),
+            r("span", sn, U(Ce.value), 1)
+          ], 8, on),
+          ae.value ? (d(), f("ul", rn, [
+            r("li", null, [
+              r("button", {
+                type: "button",
+                role: "option",
+                "aria-selected": t.selectedLevel < 0,
+                class: w(["gvp-quality-menu-item", { "is-active": t.selectedLevel < 0 }]),
+                onClick: s[5] || (s[5] = (i) => se(te(Ke).index))
+              }, U(ve.value ? `Auto (${ve.value.label})` : "Auto"), 11, un)
+            ]),
+            (d(!0), f(ie, null, ue(be.value, (i) => (d(), f("li", {
+              key: i.index
+            }, [
+              r("button", {
+                type: "button",
+                role: "option",
+                "aria-selected": i.index === t.selectedLevel,
+                class: w(["gvp-quality-menu-item", { "is-active": i.index === t.selectedLevel }]),
+                onClick: (L) => se(i.index)
+              }, U(i.label), 11, cn)
+            ]))), 128))
+          ])) : M("", !0)
+        ], 512)) : M("", !0),
+        pe.value.length > 0 ? (d(), f("div", {
+          key: 3,
           ref_key: "captionsRootEl",
-          ref: te,
+          ref: xe,
           class: "gvp-captions"
         }, [
-          s("button", {
+          r("button", {
             type: "button",
-            class: C(["gvp-ctrl-btn", S.value >= 0 && "is-active"]),
+            class: w(["gvp-ctrl-btn", W.value >= 0 && "is-active"]),
             "aria-haspopup": "listbox",
-            "aria-expanded": z.value,
+            "aria-expanded": G.value,
             "aria-label": "Captions",
-            "aria-pressed": S.value >= 0,
-            onClick: u[2] || (u[2] = (f) => z.value = !z.value)
+            "aria-pressed": W.value >= 0,
+            onClick: s[6] || (s[6] = (i) => G.value = !G.value)
           }, [
-            j(be)
-          ], 10, gt),
-          z.value ? (i(), v("ul", kt, [
-            s("li", null, [
-              s("button", {
+            Z(Ue)
+          ], 10, dn),
+          G.value ? (d(), f("ul", vn, [
+            r("li", null, [
+              r("button", {
                 type: "button",
                 role: "option",
-                "aria-selected": S.value === -1,
-                class: C(["gvp-captions-menu-item", { "is-active": S.value === -1 }]),
-                onClick: Q
-              }, "Off", 10, yt)
+                "aria-selected": W.value === -1,
+                class: w(["gvp-captions-menu-item", { "is-active": W.value === -1 }]),
+                onClick: u
+              }, "Off", 10, pn)
             ]),
-            (i(!0), v(oe, null, ae(G.value, (f) => (i(), v("li", {
-              key: f.index
+            (d(!0), f(ie, null, ue(pe.value, (i) => (d(), f("li", {
+              key: i.index
             }, [
-              s("button", {
+              r("button", {
                 type: "button",
                 role: "option",
-                "aria-selected": f.index === S.value,
-                class: C(["gvp-captions-menu-item", { "is-active": f.index === S.value }]),
-                onClick: ($) => de(f.index)
-              }, q(f.label), 11, wt)
+                "aria-selected": i.index === W.value,
+                class: w(["gvp-captions-menu-item", { "is-active": i.index === W.value }]),
+                onClick: (L) => Le(i.index)
+              }, U(i.label), 11, fn)
             ]))), 128))
           ])) : M("", !0)
         ], 512)) : M("", !0),
-        s("div", {
-          class: C(["gvp-volume", !J(a) && "is-expandable"])
+        r("div", {
+          class: w(["gvp-volume", !te(n) && "is-expandable"])
         }, [
-          s("button", {
+          r("button", {
             type: "button",
             class: "gvp-ctrl-btn",
-            "aria-label": H.value ? "Unmute" : "Mute",
-            "aria-pressed": H.value,
-            onClick: A
+            "aria-label": q.value ? "Unmute" : "Mute",
+            "aria-pressed": q.value,
+            onClick: Me
           }, [
-            H.value || R.value === 0 ? (i(), U(tt, { key: 0 })) : R.value < 0.5 ? (i(), U(Qe, { key: 1 })) : (i(), U(Xe, { key: 2 }))
-          ], 8, bt),
-          J(a) ? M("", !0) : (i(), v("div", Ct, [
-            s("div", xt, [
-              s("div", {
+            q.value || K.value === 0 ? (d(), z(Nt, { key: 0 })) : K.value < 0.5 ? (d(), z(It, { key: 1 })) : (d(), z(Mt, { key: 2 }))
+          ], 8, mn),
+          te(n) ? M("", !0) : (d(), f("div", hn, [
+            r("div", gn, [
+              r("div", {
                 class: "gvp-volume-fill",
-                style: ce({ width: `${H.value ? 0 : Math.round(R.value * 100)}%` })
+                style: re({ width: `${q.value ? 0 : Math.round(K.value * 100)}%` })
               }, null, 4)
             ]),
-            s("input", {
+            r("input", {
               type: "range",
               class: "gvp-volume-input",
               min: 0,
               max: 100,
               step: 1,
-              value: H.value ? 0 : Math.round(R.value * 100),
+              value: q.value ? 0 : Math.round(K.value * 100),
               "aria-label": "Volume",
               "aria-valuemin": 0,
               "aria-valuemax": 100,
-              "aria-valuenow": H.value ? 0 : Math.round(R.value * 100),
-              onInput: y
-            }, null, 40, _t)
+              "aria-valuenow": q.value ? 0 : Math.round(K.value * 100),
+              onInput: Te
+            }, null, 40, kn)
           ]))
         ], 2),
-        J(ve) ? (i(), v("button", {
-          key: 1,
+        te(P) ? (d(), f("button", {
+          key: 4,
           type: "button",
-          class: C(["gvp-ctrl-btn", Y.value && "is-active"]),
-          "aria-label": Y.value ? "Exit picture-in-picture" : "Picture-in-picture",
-          "aria-pressed": Y.value,
-          onClick: pe
+          class: w(["gvp-ctrl-btn", v.value && "is-active"]),
+          "aria-label": v.value ? "Exit picture-in-picture" : "Picture-in-picture",
+          "aria-pressed": v.value,
+          onClick: fe
         }, [
-          j(Ce)
-        ], 10, Et)) : M("", !0),
-        J(ie) ? (i(), v("button", {
-          key: 2,
+          Z(Ze)
+        ], 10, yn)) : M("", !0),
+        te(Qe) ? (d(), f("button", {
+          key: 5,
           type: "button",
-          class: C(["gvp-ctrl-btn", W.value && "is-active"]),
-          "aria-label": W.value ? "Exit fullscreen" : "Enter fullscreen",
-          "aria-pressed": W.value,
-          onClick: re
+          class: w(["gvp-ctrl-btn", j.value && "is-active"]),
+          "aria-label": j.value ? "Exit fullscreen" : "Enter fullscreen",
+          "aria-pressed": j.value,
+          onClick: je
         }, [
-          W.value ? (i(), U(lt, { key: 0 })) : (i(), U(at, { key: 1 }))
-        ], 10, $t)) : M("", !0)
+          j.value ? (d(), z(Ft, { key: 0 })) : (d(), z(qt, { key: 1 }))
+        ], 10, wn)) : M("", !0)
       ])
     ], 34));
   }
-}), Mt = { name: "IconDesktop" }, Tt = /* @__PURE__ */ T({
-  ...Mt,
+}), xn = { name: "IconDesktop" }, Ln = /* @__PURE__ */ I({
+  ...xn,
   props: {
     class: {}
   },
   setup(t) {
     const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    return (n, e) => (d(), f("svg", {
+      class: w(["gvp-icon", a.class]),
       width: "20",
       height: "20",
       viewBox: "0 0 24 24",
@@ -1108,26 +1481,26 @@ const rt = { class: "gvp-controls-row" }, it = ["aria-label", "aria-pressed"], u
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
     }, [...e[0] || (e[0] = [
-      s("path", {
+      r("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),
-      s("path", {
+      r("path", {
         d: "M11 15H13",
         stroke: "currentColor",
         "stroke-width": "1.5",
         "stroke-linecap": "round",
         "stroke-linejoin": "round"
       }, null, -1),
-      s("path", {
+      r("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),
-      s("path", {
+      r("path", {
         d: "M7 22H17",
         stroke: "currentColor",
         "stroke-width": "1.5",
@@ -1135,15 +1508,15 @@ const rt = { class: "gvp-controls-row" }, it = ["aria-label", "aria-pressed"], u
       }, null, -1)
     ])], 2));
   }
-}), It = { name: "IconMobile" }, St = /* @__PURE__ */ T({
-  ...It,
+}), En = { name: "IconMobile" }, _n = /* @__PURE__ */ I({
+  ...En,
   props: {
     class: {}
   },
   setup(t) {
     const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    return (n, e) => (d(), f("svg", {
+      class: w(["gvp-icon", a.class]),
       width: "20",
       height: "20",
       viewBox: "0 0 24 24",
@@ -1151,20 +1524,20 @@ const rt = { class: "gvp-controls-row" }, it = ["aria-label", "aria-pressed"], u
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
     }, [...e[0] || (e[0] = [
-      s("path", {
+      r("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),
-      s("path", {
+      r("path", {
         d: "M11 19H13",
         stroke: "currentColor",
         "stroke-width": "2",
         "stroke-linecap": "round",
         "stroke-linejoin": "round"
       }, null, -1),
-      s("path", {
+      r("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",
@@ -1172,15 +1545,15 @@ const rt = { class: "gvp-controls-row" }, it = ["aria-label", "aria-pressed"], u
       }, null, -1)
     ])], 2));
   }
-}), Ht = { name: "IconPlay" }, Bt = /* @__PURE__ */ T({
-  ...Ht,
+}), $n = { name: "IconPlay" }, Pn = /* @__PURE__ */ I({
+  ...$n,
   props: {
     class: {}
   },
   setup(t) {
     const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    return (n, e) => (d(), f("svg", {
+      class: w(["gvp-icon", a.class]),
       width: "22",
       height: "22",
       viewBox: "0 0 16 16",
@@ -1188,21 +1561,21 @@ const rt = { class: "gvp-controls-row" }, it = ["aria-label", "aria-pressed"], u
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
     }, [...e[0] || (e[0] = [
-      s("path", {
+      r("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));
   }
-}), Vt = { name: "IconX" }, At = /* @__PURE__ */ T({
-  ...Vt,
+}), Mn = { name: "IconX" }, Tn = /* @__PURE__ */ I({
+  ...Mn,
   props: {
     class: {}
   },
   setup(t) {
     const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    return (n, e) => (d(), f("svg", {
+      class: w(["gvp-icon", a.class]),
       width: "14",
       height: "14",
       viewBox: "0 0 14 14",
@@ -1210,14 +1583,14 @@ const rt = { class: "gvp-controls-row" }, it = ["aria-label", "aria-pressed"], u
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
     }, [...e[0] || (e[0] = [
-      s("path", {
+      r("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));
   }
 });
-function Dt(t) {
+function In(t) {
   if (!t) return null;
   if (/^[A-Za-z0-9_-]{11}$/.test(t)) return t;
   let a;
@@ -1226,71 +1599,74 @@ function Dt(t) {
   } catch {
     return null;
   }
-  const l = a.hostname.replace(/^www\./, "");
-  if (l === "youtu.be") {
+  const n = a.hostname.replace(/^www\./, "");
+  if (n === "youtu.be") {
     const e = a.pathname.slice(1).split("/")[0];
     return /^[A-Za-z0-9_-]{11}$/.test(e) ? e : null;
   }
-  if (l === "youtube.com" || l === "m.youtube.com" || l === "music.youtube.com" || l === "youtube-nocookie.com") {
+  if (n === "youtube.com" || n === "m.youtube.com" || n === "music.youtube.com" || n === "youtube-nocookie.com") {
     const e = a.searchParams.get("v");
     if (e && /^[A-Za-z0-9_-]{11}$/.test(e)) return e;
-    const o = /^\/(?:embed|shorts|v|live)\/([A-Za-z0-9_-]{11})/.exec(
+    const c = /^\/(?:embed|shorts|v|live)\/([A-Za-z0-9_-]{11})/.exec(
       a.pathname
     );
-    if (o) return o[1];
+    if (c) return c[1];
   }
   return null;
 }
-function Rt(t) {
+function Sn(t) {
   try {
-    const a = new URL(t), l = a.searchParams.get("t") ?? a.searchParams.get("start");
-    if (!l) return null;
-    if (/^\d+s?$/.test(l)) return Number.parseInt(l, 10);
-    const e = /^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/.exec(l);
+    const a = new URL(t), n = a.searchParams.get("t") ?? a.searchParams.get("start");
+    if (!n) return null;
+    if (/^\d+s?$/.test(n)) return Number.parseInt(n, 10);
+    const e = /^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/.exec(n);
     if (e) {
-      const o = Number.parseInt(e[1] ?? "0", 10), m = Number.parseInt(e[2] ?? "0", 10), g = Number.parseInt(e[3] ?? "0", 10), p = o * 3600 + m * 60 + g;
-      return p > 0 ? p : null;
+      const c = Number.parseInt(e[1] ?? "0", 10), o = Number.parseInt(e[2] ?? "0", 10), h = Number.parseInt(e[3] ?? "0", 10), g = c * 3600 + o * 60 + h;
+      return g > 0 ? g : null;
     }
   } catch {
   }
   return null;
 }
-function Ft(t, a = {}) {
+function Nn(t, a = {}) {
   const {
-    autoPlay: l = !1,
+    autoPlay: n = !1,
     muted: e = !0,
-    loop: o = !1,
-    controls: m = !0,
-    startSeconds: g
-  } = a, p = new URLSearchParams({
+    loop: c = !1,
+    controls: o = !0,
+    startSeconds: h
+  } = a, g = new URLSearchParams({
     rel: "0",
     modestbranding: "1",
     playsinline: "1",
-    controls: m ? "1" : "0"
+    controls: o ? "1" : "0"
   });
-  return l ? (p.set("autoplay", "1"), p.set("mute", "1")) : e && p.set("mute", "1"), o && (p.set("loop", "1"), p.set("playlist", t)), g && g > 0 && p.set("start", String(g)), `https://www.youtube-nocookie.com/embed/${t}?${p.toString()}`;
+  return n ? (g.set("autoplay", "1"), g.set("mute", "1")) : e && g.set("mute", "1"), c && (g.set("loop", "1"), g.set("playlist", t)), h && h > 0 && g.set("start", String(h)), `https://www.youtube-nocookie.com/embed/${t}?${g.toString()}`;
 }
-const Nt = ["src"], Ot = {
+const An = ["src"], Hn = {
   key: 2,
   class: "gvp-vignette"
-}, jt = {
+}, Bn = {
   key: 3,
   class: "gvp-toggle"
-}, Ut = { class: "gvp-toggle-pill" }, Zt = ["aria-pressed"], qt = ["aria-pressed"], zt = ["aria-label", "aria-pressed"], Wt = ["aria-label"], Yt = {
+}, Vn = { class: "gvp-toggle-pill" }, qn = ["aria-pressed"], Dn = ["aria-pressed"], Fn = ["aria-label", "aria-pressed"], Rn = ["aria-label"], On = {
   key: 10,
   class: "gvp-play-wrap"
-}, Kt = {
+}, Un = {
   key: 0,
   class: "gvp-tooltip",
   role: "tooltip"
-}, Jt = {
+}, Zn = {
   key: 12,
   class: "gvp-bottom-fade"
-}, Qt = /* @__PURE__ */ T({
+}, Wn = /* @__PURE__ */ I({
   __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 },
@@ -1303,289 +1679,360 @@ const Nt = ["src"], Ot = {
     aspectRatio: {},
     hlsConfig: {},
     isHls: { type: Boolean },
+    thumbnails: {},
+    chapters: {},
     class: { default: "" },
     closable: { type: Boolean, default: !1 }
   },
-  emits: ["close", "play", "pause"],
+  emits: ["close", "play", "pause", "ended", "time-update", "seeked", "volume-change", "milestone", "error", "playlist-change"],
   setup(t, { emit: a }) {
-    const l = t, e = a, o = w(null), m = w(l.defaultDevice), g = w(!1), p = w(!1), L = w(null), P = w([]), x = w(-1), _ = w(1), k = w(!1), h = w(!1), r = w(null), b = typeof document < "u" && !!document.pictureInPictureEnabled, E = Z(
-      () => l.controls === !0 || l.controls === "custom"
-    ), R = Z(() => l.controls === "native"), H = Z(() => Dt(l.src)), A = Z(() => H.value !== null), y = Z(
-      () => H.value ? Ft(H.value, {
-        autoPlay: l.autoPlay,
-        muted: l.muted,
-        loop: l.loop,
-        controls: E.value ? !0 : R.value,
-        startSeconds: Rt(l.src)
+    const n = t, e = a, c = y(null), o = y(n.defaultDevice), h = y(!1), g = y(!1), E = y(null), _ = y([]), $ = y(-1), S = y([]), b = y(-1), m = y(-1), C = y(1), p = y(!1), x = y(!1), B = y(null), Y = typeof document < "u" && !!document.pictureInPictureEnabled, A = T(
+      () => n.controls === !0 || n.controls === "custom"
+    ), J = T(() => n.controls === "native"), k = T(
+      () => Array.isArray(n.playlist) && n.playlist.length > 0
+    ), N = y(
+      k.value ? Math.min(Math.max(n.defaultIndex, 0), n.playlist.length - 1) : 0
+    ), D = T(
+      () => k.value ? n.playlist[Math.min(N.value, n.playlist.length - 1)] : null
+    ), H = T(() => {
+      var u;
+      return ((u = D.value) == null ? void 0 : u.src) ?? n.src ?? "";
+    }), V = T(() => {
+      var u;
+      return ((u = D.value) == null ? void 0 : u.poster) ?? n.poster;
+    }), O = T(
+      () => {
+        var u;
+        return ((u = D.value) == null ? void 0 : u.thumbnails) ?? n.thumbnails;
+      }
+    ), me = T(
+      () => {
+        var u;
+        return ((u = D.value) == null ? void 0 : u.chapters) ?? n.chapters;
+      }
+    ), Pe = T(() => k.value && N.value > 0), oe = T(
+      () => k.value && N.value < n.playlist.length - 1
+    );
+    let ce = !1;
+    function de(u, v = !1) {
+      if (!k.value) return;
+      const P = Math.min(Math.max(u, 0), n.playlist.length - 1);
+      P !== N.value && (ce = v, N.value = P, e("playlist-change", P, n.playlist[P]));
+    }
+    const K = T(() => In(H.value)), q = T(() => K.value !== null), Me = T(
+      () => K.value ? Nn(K.value, {
+        autoPlay: n.autoPlay,
+        muted: n.muted,
+        loop: n.loop,
+        controls: A.value ? !0 : J.value,
+        startSeconds: Sn(H.value)
       }) : null
     );
-    function I(d) {
-      P.value = d, x.value = -1;
+    function Te(u) {
+      _.value = u, $.value = -1;
     }
-    const D = Z(
-      () => !A.value && P.value.length > 1
-    ), B = Z(
+    function X(u) {
+      S.value = u, m.value = -1;
+    }
+    const le = T(
+      () => !q.value && _.value.length > 1
+    ), we = T(
       () => {
-        var d;
-        return x.value >= 0 ? x.value : ((d = P.value[0]) == null ? void 0 : d.index) ?? -1;
+        var u;
+        return $.value >= 0 ? $.value : ((u = _.value[0]) == null ? void 0 : u.index) ?? -1;
       }
-    ), N = Z(
+    ), Ie = T(
       () => {
-        var d, c;
-        return m.value === "mobile" ? ((d = l.aspectRatio) == null ? void 0 : d.mobile) ?? "9/16" : ((c = l.aspectRatio) == null ? void 0 : c.desktop) ?? "16/9";
+        var u, v;
+        return o.value === "mobile" ? ((u = n.aspectRatio) == null ? void 0 : u.mobile) ?? "9/16" : ((v = n.aspectRatio) == null ? void 0 : v.desktop) ?? "16/9";
       }
-    ), G = Z(
+    ), ae = T(
       () => {
-        var d, c;
-        return m.value === "mobile" ? ((d = l.frameMaxWidth) == null ? void 0 : d.mobile) ?? "420px" : ((c = l.frameMaxWidth) == null ? void 0 : c.desktop) ?? "960px";
+        var u, v;
+        return o.value === "mobile" ? ((u = n.frameMaxWidth) == null ? void 0 : u.mobile) ?? "420px" : ((v = n.frameMaxWidth) == null ? void 0 : v.desktop) ?? "960px";
       }
-    ), S = Z(() => {
-      var d;
-      return ((d = o.value) == null ? void 0 : d.videoEl) ?? null;
+    ), Q = T(() => {
+      var u;
+      return ((u = c.value) == null ? void 0 : u.videoEl) ?? null;
     });
-    async function z() {
-      const d = S.value;
-      if (d)
+    async function he() {
+      const u = Q.value;
+      if (u)
         try {
-          d.readyState < 2 && d.load();
-          const c = d.play();
-          L.value = c, await c, g.value = !0;
+          u.readyState < 2 && u.load();
+          const v = u.play();
+          E.value = v, await v, h.value = !0;
         } catch {
-          g.value = !1;
+          h.value = !1;
         } finally {
-          L.value = null;
+          E.value = null;
         }
     }
-    async function te() {
-      const d = S.value;
-      if (d) {
-        if (L.value)
+    async function be() {
+      const u = Q.value;
+      if (u) {
+        if (E.value)
           try {
-            await L.value;
+            await E.value;
           } catch {
           }
-        d.pause();
+        u.pause();
       }
     }
-    async function se() {
-      !l.hoverPlay || A.value || await z();
+    async function ve() {
+      !n.hoverPlay || q.value || await he();
     }
-    async function de() {
-      !l.hoverPlay || A.value || (await te(), g.value = !1);
+    async function Ce() {
+      !n.hoverPlay || q.value || (await be(), h.value = !1);
     }
-    async function Q() {
-      const d = S.value;
-      d && (d.paused ? await z() : (await te(), g.value = !1));
+    async function se() {
+      const u = Q.value;
+      u && (u.paused ? await he() : (await be(), h.value = !1));
     }
-    function Y() {
-      p.value = !0, se();
+    function pe() {
+      h.value = !1, e("ended"), k.value && n.autoAdvance && oe.value && de(N.value + 1, !0);
     }
-    function ve() {
-      p.value = !1, de();
+    R(H, () => {
+      ce && (ce = !1, he());
+    });
+    function W() {
+      g.value = !0, ve();
     }
-    function pe(d) {
-      _.value = d;
-      const c = S.value;
-      c && (c.playbackRate = d);
+    function G() {
+      g.value = !1, Ce();
     }
-    F(S, (d) => {
-      d && (d.addEventListener("ratechange", () => {
-        _.value = d.playbackRate;
-      }), d.addEventListener("enterpictureinpicture", () => {
-        k.value = !0;
-      }), d.addEventListener("leavepictureinpicture", () => {
-        k.value = !1;
-      }));
+    function xe(u) {
+      C.value = u;
+      const v = Q.value;
+      v && (v.playbackRate = u);
+    }
+    R(Q, (u) => {
+      if (!u) return;
+      u.addEventListener("ratechange", () => {
+        C.value = u.playbackRate;
+      }), u.addEventListener("enterpictureinpicture", () => {
+        p.value = !0;
+      }), u.addEventListener("leavepictureinpicture", () => {
+        p.value = !1;
+      });
+      const v = /* @__PURE__ */ new Set();
+      u.addEventListener("timeupdate", () => {
+        const P = u.duration;
+        if (e("time-update", u.currentTime, Number.isFinite(P) ? P : 0), !Number.isFinite(P) || P <= 0) return;
+        const fe = u.currentTime / P * 100;
+        for (const j of [25, 50, 75, 100])
+          fe >= j && !v.has(j) && (v.add(j), e("milestone", j));
+      }), u.addEventListener("seeked", () => {
+        e("seeked", u.currentTime);
+      }), u.addEventListener("volumechange", () => {
+        e("volume-change", u.volume, u.muted);
+      }), u.addEventListener("error", () => {
+        e("error");
+      });
     });
-    function W() {
-      const d = S.value;
-      d && (document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
-      }) : d.requestPictureInPicture().catch(() => {
+    function ge() {
+      const u = Q.value;
+      u && (document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
+      }) : u.requestPictureInPicture().catch(() => {
       }));
     }
-    function le(d) {
-      var K, re, ie;
-      const c = S.value;
-      if (!(!c || !h.value && !((K = r.value) != null && K.contains(document.activeElement)) || d.target.tagName === "INPUT" && d.key !== " "))
-        switch (d.key) {
+    function Le(u) {
+      var fe, j, Ee;
+      const v = Q.value;
+      if (!(!v || !x.value && !((fe = B.value) != null && fe.contains(document.activeElement)) || u.target.tagName === "INPUT" && u.key !== " "))
+        switch (u.key) {
           case " ":
           case "k":
-            d.preventDefault(), Q();
+            u.preventDefault(), se();
             break;
           case "ArrowLeft":
-            d.preventDefault(), c.currentTime = Math.max(0, c.currentTime - 5);
+            u.preventDefault(), v.currentTime = Math.max(0, v.currentTime - 5);
             break;
           case "ArrowRight":
-            d.preventDefault(), c.currentTime = Math.min(c.duration || 0, c.currentTime + 5);
+            u.preventDefault(), v.currentTime = Math.min(v.duration || 0, v.currentTime + 5);
             break;
           case "ArrowUp":
-            d.preventDefault(), c.volume = Math.min(1, c.volume + 0.1), c.muted && (c.muted = !1);
+            u.preventDefault(), v.volume = Math.min(1, v.volume + 0.1), v.muted && (v.muted = !1);
             break;
           case "ArrowDown":
-            d.preventDefault(), c.volume = Math.max(0, c.volume - 0.1);
+            u.preventDefault(), v.volume = Math.max(0, v.volume - 0.1);
             break;
           case "m":
-            c.muted = !c.muted;
+            v.muted = !v.muted;
             break;
           case "f": {
-            const ue = document.fullscreenElement ?? document.webkitFullscreenElement ?? null, n = ((re = r.value) == null ? void 0 : re.requestFullscreen) ?? ((ie = r.value) == null ? void 0 : ie.webkitRequestFullscreen), u = document.exitFullscreen ?? document.webkitExitFullscreen;
-            ue === r.value ? u == null || u.call(document).catch(() => {
-            }) : n && r.value && n.call(r.value).catch(() => {
+            const Se = document.fullscreenElement ?? document.webkitFullscreenElement ?? null, _e = ((j = B.value) == null ? void 0 : j.requestFullscreen) ?? ((Ee = B.value) == null ? void 0 : Ee.webkitRequestFullscreen), ke = document.exitFullscreen ?? document.webkitExitFullscreen;
+            Se === B.value ? ke == null || ke.call(document).catch(() => {
+            }) : _e && B.value && _e.call(B.value).catch(() => {
             });
             break;
           }
           case "p":
-            b && W();
+            Y && ge();
             break;
         }
     }
-    return fe(() => {
-      document.addEventListener("keydown", le);
-    }), X(() => {
-      document.removeEventListener("keydown", le);
-    }), (d, c) => (i(), v("div", {
+    return He(() => {
+      document.addEventListener("keydown", Le);
+    }), ne(() => {
+      document.removeEventListener("keydown", Le);
+    }), (u, v) => (d(), f("div", {
       ref_key: "rootEl",
-      ref: r,
-      class: C(["gvp-root", l.class]),
-      style: ce({ width: G.value, aspectRatio: N.value }),
-      onMouseenter: c[8] || (c[8] = (O) => {
-        h.value = !0, Y();
+      ref: B,
+      class: w(["gvp-root", n.class]),
+      style: re({ width: ae.value, aspectRatio: Ie.value }),
+      onMouseenter: v[12] || (v[12] = (P) => {
+        x.value = !0, W();
       }),
-      onMouseleave: c[9] || (c[9] = (O) => {
-        h.value = !1, ve();
+      onMouseleave: v[13] || (v[13] = (P) => {
+        x.value = !1, G();
       })
     }, [
-      A.value ? (i(), v("iframe", {
+      q.value ? (d(), f("iframe", {
         key: 0,
         class: "gvp-video gvp-youtube",
-        src: y.value ?? void 0,
+        src: Me.value ?? void 0,
         title: "YouTube video player",
         allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
         allowfullscreen: "",
         referrerpolicy: "strict-origin-when-cross-origin"
-      }, null, 8, Nt)) : (i(), U(Ee, {
-        key: 1,
+      }, null, 8, An)) : (d(), z(Ge, {
         ref_key: "hlsPlayerRef",
-        ref: o,
-        controls: R.value,
+        ref: c,
+        key: H.value,
+        controls: J.value,
         "hls-config": t.hlsConfig,
         "is-hls": t.isHls,
         loop: t.loop,
         muted: t.muted,
         "auto-play": t.autoPlay,
-        "audio-track-index": x.value,
+        "audio-track-index": $.value,
+        "quality-level-index": m.value,
         "plays-inline": !0,
-        poster: t.poster,
-        src: t.src,
+        poster: V.value,
+        src: H.value,
         class: "gvp-video",
         preload: "metadata",
-        onAudioTracks: I,
-        onPause: c[0] || (c[0] = (O) => {
-          g.value = !1, e("pause");
+        onAudioTracks: Te,
+        onQualityLevels: X,
+        onCurrentLevel: v[0] || (v[0] = (P) => b.value = P),
+        onEnded: pe,
+        onPause: v[1] || (v[1] = (P) => {
+          h.value = !1, e("pause");
         }),
-        onPlay: c[1] || (c[1] = (O) => {
-          g.value = !0, e("play");
+        onPlay: v[2] || (v[2] = (P) => {
+          h.value = !0, e("play");
         })
       }, {
-        default: xe(() => [
-          ke(d.$slots, "default")
+        default: Ye(() => [
+          Fe(u.$slots, "default")
         ]),
         _: 3
-      }, 8, ["controls", "hls-config", "is-hls", "loop", "muted", "auto-play", "audio-track-index", "poster", "src"])),
-      A.value ? M("", !0) : (i(), v("div", Ot)),
-      t.showDeviceToggle ? (i(), v("div", jt, [
-        s("div", Ut, [
-          s("button", {
-            "aria-pressed": m.value === "desktop",
-            class: C(["gvp-toggle-btn", { "is-active": m.value === "desktop" }]),
+      }, 8, ["controls", "hls-config", "is-hls", "loop", "muted", "auto-play", "audio-track-index", "quality-level-index", "poster", "src"])),
+      q.value ? M("", !0) : (d(), f("div", Hn)),
+      t.showDeviceToggle ? (d(), f("div", Bn, [
+        r("div", Vn, [
+          r("button", {
+            "aria-pressed": o.value === "desktop",
+            class: w(["gvp-toggle-btn", { "is-active": o.value === "desktop" }]),
             "aria-label": "Desktop view",
             type: "button",
-            onClick: c[2] || (c[2] = (O) => m.value = "desktop")
+            onClick: v[3] || (v[3] = (P) => o.value = "desktop")
           }, [
-            j(Tt)
-          ], 10, Zt),
-          c[10] || (c[10] = s("div", { class: "gvp-toggle-divider" }, null, -1)),
-          s("button", {
-            "aria-pressed": m.value === "mobile",
-            class: C(["gvp-toggle-btn", { "is-active": m.value === "mobile" }]),
+            Z(Ln)
+          ], 10, qn),
+          v[14] || (v[14] = r("div", { class: "gvp-toggle-divider" }, null, -1)),
+          r("button", {
+            "aria-pressed": o.value === "mobile",
+            class: w(["gvp-toggle-btn", { "is-active": o.value === "mobile" }]),
             "aria-label": "Mobile view",
             type: "button",
-            onClick: c[3] || (c[3] = (O) => m.value = "mobile")
+            onClick: v[4] || (v[4] = (P) => o.value = "mobile")
           }, [
-            j(St)
-          ], 10, qt)
+            Z(_n)
+          ], 10, Dn)
         ])
       ])) : M("", !0),
-      t.closable ? (i(), v("button", {
+      t.closable ? (d(), f("button", {
         key: 4,
         "aria-label": "Close",
         class: "gvp-close",
         type: "button",
-        onClick: c[4] || (c[4] = (O) => e("close"))
+        onClick: v[5] || (v[5] = (P) => e("close"))
       }, [
-        j(At)
+        Z(Tn)
       ])) : M("", !0),
-      D.value && !E.value ? (i(), U(He, {
+      le.value && !A.value ? (d(), z(rt, {
         key: 5,
-        tracks: P.value,
-        "active-index": B.value,
-        onSelect: c[5] || (c[5] = (O) => x.value = O)
+        tracks: _.value,
+        "active-index": we.value,
+        onSelect: v[6] || (v[6] = (P) => $.value = P)
       }, null, 8, ["tracks", "active-index"])) : M("", !0),
-      !A.value && !E.value ? (i(), U(Fe, {
+      !q.value && !A.value ? (d(), z(pt, {
         key: 6,
-        speed: _.value,
-        onSelect: pe
+        speed: C.value,
+        onSelect: xe
       }, null, 8, ["speed"])) : M("", !0),
-      !A.value && !E.value ? (i(), U(qe, {
+      !q.value && !A.value ? (d(), z(yt, {
         key: 7,
-        video: S.value
+        video: Q.value
       }, null, 8, ["video"])) : M("", !0),
-      !A.value && J(b) && !E.value ? (i(), v("button", {
+      !q.value && te(Y) && !A.value ? (d(), f("button", {
         key: 8,
         type: "button",
-        class: C(["gvp-pip-btn", { "is-active": k.value }]),
-        "aria-label": k.value ? "Exit picture-in-picture" : "Picture-in-picture",
-        "aria-pressed": k.value,
-        onClick: W
+        class: w(["gvp-pip-btn", { "is-active": p.value }]),
+        "aria-label": p.value ? "Exit picture-in-picture" : "Picture-in-picture",
+        "aria-pressed": p.value,
+        onClick: ge
       }, [
-        j(Ce)
-      ], 10, zt)) : M("", !0),
-      !A.value && E.value ? (i(), v("button", {
+        Z(Ze)
+      ], 10, Fn)) : M("", !0),
+      !q.value && A.value ? (d(), f("button", {
         key: 9,
         type: "button",
         class: "gvp-click-layer",
-        "aria-label": g.value ? "Pause" : "Play",
-        onClick: Q
-      }, null, 8, Wt)) : M("", !0),
-      !A.value && !E.value && !g.value ? (i(), v("div", Yt, [
-        s("button", {
+        "aria-label": h.value ? "Pause" : "Play",
+        onClick: se
+      }, null, 8, Rn)) : M("", !0),
+      !q.value && !A.value && !h.value ? (d(), f("div", On, [
+        r("button", {
           "aria-label": "Play",
           class: "gvp-play",
           type: "button",
-          onClick: Q,
-          onMouseenter: c[6] || (c[6] = (O) => p.value = !0),
-          onMouseleave: c[7] || (c[7] = (O) => p.value = !1)
+          onClick: se,
+          onMouseenter: v[7] || (v[7] = (P) => g.value = !0),
+          onMouseleave: v[8] || (v[8] = (P) => g.value = !1)
         }, [
-          j(Bt),
-          t.tooltipText && p.value ? (i(), v("span", Kt, q(t.tooltipText), 1)) : M("", !0)
+          Z(Pn),
+          t.tooltipText && g.value ? (d(), f("span", Un, U(t.tooltipText), 1)) : M("", !0)
         ], 32)
       ])) : M("", !0),
-      !A.value && E.value ? (i(), U(Pt, {
+      !q.value && A.value ? (d(), z(Cn, {
         key: 11,
-        video: S.value,
-        "is-playing": g.value,
-        container: r.value,
-        "on-toggle-play": Q
-      }, null, 8, ["video", "is-playing", "container"])) : M("", !0),
-      !A.value && !E.value ? (i(), v("div", Jt)) : M("", !0)
+        video: Q.value,
+        "is-playing": h.value,
+        container: B.value,
+        "on-toggle-play": se,
+        "quality-levels": S.value,
+        "current-level": b.value,
+        "selected-level": m.value,
+        thumbnails: O.value,
+        chapters: me.value,
+        "has-prev": Pe.value,
+        "has-next": oe.value,
+        onSelectLevel: v[9] || (v[9] = (P) => m.value = P),
+        onPrev: v[10] || (v[10] = (P) => de(N.value - 1, !0)),
+        onNext: v[11] || (v[11] = (P) => de(N.value + 1, !0))
+      }, null, 8, ["video", "is-playing", "container", "quality-levels", "current-level", "selected-level", "thumbnails", "chapters", "has-prev", "has-next"])) : M("", !0),
+      !q.value && !A.value ? (d(), f("div", Zn)) : M("", !0)
     ], 38));
   }
 });
 export {
-  Ee as HLSPlayer,
-  Qt as VueVideoPlayer,
-  Dt as parseYouTubeId,
-  Rt as parseYouTubeStart,
-  Ft as youTubeEmbedUrl
+  Ge as HLSPlayer,
+  Wn as VueVideoPlayer,
+  In as parseYouTubeId,
+  Sn as parseYouTubeStart,
+  Nn as youTubeEmbedUrl
 };
 //# sourceMappingURL=index.mjs.map