@glitchlab/vue-video-player 1.2.0 → 1.4.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 ee from "hls.js";
-function he(t, a, l) {
+import { defineComponent as S, ref as k, onMounted as be, watch as R, onBeforeUnmount as ne, openBlock as i, createElementBlock as v, normalizeClass as y, renderSlot as Ee, createElementVNode as l, computed as N, createVNode as U, toDisplayString as O, Fragment as oe, renderList as ae, createCommentVNode as T, createBlock as j, normalizeStyle as ge, unref as ee, withCtx as Se } from "vue";
+import J from "hls.js";
+function xe(t, o, s) {
   const e = t == null ? void 0 : t.trim();
   if (e) return e;
-  if (a) {
+  if (o) {
     try {
-      const m = new Intl.DisplayNames(void 0, { type: "language" }).of(a);
-      if (m && m !== a) return m;
+      const a = new Intl.DisplayNames(void 0, { type: "language" }).of(o);
+      if (a && a !== o) return a;
     } catch {
     }
-    return a;
+    return o;
   }
-  return `Audio ${l + 1}`;
+  return `Audio ${s + 1}`;
 }
-const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "poster"], Ee = /* @__PURE__ */ T({
+const He = {
+  index: -1,
+  height: 0,
+  label: "Auto"
+};
+function Ae(t, o) {
+  return t > 0 ? `${t}p` : `Level ${o + 1}`;
+}
+const Be = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "poster"], Ve = /* @__PURE__ */ S({
   __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", "audio-tracks", "quality-levels", "current-level"],
+  setup(t, { expose: o, emit: s }) {
+    const e = t, f = s, a = k(null), w = k(null);
+    let m, $;
+    const E = globalThis.window !== void 0 && J.isSupported(), _ = (u) => !!e.isHls || E && u.endsWith(".m3u8");
+    function A() {
+      $ == null || $(), $ = void 0, m == null || m(), m = void 0, w.value && (w.value.destroy(), w.value = null);
+      const u = a.value;
+      if (u) {
+        for (u.pause(), u.removeAttribute("src"); u.firstChild; ) u.firstChild.remove();
+        u.load(), f("audio-tracks", []), f("quality-levels", []), f("current-level", -1);
       }
     }
-    function k(r) {
-      var R, H, A;
-      const b = m.value;
-      if (!b || !r) return;
-      _();
-      const E = () => {
-        e.autoPlay && b.play().catch(() => {
+    function b(u) {
+      var W, M, Z;
+      const C = a.value;
+      if (!C || !u) return;
+      A();
+      const B = () => {
+        e.autoPlay && C.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 (_(u)) {
+        const g = new J(e.hlsConfig);
+        w.value = g;
+        const P = () => {
+          const I = g.audioTracks.map((H, z) => ({
+            index: z,
+            label: xe(H.name, H.lang, z),
+            lang: H.lang || void 0
+          }));
+          f("audio-tracks", I);
+        }, V = () => {
+          const I = g.levels.map((H, z) => ({
+            index: z,
+            height: H.height || 0,
+            label: Ae(H.height || 0, z)
           }));
-          o("audio-tracks", D);
+          f("quality-levels", I);
         };
-        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);
+        g.on(J.Events.MANIFEST_PARSED, B), g.on(J.Events.MANIFEST_PARSED, V), g.on(J.Events.LEVELS_UPDATED, V), g.on(J.Events.LEVEL_SWITCHED, (I, H) => {
+          f("current-level", H.level);
+        }), g.on(J.Events.AUDIO_TRACKS_UPDATED, P), g.on(J.Events.AUDIO_TRACK_SWITCHED, P), g.on(J.Events.ERROR, (I, H) => {
+          H.fatal && (g.destroy(), w.value = null);
+        }), g.attachMedia(C), g.loadSource(u);
       } else {
-        b.src = r, b.load(), b.addEventListener("loadedmetadata", E, { once: !0 }), L = () => {
-          b.removeEventListener("loadedmetadata", E);
+        C.src = u, C.load(), C.addEventListener("loadedmetadata", B, { once: !0 }), $ = () => {
+          C.removeEventListener("loadedmetadata", B);
         };
-        const y = b.audioTracks;
-        if (y) {
-          const I = () => {
-            const D = [];
-            for (let B = 0; B < y.length; B++) {
-              const N = y[B];
-              D.push({
-                index: B,
-                label: he(N.label, N.language, B),
-                lang: N.language || void 0
+        const g = C.audioTracks;
+        if (g) {
+          const P = () => {
+            const V = [];
+            for (let I = 0; I < g.length; I++) {
+              const H = g[I];
+              V.push({
+                index: I,
+                label: xe(H.label, H.language, I),
+                lang: H.language || void 0
               });
             }
-            o("audio-tracks", D);
+            f("audio-tracks", V);
           };
-          (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);
+          (W = g.addEventListener) == null || W.call(g, "addtrack", P), (M = g.addEventListener) == null || M.call(g, "removetrack", P), (Z = g.addEventListener) == null || Z.call(g, "change", P), g.length > 0 && P(), m = () => {
+            var V, I, H;
+            (V = g.removeEventListener) == null || V.call(g, "addtrack", P), (I = g.removeEventListener) == null || I.call(g, "removetrack", P), (H = g.removeEventListener) == null || H.call(g, "change", P);
           };
         }
       }
     }
-    function h(r) {
-      var R;
-      if (r == null || r < 0) return;
-      const b = g.value;
-      if (b) {
-        b.audioTrack !== r && (b.audioTrack = r);
+    function h(u) {
+      var W;
+      if (u == null || u < 0) return;
+      const C = w.value;
+      if (C) {
+        C.audioTrack !== u && (C.audioTrack = u);
         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 = (W = a.value) == null ? void 0 : W.audioTracks;
+      if (B)
+        for (let M = 0; M < B.length; M++)
+          B[M].enabled = M === u;
     }
-    return fe(() => {
-      e.src && k(e.src);
-    }), F(
+    function x(u) {
+      if (u == null) return;
+      const C = w.value;
+      C && C.currentLevel !== u && (C.currentLevel = u);
+    }
+    return be(() => {
+      e.src && b(e.src);
+    }), R(
       () => e.src,
-      (r) => {
-        r && k(r);
+      (u) => {
+        u && b(u);
       }
-    ), F(
+    ), R(
       () => e.audioTrackIndex,
-      (r) => h(r)
-    ), X(_), a({ videoEl: m }), (r, b) => (i(), v("video", {
+      (u) => h(u)
+    ), R(
+      () => e.qualityLevelIndex,
+      (u) => x(u)
+    ), ne(A), o({ videoEl: a }), (u, C) => (i(), v("video", {
       ref_key: "videoEl",
-      ref: m,
+      ref: a,
       muted: t.muted,
       loop: t.loop,
       controls: t.controls,
@@ -123,22 +149,22 @@ 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: y(e.class),
+      onPlay: C[0] || (C[0] = (B) => f("play")),
+      onPause: C[1] || (C[1] = (B) => f("pause"))
     }, [
-      ke(r.$slots, "default")
-    ], 42, _e));
+      Ee(u.$slots, "default")
+    ], 42, Be));
   }
-}), $e = { name: "IconAudio" }, Le = /* @__PURE__ */ T({
-  ...$e,
+}), qe = { name: "IconAudio" }, De = /* @__PURE__ */ S({
+  ...qe,
   props: {
     class: {}
   },
   setup(t) {
-    const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    const o = t;
+    return (s, e) => (i(), v("svg", {
+      class: y(["gvp-icon", o.class]),
       width: "16",
       height: "16",
       viewBox: "0 0 24 24",
@@ -146,13 +172,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", {
+      l("path", {
         d: "M3 14V10C3 9.44772 3.44772 9 4 9H6.58579C6.851 9 7.10536 8.89464 7.29289 8.70711L11.2929 4.70711C11.9229 4.07714 13 4.52331 13 5.41421V18.5858C13 19.4767 11.9229 19.9229 11.2929 19.2929L7.29289 15.2929C7.10536 15.1054 6.851 15 6.58579 15H4C3.44772 15 3 14.5523 3 14Z",
         stroke: "currentColor",
         "stroke-width": "1.5",
         "stroke-linejoin": "round"
       }, null, -1),
-      s("path", {
+      l("path", {
         d: "M16.5 8C17.5 9 18 10.5 18 12C18 13.5 17.5 15 16.5 16M19 5.5C20.5 7 21.5 9.5 21.5 12C21.5 14.5 20.5 17 19 18.5",
         stroke: "currentColor",
         "stroke-width": "1.5",
@@ -160,15 +186,15 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), Pe = { name: "IconChevron" }, ye = /* @__PURE__ */ T({
-  ...Pe,
+}), Re = { name: "IconChevron" }, Le = /* @__PURE__ */ S({
+  ...Re,
   props: {
     class: {}
   },
   setup(t) {
-    const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    const o = t;
+    return (s, e) => (i(), v("svg", {
+      class: y(["gvp-icon", o.class]),
       width: "12",
       height: "12",
       viewBox: "0 0 24 24",
@@ -176,7 +202,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", {
+      l("path", {
         d: "M6 9L12 15L18 9",
         stroke: "currentColor",
         "stroke-width": "2",
@@ -185,80 +211,80 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), Me = ["aria-expanded"], Te = { class: "gvp-audio-label" }, Ie = {
+}), Fe = ["aria-expanded"], Ne = { class: "gvp-audio-label" }, Oe = {
   key: 0,
   class: "gvp-audio-menu",
   role: "listbox",
   "aria-label": "Audio tracks"
-}, Se = ["aria-selected", "onClick"], He = /* @__PURE__ */ T({
+}, Ue = ["aria-selected", "onClick"], Ze = /* @__PURE__ */ S({
   __name: "AudioTrackSwitcher",
   props: {
     tracks: {},
     activeIndex: {}
   },
   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]
+  setup(t, { emit: o }) {
+    const s = t, e = o, f = k(!1), a = k(null), w = N(
+      () => s.tracks.find((_) => _.index === s.activeIndex) ?? s.tracks[0]
     );
-    function p(x) {
-      m.value && !m.value.contains(x.target) && (o.value = !1);
+    function m(_) {
+      a.value && !a.value.contains(_.target) && (f.value = !1);
     }
-    function L(x) {
-      x.key === "Escape" && (o.value = !1);
+    function $(_) {
+      _.key === "Escape" && (f.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(f, (_) => {
+      _ ? (document.addEventListener("mousedown", m), document.addEventListener("keydown", $)) : (document.removeEventListener("mousedown", m), document.removeEventListener("keydown", $));
+    }), ne(() => {
+      document.removeEventListener("mousedown", m), document.removeEventListener("keydown", $);
     });
-    function P(x) {
-      e("select", x), o.value = !1;
+    function E(_) {
+      e("select", _), f.value = !1;
     }
-    return (x, _) => {
-      var k;
+    return (_, A) => {
+      var b;
       return i(), v("div", {
         ref_key: "rootEl",
-        ref: m,
+        ref: a,
         class: "gvp-audio"
       }, [
-        s("button", {
+        l("button", {
           type: "button",
           class: "gvp-audio-btn",
           "aria-haspopup": "listbox",
-          "aria-expanded": o.value,
+          "aria-expanded": f.value,
           "aria-label": "Audio track",
-          onClick: _[0] || (_[0] = (h) => o.value = !o.value)
+          onClick: A[0] || (A[0] = (h) => f.value = !f.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, [
+          U(De),
+          l("span", Ne, O((b = w.value) == null ? void 0 : b.label), 1),
+          U(Le)
+        ], 8, Fe),
+        f.value ? (i(), v("ul", Oe, [
           (i(!0), v(oe, null, ae(t.tracks, (h) => (i(), v("li", {
             key: h.index
           }, [
-            s("button", {
+            l("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)
+              class: y(["gvp-audio-menu-item", { "is-active": h.index === t.activeIndex }]),
+              onClick: (x) => E(h.index)
+            }, O(h.label), 11, Ue)
           ]))), 128))
-        ])) : M("", !0)
+        ])) : T("", !0)
       ], 512);
     };
   }
-}), Be = { name: "IconSpeed" }, we = /* @__PURE__ */ T({
-  ...Be,
+}), je = { name: "IconSpeed" }, $e = /* @__PURE__ */ S({
+  ...je,
   props: {
     class: {}
   },
   setup(t) {
-    const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    const o = t;
+    return (s, e) => (i(), v("svg", {
+      class: y(["gvp-icon", o.class]),
       width: "16",
       height: "16",
       viewBox: "0 0 24 24",
@@ -266,12 +292,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", {
+      l("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", {
+      l("path", {
         d: "M12 8V12L14.5 14.5",
         stroke: "currentColor",
         "stroke-width": "1.5",
@@ -280,72 +306,72 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), Ve = ["aria-expanded"], Ae = { class: "gvp-speed-label" }, De = {
+}), Qe = ["aria-expanded"], We = { class: "gvp-speed-label" }, ze = {
   key: 0,
   class: "gvp-speed-menu",
   role: "listbox",
   "aria-label": "Playback speed"
-}, Re = ["aria-selected", "onClick"], Fe = /* @__PURE__ */ T({
+}, Ye = ["aria-selected", "onClick"], Ke = /* @__PURE__ */ S({
   __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);
+  setup(t, { emit: o }) {
+    const s = [0.5, 0.75, 1, 1.25, 1.5, 2], e = o, f = k(!1), a = k(null);
+    function w(E) {
+      a.value && !a.value.contains(E.target) && (f.value = !1);
     }
-    function p(P) {
-      P.key === "Escape" && (o.value = !1);
+    function m(E) {
+      E.key === "Escape" && (f.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(f, (E) => {
+      E ? (document.addEventListener("mousedown", w), document.addEventListener("keydown", m)) : (document.removeEventListener("mousedown", w), document.removeEventListener("keydown", m));
+    }), ne(() => {
+      document.removeEventListener("mousedown", w), document.removeEventListener("keydown", m);
     });
-    function L(P) {
-      e("select", P), o.value = !1;
+    function $(E) {
+      e("select", E), f.value = !1;
     }
-    return (P, x) => (i(), v("div", {
+    return (E, _) => (i(), v("div", {
       ref_key: "rootEl",
-      ref: m,
+      ref: a,
       class: "gvp-speed"
     }, [
-      s("button", {
+      l("button", {
         type: "button",
         class: "gvp-speed-btn",
         "aria-haspopup": "listbox",
-        "aria-expanded": o.value,
+        "aria-expanded": f.value,
         "aria-label": "`Playback speed: ${speed === 1 ? '1×' : speed + '×'}`",
-        onClick: x[0] || (x[0] = (_) => o.value = !o.value)
+        onClick: _[0] || (_[0] = (A) => f.value = !f.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", {
+        U($e),
+        l("span", We, O(t.speed === 1 ? "1×" : `${t.speed}×`), 1),
+        U(Le)
+      ], 8, Qe),
+      f.value ? (i(), v("ul", ze, [
+        (i(), v(oe, null, ae(s, (A) => l("li", { key: A }, [
+          l("button", {
             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": A === t.speed,
+            class: y(["gvp-speed-menu-item", { "is-active": A === t.speed }]),
+            onClick: (b) => $(A)
+          }, O(A === 1 ? "Normal" : `${A}×`), 11, Ye)
         ])), 64))
-      ])) : M("", !0)
+      ])) : T("", !0)
     ], 512));
   }
-}), Ne = { name: "IconCaptions" }, be = /* @__PURE__ */ T({
-  ...Ne,
+}), Je = { name: "IconCaptions" }, Pe = /* @__PURE__ */ S({
+  ...Je,
   props: {
     class: {}
   },
   setup(t) {
-    const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    const o = t;
+    return (s, e) => (i(), v("svg", {
+      class: y(["gvp-icon", o.class]),
       width: "18",
       height: "18",
       viewBox: "0 0 24 24",
@@ -353,7 +379,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", {
+      l("rect", {
         x: "2",
         y: "5",
         width: "20",
@@ -362,7 +388,7 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
         stroke: "currentColor",
         "stroke-width": "1.5"
       }, null, -1),
-      s("path", {
+      l("path", {
         d: "M7 12H11M13 12H17M7 15H9M11 15H13M15 15H17",
         stroke: "currentColor",
         "stroke-width": "1.5",
@@ -370,120 +396,120 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), Oe = ["aria-expanded", "aria-pressed"], je = {
+}), Xe = ["aria-expanded", "aria-pressed"], Ge = {
   key: 0,
   class: "gvp-captions-menu",
   role: "listbox",
   "aria-label": "Captions"
-}, Ue = ["aria-selected"], Ze = ["aria-selected", "onClick"], qe = /* @__PURE__ */ T({
+}, et = ["aria-selected"], tt = ["aria-selected", "onClick"], nt = /* @__PURE__ */ S({
   __name: "CaptionsSwitcher",
   props: {
     video: {}
   },
   setup(t) {
-    const a = t, l = w([]), e = w(-1), o = w(!1), m = w(null);
-    function g(k) {
+    const o = t, s = k([]), e = k(-1), f = k(!1), a = k(null);
+    function w(b) {
       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}` });
+      for (let u = 0; u < b.length; u++) {
+        const C = b[u];
+        (C.kind === "subtitles" || C.kind === "captions") && h.push({ index: u, label: C.label || C.language || `Track ${u + 1}` });
       }
-      l.value = h;
-      let r = -1;
-      for (let b = 0; b < k.length; b++)
-        if (k[b].mode === "showing") {
-          r = b;
+      s.value = h;
+      let x = -1;
+      for (let u = 0; u < b.length; u++)
+        if (b[u].mode === "showing") {
+          x = u;
           break;
         }
-      e.value = r;
+      e.value = x;
     }
-    let p = null;
-    F(() => a.video, (k) => {
-      if (p == null || p(), p = null, !k) {
-        l.value = [], e.value = -1;
+    let m = null;
+    R(() => o.video, (b) => {
+      if (m == null || m(), m = null, !b) {
+        s.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 h = b.textTracks;
+      w(h);
+      const x = () => w(h);
+      typeof h.addEventListener == "function" && (h.addEventListener("addtrack", x), h.addEventListener("removetrack", x), h.addEventListener("change", x), m = () => {
+        h.removeEventListener("addtrack", x), h.removeEventListener("removetrack", x), h.removeEventListener("change", x);
       });
-    }, { immediate: !0 }), X(() => {
-      p == null || p(), document.removeEventListener("mousedown", L), document.removeEventListener("keydown", P);
+    }, { immediate: !0 }), ne(() => {
+      m == null || m(), document.removeEventListener("mousedown", $), document.removeEventListener("keydown", E);
     });
-    function L(k) {
-      m.value && !m.value.contains(k.target) && (o.value = !1);
+    function $(b) {
+      a.value && !a.value.contains(b.target) && (f.value = !1);
     }
-    function P(k) {
-      k.key === "Escape" && (o.value = !1);
+    function E(b) {
+      b.key === "Escape" && (f.value = !1);
     }
-    F(o, (k) => {
-      k ? (document.addEventListener("mousedown", L), document.addEventListener("keydown", P)) : (document.removeEventListener("mousedown", L), document.removeEventListener("keydown", P));
+    R(f, (b) => {
+      b ? (document.addEventListener("mousedown", $), document.addEventListener("keydown", E)) : (document.removeEventListener("mousedown", $), document.removeEventListener("keydown", E));
     });
-    function x() {
-      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;
+    function _() {
+      if (!o.video) return;
+      const b = o.video.textTracks;
+      for (let h = 0; h < b.length; h++) b[h].mode = "hidden";
+      e.value = -1, f.value = !1;
     }
-    function _(k) {
-      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;
+    function A(b) {
+      if (!o.video) return;
+      const h = o.video.textTracks;
+      for (let x = 0; x < h.length; x++)
+        h[x].mode = x === b ? "showing" : "hidden";
+      e.value = b, f.value = !1;
     }
-    return (k, h) => l.value.length > 0 ? (i(), v("div", {
+    return (b, h) => s.value.length > 0 ? (i(), v("div", {
       key: 0,
       ref_key: "rootEl",
-      ref: m,
+      ref: a,
       class: "gvp-captions"
     }, [
-      s("button", {
+      l("button", {
         type: "button",
-        class: C(["gvp-captions-btn", { "is-active": e.value >= 0 }]),
+        class: y(["gvp-captions-btn", { "is-active": e.value >= 0 }]),
         "aria-haspopup": "listbox",
-        "aria-expanded": o.value,
+        "aria-expanded": f.value,
         "aria-pressed": e.value >= 0,
         "aria-label": "Captions",
-        onClick: h[0] || (h[0] = (r) => o.value = !o.value)
+        onClick: h[0] || (h[0] = (x) => f.value = !f.value)
       }, [
-        j(be)
-      ], 10, Oe),
-      o.value ? (i(), v("ul", je, [
-        s("li", null, [
-          s("button", {
+        U(Pe)
+      ], 10, Xe),
+      f.value ? (i(), v("ul", Ge, [
+        l("li", null, [
+          l("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: y(["gvp-captions-menu-item", { "is-active": e.value === -1 }]),
+            onClick: _
+          }, " Off ", 10, et)
         ]),
-        (i(!0), v(oe, null, ae(l.value, (r) => (i(), v("li", {
-          key: r.index
+        (i(!0), v(oe, null, ae(s.value, (x) => (i(), v("li", {
+          key: x.index
         }, [
-          s("button", {
+          l("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": x.index === e.value,
+            class: y(["gvp-captions-menu-item", { "is-active": x.index === e.value }]),
+            onClick: (u) => A(x.index)
+          }, O(x.label), 11, tt)
         ]))), 128))
-      ])) : M("", !0)
-    ], 512)) : M("", !0);
+      ])) : T("", !0)
+    ], 512)) : T("", !0);
   }
-}), ze = { name: "IconPause" }, We = /* @__PURE__ */ T({
-  ...ze,
+}), lt = { name: "IconPause" }, ot = /* @__PURE__ */ S({
+  ...lt,
   props: {
     class: {}
   },
   setup(t) {
-    const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    const o = t;
+    return (s, e) => (i(), v("svg", {
+      class: y(["gvp-icon", o.class]),
       width: "16",
       height: "16",
       viewBox: "0 0 24 24",
@@ -491,7 +517,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", {
+      l("rect", {
         x: "6",
         y: "5",
         width: "4",
@@ -499,7 +525,7 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
         rx: "1",
         fill: "currentColor"
       }, null, -1),
-      s("rect", {
+      l("rect", {
         x: "14",
         y: "5",
         width: "4",
@@ -509,15 +535,15 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), Ye = { name: "IconPlaySolid" }, Ke = /* @__PURE__ */ T({
-  ...Ye,
+}), at = { name: "IconPlaySolid" }, st = /* @__PURE__ */ S({
+  ...at,
   props: {
     class: {}
   },
   setup(t) {
-    const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    const o = t;
+    return (s, e) => (i(), v("svg", {
+      class: y(["gvp-icon", o.class]),
       width: "16",
       height: "16",
       viewBox: "0 0 24 24",
@@ -525,21 +551,21 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
     }, [...e[0] || (e[0] = [
-      s("path", {
+      l("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,
+}), it = { name: "IconVolumeHigh" }, rt = /* @__PURE__ */ S({
+  ...it,
   props: {
     class: {}
   },
   setup(t) {
-    const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    const o = t;
+    return (s, e) => (i(), v("svg", {
+      class: y(["gvp-icon", o.class]),
       width: "18",
       height: "18",
       viewBox: "0 0 24 24",
@@ -547,13 +573,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", {
+      l("path", {
         d: "M3 14V10C3 9.44772 3.44772 9 4 9H6.58579C6.851 9 7.10536 8.89464 7.29289 8.70711L11.2929 4.70711C11.9229 4.07714 13 4.52331 13 5.41421V18.5858C13 19.4767 11.9229 19.9229 11.2929 19.2929L7.29289 15.2929C7.10536 15.1054 6.851 15 6.58579 15H4C3.44772 15 3 14.5523 3 14Z",
         stroke: "currentColor",
         "stroke-width": "1.5",
         "stroke-linejoin": "round"
       }, null, -1),
-      s("path", {
+      l("path", {
         d: "M16.5 8C17.5 9 18 10.5 18 12C18 13.5 17.5 15 16.5 16M19 5.5C20.5 7 21.5 9.5 21.5 12C21.5 14.5 20.5 17 19 18.5",
         stroke: "currentColor",
         "stroke-width": "1.5",
@@ -561,15 +587,15 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), Ge = { name: "IconVolumeLow" }, Qe = /* @__PURE__ */ T({
-  ...Ge,
+}), ut = { name: "IconVolumeLow" }, ct = /* @__PURE__ */ S({
+  ...ut,
   props: {
     class: {}
   },
   setup(t) {
-    const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    const o = t;
+    return (s, e) => (i(), v("svg", {
+      class: y(["gvp-icon", o.class]),
       width: "18",
       height: "18",
       viewBox: "0 0 24 24",
@@ -577,13 +603,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", {
+      l("path", {
         d: "M3 14V10C3 9.44772 3.44772 9 4 9H6.58579C6.851 9 7.10536 8.89464 7.29289 8.70711L11.2929 4.70711C11.9229 4.07714 13 4.52331 13 5.41421V18.5858C13 19.4767 11.9229 19.9229 11.2929 19.2929L7.29289 15.2929C7.10536 15.1054 6.851 15 6.58579 15H4C3.44772 15 3 14.5523 3 14Z",
         stroke: "currentColor",
         "stroke-width": "1.5",
         "stroke-linejoin": "round"
       }, null, -1),
-      s("path", {
+      l("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 +617,15 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), et = { name: "IconVolumeMuted" }, tt = /* @__PURE__ */ T({
-  ...et,
+}), dt = { name: "IconVolumeMuted" }, vt = /* @__PURE__ */ S({
+  ...dt,
   props: {
     class: {}
   },
   setup(t) {
-    const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    const o = t;
+    return (s, e) => (i(), v("svg", {
+      class: y(["gvp-icon", o.class]),
       width: "18",
       height: "18",
       viewBox: "0 0 24 24",
@@ -607,13 +633,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", {
+      l("path", {
         d: "M3 14V10C3 9.44772 3.44772 9 4 9H6.58579C6.851 9 7.10536 8.89464 7.29289 8.70711L11.2929 4.70711C11.9229 4.07714 13 4.52331 13 5.41421V18.5858C13 19.4767 11.9229 19.9229 11.2929 19.2929L7.29289 15.2929C7.10536 15.1054 6.851 15 6.58579 15H4C3.44772 15 3 14.5523 3 14Z",
         stroke: "currentColor",
         "stroke-width": "1.5",
         "stroke-linejoin": "round"
       }, null, -1),
-      s("path", {
+      l("path", {
         d: "M16 9L22 15M22 9L16 15",
         stroke: "currentColor",
         "stroke-width": "1.5",
@@ -621,15 +647,44 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), nt = { name: "IconPiP" }, Ce = /* @__PURE__ */ T({
-  ...nt,
+}), pt = { name: "IconQuality" }, ft = /* @__PURE__ */ S({
+  ...pt,
+  props: {
+    class: {}
+  },
+  setup(t) {
+    const o = t;
+    return (s, e) => (i(), v("svg", {
+      class: y(["gvp-icon", o.class]),
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, [...e[0] || (e[0] = [
+      l("path", {
+        d: "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),
+      l("path", {
+        d: "M3 12C3 12.6 3.08 13.18 3.23 13.73L4.6 14.5C4.86 14.65 5.02 14.94 5 15.24C4.98 15.58 4.96 15.92 5.07 16.24C5.18 16.56 5.39 16.83 5.62 17.08C5.83 17.3 6.13 17.4 6.42 17.36L7.99 17.13C8.28 17.09 8.57 17.21 8.74 17.45C9.07 17.93 9.49 18.34 9.97 18.66C10.21 18.83 10.34 19.11 10.31 19.4L10.13 20.97C10.1 21.26 10.21 21.55 10.43 21.74C10.91 22.16 11.45 22 12 22C12.55 22 13.09 22.16 13.57 21.74C13.79 21.55 13.9 21.26 13.87 20.97L13.69 19.4C13.66 19.11 13.79 18.83 14.03 18.66",
+        stroke: "currentColor",
+        "stroke-width": "1.5",
+        "stroke-linecap": "round"
+      }, null, -1)
+    ])], 2));
+  }
+}), mt = { name: "IconPiP" }, Me = /* @__PURE__ */ S({
+  ...mt,
   props: {
     class: {}
   },
   setup(t) {
-    const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    const o = t;
+    return (s, e) => (i(), v("svg", {
+      class: y(["gvp-icon", o.class]),
       width: "18",
       height: "18",
       viewBox: "0 0 24 24",
@@ -637,7 +692,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", {
+      l("rect", {
         x: "2",
         y: "4",
         width: "20",
@@ -646,7 +701,7 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
         stroke: "currentColor",
         "stroke-width": "1.5"
       }, null, -1),
-      s("rect", {
+      l("rect", {
         x: "12",
         y: "12",
         width: "8",
@@ -656,15 +711,15 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), ot = { name: "IconFullscreen" }, at = /* @__PURE__ */ T({
-  ...ot,
+}), ht = { name: "IconFullscreen" }, gt = /* @__PURE__ */ S({
+  ...ht,
   props: {
     class: {}
   },
   setup(t) {
-    const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    const o = t;
+    return (s, e) => (i(), v("svg", {
+      class: y(["gvp-icon", o.class]),
       width: "18",
       height: "18",
       viewBox: "0 0 24 24",
@@ -672,7 +727,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", {
+      l("path", {
         d: "M4 9V4H9M15 4H20V9M20 15V20H15M9 20H4V15",
         stroke: "currentColor",
         "stroke-width": "1.75",
@@ -681,15 +736,15 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
       }, null, -1)
     ])], 2));
   }
-}), st = { name: "IconFullscreenExit" }, lt = /* @__PURE__ */ T({
-  ...st,
+}), kt = { name: "IconFullscreenExit" }, yt = /* @__PURE__ */ S({
+  ...kt,
   props: {
     class: {}
   },
   setup(t) {
-    const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    const o = t;
+    return (s, e) => (i(), v("svg", {
+      class: y(["gvp-icon", o.class]),
       width: "18",
       height: "18",
       viewBox: "0 0 24 24",
@@ -697,7 +752,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", {
+      l("path", {
         d: "M9 4V9H4M15 9V4H20M15 20V15H20M9 15H4V20",
         stroke: "currentColor",
         "stroke-width": "1.75",
@@ -707,400 +762,462 @@ const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "
     ])], 2));
   }
 });
-function ge(t) {
+function _e(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 o = Math.floor(t), s = Math.floor(o / 3600), e = Math.floor(o % 3600 / 60), a = (o % 60).toString().padStart(2, "0");
+  if (s > 0) {
+    const w = e.toString().padStart(2, "0");
+    return `${s}:${w}:${a}`;
   }
-  return `${e}:${m}`;
+  return `${e}:${a}`;
 }
-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 = {
+const wt = { class: "gvp-controls-row" }, bt = ["aria-label", "aria-pressed"], Ct = { class: "gvp-seek" }, xt = { class: "gvp-seek-track" }, _t = ["value", "disabled", "aria-valuemax", "aria-valuenow"], Et = {
   class: "gvp-time",
   "aria-live": "off"
-}, pt = ["aria-expanded", "aria-label"], ft = { class: "gvp-speed-label" }, mt = {
+}, Lt = ["aria-expanded", "aria-label"], $t = { class: "gvp-speed-label" }, Pt = {
   key: 0,
   class: "gvp-speed-menu",
   role: "listbox",
   "aria-label": "Playback speed"
-}, ht = ["aria-selected", "onClick"], gt = ["aria-expanded", "aria-pressed"], kt = {
+}, Mt = ["aria-selected", "onClick"], Tt = ["aria-expanded", "aria-label"], It = { class: "gvp-quality-label" }, St = {
+  key: 0,
+  class: "gvp-quality-menu",
+  role: "listbox",
+  "aria-label": "Quality"
+}, Ht = ["aria-selected"], At = ["aria-selected", "onClick"], Bt = ["aria-expanded", "aria-pressed"], Vt = {
   key: 0,
   class: "gvp-captions-menu",
   role: "listbox",
   "aria-label": "Captions"
-}, yt = ["aria-selected"], wt = ["aria-selected", "onClick"], bt = ["aria-label", "aria-pressed"], Ct = {
+}, qt = ["aria-selected"], Dt = ["aria-selected", "onClick"], Rt = ["aria-label", "aria-pressed"], Ft = {
   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({
+}, Nt = { class: "gvp-volume-track" }, Ot = ["value", "aria-valuenow"], Ut = ["aria-label", "aria-pressed"], Zt = ["aria-label", "aria-pressed"], jt = 3e3, Qt = /* @__PURE__ */ S({
   __name: "ControlBar",
   props: {
     video: {},
     isPlaying: { type: Boolean },
     container: {},
-    onTogglePlay: { type: Function }
+    onTogglePlay: {},
+    qualityLevels: { default: () => [] },
+    currentLevel: { default: -1 },
+    selectedLevel: { default: -1 }
   },
-  setup(t) {
-    const a = (() => {
+  emits: ["select-level"],
+  setup(t, { emit: o }) {
+    const s = (() => {
       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);
+    })(), e = typeof navigator > "u" ? !1 : /iPhone|iPod/.test(navigator.userAgent), f = [0.5, 0.75, 1, 1.25, 1.5, 2], a = t, w = o, m = k(!0);
+    let $ = null;
+    function E() {
+      $ !== null && (clearTimeout($), $ = null);
     }
-    function L() {
-      p(), o.isPlaying && (g = setTimeout(() => {
+    function _() {
+      E(), a.isPlaying && ($ = setTimeout(() => {
         m.value = !1;
-      }, Lt));
+      }, jt));
     }
-    function P() {
-      m.value = !0, L();
+    function A() {
+      m.value = !0, _();
     }
-    F(() => o.isPlaying, (n) => {
-      n ? L() : (p(), m.value = !0);
-    }, { immediate: !0 }), F(() => o.container, (n) => {
+    R(() => a.isPlaying, (n) => {
+      n ? _() : (E(), m.value = !0);
+    }, { immediate: !0 }), R(() => a.container, (n) => {
       if (!n) return;
-      const u = () => P();
-      n.addEventListener("mousemove", u), n.addEventListener("touchstart", u), n.addEventListener("focusin", u);
+      const r = () => A();
+      n.addEventListener("mousemove", r), n.addEventListener("touchstart", r), n.addEventListener("focusin", r);
     }, { immediate: !0 });
-    const x = w(0), _ = w(0), k = w(0);
-    F(() => o.video, (n) => {
+    const b = k(0), h = k(0), x = k(0);
+    R(() => a.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 r = () => {
+        b.value = n.currentTime;
+      }, p = () => {
+        h.value = Number.isFinite(n.duration) ? n.duration : 0;
+      }, L = () => {
+        const q = n.buffered;
+        if (!q || q.length === 0) {
+          x.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 Ce = q.end(q.length - 1);
+        for (let ie = 0; ie < q.length; ie++)
+          if (q.start(ie) <= n.currentTime && n.currentTime <= q.end(ie)) {
+            Ce = q.end(ie);
             break;
           }
-        k.value = me;
+        x.value = Ce;
       };
-      u(), f(), $(), n.addEventListener("timeupdate", u), n.addEventListener("durationchange", f), n.addEventListener("loadedmetadata", f), n.addEventListener("progress", $), n.addEventListener("timeupdate", $);
+      r(), p(), L(), n.addEventListener("timeupdate", r), n.addEventListener("durationchange", p), n.addEventListener("loadedmetadata", p), n.addEventListener("progress", L), n.addEventListener("timeupdate", L);
     }, { immediate: !0 });
-    const 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;
+    const u = () => h.value > 0, C = () => u() ? b.value / h.value * 100 : 0, B = () => u() ? x.value / h.value * 100 : 0;
+    function W(n) {
+      const r = a.video;
+      if (!r || !u()) return;
+      const p = Number(n.target.value) / 100 * h.value;
+      r.currentTime = p, b.value = p;
     }
-    const R = w(1), H = w(!1);
-    F(() => o.video, (n) => {
+    const M = k(1), Z = k(!1);
+    R(() => a.video, (n) => {
       if (!n) return;
-      const u = () => {
-        R.value = n.volume, H.value = n.muted;
+      const r = () => {
+        M.value = n.volume, Z.value = n.muted;
       };
-      u(), n.addEventListener("volumechange", u);
+      r(), n.addEventListener("volumechange", r);
     }, { immediate: !0 });
-    function A() {
-      o.video && (o.video.muted = !o.video.muted);
+    function g() {
+      a.video && (a.video.muted = !a.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 P(n) {
+      const r = a.video;
+      if (!r) return;
+      const p = Number(n.target.value) / 100;
+      r.volume = p, p > 0 && r.muted && (r.muted = !1);
     }
-    const I = w(1), D = w(!1), B = w(null);
-    F(() => o.video, (n) => {
+    const V = k(1), I = k(!1), H = k(null);
+    R(() => a.video, (n) => {
       if (!n) return;
-      const u = () => {
-        I.value = n.playbackRate;
+      const r = () => {
+        V.value = n.playbackRate;
       };
-      u(), n.addEventListener("ratechange", u);
+      r(), n.addEventListener("ratechange", r);
     }, { immediate: !0 });
-    function N(n) {
-      o.video && (o.video.playbackRate = n), I.value = n, D.value = !1;
+    function z(n) {
+      a.video && (a.video.playbackRate = n), V.value = n, I.value = !1;
+    }
+    const X = k(!1), re = k(null), ke = N(() => a.qualityLevels.length >= 2), Q = N(
+      () => [...a.qualityLevels].sort((n, r) => r.height - n.height)
+    ), te = N(
+      () => a.qualityLevels.find((n) => n.index === a.currentLevel)
+    ), se = N(() => {
+      if (a.selectedLevel < 0)
+        return te.value ? `Auto (${te.value.label})` : "Auto";
+      const n = a.qualityLevels.find((r) => r.index === a.selectedLevel);
+      return (n == null ? void 0 : n.label) ?? "Auto";
+    });
+    function ue(n) {
+      w("select-level", n), X.value = !1;
     }
-    const 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 le = k([]), F = k(-1), Y = k(!1), ce = k(null);
+    function de(n) {
+      const r = [];
+      for (let L = 0; L < n.length; L++) {
+        const q = n[L];
+        (q.kind === "subtitles" || q.kind === "captions") && r.push({ index: L, label: q.label || q.language || `Track ${L + 1}` });
       }
-      G.value = u;
-      let f = -1;
-      for (let $ = 0; $ < n.length; $++)
-        if (n[$].mode === "showing") {
-          f = $;
+      le.value = r;
+      let p = -1;
+      for (let L = 0; L < n.length; L++)
+        if (n[L].mode === "showing") {
+          p = L;
           break;
         }
-      S.value = f;
+      F.value = p;
     }
-    F(() => o.video, (n) => {
+    R(() => a.video, (n) => {
       if (!n) {
-        G.value = [], S.value = -1;
+        le.value = [], F.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 r = n.textTracks;
+      de(r);
+      const p = () => de(r);
+      typeof r.addEventListener == "function" && (r.addEventListener("addtrack", p), r.addEventListener("removetrack", p), r.addEventListener("change", p));
     }, { 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 ve(n) {
+      var p;
+      const r = (p = a.video) == null ? void 0 : p.textTracks;
+      if (r) {
+        for (let L = 0; L < r.length; L++) r[L].mode = L === n ? "showing" : "hidden";
+        F.value = n, Y.value = !1;
       }
     }
-    function Q() {
-      var u;
-      const n = (u = o.video) == null ? void 0 : u.textTracks;
+    function pe() {
+      var r;
+      const n = (r = a.video) == null ? void 0 : r.textTracks;
       if (n) {
-        for (let f = 0; f < n.length; f++) n[f].mode = "hidden";
-        S.value = -1, z.value = !1;
+        for (let p = 0; p < n.length; p++) n[p].mode = "hidden";
+        F.value = -1, Y.value = !1;
       }
     }
-    const Y = w(!1), ve = typeof document < "u" && !!document.pictureInPictureEnabled;
-    F(() => o.video, (n) => {
+    const c = k(!1), d = typeof document < "u" && !!document.pictureInPictureEnabled;
+    R(() => a.video, (n) => {
       n && (n.addEventListener("enterpictureinpicture", () => {
-        Y.value = !0;
+        c.value = !0;
       }), n.addEventListener("leavepictureinpicture", () => {
-        Y.value = !1;
+        c.value = !1;
       }));
     }, { immediate: !0 });
-    function pe() {
-      o.video && (document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
-      }) : o.video.requestPictureInPicture().catch(() => {
+    function D() {
+      a.video && (document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
+      }) : a.video.requestPictureInPicture().catch(() => {
       }));
     }
-    const W = w(!1), le = typeof document > "u" ? !1 : !!(document.fullscreenEnabled || document.webkitFullscreenEnabled);
-    function d() {
+    const K = k(!1), fe = typeof document > "u" ? !1 : !!(document.fullscreenEnabled || document.webkitFullscreenEnabled);
+    function me() {
       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 ye(n) {
+      const r = n.requestFullscreen ?? n.webkitRequestFullscreen;
+      return r ? r.call(n) : Promise.reject(new Error("unsupported"));
     }
-    function O() {
+    function he() {
       const n = document.exitFullscreen ?? document.webkitExitFullscreen;
       return n ? n.call(document) : Promise.reject(new Error("unsupported"));
     }
-    function K() {
-      W.value = d() === o.container;
+    function G() {
+      K.value = me() === a.container;
     }
-    fe(() => {
-      document.addEventListener("fullscreenchange", K), document.addEventListener("webkitfullscreenchange", K);
-    }), X(() => {
-      p(), document.removeEventListener("fullscreenchange", K), document.removeEventListener("webkitfullscreenchange", K);
+    be(() => {
+      document.addEventListener("fullscreenchange", G), document.addEventListener("webkitfullscreenchange", G);
+    }), ne(() => {
+      E(), document.removeEventListener("fullscreenchange", G), document.removeEventListener("webkitfullscreenchange", G);
     });
-    function re() {
-      var n, u;
-      if (l) {
-        (u = (n = o.video) == null ? void 0 : n.webkitEnterFullscreen) == null || u.call(n);
+    function Te() {
+      var n, r;
+      if (e) {
+        (r = (n = a.video) == null ? void 0 : n.webkitEnterFullscreen) == null || r.call(n);
         return;
       }
-      W.value ? O().catch(() => {
-      }) : o.container && c(o.container).catch(() => {
+      K.value ? he().catch(() => {
+      }) : a.container && ye(a.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 Ie = fe || e && a.video !== null && typeof a.video.webkitEnterFullscreen == "function";
+    function we(n, r) {
+      function p(q) {
+        r.value && !r.value.contains(q.target) && (n.value = !1);
       }
-      function $(V) {
-        V.key === "Escape" && (n.value = !1);
+      function L(q) {
+        q.key === "Escape" && (n.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(n, (q) => {
+        q ? (document.addEventListener("mousedown", p), document.addEventListener("keydown", L)) : (document.removeEventListener("mousedown", p), document.removeEventListener("keydown", L));
+      }), ne(() => {
+        document.removeEventListener("mousedown", p), document.removeEventListener("keydown", L);
       });
     }
-    return ue(D, B), ue(z, te), (n, u) => (i(), v("div", {
+    return we(I, H), we(Y, ce), we(X, re), (n, r) => (i(), v("div", {
       role: "toolbar",
       "aria-label": "Video controls",
-      class: C(["gvp-controls", !m.value && "is-hidden"]),
-      onMouseenter: p,
-      onMouseleave: L
+      class: y(["gvp-controls", !m.value && "is-hidden"]),
+      onMouseenter: E,
+      onMouseleave: _
     }, [
-      s("div", rt, [
-        s("button", {
+      l("div", wt, [
+        l("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: r[0] || (r[0] = //@ts-ignore
+          (...p) => t.onTogglePlay && t.onTogglePlay(...p))
         }, [
-          t.isPlaying ? (i(), U(We, { key: 0 })) : (i(), U(Ke, { key: 1 }))
-        ], 8, it),
-        s("div", ut, [
-          s("div", ct, [
-            s("div", {
+          t.isPlaying ? (i(), j(ot, { key: 0 })) : (i(), j(st, { key: 1 }))
+        ], 8, bt),
+        l("div", Ct, [
+          l("div", xt, [
+            l("div", {
               class: "gvp-seek-buffered",
-              style: ce({ width: `${b()}%` })
+              style: ge({ width: `${B()}%` })
             }, null, 4),
-            s("div", {
+            l("div", {
               class: "gvp-seek-progress",
-              style: ce({ width: `${r()}%` })
+              style: ge({ width: `${C()}%` })
             }, null, 4)
           ]),
-          s("input", {
+          l("input", {
             type: "range",
             class: "gvp-seek-input",
             min: 0,
             max: 100,
             step: 0.1,
-            value: r(),
-            disabled: !h(),
+            value: C(),
+            disabled: !u(),
             "aria-label": "Seek",
             "aria-valuemin": 0,
-            "aria-valuemax": Math.floor(_.value),
-            "aria-valuenow": Math.floor(x.value),
-            onInput: E
-          }, null, 40, dt)
+            "aria-valuemax": Math.floor(h.value),
+            "aria-valuenow": Math.floor(b.value),
+            onInput: W
+          }, null, 40, _t)
         ]),
-        s("span", vt, q(J(ge)(x.value)) + " / " + q(J(ge)(_.value)), 1),
-        s("div", {
+        l("span", Et, O(ee(_e)(b.value)) + " / " + O(ee(_e)(h.value)), 1),
+        l("div", {
           ref_key: "speedRootEl",
-          ref: B,
+          ref: H,
           class: "gvp-speed"
         }, [
-          s("button", {
+          l("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": I.value,
+            "aria-label": `Playback speed: ${V.value === 1 ? "1×" : V.value + "×"}`,
+            onClick: r[1] || (r[1] = (p) => I.value = !I.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", {
+            U($e),
+            l("span", $t, O(V.value === 1 ? "1×" : `${V.value}×`), 1)
+          ], 8, Lt),
+          I.value ? (i(), v("ul", Pt, [
+            (i(), v(oe, null, ae(f, (p) => l("li", { key: p }, [
+              l("button", {
                 type: "button",
                 role: "option",
-                "aria-selected": 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": p === V.value,
+                class: y(["gvp-speed-menu-item", { "is-active": p === V.value }]),
+                onClick: (L) => z(p)
+              }, O(p === 1 ? "Normal" : `${p}×`), 11, Mt)
             ])), 64))
-          ])) : M("", !0)
+          ])) : T("", !0)
         ], 512),
-        G.value.length > 0 ? (i(), v("div", {
+        ke.value ? (i(), v("div", {
           key: 0,
+          ref_key: "qualityRootEl",
+          ref: re,
+          class: "gvp-quality"
+        }, [
+          l("button", {
+            type: "button",
+            class: "gvp-ctrl-btn gvp-quality-btn",
+            "aria-haspopup": "listbox",
+            "aria-expanded": X.value,
+            "aria-label": `Quality: ${se.value}`,
+            onClick: r[2] || (r[2] = (p) => X.value = !X.value)
+          }, [
+            U(ft),
+            l("span", It, O(se.value), 1)
+          ], 8, Tt),
+          X.value ? (i(), v("ul", St, [
+            l("li", null, [
+              l("button", {
+                type: "button",
+                role: "option",
+                "aria-selected": t.selectedLevel < 0,
+                class: y(["gvp-quality-menu-item", { "is-active": t.selectedLevel < 0 }]),
+                onClick: r[3] || (r[3] = (p) => ue(ee(He).index))
+              }, O(te.value ? `Auto (${te.value.label})` : "Auto"), 11, Ht)
+            ]),
+            (i(!0), v(oe, null, ae(Q.value, (p) => (i(), v("li", {
+              key: p.index
+            }, [
+              l("button", {
+                type: "button",
+                role: "option",
+                "aria-selected": p.index === t.selectedLevel,
+                class: y(["gvp-quality-menu-item", { "is-active": p.index === t.selectedLevel }]),
+                onClick: (L) => ue(p.index)
+              }, O(p.label), 11, At)
+            ]))), 128))
+          ])) : T("", !0)
+        ], 512)) : T("", !0),
+        le.value.length > 0 ? (i(), v("div", {
+          key: 1,
           ref_key: "captionsRootEl",
-          ref: te,
+          ref: ce,
           class: "gvp-captions"
         }, [
-          s("button", {
+          l("button", {
             type: "button",
-            class: C(["gvp-ctrl-btn", S.value >= 0 && "is-active"]),
+            class: y(["gvp-ctrl-btn", F.value >= 0 && "is-active"]),
             "aria-haspopup": "listbox",
-            "aria-expanded": z.value,
+            "aria-expanded": Y.value,
             "aria-label": "Captions",
-            "aria-pressed": S.value >= 0,
-            onClick: u[2] || (u[2] = (f) => z.value = !z.value)
+            "aria-pressed": F.value >= 0,
+            onClick: r[4] || (r[4] = (p) => Y.value = !Y.value)
           }, [
-            j(be)
-          ], 10, gt),
-          z.value ? (i(), v("ul", kt, [
-            s("li", null, [
-              s("button", {
+            U(Pe)
+          ], 10, Bt),
+          Y.value ? (i(), v("ul", Vt, [
+            l("li", null, [
+              l("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": F.value === -1,
+                class: y(["gvp-captions-menu-item", { "is-active": F.value === -1 }]),
+                onClick: pe
+              }, "Off", 10, qt)
             ]),
-            (i(!0), v(oe, null, ae(G.value, (f) => (i(), v("li", {
-              key: f.index
+            (i(!0), v(oe, null, ae(le.value, (p) => (i(), v("li", {
+              key: p.index
             }, [
-              s("button", {
+              l("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": p.index === F.value,
+                class: y(["gvp-captions-menu-item", { "is-active": p.index === F.value }]),
+                onClick: (L) => ve(p.index)
+              }, O(p.label), 11, Dt)
             ]))), 128))
-          ])) : M("", !0)
-        ], 512)) : M("", !0),
-        s("div", {
-          class: C(["gvp-volume", !J(a) && "is-expandable"])
+          ])) : T("", !0)
+        ], 512)) : T("", !0),
+        l("div", {
+          class: y(["gvp-volume", !ee(s) && "is-expandable"])
         }, [
-          s("button", {
+          l("button", {
             type: "button",
             class: "gvp-ctrl-btn",
-            "aria-label": H.value ? "Unmute" : "Mute",
-            "aria-pressed": H.value,
-            onClick: A
+            "aria-label": Z.value ? "Unmute" : "Mute",
+            "aria-pressed": Z.value,
+            onClick: g
           }, [
-            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", {
+            Z.value || M.value === 0 ? (i(), j(vt, { key: 0 })) : M.value < 0.5 ? (i(), j(ct, { key: 1 })) : (i(), j(rt, { key: 2 }))
+          ], 8, Rt),
+          ee(s) ? T("", !0) : (i(), v("div", Ft, [
+            l("div", Nt, [
+              l("div", {
                 class: "gvp-volume-fill",
-                style: ce({ width: `${H.value ? 0 : Math.round(R.value * 100)}%` })
+                style: ge({ width: `${Z.value ? 0 : Math.round(M.value * 100)}%` })
               }, null, 4)
             ]),
-            s("input", {
+            l("input", {
               type: "range",
               class: "gvp-volume-input",
               min: 0,
               max: 100,
               step: 1,
-              value: H.value ? 0 : Math.round(R.value * 100),
+              value: Z.value ? 0 : Math.round(M.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": Z.value ? 0 : Math.round(M.value * 100),
+              onInput: P
+            }, null, 40, Ot)
           ]))
         ], 2),
-        J(ve) ? (i(), v("button", {
-          key: 1,
+        ee(d) ? (i(), v("button", {
+          key: 2,
           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: y(["gvp-ctrl-btn", c.value && "is-active"]),
+          "aria-label": c.value ? "Exit picture-in-picture" : "Picture-in-picture",
+          "aria-pressed": c.value,
+          onClick: D
         }, [
-          j(Ce)
-        ], 10, Et)) : M("", !0),
-        J(ie) ? (i(), v("button", {
-          key: 2,
+          U(Me)
+        ], 10, Ut)) : T("", !0),
+        ee(Ie) ? (i(), v("button", {
+          key: 3,
           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: y(["gvp-ctrl-btn", K.value && "is-active"]),
+          "aria-label": K.value ? "Exit fullscreen" : "Enter fullscreen",
+          "aria-pressed": K.value,
+          onClick: Te
         }, [
-          W.value ? (i(), U(lt, { key: 0 })) : (i(), U(at, { key: 1 }))
-        ], 10, $t)) : M("", !0)
+          K.value ? (i(), j(yt, { key: 0 })) : (i(), j(gt, { key: 1 }))
+        ], 10, Zt)) : T("", !0)
       ])
     ], 34));
   }
-}), Mt = { name: "IconDesktop" }, Tt = /* @__PURE__ */ T({
-  ...Mt,
+}), Wt = { name: "IconDesktop" }, zt = /* @__PURE__ */ S({
+  ...Wt,
   props: {
     class: {}
   },
   setup(t) {
-    const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    const o = t;
+    return (s, e) => (i(), v("svg", {
+      class: y(["gvp-icon", o.class]),
       width: "20",
       height: "20",
       viewBox: "0 0 24 24",
@@ -1108,26 +1225,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", {
+      l("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", {
+      l("path", {
         d: "M11 15H13",
         stroke: "currentColor",
         "stroke-width": "1.5",
         "stroke-linecap": "round",
         "stroke-linejoin": "round"
       }, null, -1),
-      s("path", {
+      l("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", {
+      l("path", {
         d: "M7 22H17",
         stroke: "currentColor",
         "stroke-width": "1.5",
@@ -1135,15 +1252,15 @@ const rt = { class: "gvp-controls-row" }, it = ["aria-label", "aria-pressed"], u
       }, null, -1)
     ])], 2));
   }
-}), It = { name: "IconMobile" }, St = /* @__PURE__ */ T({
-  ...It,
+}), Yt = { name: "IconMobile" }, Kt = /* @__PURE__ */ S({
+  ...Yt,
   props: {
     class: {}
   },
   setup(t) {
-    const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    const o = t;
+    return (s, e) => (i(), v("svg", {
+      class: y(["gvp-icon", o.class]),
       width: "20",
       height: "20",
       viewBox: "0 0 24 24",
@@ -1151,20 +1268,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", {
+      l("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", {
+      l("path", {
         d: "M11 19H13",
         stroke: "currentColor",
         "stroke-width": "2",
         "stroke-linecap": "round",
         "stroke-linejoin": "round"
       }, null, -1),
-      s("path", {
+      l("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 +1289,15 @@ const rt = { class: "gvp-controls-row" }, it = ["aria-label", "aria-pressed"], u
       }, null, -1)
     ])], 2));
   }
-}), Ht = { name: "IconPlay" }, Bt = /* @__PURE__ */ T({
-  ...Ht,
+}), Jt = { name: "IconPlay" }, Xt = /* @__PURE__ */ S({
+  ...Jt,
   props: {
     class: {}
   },
   setup(t) {
-    const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    const o = t;
+    return (s, e) => (i(), v("svg", {
+      class: y(["gvp-icon", o.class]),
       width: "22",
       height: "22",
       viewBox: "0 0 16 16",
@@ -1188,21 +1305,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", {
+      l("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,
+}), Gt = { name: "IconX" }, en = /* @__PURE__ */ S({
+  ...Gt,
   props: {
     class: {}
   },
   setup(t) {
-    const a = t;
-    return (l, e) => (i(), v("svg", {
-      class: C(["gvp-icon", a.class]),
+    const o = t;
+    return (s, e) => (i(), v("svg", {
+      class: y(["gvp-icon", o.class]),
       width: "14",
       height: "14",
       viewBox: "0 0 14 14",
@@ -1210,83 +1327,83 @@ 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", {
+      l("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 tn(t) {
   if (!t) return null;
   if (/^[A-Za-z0-9_-]{11}$/.test(t)) return t;
-  let a;
+  let o;
   try {
-    a = new URL(t);
+    o = new URL(t);
   } catch {
     return null;
   }
-  const l = a.hostname.replace(/^www\./, "");
-  if (l === "youtu.be") {
-    const e = a.pathname.slice(1).split("/")[0];
+  const s = o.hostname.replace(/^www\./, "");
+  if (s === "youtu.be") {
+    const e = o.pathname.slice(1).split("/")[0];
     return /^[A-Za-z0-9_-]{11}$/.test(e) ? e : null;
   }
-  if (l === "youtube.com" || l === "m.youtube.com" || l === "music.youtube.com" || l === "youtube-nocookie.com") {
-    const e = a.searchParams.get("v");
+  if (s === "youtube.com" || s === "m.youtube.com" || s === "music.youtube.com" || s === "youtube-nocookie.com") {
+    const e = o.searchParams.get("v");
     if (e && /^[A-Za-z0-9_-]{11}$/.test(e)) return e;
-    const o = /^\/(?:embed|shorts|v|live)\/([A-Za-z0-9_-]{11})/.exec(
-      a.pathname
+    const f = /^\/(?:embed|shorts|v|live)\/([A-Za-z0-9_-]{11})/.exec(
+      o.pathname
     );
-    if (o) return o[1];
+    if (f) return f[1];
   }
   return null;
 }
-function Rt(t) {
+function nn(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 o = new URL(t), s = o.searchParams.get("t") ?? o.searchParams.get("start");
+    if (!s) return null;
+    if (/^\d+s?$/.test(s)) return Number.parseInt(s, 10);
+    const e = /^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/.exec(s);
     if (e) {
-      const 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 f = Number.parseInt(e[1] ?? "0", 10), a = Number.parseInt(e[2] ?? "0", 10), w = Number.parseInt(e[3] ?? "0", 10), m = f * 3600 + a * 60 + w;
+      return m > 0 ? m : null;
     }
   } catch {
   }
   return null;
 }
-function Ft(t, a = {}) {
+function ln(t, o = {}) {
   const {
-    autoPlay: l = !1,
+    autoPlay: s = !1,
     muted: e = !0,
-    loop: o = !1,
-    controls: m = !0,
-    startSeconds: g
-  } = a, p = new URLSearchParams({
+    loop: f = !1,
+    controls: a = !0,
+    startSeconds: w
+  } = o, m = new URLSearchParams({
     rel: "0",
     modestbranding: "1",
     playsinline: "1",
-    controls: m ? "1" : "0"
+    controls: a ? "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 s ? (m.set("autoplay", "1"), m.set("mute", "1")) : e && m.set("mute", "1"), f && (m.set("loop", "1"), m.set("playlist", t)), w && w > 0 && m.set("start", String(w)), `https://www.youtube-nocookie.com/embed/${t}?${m.toString()}`;
 }
-const Nt = ["src"], Ot = {
+const on = ["src"], an = {
   key: 2,
   class: "gvp-vignette"
-}, jt = {
+}, sn = {
   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 = {
+}, rn = { class: "gvp-toggle-pill" }, un = ["aria-pressed"], cn = ["aria-pressed"], dn = ["aria-label", "aria-pressed"], vn = ["aria-label"], pn = {
   key: 10,
   class: "gvp-play-wrap"
-}, Kt = {
+}, fn = {
   key: 0,
   class: "gvp-tooltip",
   role: "tooltip"
-}, Jt = {
+}, mn = {
   key: 12,
   class: "gvp-bottom-fade"
-}, Qt = /* @__PURE__ */ T({
+}, kn = /* @__PURE__ */ S({
   __name: "VideoPlayer",
   props: {
     src: {},
@@ -1297,7 +1414,7 @@ const Nt = ["src"], Ot = {
     tooltipText: {},
     muted: { type: Boolean, default: !0 },
     loop: { type: Boolean, default: !1 },
-    controls: { type: [Boolean, String], default: !1 },
+    controls: { type: [Boolean, String], default: !0 },
     autoPlay: { type: Boolean, default: !1 },
     frameMaxWidth: {},
     aspectRatio: {},
@@ -1307,283 +1424,295 @@ const Nt = ["src"], Ot = {
     closable: { type: Boolean, default: !1 }
   },
   emits: ["close", "play", "pause"],
-  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 === "custom"), R = Z(() => l.controls === !0), 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)
+  setup(t, { emit: o }) {
+    const s = t, e = o, f = k(null), a = k(s.defaultDevice), w = k(!1), m = k(!1), $ = k(null), E = k([]), _ = k(-1), A = k([]), b = k(-1), h = k(-1), x = k(1), u = k(!1), C = k(!1), B = k(null), W = typeof document < "u" && !!document.pictureInPictureEnabled, M = N(
+      () => s.controls === !0 || s.controls === "custom"
+    ), Z = N(() => s.controls === "native"), g = N(() => tn(s.src)), P = N(() => g.value !== null), V = N(
+      () => g.value ? ln(g.value, {
+        autoPlay: s.autoPlay,
+        muted: s.muted,
+        loop: s.loop,
+        controls: M.value ? !0 : Z.value,
+        startSeconds: nn(s.src)
       }) : null
     );
-    function I(d) {
-      P.value = d, x.value = -1;
+    function I(c) {
+      E.value = c, _.value = -1;
+    }
+    function H(c) {
+      A.value = c, h.value = -1;
     }
-    const D = Z(
-      () => !A.value && P.value.length > 1
-    ), B = Z(
+    const z = N(
+      () => !P.value && E.value.length > 1
+    ), X = N(
       () => {
-        var d;
-        return x.value >= 0 ? x.value : ((d = P.value[0]) == null ? void 0 : d.index) ?? -1;
+        var c;
+        return _.value >= 0 ? _.value : ((c = E.value[0]) == null ? void 0 : c.index) ?? -1;
       }
-    ), N = Z(
+    ), re = N(
       () => {
-        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 c, d;
+        return a.value === "mobile" ? ((c = s.aspectRatio) == null ? void 0 : c.mobile) ?? "9/16" : ((d = s.aspectRatio) == null ? void 0 : d.desktop) ?? "16/9";
       }
-    ), G = Z(
+    ), ke = N(
       () => {
-        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 c, d;
+        return a.value === "mobile" ? ((c = s.frameMaxWidth) == null ? void 0 : c.mobile) ?? "420px" : ((d = s.frameMaxWidth) == null ? void 0 : d.desktop) ?? "960px";
       }
-    ), S = Z(() => {
-      var d;
-      return ((d = o.value) == null ? void 0 : d.videoEl) ?? null;
+    ), Q = N(() => {
+      var c;
+      return ((c = f.value) == null ? void 0 : c.videoEl) ?? null;
     });
-    async function z() {
-      const d = S.value;
-      if (d)
+    async function te() {
+      const c = Q.value;
+      if (c)
         try {
-          d.readyState < 2 && d.load();
-          const c = d.play();
-          L.value = c, await c, g.value = !0;
+          c.readyState < 2 && c.load();
+          const d = c.play();
+          $.value = d, await d, w.value = !0;
         } catch {
-          g.value = !1;
+          w.value = !1;
         } finally {
-          L.value = null;
+          $.value = null;
         }
     }
-    async function te() {
-      const d = S.value;
-      if (d) {
-        if (L.value)
+    async function se() {
+      const c = Q.value;
+      if (c) {
+        if ($.value)
           try {
-            await L.value;
+            await $.value;
           } catch {
           }
-        d.pause();
+        c.pause();
       }
     }
-    async function se() {
-      !l.hoverPlay || A.value || await z();
+    async function ue() {
+      !s.hoverPlay || P.value || await te();
     }
-    async function de() {
-      !l.hoverPlay || A.value || (await te(), g.value = !1);
+    async function le() {
+      !s.hoverPlay || P.value || (await se(), w.value = !1);
     }
-    async function Q() {
-      const d = S.value;
-      d && (d.paused ? await z() : (await te(), g.value = !1));
+    async function F() {
+      const c = Q.value;
+      c && (c.paused ? await te() : (await se(), w.value = !1));
     }
     function Y() {
-      p.value = !0, se();
+      m.value = !0, ue();
     }
-    function ve() {
-      p.value = !1, de();
+    function ce() {
+      m.value = !1, le();
     }
-    function pe(d) {
-      _.value = d;
-      const c = S.value;
-      c && (c.playbackRate = d);
+    function de(c) {
+      x.value = c;
+      const d = Q.value;
+      d && (d.playbackRate = c);
     }
-    F(S, (d) => {
-      d && (d.addEventListener("ratechange", () => {
-        _.value = d.playbackRate;
-      }), d.addEventListener("enterpictureinpicture", () => {
-        k.value = !0;
-      }), d.addEventListener("leavepictureinpicture", () => {
-        k.value = !1;
+    R(Q, (c) => {
+      c && (c.addEventListener("ratechange", () => {
+        x.value = c.playbackRate;
+      }), c.addEventListener("enterpictureinpicture", () => {
+        u.value = !0;
+      }), c.addEventListener("leavepictureinpicture", () => {
+        u.value = !1;
       }));
     });
-    function W() {
-      const d = S.value;
-      d && (document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
-      }) : d.requestPictureInPicture().catch(() => {
+    function ve() {
+      const c = Q.value;
+      c && (document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
+      }) : c.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 pe(c) {
+      var K, fe, me;
+      const d = Q.value;
+      if (!(!d || !C.value && !((K = B.value) != null && K.contains(document.activeElement)) || c.target.tagName === "INPUT" && c.key !== " "))
+        switch (c.key) {
           case " ":
           case "k":
-            d.preventDefault(), Q();
+            c.preventDefault(), F();
             break;
           case "ArrowLeft":
-            d.preventDefault(), c.currentTime = Math.max(0, c.currentTime - 5);
+            c.preventDefault(), d.currentTime = Math.max(0, d.currentTime - 5);
             break;
           case "ArrowRight":
-            d.preventDefault(), c.currentTime = Math.min(c.duration || 0, c.currentTime + 5);
+            c.preventDefault(), d.currentTime = Math.min(d.duration || 0, d.currentTime + 5);
             break;
           case "ArrowUp":
-            d.preventDefault(), c.volume = Math.min(1, c.volume + 0.1), c.muted && (c.muted = !1);
+            c.preventDefault(), d.volume = Math.min(1, d.volume + 0.1), d.muted && (d.muted = !1);
             break;
           case "ArrowDown":
-            d.preventDefault(), c.volume = Math.max(0, c.volume - 0.1);
+            c.preventDefault(), d.volume = Math.max(0, d.volume - 0.1);
             break;
           case "m":
-            c.muted = !c.muted;
+            d.muted = !d.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 ye = document.fullscreenElement ?? document.webkitFullscreenElement ?? null, he = ((fe = B.value) == null ? void 0 : fe.requestFullscreen) ?? ((me = B.value) == null ? void 0 : me.webkitRequestFullscreen), G = document.exitFullscreen ?? document.webkitExitFullscreen;
+            ye === B.value ? G == null || G.call(document).catch(() => {
+            }) : he && B.value && he.call(B.value).catch(() => {
             });
             break;
           }
           case "p":
-            b && W();
+            W && ve();
             break;
         }
     }
-    return fe(() => {
-      document.addEventListener("keydown", le);
-    }), X(() => {
-      document.removeEventListener("keydown", le);
-    }), (d, c) => (i(), v("div", {
+    return be(() => {
+      document.addEventListener("keydown", pe);
+    }), ne(() => {
+      document.removeEventListener("keydown", pe);
+    }), (c, d) => (i(), v("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: y(["gvp-root", s.class]),
+      style: ge({ width: ke.value, aspectRatio: re.value }),
+      onMouseenter: d[10] || (d[10] = (D) => {
+        C.value = !0, Y();
       }),
-      onMouseleave: c[9] || (c[9] = (O) => {
-        h.value = !1, ve();
+      onMouseleave: d[11] || (d[11] = (D) => {
+        C.value = !1, ce();
       })
     }, [
-      A.value ? (i(), v("iframe", {
+      P.value ? (i(), v("iframe", {
         key: 0,
         class: "gvp-video gvp-youtube",
-        src: y.value ?? void 0,
+        src: V.value ?? void 0,
         title: "YouTube video player",
         allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
         allowfullscreen: "",
         referrerpolicy: "strict-origin-when-cross-origin"
-      }, null, 8, Nt)) : (i(), U(Ee, {
+      }, null, 8, on)) : (i(), j(Ve, {
         key: 1,
         ref_key: "hlsPlayerRef",
-        ref: o,
-        controls: R.value,
+        ref: f,
+        controls: Z.value,
         "hls-config": t.hlsConfig,
         "is-hls": t.isHls,
         loop: t.loop,
         muted: t.muted,
         "auto-play": t.autoPlay,
-        "audio-track-index": x.value,
+        "audio-track-index": _.value,
+        "quality-level-index": h.value,
         "plays-inline": !0,
         poster: t.poster,
         src: t.src,
         class: "gvp-video",
         preload: "metadata",
         onAudioTracks: I,
-        onPause: c[0] || (c[0] = (O) => {
-          g.value = !1, e("pause");
+        onQualityLevels: H,
+        onCurrentLevel: d[0] || (d[0] = (D) => b.value = D),
+        onPause: d[1] || (d[1] = (D) => {
+          w.value = !1, e("pause");
         }),
-        onPlay: c[1] || (c[1] = (O) => {
-          g.value = !0, e("play");
+        onPlay: d[2] || (d[2] = (D) => {
+          w.value = !0, e("play");
         })
       }, {
-        default: xe(() => [
-          ke(d.$slots, "default")
+        default: Se(() => [
+          Ee(c.$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"])),
+      P.value ? T("", !0) : (i(), v("div", an)),
+      t.showDeviceToggle ? (i(), v("div", sn, [
+        l("div", rn, [
+          l("button", {
+            "aria-pressed": a.value === "desktop",
+            class: y(["gvp-toggle-btn", { "is-active": a.value === "desktop" }]),
             "aria-label": "Desktop view",
             type: "button",
-            onClick: c[2] || (c[2] = (O) => m.value = "desktop")
+            onClick: d[3] || (d[3] = (D) => a.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" }]),
+            U(zt)
+          ], 10, un),
+          d[12] || (d[12] = l("div", { class: "gvp-toggle-divider" }, null, -1)),
+          l("button", {
+            "aria-pressed": a.value === "mobile",
+            class: y(["gvp-toggle-btn", { "is-active": a.value === "mobile" }]),
             "aria-label": "Mobile view",
             type: "button",
-            onClick: c[3] || (c[3] = (O) => m.value = "mobile")
+            onClick: d[4] || (d[4] = (D) => a.value = "mobile")
           }, [
-            j(St)
-          ], 10, qt)
+            U(Kt)
+          ], 10, cn)
         ])
-      ])) : M("", !0),
+      ])) : T("", !0),
       t.closable ? (i(), v("button", {
         key: 4,
         "aria-label": "Close",
         class: "gvp-close",
         type: "button",
-        onClick: c[4] || (c[4] = (O) => e("close"))
+        onClick: d[5] || (d[5] = (D) => e("close"))
       }, [
-        j(At)
-      ])) : M("", !0),
-      D.value && !E.value ? (i(), U(He, {
+        U(en)
+      ])) : T("", !0),
+      z.value && !M.value ? (i(), j(Ze, {
         key: 5,
-        tracks: P.value,
-        "active-index": B.value,
-        onSelect: c[5] || (c[5] = (O) => x.value = O)
-      }, null, 8, ["tracks", "active-index"])) : M("", !0),
-      !A.value && !E.value ? (i(), U(Fe, {
+        tracks: E.value,
+        "active-index": X.value,
+        onSelect: d[6] || (d[6] = (D) => _.value = D)
+      }, null, 8, ["tracks", "active-index"])) : T("", !0),
+      !P.value && !M.value ? (i(), j(Ke, {
         key: 6,
-        speed: _.value,
-        onSelect: pe
-      }, null, 8, ["speed"])) : M("", !0),
-      !A.value && !E.value ? (i(), U(qe, {
+        speed: x.value,
+        onSelect: de
+      }, null, 8, ["speed"])) : T("", !0),
+      !P.value && !M.value ? (i(), j(nt, {
         key: 7,
-        video: S.value
-      }, null, 8, ["video"])) : M("", !0),
-      !A.value && J(b) && !E.value ? (i(), v("button", {
+        video: Q.value
+      }, null, 8, ["video"])) : T("", !0),
+      !P.value && ee(W) && !M.value ? (i(), v("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: y(["gvp-pip-btn", { "is-active": u.value }]),
+        "aria-label": u.value ? "Exit picture-in-picture" : "Picture-in-picture",
+        "aria-pressed": u.value,
+        onClick: ve
       }, [
-        j(Ce)
-      ], 10, zt)) : M("", !0),
-      !A.value && E.value ? (i(), v("button", {
+        U(Me)
+      ], 10, dn)) : T("", !0),
+      !P.value && M.value ? (i(), v("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": w.value ? "Pause" : "Play",
+        onClick: F
+      }, null, 8, vn)) : T("", !0),
+      !P.value && !M.value && !w.value ? (i(), v("div", pn, [
+        l("button", {
           "aria-label": "Play",
           class: "gvp-play",
           type: "button",
-          onClick: Q,
-          onMouseenter: c[6] || (c[6] = (O) => p.value = !0),
-          onMouseleave: c[7] || (c[7] = (O) => p.value = !1)
+          onClick: F,
+          onMouseenter: d[7] || (d[7] = (D) => m.value = !0),
+          onMouseleave: d[8] || (d[8] = (D) => m.value = !1)
         }, [
-          j(Bt),
-          t.tooltipText && p.value ? (i(), v("span", Kt, q(t.tooltipText), 1)) : M("", !0)
+          U(Xt),
+          t.tooltipText && m.value ? (i(), v("span", fn, O(t.tooltipText), 1)) : T("", !0)
         ], 32)
-      ])) : M("", !0),
-      !A.value && E.value ? (i(), U(Pt, {
+      ])) : T("", !0),
+      !P.value && M.value ? (i(), j(Qt, {
         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": w.value,
+        container: B.value,
+        "on-toggle-play": F,
+        "quality-levels": A.value,
+        "current-level": b.value,
+        "selected-level": h.value,
+        onSelectLevel: d[9] || (d[9] = (D) => h.value = D)
+      }, null, 8, ["video", "is-playing", "container", "quality-levels", "current-level", "selected-level"])) : T("", !0),
+      !P.value && !M.value ? (i(), v("div", mn)) : T("", !0)
     ], 38));
   }
 });
 export {
-  Ee as HLSPlayer,
-  Qt as VueVideoPlayer,
-  Dt as parseYouTubeId,
-  Rt as parseYouTubeStart,
-  Ft as youTubeEmbedUrl
+  Ve as HLSPlayer,
+  kn as VueVideoPlayer,
+  tn as parseYouTubeId,
+  nn as parseYouTubeStart,
+  ln as youTubeEmbedUrl
 };
 //# sourceMappingURL=index.mjs.map