@glitchlab/vue-video-player 1.1.0 → 1.2.0

package/dist/index.mjs

@@ -1,6 +1,19 @@
-import { defineComponent as $, ref as g, onMounted as Z, watch as D, onUnmounted as N, openBlock as c, createElementBlock as p, normalizeClass as h, renderSlot as H, createElementVNode as d, computed as k, normalizeStyle as U, createBlock as z, withCtx as A, createCommentVNode as P, createVNode as B, toDisplayString as W } from "vue";
-import L from "hls.js";
-const Y = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "poster"], _ = /* @__PURE__ */ $({
+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) {
+  const e = t == null ? void 0 : t.trim();
+  if (e) return e;
+  if (a) {
+    try {
+      const m = new Intl.DisplayNames(void 0, { type: "language" }).of(a);
+      if (m && m !== a) return m;
+    } catch {
+    }
+    return a;
+  }
+  return `Audio ${l + 1}`;
+}
+const _e = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "poster"], Ee = /* @__PURE__ */ T({
   __name: "HLSPlayer",
   props: {
     src: {},
@@ -13,90 +26,1108 @@ const Y = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "p
     playsInline: { type: Boolean, default: !0 },
     preload: { default: "metadata" },
     poster: {},
+    class: {},
+    audioTrackIndex: { 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", []);
+      }
+    }
+    function k(r) {
+      var R, H, A;
+      const b = m.value;
+      if (!b || !r) return;
+      _();
+      const E = () => {
+        e.autoPlay && b.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
+          }));
+          o("audio-tracks", D);
+        };
+        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);
+      } else {
+        b.src = r, b.load(), b.addEventListener("loadedmetadata", E, { once: !0 }), L = () => {
+          b.removeEventListener("loadedmetadata", E);
+        };
+        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
+              });
+            }
+            o("audio-tracks", D);
+          };
+          (R = y.addEventListener) == null || R.call(y, "addtrack", I), (H = y.addEventListener) == null || H.call(y, "removetrack", I), (A = y.addEventListener) == null || A.call(y, "change", I), y.length > 0 && I(), p = () => {
+            var D, B, N;
+            (D = y.removeEventListener) == null || D.call(y, "addtrack", I), (B = y.removeEventListener) == null || B.call(y, "removetrack", I), (N = y.removeEventListener) == null || N.call(y, "change", I);
+          };
+        }
+      }
+    }
+    function h(r) {
+      var R;
+      if (r == null || r < 0) return;
+      const b = g.value;
+      if (b) {
+        b.audioTrack !== r && (b.audioTrack = r);
+        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;
+    }
+    return fe(() => {
+      e.src && k(e.src);
+    }), F(
+      () => e.src,
+      (r) => {
+        r && k(r);
+      }
+    ), F(
+      () => e.audioTrackIndex,
+      (r) => h(r)
+    ), X(_), a({ videoEl: m }), (r, b) => (i(), v("video", {
+      ref_key: "videoEl",
+      ref: m,
+      muted: t.muted,
+      loop: t.loop,
+      controls: t.controls,
+      autoplay: t.autoPlay,
+      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"))
+    }, [
+      ke(r.$slots, "default")
+    ], 42, _e));
+  }
+}), $e = { name: "IconAudio" }, Le = /* @__PURE__ */ T({
+  ...$e,
+  props: {
     class: {}
   },
-  emits: ["play", "pause"],
-  setup(e, { expose: s, emit: o }) {
-    const t = e, v = o, i = g(null), r = g(null), u = globalThis.window !== void 0 && L.isSupported(), C = (n) => !!t.isHls || u && n.endsWith(".m3u8");
-    function w() {
-      r.value && (r.value.destroy(), r.value = null);
-      const n = i.value;
-      if (n) {
-        for (n.pause(), n.removeAttribute("src"); n.firstChild; ) n.firstChild.remove();
-        n.load();
+  setup(t) {
+    const a = t;
+    return (l, e) => (i(), v("svg", {
+      class: C(["gvp-icon", a.class]),
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, [...e[0] || (e[0] = [
+      s("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", {
+        d: "M16.5 8C17.5 9 18 10.5 18 12C18 13.5 17.5 15 16.5 16M19 5.5C20.5 7 21.5 9.5 21.5 12C21.5 14.5 20.5 17 19 18.5",
+        stroke: "currentColor",
+        "stroke-width": "1.5",
+        "stroke-linecap": "round"
+      }, null, -1)
+    ])], 2));
+  }
+}), Pe = { name: "IconChevron" }, ye = /* @__PURE__ */ T({
+  ...Pe,
+  props: {
+    class: {}
+  },
+  setup(t) {
+    const a = t;
+    return (l, e) => (i(), v("svg", {
+      class: C(["gvp-icon", a.class]),
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, [...e[0] || (e[0] = [
+      s("path", {
+        d: "M6 9L12 15L18 9",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }, null, -1)
+    ])], 2));
+  }
+}), Me = ["aria-expanded"], Te = { class: "gvp-audio-label" }, Ie = {
+  key: 0,
+  class: "gvp-audio-menu",
+  role: "listbox",
+  "aria-label": "Audio tracks"
+}, Se = ["aria-selected", "onClick"], He = /* @__PURE__ */ T({
+  __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]
+    );
+    function p(x) {
+      m.value && !m.value.contains(x.target) && (o.value = !1);
+    }
+    function L(x) {
+      x.key === "Escape" && (o.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);
+    });
+    function P(x) {
+      e("select", x), o.value = !1;
+    }
+    return (x, _) => {
+      var k;
+      return i(), v("div", {
+        ref_key: "rootEl",
+        ref: m,
+        class: "gvp-audio"
+      }, [
+        s("button", {
+          type: "button",
+          class: "gvp-audio-btn",
+          "aria-haspopup": "listbox",
+          "aria-expanded": o.value,
+          "aria-label": "Audio track",
+          onClick: _[0] || (_[0] = (h) => o.value = !o.value)
+        }, [
+          j(Le),
+          s("span", Te, q((k = g.value) == null ? void 0 : k.label), 1),
+          j(ye)
+        ], 8, Me),
+        o.value ? (i(), v("ul", Ie, [
+          (i(!0), v(oe, null, ae(t.tracks, (h) => (i(), v("li", {
+            key: h.index
+          }, [
+            s("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)
+          ]))), 128))
+        ])) : M("", !0)
+      ], 512);
+    };
+  }
+}), Be = { name: "IconSpeed" }, we = /* @__PURE__ */ T({
+  ...Be,
+  props: {
+    class: {}
+  },
+  setup(t) {
+    const a = t;
+    return (l, e) => (i(), v("svg", {
+      class: C(["gvp-icon", a.class]),
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, [...e[0] || (e[0] = [
+      s("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", {
+        d: "M12 8V12L14.5 14.5",
+        stroke: "currentColor",
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }, null, -1)
+    ])], 2));
+  }
+}), Ve = ["aria-expanded"], Ae = { class: "gvp-speed-label" }, De = {
+  key: 0,
+  class: "gvp-speed-menu",
+  role: "listbox",
+  "aria-label": "Playback speed"
+}, Re = ["aria-selected", "onClick"], Fe = /* @__PURE__ */ T({
+  __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);
+    }
+    function p(P) {
+      P.key === "Escape" && (o.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);
+    });
+    function L(P) {
+      e("select", P), o.value = !1;
+    }
+    return (P, x) => (i(), v("div", {
+      ref_key: "rootEl",
+      ref: m,
+      class: "gvp-speed"
+    }, [
+      s("button", {
+        type: "button",
+        class: "gvp-speed-btn",
+        "aria-haspopup": "listbox",
+        "aria-expanded": o.value,
+        "aria-label": "`Playback speed: ${speed === 1 ? '1×' : speed + '×'}`",
+        onClick: x[0] || (x[0] = (_) => o.value = !o.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", {
+            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)
+        ])), 64))
+      ])) : M("", !0)
+    ], 512));
+  }
+}), Ne = { name: "IconCaptions" }, be = /* @__PURE__ */ T({
+  ...Ne,
+  props: {
+    class: {}
+  },
+  setup(t) {
+    const a = t;
+    return (l, e) => (i(), v("svg", {
+      class: C(["gvp-icon", a.class]),
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, [...e[0] || (e[0] = [
+      s("rect", {
+        x: "2",
+        y: "5",
+        width: "20",
+        height: "14",
+        rx: "3",
+        stroke: "currentColor",
+        "stroke-width": "1.5"
+      }, null, -1),
+      s("path", {
+        d: "M7 12H11M13 12H17M7 15H9M11 15H13M15 15H17",
+        stroke: "currentColor",
+        "stroke-width": "1.5",
+        "stroke-linecap": "round"
+      }, null, -1)
+    ])], 2));
+  }
+}), Oe = ["aria-expanded", "aria-pressed"], je = {
+  key: 0,
+  class: "gvp-captions-menu",
+  role: "listbox",
+  "aria-label": "Captions"
+}, Ue = ["aria-selected"], Ze = ["aria-selected", "onClick"], qe = /* @__PURE__ */ T({
+  __name: "CaptionsSwitcher",
+  props: {
+    video: {}
+  },
+  setup(t) {
+    const a = t, l = w([]), e = w(-1), o = w(!1), m = w(null);
+    function g(k) {
+      const h = [];
+      for (let b = 0; b < k.length; b++) {
+        const E = k[b];
+        (E.kind === "subtitles" || E.kind === "captions") && h.push({ index: b, label: E.label || E.language || `Track ${b + 1}` });
       }
+      l.value = h;
+      let r = -1;
+      for (let b = 0; b < k.length; b++)
+        if (k[b].mode === "showing") {
+          r = b;
+          break;
+        }
+      e.value = r;
+    }
+    let p = null;
+    F(() => a.video, (k) => {
+      if (p == null || p(), p = null, !k) {
+        l.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);
+      });
+    }, { immediate: !0 }), X(() => {
+      p == null || p(), document.removeEventListener("mousedown", L), document.removeEventListener("keydown", P);
+    });
+    function L(k) {
+      m.value && !m.value.contains(k.target) && (o.value = !1);
+    }
+    function P(k) {
+      k.key === "Escape" && (o.value = !1);
+    }
+    F(o, (k) => {
+      k ? (document.addEventListener("mousedown", L), document.addEventListener("keydown", P)) : (document.removeEventListener("mousedown", L), document.removeEventListener("keydown", P));
+    });
+    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 _(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;
+    }
+    return (k, h) => l.value.length > 0 ? (i(), v("div", {
+      key: 0,
+      ref_key: "rootEl",
+      ref: m,
+      class: "gvp-captions"
+    }, [
+      s("button", {
+        type: "button",
+        class: C(["gvp-captions-btn", { "is-active": e.value >= 0 }]),
+        "aria-haspopup": "listbox",
+        "aria-expanded": o.value,
+        "aria-pressed": e.value >= 0,
+        "aria-label": "Captions",
+        onClick: h[0] || (h[0] = (r) => o.value = !o.value)
+      }, [
+        j(be)
+      ], 10, Oe),
+      o.value ? (i(), v("ul", je, [
+        s("li", null, [
+          s("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)
+        ]),
+        (i(!0), v(oe, null, ae(l.value, (r) => (i(), v("li", {
+          key: r.index
+        }, [
+          s("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)
+        ]))), 128))
+      ])) : M("", !0)
+    ], 512)) : M("", !0);
+  }
+}), ze = { name: "IconPause" }, We = /* @__PURE__ */ T({
+  ...ze,
+  props: {
+    class: {}
+  },
+  setup(t) {
+    const a = t;
+    return (l, e) => (i(), v("svg", {
+      class: C(["gvp-icon", a.class]),
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, [...e[0] || (e[0] = [
+      s("rect", {
+        x: "6",
+        y: "5",
+        width: "4",
+        height: "14",
+        rx: "1",
+        fill: "currentColor"
+      }, null, -1),
+      s("rect", {
+        x: "14",
+        y: "5",
+        width: "4",
+        height: "14",
+        rx: "1",
+        fill: "currentColor"
+      }, null, -1)
+    ])], 2));
+  }
+}), Ye = { name: "IconPlaySolid" }, Ke = /* @__PURE__ */ T({
+  ...Ye,
+  props: {
+    class: {}
+  },
+  setup(t) {
+    const a = t;
+    return (l, e) => (i(), v("svg", {
+      class: C(["gvp-icon", a.class]),
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, [...e[0] || (e[0] = [
+      s("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,
+  props: {
+    class: {}
+  },
+  setup(t) {
+    const a = t;
+    return (l, e) => (i(), v("svg", {
+      class: C(["gvp-icon", a.class]),
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, [...e[0] || (e[0] = [
+      s("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", {
+        d: "M16.5 8C17.5 9 18 10.5 18 12C18 13.5 17.5 15 16.5 16M19 5.5C20.5 7 21.5 9.5 21.5 12C21.5 14.5 20.5 17 19 18.5",
+        stroke: "currentColor",
+        "stroke-width": "1.5",
+        "stroke-linecap": "round"
+      }, null, -1)
+    ])], 2));
+  }
+}), Ge = { name: "IconVolumeLow" }, Qe = /* @__PURE__ */ T({
+  ...Ge,
+  props: {
+    class: {}
+  },
+  setup(t) {
+    const a = t;
+    return (l, e) => (i(), v("svg", {
+      class: C(["gvp-icon", a.class]),
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, [...e[0] || (e[0] = [
+      s("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", {
+        d: "M16.5 8C17.5 9 18 10.5 18 12C18 13.5 17.5 15 16.5 16",
+        stroke: "currentColor",
+        "stroke-width": "1.5",
+        "stroke-linecap": "round"
+      }, null, -1)
+    ])], 2));
+  }
+}), et = { name: "IconVolumeMuted" }, tt = /* @__PURE__ */ T({
+  ...et,
+  props: {
+    class: {}
+  },
+  setup(t) {
+    const a = t;
+    return (l, e) => (i(), v("svg", {
+      class: C(["gvp-icon", a.class]),
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, [...e[0] || (e[0] = [
+      s("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", {
+        d: "M16 9L22 15M22 9L16 15",
+        stroke: "currentColor",
+        "stroke-width": "1.5",
+        "stroke-linecap": "round"
+      }, null, -1)
+    ])], 2));
+  }
+}), nt = { name: "IconPiP" }, Ce = /* @__PURE__ */ T({
+  ...nt,
+  props: {
+    class: {}
+  },
+  setup(t) {
+    const a = t;
+    return (l, e) => (i(), v("svg", {
+      class: C(["gvp-icon", a.class]),
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, [...e[0] || (e[0] = [
+      s("rect", {
+        x: "2",
+        y: "4",
+        width: "20",
+        height: "16",
+        rx: "2",
+        stroke: "currentColor",
+        "stroke-width": "1.5"
+      }, null, -1),
+      s("rect", {
+        x: "12",
+        y: "12",
+        width: "8",
+        height: "5",
+        rx: "1",
+        fill: "currentColor"
+      }, null, -1)
+    ])], 2));
+  }
+}), ot = { name: "IconFullscreen" }, at = /* @__PURE__ */ T({
+  ...ot,
+  props: {
+    class: {}
+  },
+  setup(t) {
+    const a = t;
+    return (l, e) => (i(), v("svg", {
+      class: C(["gvp-icon", a.class]),
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, [...e[0] || (e[0] = [
+      s("path", {
+        d: "M4 9V4H9M15 4H20V9M20 15V20H15M9 20H4V15",
+        stroke: "currentColor",
+        "stroke-width": "1.75",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }, null, -1)
+    ])], 2));
+  }
+}), st = { name: "IconFullscreenExit" }, lt = /* @__PURE__ */ T({
+  ...st,
+  props: {
+    class: {}
+  },
+  setup(t) {
+    const a = t;
+    return (l, e) => (i(), v("svg", {
+      class: C(["gvp-icon", a.class]),
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, [...e[0] || (e[0] = [
+      s("path", {
+        d: "M9 4V9H4M15 9V4H20M15 20V15H20M9 15H4V20",
+        stroke: "currentColor",
+        "stroke-width": "1.75",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }, null, -1)
+    ])], 2));
+  }
+});
+function ge(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}`;
+  }
+  return `${e}:${m}`;
+}
+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 = {
+  class: "gvp-time",
+  "aria-live": "off"
+}, pt = ["aria-expanded", "aria-label"], ft = { class: "gvp-speed-label" }, mt = {
+  key: 0,
+  class: "gvp-speed-menu",
+  role: "listbox",
+  "aria-label": "Playback speed"
+}, ht = ["aria-selected", "onClick"], gt = ["aria-expanded", "aria-pressed"], kt = {
+  key: 0,
+  class: "gvp-captions-menu",
+  role: "listbox",
+  "aria-label": "Captions"
+}, yt = ["aria-selected"], wt = ["aria-selected", "onClick"], bt = ["aria-label", "aria-pressed"], Ct = {
+  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({
+  __name: "ControlBar",
+  props: {
+    video: {},
+    isPlaying: { type: Boolean },
+    container: {},
+    onTogglePlay: { type: Function }
+  },
+  setup(t) {
+    const a = (() => {
+      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);
+    }
+    function L() {
+      p(), o.isPlaying && (g = setTimeout(() => {
+        m.value = !1;
+      }, Lt));
+    }
+    function P() {
+      m.value = !0, L();
+    }
+    F(() => o.isPlaying, (n) => {
+      n ? L() : (p(), m.value = !0);
+    }, { immediate: !0 }), F(() => o.container, (n) => {
+      if (!n) return;
+      const u = () => P();
+      n.addEventListener("mousemove", u), n.addEventListener("touchstart", u), n.addEventListener("focusin", u);
+    }, { immediate: !0 });
+    const x = w(0), _ = w(0), k = w(0);
+    F(() => o.video, (n) => {
+      if (!n) return;
+      const u = () => {
+        x.value = n.currentTime;
+      }, f = () => {
+        _.value = Number.isFinite(n.duration) ? n.duration : 0;
+      }, $ = () => {
+        const V = n.buffered;
+        if (!V || V.length === 0) {
+          k.value = 0;
+          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);
+            break;
+          }
+        k.value = me;
+      };
+      u(), f(), $(), n.addEventListener("timeupdate", u), n.addEventListener("durationchange", f), n.addEventListener("loadedmetadata", f), n.addEventListener("progress", $), n.addEventListener("timeupdate", $);
+    }, { 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 R = w(1), H = w(!1);
+    F(() => o.video, (n) => {
+      if (!n) return;
+      const u = () => {
+        R.value = n.volume, H.value = n.muted;
+      };
+      u(), n.addEventListener("volumechange", u);
+    }, { immediate: !0 });
+    function A() {
+      o.video && (o.video.muted = !o.video.muted);
     }
     function y(n) {
-      const f = i.value;
-      if (!(!f || !n))
-        if (w(), C(n)) {
-          const m = new L(t.hlsConfig);
-          r.value = m, m.attachMedia(f), m.loadSource(n), m.on(L.Events.ERROR, (x, M) => {
-            M.fatal && (m.destroy(), r.value = null);
-          });
-        } else
-          f.src = n, f.load();
-    }
-    return Z(() => {
-      t.src && y(t.src);
-    }), D(
-      () => t.src,
-      (n) => {
-        n && 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);
+    }
+    const I = w(1), D = w(!1), B = w(null);
+    F(() => o.video, (n) => {
+      if (!n) return;
+      const u = () => {
+        I.value = n.playbackRate;
+      };
+      u(), n.addEventListener("ratechange", u);
+    }, { immediate: !0 });
+    function N(n) {
+      o.video && (o.video.playbackRate = n), I.value = n, D.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}` });
       }
-    ), N(w), s({ videoEl: i }), (n, f) => (c(), p("video", {
-      ref_key: "videoEl",
-      ref: i,
-      muted: e.muted,
-      loop: e.loop,
-      controls: e.controls,
-      autoplay: e.autoPlay,
-      playsinline: e.playsInline,
-      preload: e.preload,
-      poster: e.poster,
-      class: h(t.class),
-      onPlay: f[0] || (f[0] = (m) => v("play")),
-      onPause: f[1] || (f[1] = (m) => v("pause"))
+      G.value = u;
+      let f = -1;
+      for (let $ = 0; $ < n.length; $++)
+        if (n[$].mode === "showing") {
+          f = $;
+          break;
+        }
+      S.value = f;
+    }
+    F(() => o.video, (n) => {
+      if (!n) {
+        G.value = [], S.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));
+    }, { 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 Q() {
+      var u;
+      const n = (u = o.video) == null ? void 0 : u.textTracks;
+      if (n) {
+        for (let f = 0; f < n.length; f++) n[f].mode = "hidden";
+        S.value = -1, z.value = !1;
+      }
+    }
+    const Y = w(!1), ve = typeof document < "u" && !!document.pictureInPictureEnabled;
+    F(() => o.video, (n) => {
+      n && (n.addEventListener("enterpictureinpicture", () => {
+        Y.value = !0;
+      }), n.addEventListener("leavepictureinpicture", () => {
+        Y.value = !1;
+      }));
+    }, { immediate: !0 });
+    function pe() {
+      o.video && (document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
+      }) : o.video.requestPictureInPicture().catch(() => {
+      }));
+    }
+    const W = w(!1), le = typeof document > "u" ? !1 : !!(document.fullscreenEnabled || document.webkitFullscreenEnabled);
+    function d() {
+      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 O() {
+      const n = document.exitFullscreen ?? document.webkitExitFullscreen;
+      return n ? n.call(document) : Promise.reject(new Error("unsupported"));
+    }
+    function K() {
+      W.value = d() === o.container;
+    }
+    fe(() => {
+      document.addEventListener("fullscreenchange", K), document.addEventListener("webkitfullscreenchange", K);
+    }), X(() => {
+      p(), document.removeEventListener("fullscreenchange", K), document.removeEventListener("webkitfullscreenchange", K);
+    });
+    function re() {
+      var n, u;
+      if (l) {
+        (u = (n = o.video) == null ? void 0 : n.webkitEnterFullscreen) == null || u.call(n);
+        return;
+      }
+      W.value ? O().catch(() => {
+      }) : o.container && c(o.container).catch(() => {
+      });
+    }
+    const ie = le || l && o.video !== null && typeof o.video.webkitEnterFullscreen == "function";
+    function ue(n, u) {
+      function f(V) {
+        u.value && !u.value.contains(V.target) && (n.value = !1);
+      }
+      function $(V) {
+        V.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", $);
+      });
+    }
+    return ue(D, B), ue(z, te), (n, u) => (i(), v("div", {
+      role: "toolbar",
+      "aria-label": "Video controls",
+      class: C(["gvp-controls", !m.value && "is-hidden"]),
+      onMouseenter: p,
+      onMouseleave: L
     }, [
-      H(n.$slots, "default")
-    ], 42, Y));
+      s("div", rt, [
+        s("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))
+        }, [
+          t.isPlaying ? (i(), U(We, { key: 0 })) : (i(), U(Ke, { key: 1 }))
+        ], 8, it),
+        s("div", ut, [
+          s("div", ct, [
+            s("div", {
+              class: "gvp-seek-buffered",
+              style: ce({ width: `${b()}%` })
+            }, null, 4),
+            s("div", {
+              class: "gvp-seek-progress",
+              style: ce({ width: `${r()}%` })
+            }, null, 4)
+          ]),
+          s("input", {
+            type: "range",
+            class: "gvp-seek-input",
+            min: 0,
+            max: 100,
+            step: 0.1,
+            value: r(),
+            disabled: !h(),
+            "aria-label": "Seek",
+            "aria-valuemin": 0,
+            "aria-valuemax": Math.floor(_.value),
+            "aria-valuenow": Math.floor(x.value),
+            onInput: E
+          }, null, 40, dt)
+        ]),
+        s("span", vt, q(J(ge)(x.value)) + " / " + q(J(ge)(_.value)), 1),
+        s("div", {
+          ref_key: "speedRootEl",
+          ref: B,
+          class: "gvp-speed"
+        }, [
+          s("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)
+          }, [
+            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", {
+                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)
+            ])), 64))
+          ])) : M("", !0)
+        ], 512),
+        G.value.length > 0 ? (i(), v("div", {
+          key: 0,
+          ref_key: "captionsRootEl",
+          ref: te,
+          class: "gvp-captions"
+        }, [
+          s("button", {
+            type: "button",
+            class: C(["gvp-ctrl-btn", S.value >= 0 && "is-active"]),
+            "aria-haspopup": "listbox",
+            "aria-expanded": z.value,
+            "aria-label": "Captions",
+            "aria-pressed": S.value >= 0,
+            onClick: u[2] || (u[2] = (f) => z.value = !z.value)
+          }, [
+            j(be)
+          ], 10, gt),
+          z.value ? (i(), v("ul", kt, [
+            s("li", null, [
+              s("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)
+            ]),
+            (i(!0), v(oe, null, ae(G.value, (f) => (i(), v("li", {
+              key: f.index
+            }, [
+              s("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)
+            ]))), 128))
+          ])) : M("", !0)
+        ], 512)) : M("", !0),
+        s("div", {
+          class: C(["gvp-volume", !J(a) && "is-expandable"])
+        }, [
+          s("button", {
+            type: "button",
+            class: "gvp-ctrl-btn",
+            "aria-label": H.value ? "Unmute" : "Mute",
+            "aria-pressed": H.value,
+            onClick: A
+          }, [
+            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", {
+                class: "gvp-volume-fill",
+                style: ce({ width: `${H.value ? 0 : Math.round(R.value * 100)}%` })
+              }, null, 4)
+            ]),
+            s("input", {
+              type: "range",
+              class: "gvp-volume-input",
+              min: 0,
+              max: 100,
+              step: 1,
+              value: H.value ? 0 : Math.round(R.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)
+          ]))
+        ], 2),
+        J(ve) ? (i(), v("button", {
+          key: 1,
+          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
+        }, [
+          j(Ce)
+        ], 10, Et)) : M("", !0),
+        J(ie) ? (i(), v("button", {
+          key: 2,
+          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
+        }, [
+          W.value ? (i(), U(lt, { key: 0 })) : (i(), U(at, { key: 1 }))
+        ], 10, $t)) : M("", !0)
+      ])
+    ], 34));
   }
-}), j = { name: "IconDesktop" }, J = /* @__PURE__ */ $({
-  ...j,
+}), Mt = { name: "IconDesktop" }, Tt = /* @__PURE__ */ T({
+  ...Mt,
   props: {
     class: {}
   },
-  setup(e) {
-    const s = e;
-    return (o, t) => (c(), p("svg", {
-      class: h(["gvp-icon", s.class]),
+  setup(t) {
+    const a = t;
+    return (l, e) => (i(), v("svg", {
+      class: C(["gvp-icon", a.class]),
       width: "20",
       height: "20",
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, [...t[0] || (t[0] = [
-      d("path", {
+    }, [...e[0] || (e[0] = [
+      s("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),
-      d("path", {
+      s("path", {
         d: "M11 15H13",
         stroke: "currentColor",
         "stroke-width": "1.5",
         "stroke-linecap": "round",
         "stroke-linejoin": "round"
       }, null, -1),
-      d("path", {
+      s("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),
-      d("path", {
+      s("path", {
         d: "M7 22H17",
         stroke: "currentColor",
         "stroke-width": "1.5",
@@ -104,36 +1135,36 @@ const Y = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "p
       }, null, -1)
     ])], 2));
   }
-}), O = { name: "IconMobile" }, X = /* @__PURE__ */ $({
-  ...O,
+}), It = { name: "IconMobile" }, St = /* @__PURE__ */ T({
+  ...It,
   props: {
     class: {}
   },
-  setup(e) {
-    const s = e;
-    return (o, t) => (c(), p("svg", {
-      class: h(["gvp-icon", s.class]),
+  setup(t) {
+    const a = t;
+    return (l, e) => (i(), v("svg", {
+      class: C(["gvp-icon", a.class]),
       width: "20",
       height: "20",
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, [...t[0] || (t[0] = [
-      d("path", {
+    }, [...e[0] || (e[0] = [
+      s("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),
-      d("path", {
+      s("path", {
         d: "M11 19H13",
         stroke: "currentColor",
         "stroke-width": "2",
         "stroke-linecap": "round",
         "stroke-linejoin": "round"
       }, null, -1),
-      d("path", {
+      s("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",
@@ -141,121 +1172,121 @@ const Y = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "p
       }, null, -1)
     ])], 2));
   }
-}), q = { name: "IconPlay" }, F = /* @__PURE__ */ $({
-  ...q,
+}), Ht = { name: "IconPlay" }, Bt = /* @__PURE__ */ T({
+  ...Ht,
   props: {
     class: {}
   },
-  setup(e) {
-    const s = e;
-    return (o, t) => (c(), p("svg", {
-      class: h(["gvp-icon", s.class]),
+  setup(t) {
+    const a = t;
+    return (l, e) => (i(), v("svg", {
+      class: C(["gvp-icon", a.class]),
       width: "22",
       height: "22",
       viewBox: "0 0 16 16",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, [...t[0] || (t[0] = [
-      d("path", {
+    }, [...e[0] || (e[0] = [
+      s("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));
   }
-}), G = { name: "IconX" }, K = /* @__PURE__ */ $({
-  ...G,
+}), Vt = { name: "IconX" }, At = /* @__PURE__ */ T({
+  ...Vt,
   props: {
     class: {}
   },
-  setup(e) {
-    const s = e;
-    return (o, t) => (c(), p("svg", {
-      class: h(["gvp-icon", s.class]),
+  setup(t) {
+    const a = t;
+    return (l, e) => (i(), v("svg", {
+      class: C(["gvp-icon", a.class]),
       width: "14",
       height: "14",
       viewBox: "0 0 14 14",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, [...t[0] || (t[0] = [
-      d("path", {
+    }, [...e[0] || (e[0] = [
+      s("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 Q(e) {
-  if (!e) return null;
-  if (/^[A-Za-z0-9_-]{11}$/.test(e)) return e;
-  let s;
+function Dt(t) {
+  if (!t) return null;
+  if (/^[A-Za-z0-9_-]{11}$/.test(t)) return t;
+  let a;
   try {
-    s = new URL(e);
+    a = new URL(t);
   } catch {
     return null;
   }
-  const o = s.hostname.replace(/^www\./, "");
-  if (o === "youtu.be") {
-    const t = s.pathname.slice(1).split("/")[0];
-    return /^[A-Za-z0-9_-]{11}$/.test(t) ? t : null;
+  const l = a.hostname.replace(/^www\./, "");
+  if (l === "youtu.be") {
+    const e = a.pathname.slice(1).split("/")[0];
+    return /^[A-Za-z0-9_-]{11}$/.test(e) ? e : null;
   }
-  if (o === "youtube.com" || o === "m.youtube.com" || o === "music.youtube.com" || o === "youtube-nocookie.com") {
-    const t = s.searchParams.get("v");
-    if (t && /^[A-Za-z0-9_-]{11}$/.test(t)) return t;
-    const v = /^\/(?:embed|shorts|v|live)\/([A-Za-z0-9_-]{11})/.exec(
-      s.pathname
+  if (l === "youtube.com" || l === "m.youtube.com" || l === "music.youtube.com" || l === "youtube-nocookie.com") {
+    const e = a.searchParams.get("v");
+    if (e && /^[A-Za-z0-9_-]{11}$/.test(e)) return e;
+    const o = /^\/(?:embed|shorts|v|live)\/([A-Za-z0-9_-]{11})/.exec(
+      a.pathname
     );
-    if (v) return v[1];
+    if (o) return o[1];
   }
   return null;
 }
-function ee(e) {
+function Rt(t) {
   try {
-    const s = new URL(e), o = s.searchParams.get("t") ?? s.searchParams.get("start");
-    if (!o) return null;
-    if (/^\d+s?$/.test(o)) return Number.parseInt(o, 10);
-    const t = /^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/.exec(o);
-    if (t) {
-      const v = Number.parseInt(t[1] ?? "0", 10), i = Number.parseInt(t[2] ?? "0", 10), r = Number.parseInt(t[3] ?? "0", 10), u = v * 3600 + i * 60 + r;
-      return u > 0 ? u : null;
+    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);
+    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;
     }
   } catch {
   }
   return null;
 }
-function te(e, s = {}) {
+function Ft(t, a = {}) {
   const {
-    autoPlay: o = !1,
-    muted: t = !0,
-    loop: v = !1,
-    controls: i = !0,
-    startSeconds: r
-  } = s, u = new URLSearchParams({
+    autoPlay: l = !1,
+    muted: e = !0,
+    loop: o = !1,
+    controls: m = !0,
+    startSeconds: g
+  } = a, p = new URLSearchParams({
     rel: "0",
     modestbranding: "1",
     playsinline: "1",
-    controls: i ? "1" : "0"
+    controls: m ? "1" : "0"
   });
-  return o ? (u.set("autoplay", "1"), u.set("mute", "1")) : t && u.set("mute", "1"), v && (u.set("loop", "1"), u.set("playlist", e)), r && r > 0 && u.set("start", String(r)), `https://www.youtube-nocookie.com/embed/${e}?${u.toString()}`;
+  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()}`;
 }
-const oe = ["src"], le = {
+const Nt = ["src"], Ot = {
   key: 2,
   class: "gvp-vignette"
-}, se = {
+}, jt = {
   key: 3,
   class: "gvp-toggle"
-}, ae = { class: "gvp-toggle-pill" }, ne = ["aria-pressed"], re = ["aria-pressed"], ue = {
-  key: 5,
+}, Ut = { class: "gvp-toggle-pill" }, Zt = ["aria-pressed"], qt = ["aria-pressed"], zt = ["aria-label", "aria-pressed"], Wt = ["aria-label"], Yt = {
+  key: 10,
   class: "gvp-play-wrap"
-}, ie = {
+}, Kt = {
   key: 0,
   class: "gvp-tooltip",
   role: "tooltip"
-}, ce = {
-  key: 6,
+}, Jt = {
+  key: 12,
   class: "gvp-bottom-fade"
-}, ve = /* @__PURE__ */ $({
+}, Qt = /* @__PURE__ */ T({
   __name: "VideoPlayer",
   props: {
     src: {},
@@ -266,7 +1297,7 @@ const oe = ["src"], le = {
     tooltipText: {},
     muted: { type: Boolean, default: !0 },
     loop: { type: Boolean, default: !1 },
-    controls: { type: Boolean, default: !1 },
+    controls: { type: [Boolean, String], default: !1 },
     autoPlay: { type: Boolean, default: !1 },
     frameMaxWidth: {},
     aspectRatio: {},
@@ -276,165 +1307,283 @@ const oe = ["src"], le = {
     closable: { type: Boolean, default: !1 }
   },
   emits: ["close", "play", "pause"],
-  setup(e, { emit: s }) {
-    const o = e, t = s, v = g(null), i = g(o.defaultDevice), r = g(!1), u = g(!1), C = g(null), w = k(() => Q(o.src)), y = k(() => w.value !== null), n = k(
-      () => w.value ? te(w.value, {
-        autoPlay: o.autoPlay,
-        muted: o.muted,
-        loop: o.loop,
-        controls: o.controls,
-        startSeconds: ee(o.src)
+  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)
       }) : null
-    ), f = k(
+    );
+    function I(d) {
+      P.value = d, x.value = -1;
+    }
+    const D = Z(
+      () => !A.value && P.value.length > 1
+    ), B = Z(
+      () => {
+        var d;
+        return x.value >= 0 ? x.value : ((d = P.value[0]) == null ? void 0 : d.index) ?? -1;
+      }
+    ), N = Z(
       () => {
-        var a, l;
-        return i.value === "mobile" ? ((a = o.aspectRatio) == null ? void 0 : a.mobile) ?? "9/16" : ((l = o.aspectRatio) == null ? void 0 : l.desktop) ?? "16/9";
+        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";
       }
-    ), m = k(
+    ), G = Z(
       () => {
-        var a, l;
-        return i.value === "mobile" ? ((a = o.frameMaxWidth) == null ? void 0 : a.mobile) ?? "420px" : ((l = o.frameMaxWidth) == null ? void 0 : l.desktop) ?? "960px";
+        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";
       }
-    ), x = k(() => {
-      var a;
-      return ((a = v.value) == null ? void 0 : a.videoEl) ?? null;
+    ), S = Z(() => {
+      var d;
+      return ((d = o.value) == null ? void 0 : d.videoEl) ?? null;
     });
-    async function M() {
-      const a = x.value;
-      if (a)
+    async function z() {
+      const d = S.value;
+      if (d)
         try {
-          a.readyState < 2 && a.load();
-          const l = a.play();
-          C.value = l, await l, r.value = !0;
+          d.readyState < 2 && d.load();
+          const c = d.play();
+          L.value = c, await c, g.value = !0;
         } catch {
-          r.value = !1;
+          g.value = !1;
         } finally {
-          C.value = null;
+          L.value = null;
         }
     }
-    async function S() {
-      const a = x.value;
-      if (a) {
-        if (C.value)
+    async function te() {
+      const d = S.value;
+      if (d) {
+        if (L.value)
           try {
-            await C.value;
+            await L.value;
           } catch {
           }
-        a.pause();
+        d.pause();
       }
     }
-    async function T() {
-      !o.hoverPlay || y.value || await M();
+    async function se() {
+      !l.hoverPlay || A.value || await z();
     }
-    async function I() {
-      !o.hoverPlay || y.value || (await S(), r.value = !1);
+    async function de() {
+      !l.hoverPlay || A.value || (await te(), g.value = !1);
     }
-    async function R() {
-      const a = x.value;
-      a && (a.paused ? await M() : (await S(), r.value = !1));
+    async function Q() {
+      const d = S.value;
+      d && (d.paused ? await z() : (await te(), g.value = !1));
     }
-    function E() {
-      u.value = !0, T();
+    function Y() {
+      p.value = !0, se();
     }
-    function V() {
-      u.value = !1, I();
+    function ve() {
+      p.value = !1, de();
     }
-    return (a, l) => (c(), p("div", {
-      class: h(["gvp-root", o.class]),
-      style: U({ width: m.value, aspectRatio: f.value }),
-      onMouseenter: E,
-      onMouseleave: V
+    function pe(d) {
+      _.value = d;
+      const c = S.value;
+      c && (c.playbackRate = d);
+    }
+    F(S, (d) => {
+      d && (d.addEventListener("ratechange", () => {
+        _.value = d.playbackRate;
+      }), d.addEventListener("enterpictureinpicture", () => {
+        k.value = !0;
+      }), d.addEventListener("leavepictureinpicture", () => {
+        k.value = !1;
+      }));
+    });
+    function W() {
+      const d = S.value;
+      d && (document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
+      }) : d.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) {
+          case " ":
+          case "k":
+            d.preventDefault(), Q();
+            break;
+          case "ArrowLeft":
+            d.preventDefault(), c.currentTime = Math.max(0, c.currentTime - 5);
+            break;
+          case "ArrowRight":
+            d.preventDefault(), c.currentTime = Math.min(c.duration || 0, c.currentTime + 5);
+            break;
+          case "ArrowUp":
+            d.preventDefault(), c.volume = Math.min(1, c.volume + 0.1), c.muted && (c.muted = !1);
+            break;
+          case "ArrowDown":
+            d.preventDefault(), c.volume = Math.max(0, c.volume - 0.1);
+            break;
+          case "m":
+            c.muted = !c.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(() => {
+            });
+            break;
+          }
+          case "p":
+            b && W();
+            break;
+        }
+    }
+    return fe(() => {
+      document.addEventListener("keydown", le);
+    }), X(() => {
+      document.removeEventListener("keydown", le);
+    }), (d, c) => (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();
+      }),
+      onMouseleave: c[9] || (c[9] = (O) => {
+        h.value = !1, ve();
+      })
     }, [
-      y.value ? (c(), p("iframe", {
+      A.value ? (i(), v("iframe", {
         key: 0,
         class: "gvp-video gvp-youtube",
-        src: n.value ?? void 0,
+        src: y.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, oe)) : (c(), z(_, {
+      }, null, 8, Nt)) : (i(), U(Ee, {
         key: 1,
         ref_key: "hlsPlayerRef",
-        ref: v,
-        controls: e.controls,
-        "hls-config": e.hlsConfig,
-        "is-hls": e.isHls,
-        loop: e.loop,
-        muted: e.muted,
-        "auto-play": e.autoPlay,
+        ref: o,
+        controls: R.value,
+        "hls-config": t.hlsConfig,
+        "is-hls": t.isHls,
+        loop: t.loop,
+        muted: t.muted,
+        "auto-play": t.autoPlay,
+        "audio-track-index": x.value,
         "plays-inline": !0,
-        poster: e.poster,
-        src: e.src,
+        poster: t.poster,
+        src: t.src,
         class: "gvp-video",
         preload: "metadata",
-        onPause: l[0] || (l[0] = (b) => {
-          r.value = !1, t("pause");
+        onAudioTracks: I,
+        onPause: c[0] || (c[0] = (O) => {
+          g.value = !1, e("pause");
         }),
-        onPlay: l[1] || (l[1] = (b) => {
-          r.value = !0, t("play");
+        onPlay: c[1] || (c[1] = (O) => {
+          g.value = !0, e("play");
         })
       }, {
-        default: A(() => [
-          H(a.$slots, "default")
+        default: xe(() => [
+          ke(d.$slots, "default")
         ]),
         _: 3
-      }, 8, ["controls", "hls-config", "is-hls", "loop", "muted", "auto-play", "poster", "src"])),
-      y.value ? P("", !0) : (c(), p("div", le)),
-      e.showDeviceToggle ? (c(), p("div", se, [
-        d("div", ae, [
-          d("button", {
-            "aria-pressed": i.value === "desktop",
-            class: h(["gvp-toggle-btn", { "is-active": i.value === "desktop" }]),
+      }, 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" }]),
             "aria-label": "Desktop view",
             type: "button",
-            onClick: l[2] || (l[2] = (b) => i.value = "desktop")
+            onClick: c[2] || (c[2] = (O) => m.value = "desktop")
           }, [
-            B(J)
-          ], 10, ne),
-          l[7] || (l[7] = d("div", { class: "gvp-toggle-divider" }, null, -1)),
-          d("button", {
-            "aria-pressed": i.value === "mobile",
-            class: h(["gvp-toggle-btn", { "is-active": i.value === "mobile" }]),
+            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" }]),
             "aria-label": "Mobile view",
             type: "button",
-            onClick: l[3] || (l[3] = (b) => i.value = "mobile")
+            onClick: c[3] || (c[3] = (O) => m.value = "mobile")
           }, [
-            B(X)
-          ], 10, re)
+            j(St)
+          ], 10, qt)
         ])
-      ])) : P("", !0),
-      e.closable ? (c(), p("button", {
+      ])) : M("", !0),
+      t.closable ? (i(), v("button", {
         key: 4,
         "aria-label": "Close",
         class: "gvp-close",
         type: "button",
-        onClick: l[4] || (l[4] = (b) => t("close"))
+        onClick: c[4] || (c[4] = (O) => e("close"))
+      }, [
+        j(At)
+      ])) : M("", !0),
+      D.value && !E.value ? (i(), U(He, {
+        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, {
+        key: 6,
+        speed: _.value,
+        onSelect: pe
+      }, null, 8, ["speed"])) : M("", !0),
+      !A.value && !E.value ? (i(), U(qe, {
+        key: 7,
+        video: S.value
+      }, null, 8, ["video"])) : M("", !0),
+      !A.value && J(b) && !E.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
       }, [
-        B(K)
-      ])) : P("", !0),
-      !y.value && !r.value ? (c(), p("div", ue, [
-        d("button", {
+        j(Ce)
+      ], 10, zt)) : M("", !0),
+      !A.value && E.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": "Play",
           class: "gvp-play",
           type: "button",
-          onClick: R,
-          onMouseenter: l[5] || (l[5] = (b) => u.value = !0),
-          onMouseleave: l[6] || (l[6] = (b) => u.value = !1)
+          onClick: Q,
+          onMouseenter: c[6] || (c[6] = (O) => p.value = !0),
+          onMouseleave: c[7] || (c[7] = (O) => p.value = !1)
         }, [
-          B(F),
-          e.tooltipText && u.value ? (c(), p("span", ie, W(e.tooltipText), 1)) : P("", !0)
+          j(Bt),
+          t.tooltipText && p.value ? (i(), v("span", Kt, q(t.tooltipText), 1)) : M("", !0)
         ], 32)
-      ])) : P("", !0),
-      y.value ? P("", !0) : (c(), p("div", ce))
+      ])) : M("", !0),
+      !A.value && E.value ? (i(), U(Pt, {
+        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)
     ], 38));
   }
 });
 export {
-  _ as HLSPlayer,
-  ve as VueVideoPlayer,
-  Q as parseYouTubeId,
-  ee as parseYouTubeStart,
-  te as youTubeEmbedUrl
+  Ee as HLSPlayer,
+  Qt as VueVideoPlayer,
+  Dt as parseYouTubeId,
+  Rt as parseYouTubeStart,
+  Ft as youTubeEmbedUrl
 };
 //# sourceMappingURL=index.mjs.map