@glitchlab/react-video-player 1.3.0 → 1.4.1

package/dist/index.mjs

@@ -1,24 +1,24 @@
 "use client";
-import { jsxs as v, jsx as t } from "react/jsx-runtime";
-import he, { useState as k, useRef as V, useCallback as S, useEffect as x, useImperativeHandle as me, useMemo as U } from "react";
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
+import we, { useState as k, useRef as H, useCallback as P, useEffect as M, useImperativeHandle as Le, useMemo as K } from "react";
 import $ from "hls.js";
-function Q(e) {
+function ae(e) {
   var n, s, r = "";
   if (typeof e == "string" || typeof e == "number") r += e;
   else if (typeof e == "object") if (Array.isArray(e)) {
     var l = e.length;
-    for (n = 0; n < l; n++) e[n] && (s = Q(e[n])) && (r && (r += " "), r += s);
+    for (n = 0; n < l; n++) e[n] && (s = ae(e[n])) && (r && (r += " "), r += s);
   } else for (s in e) e[s] && (r && (r += " "), r += s);
   return r;
 }
-function H() {
-  for (var e, n, s = 0, r = "", l = arguments.length; s < l; s++) (e = arguments[s]) && (n = Q(e)) && (r && (r += " "), r += n);
+function I() {
+  for (var e, n, s = 0, r = "", l = arguments.length; s < l; s++) (e = arguments[s]) && (n = ae(e)) && (r && (r += " "), r += n);
   return r;
 }
-const K = "gvp-icon", L = (e) => e ? `${K} ${e}` : K, fe = ({ className: e }) => /* @__PURE__ */ v(
+const ne = "gvp-icon", x = (e) => e ? `${ne} ${e}` : ne, ye = ({ className: e }) => /* @__PURE__ */ g(
   "svg",
   {
-    className: L(e),
+    className: x(e),
     width: "20",
     height: "20",
     viewBox: "0 0 24 24",
@@ -57,10 +57,10 @@ const K = "gvp-icon", L = (e) => e ? `${K} ${e}` : K, fe = ({ className: e }) =>
       /* @__PURE__ */ t("path", { d: "M7 22H17", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
     ]
   }
-), ge = ({ className: e }) => /* @__PURE__ */ v(
+), Ee = ({ className: e }) => /* @__PURE__ */ g(
   "svg",
   {
-    className: L(e),
+    className: x(e),
     width: "20",
     height: "20",
     viewBox: "0 0 24 24",
@@ -98,10 +98,10 @@ const K = "gvp-icon", L = (e) => e ? `${K} ${e}` : K, fe = ({ className: e }) =>
       )
     ]
   }
-), ve = ({ className: e }) => /* @__PURE__ */ t(
+), xe = ({ className: e }) => /* @__PURE__ */ t(
   "svg",
   {
-    className: L(e),
+    className: x(e),
     width: "14",
     height: "14",
     viewBox: "0 0 14 14",
@@ -116,10 +116,10 @@ const K = "gvp-icon", L = (e) => e ? `${K} ${e}` : K, fe = ({ className: e }) =>
       }
     )
   }
-), ke = ({ className: e }) => /* @__PURE__ */ t(
+), Ne = ({ className: e }) => /* @__PURE__ */ t(
   "svg",
   {
-    className: L(e),
+    className: x(e),
     width: "22",
     height: "22",
     viewBox: "0 0 16 16",
@@ -134,10 +134,10 @@ const K = "gvp-icon", L = (e) => e ? `${K} ${e}` : K, fe = ({ className: e }) =>
       }
     )
   }
-), we = ({ className: e }) => /* @__PURE__ */ v(
+), Me = ({ className: e }) => /* @__PURE__ */ g(
   "svg",
   {
-    className: L(e),
+    className: x(e),
     width: "16",
     height: "16",
     viewBox: "0 0 24 24",
@@ -165,10 +165,10 @@ const K = "gvp-icon", L = (e) => e ? `${K} ${e}` : K, fe = ({ className: e }) =>
       )
     ]
   }
-), be = ({ className: e }) => /* @__PURE__ */ t(
+), Pe = ({ className: e }) => /* @__PURE__ */ t(
   "svg",
   {
-    className: L(e),
+    className: x(e),
     width: "16",
     height: "16",
     viewBox: "0 0 24 24",
@@ -183,10 +183,10 @@ const K = "gvp-icon", L = (e) => e ? `${K} ${e}` : K, fe = ({ className: e }) =>
       }
     )
   }
-), Ce = ({ className: e }) => /* @__PURE__ */ v(
+), Te = ({ className: e }) => /* @__PURE__ */ g(
   "svg",
   {
-    className: L(e),
+    className: x(e),
     width: "16",
     height: "16",
     viewBox: "0 0 24 24",
@@ -198,10 +198,10 @@ const K = "gvp-icon", L = (e) => e ? `${K} ${e}` : K, fe = ({ className: e }) =>
       /* @__PURE__ */ t("rect", { x: "14", y: "5", width: "4", height: "14", rx: "1", fill: "currentColor" })
     ]
   }
-), Le = ({ className: e }) => /* @__PURE__ */ v(
+), Ie = ({ className: e }) => /* @__PURE__ */ g(
   "svg",
   {
-    className: L(e),
+    className: x(e),
     width: "18",
     height: "18",
     viewBox: "0 0 24 24",
@@ -229,10 +229,10 @@ const K = "gvp-icon", L = (e) => e ? `${K} ${e}` : K, fe = ({ className: e }) =>
       )
     ]
   }
-), Ee = ({ className: e }) => /* @__PURE__ */ v(
+), Se = ({ className: e }) => /* @__PURE__ */ g(
   "svg",
   {
-    className: L(e),
+    className: x(e),
     width: "18",
     height: "18",
     viewBox: "0 0 24 24",
@@ -260,10 +260,10 @@ const K = "gvp-icon", L = (e) => e ? `${K} ${e}` : K, fe = ({ className: e }) =>
       )
     ]
   }
-), ye = ({ className: e }) => /* @__PURE__ */ v(
+), He = ({ className: e }) => /* @__PURE__ */ g(
   "svg",
   {
-    className: L(e),
+    className: x(e),
     width: "18",
     height: "18",
     viewBox: "0 0 24 24",
@@ -291,10 +291,10 @@ const K = "gvp-icon", L = (e) => e ? `${K} ${e}` : K, fe = ({ className: e }) =>
       )
     ]
   }
-), xe = ({ className: e }) => /* @__PURE__ */ t(
+), Ve = ({ className: e }) => /* @__PURE__ */ t(
   "svg",
   {
-    className: L(e),
+    className: x(e),
     width: "18",
     height: "18",
     viewBox: "0 0 24 24",
@@ -312,10 +312,10 @@ const K = "gvp-icon", L = (e) => e ? `${K} ${e}` : K, fe = ({ className: e }) =>
       }
     )
   }
-), Ne = ({ className: e }) => /* @__PURE__ */ t(
+), Ae = ({ className: e }) => /* @__PURE__ */ t(
   "svg",
   {
-    className: L(e),
+    className: x(e),
     width: "18",
     height: "18",
     viewBox: "0 0 24 24",
@@ -333,10 +333,10 @@ const K = "gvp-icon", L = (e) => e ? `${K} ${e}` : K, fe = ({ className: e }) =>
       }
     )
   }
-), Me = ({ className: e }) => /* @__PURE__ */ v(
+), De = ({ className: e }) => /* @__PURE__ */ g(
   "svg",
   {
-    className: L(e),
+    className: x(e),
     width: "18",
     height: "18",
     viewBox: "0 0 24 24",
@@ -348,10 +348,10 @@ const K = "gvp-icon", L = (e) => e ? `${K} ${e}` : K, fe = ({ className: e }) =>
       /* @__PURE__ */ t("rect", { x: "12", y: "12", width: "8", height: "5", rx: "1", fill: "currentColor" })
     ]
   }
-), Pe = ({ className: e }) => /* @__PURE__ */ v(
+), Be = ({ className: e }) => /* @__PURE__ */ g(
   "svg",
   {
-    className: L(e),
+    className: x(e),
     width: "18",
     height: "18",
     viewBox: "0 0 24 24",
@@ -363,10 +363,10 @@ const K = "gvp-icon", L = (e) => e ? `${K} ${e}` : K, fe = ({ className: e }) =>
       /* @__PURE__ */ t("path", { d: "M7 12H11M13 12H17M7 15H9M11 15H13M15 15H17", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
     ]
   }
-), Te = ({ className: e }) => /* @__PURE__ */ v(
+), $e = ({ className: e }) => /* @__PURE__ */ g(
   "svg",
   {
-    className: L(e),
+    className: x(e),
     width: "16",
     height: "16",
     viewBox: "0 0 24 24",
@@ -394,10 +394,40 @@ const K = "gvp-icon", L = (e) => e ? `${K} ${e}` : K, fe = ({ className: e }) =>
       )
     ]
   }
-), Ie = ({ className: e }) => /* @__PURE__ */ t(
+), We = ({ className: e }) => /* @__PURE__ */ g(
   "svg",
   {
-    className: L(e),
+    className: x(e),
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ t(
+        "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",
+          strokeWidth: "1.5"
+        }
+      ),
+      /* @__PURE__ */ t(
+        "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",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      )
+    ]
+  }
+), Re = ({ className: e }) => /* @__PURE__ */ t(
+  "svg",
+  {
+    className: x(e),
     width: "12",
     height: "12",
     viewBox: "0 0 24 24",
@@ -416,20 +446,26 @@ const K = "gvp-icon", L = (e) => e ? `${K} ${e}` : K, fe = ({ className: e }) =>
     )
   }
 );
-function J(e) {
+function re(e) {
   if (!Number.isFinite(e) || e < 0) return "--:--";
-  const n = Math.floor(e), s = Math.floor(n / 3600), r = Math.floor(n % 3600 / 60), u = (n % 60).toString().padStart(2, "0");
+  const n = Math.floor(e), s = Math.floor(n / 3600), r = Math.floor(n % 3600 / 60), c = (n % 60).toString().padStart(2, "0");
   if (s > 0) {
-    const c = r.toString().padStart(2, "0");
-    return `${s}:${c}:${u}`;
+    const u = r.toString().padStart(2, "0");
+    return `${s}:${u}:${c}`;
   }
-  return `${r}:${u}`;
+  return `${r}:${c}`;
 }
-const X = (() => {
+const _e = {
+  index: -1
+};
+function je(e, n) {
+  return e > 0 ? `${e}p` : `Level ${n + 1}`;
+}
+const se = (() => {
   if (typeof navigator > "u") return !1;
   const e = navigator.userAgent;
   return /iPad|iPhone|iPod/.test(e) || e.includes("Mac") && navigator.maxTouchPoints > 1;
-})(), q = typeof navigator > "u" ? !1 : /iPhone|iPod/.test(navigator.userAgent), Se = 3e3, B = {
+})(), G = typeof navigator > "u" ? !1 : /iPhone|iPod/.test(navigator.userAgent), Ue = 3e3, j = {
   isSupported() {
     return typeof document > "u" ? !1 : !!(document.fullscreenEnabled || document.webkitFullscreenEnabled);
   },
@@ -449,89 +485,116 @@ const X = (() => {
       document.removeEventListener("fullscreenchange", e), document.removeEventListener("webkitfullscreenchange", e);
     };
   }
-}, He = ({
+}, Ze = ({
   video: e,
   isPlaying: n,
   container: s,
-  onTogglePlay: r
+  onTogglePlay: r,
+  qualityLevels: l = [],
+  currentLevel: c = -1,
+  selectedLevel: u = -1,
+  onSelectLevel: i
 }) => {
-  const [l, u] = k(!0), c = V(null), a = S(() => {
-    c.current !== null && (clearTimeout(c.current), c.current = null);
-  }, []), i = S(() => {
-    a(), n && (c.current = setTimeout(() => u(!1), Se));
-  }, [a, n]), m = S(() => {
-    u(!0), i();
-  }, [i]);
-  return x(() => {
+  const [p, d] = k(!0), C = H(null), b = P(() => {
+    C.current !== null && (clearTimeout(C.current), C.current = null);
+  }, []), o = P(() => {
+    b(), n && (C.current = setTimeout(() => d(!1), Ue));
+  }, [b, n]), a = P(() => {
+    d(!0), o();
+  }, [o]);
+  return M(() => {
     if (!n) {
-      a(), u(!0);
+      b(), d(!0);
       return;
     }
-    return i(), a;
-  }, [n, i, a]), x(() => {
+    return o(), b;
+  }, [n, o, b]), M(() => {
     if (!s) return;
-    const f = () => m();
-    return s.addEventListener("mousemove", f), s.addEventListener("touchstart", f), s.addEventListener("focusin", f), () => {
-      s.removeEventListener("mousemove", f), s.removeEventListener("touchstart", f), s.removeEventListener("focusin", f);
+    const m = () => a();
+    return s.addEventListener("mousemove", m), s.addEventListener("touchstart", m), s.addEventListener("focusin", m), () => {
+      s.removeEventListener("mousemove", m), s.removeEventListener("touchstart", m), s.removeEventListener("focusin", m);
     };
-  }, [s, m]), x(() => {
+  }, [s, a]), M(() => {
     if (!s || !e) return;
-    const f = (o) => {
-      if (!(!s.contains(document.activeElement) || o.target.tagName === "INPUT" && o.key !== " "))
-        switch (o.key) {
+    const m = (f) => {
+      if (!(!s.contains(document.activeElement) || f.target.tagName === "INPUT" && f.key !== " "))
+        switch (f.key) {
           case " ":
           case "k":
-            o.preventDefault(), r(), m();
+            f.preventDefault(), r(), a();
             break;
           case "ArrowLeft":
-            o.preventDefault(), e.currentTime = Math.max(0, e.currentTime - 5), m();
+            f.preventDefault(), e.currentTime = Math.max(0, e.currentTime - 5), a();
             break;
           case "ArrowRight":
-            o.preventDefault(), e.currentTime = Math.min(e.duration || 0, e.currentTime + 5), m();
+            f.preventDefault(), e.currentTime = Math.min(e.duration || 0, e.currentTime + 5), a();
             break;
           case "ArrowUp":
-            o.preventDefault(), e.volume = Math.min(1, e.volume + 0.1), e.muted && (e.muted = !1), m();
+            f.preventDefault(), e.volume = Math.min(1, e.volume + 0.1), e.muted && (e.muted = !1), a();
             break;
           case "ArrowDown":
-            o.preventDefault(), e.volume = Math.max(0, e.volume - 0.1), m();
+            f.preventDefault(), e.volume = Math.max(0, e.volume - 0.1), a();
             break;
           case "m":
-            e.muted = !e.muted, m();
+            e.muted = !e.muted, a();
             break;
           case "f":
-            B.element() === s ? B.exit().catch(() => {
-            }) : B.request(s).catch(() => {
-            }), m();
+            j.element() === s ? j.exit().catch(() => {
+            }) : j.request(s).catch(() => {
+            }), a();
             break;
           case "p":
             document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
             }) : document.pictureInPictureEnabled && e.requestPictureInPicture().catch(() => {
-            }), m();
+            }), a();
             break;
         }
     };
-    return document.addEventListener("keydown", f), () => document.removeEventListener("keydown", f);
-  }, [s, e, r, m]), /* @__PURE__ */ t(
+    return document.addEventListener("keydown", m), () => document.removeEventListener("keydown", m);
+  }, [s, e, r, a]), /* @__PURE__ */ t(
     "div",
     {
       role: "toolbar",
       "aria-label": "Video controls",
-      className: H("gvp-controls", !l && "is-hidden"),
-      onMouseEnter: a,
-      onMouseLeave: i,
-      children: /* @__PURE__ */ v("div", { className: "gvp-controls-row", children: [
-        /* @__PURE__ */ t(Ve, { isPlaying: n, onToggle: r }),
-        /* @__PURE__ */ t(Be, { video: e }),
-        /* @__PURE__ */ t(De, { video: e }),
-        /* @__PURE__ */ t(Re, { video: e }),
-        /* @__PURE__ */ t(We, { video: e }),
-        /* @__PURE__ */ t(Ae, { video: e }),
-        /* @__PURE__ */ t(je, { video: e }),
-        /* @__PURE__ */ t(Ze, { container: s, video: e })
+      className: I("gvp-controls", !p && "is-hidden"),
+      onMouseEnter: b,
+      onMouseLeave: o,
+      children: /* @__PURE__ */ g("div", { className: "gvp-controls-row", children: [
+        /* @__PURE__ */ t(Oe, { isPlaying: n, onToggle: r }),
+        /* @__PURE__ */ t(qe, { video: e }),
+        /* @__PURE__ */ t(Fe, { video: e }),
+        /* @__PURE__ */ t(ze, { video: e }),
+        /* @__PURE__ */ t(
+          Ke,
+          {
+            levels: l,
+            currentLevel: c,
+            selectedLevel: u,
+            onSelect: i
+          }
+        ),
+        /* @__PURE__ */ t(Je, { video: e }),
+        /* @__PURE__ */ t(Qe, { video: e }),
+        /* @__PURE__ */ t(Xe, { video: e }),
+        /* @__PURE__ */ t(Ge, { container: s, video: e })
       ] })
     }
   );
-}, Ve = ({
+};
+function ee(e, n, s) {
+  M(() => {
+    if (!e) return;
+    const r = (c) => {
+      n.current && !n.current.contains(c.target) && s();
+    }, l = (c) => {
+      c.key === "Escape" && s();
+    };
+    return document.addEventListener("mousedown", r), document.addEventListener("keydown", l), () => {
+      document.removeEventListener("mousedown", r), document.removeEventListener("keydown", l);
+    };
+  }, [e, n, s]);
+}
+const Oe = ({
   isPlaying: e,
   onToggle: n
 }) => /* @__PURE__ */ t(
@@ -542,49 +605,49 @@ const X = (() => {
     "aria-label": e ? "Pause" : "Play",
     "aria-pressed": e,
     onClick: n,
-    children: e ? /* @__PURE__ */ t(Ce, {}) : /* @__PURE__ */ t(be, {})
+    children: e ? /* @__PURE__ */ t(Te, {}) : /* @__PURE__ */ t(Pe, {})
   }
-), Be = ({ video: e }) => {
-  const [n, s] = k(0), [r, l] = k(0), [u, c] = k(0);
-  x(() => {
+), qe = ({ video: e }) => {
+  const [n, s] = k(0), [r, l] = k(0), [c, u] = k(0);
+  M(() => {
     if (!e) return;
-    const o = () => s(e.currentTime), h = () => l(Number.isFinite(e.duration) ? e.duration : 0), g = () => {
-      const d = e.buffered;
-      if (!d || d.length === 0) {
-        c(0);
+    const b = () => s(e.currentTime), o = () => l(Number.isFinite(e.duration) ? e.duration : 0), a = () => {
+      const m = e.buffered;
+      if (!m || m.length === 0) {
+        u(0);
         return;
       }
-      let w = d.end(d.length - 1);
-      for (let C = 0; C < d.length; C++)
-        if (d.start(C) <= e.currentTime && e.currentTime <= d.end(C)) {
-          w = d.end(C);
+      let f = m.end(m.length - 1);
+      for (let w = 0; w < m.length; w++)
+        if (m.start(w) <= e.currentTime && e.currentTime <= m.end(w)) {
+          f = m.end(w);
           break;
         }
-      c(w);
+      u(f);
     };
-    return o(), h(), g(), e.addEventListener("timeupdate", o), e.addEventListener("durationchange", h), e.addEventListener("loadedmetadata", h), e.addEventListener("progress", g), e.addEventListener("timeupdate", g), () => {
-      e.removeEventListener("timeupdate", o), e.removeEventListener("durationchange", h), e.removeEventListener("loadedmetadata", h), e.removeEventListener("progress", g), e.removeEventListener("timeupdate", g);
+    return b(), o(), a(), e.addEventListener("timeupdate", b), e.addEventListener("durationchange", o), e.addEventListener("loadedmetadata", o), e.addEventListener("progress", a), e.addEventListener("timeupdate", a), () => {
+      e.removeEventListener("timeupdate", b), e.removeEventListener("durationchange", o), e.removeEventListener("loadedmetadata", o), e.removeEventListener("progress", a), e.removeEventListener("timeupdate", a);
     };
   }, [e]);
-  const a = r > 0, i = a ? n / r * 100 : 0, m = a ? u / r * 100 : 0, f = (o) => {
-    if (!e || !a) return;
-    const h = Number(o.target.value) / 100 * r;
-    e.currentTime = h, s(h);
+  const i = r > 0, p = i ? n / r * 100 : 0, d = i ? c / r * 100 : 0, C = (b) => {
+    if (!e || !i) return;
+    const o = Number(b.target.value) / 100 * r;
+    e.currentTime = o, s(o);
   };
-  return /* @__PURE__ */ v("div", { className: "gvp-seek", children: [
-    /* @__PURE__ */ v("div", { className: "gvp-seek-track", children: [
+  return /* @__PURE__ */ g("div", { className: "gvp-seek", children: [
+    /* @__PURE__ */ g("div", { className: "gvp-seek-track", children: [
       /* @__PURE__ */ t(
         "div",
         {
           className: "gvp-seek-buffered",
-          style: { width: `${m}%` }
+          style: { width: `${d}%` }
         }
       ),
       /* @__PURE__ */ t(
         "div",
         {
           className: "gvp-seek-progress",
-          style: { width: `${i}%` }
+          style: { width: `${p}%` }
         }
       )
     ] }),
@@ -596,9 +659,9 @@ const X = (() => {
         min: 0,
         max: 100,
         step: 0.1,
-        value: i,
-        onChange: f,
-        disabled: !a,
+        value: p,
+        onChange: C,
+        disabled: !i,
         "aria-label": "Seek",
         "aria-valuemin": 0,
         "aria-valuemax": Math.floor(r),
@@ -606,39 +669,39 @@ const X = (() => {
       }
     )
   ] });
-}, De = ({ video: e }) => {
+}, Fe = ({ video: e }) => {
   const [n, s] = k(0), [r, l] = k(0);
-  return x(() => {
+  return M(() => {
     if (!e) return;
-    const u = () => s(e.currentTime), c = () => l(Number.isFinite(e.duration) ? e.duration : 0);
-    return u(), c(), e.addEventListener("timeupdate", u), e.addEventListener("durationchange", c), e.addEventListener("loadedmetadata", c), () => {
-      e.removeEventListener("timeupdate", u), e.removeEventListener("durationchange", c), e.removeEventListener("loadedmetadata", c);
+    const c = () => s(e.currentTime), u = () => l(Number.isFinite(e.duration) ? e.duration : 0);
+    return c(), u(), e.addEventListener("timeupdate", c), e.addEventListener("durationchange", u), e.addEventListener("loadedmetadata", u), () => {
+      e.removeEventListener("timeupdate", c), e.removeEventListener("durationchange", u), e.removeEventListener("loadedmetadata", u);
     };
-  }, [e]), /* @__PURE__ */ v("span", { className: "gvp-time", "aria-live": "off", children: [
-    J(n),
+  }, [e]), /* @__PURE__ */ g("span", { className: "gvp-time", "aria-live": "off", children: [
+    re(n),
     " / ",
-    J(r)
+    re(r)
   ] });
-}, Ae = ({ video: e }) => {
+}, Qe = ({ video: e }) => {
   const [n, s] = k(1), [r, l] = k(!1);
-  x(() => {
+  M(() => {
     if (!e) return;
-    const m = () => {
+    const d = () => {
       s(e.volume), l(e.muted);
     };
-    return m(), e.addEventListener("volumechange", m), () => e.removeEventListener("volumechange", m);
+    return d(), e.addEventListener("volumechange", d), () => e.removeEventListener("volumechange", d);
   }, [e]);
-  const u = () => {
+  const c = () => {
     e && (e.muted = !e.muted);
-  }, c = (m) => {
+  }, u = (d) => {
     if (!e) return;
-    const f = Number(m.target.value) / 100;
-    e.volume = f, f > 0 && e.muted && (e.muted = !1);
+    const C = Number(d.target.value) / 100;
+    e.volume = C, C > 0 && e.muted && (e.muted = !1);
   };
-  let a = Le;
-  r || n === 0 ? a = ye : n < 0.5 && (a = Ee);
-  const i = r ? 0 : Math.round(n * 100);
-  return /* @__PURE__ */ v("div", { className: H("gvp-volume", !X && "is-expandable"), children: [
+  let i = Ie;
+  r || n === 0 ? i = He : n < 0.5 && (i = Se);
+  const p = r ? 0 : Math.round(n * 100);
+  return /* @__PURE__ */ g("div", { className: I("gvp-volume", !se && "is-expandable"), children: [
     /* @__PURE__ */ t(
       "button",
       {
@@ -646,16 +709,16 @@ const X = (() => {
         className: "gvp-ctrl-btn",
         "aria-label": r ? "Unmute" : "Mute",
         "aria-pressed": r,
-        onClick: u,
-        children: /* @__PURE__ */ t(a, {})
+        onClick: c,
+        children: /* @__PURE__ */ t(i, {})
       }
     ),
-    !X && /* @__PURE__ */ v("div", { className: "gvp-volume-slider-wrap", children: [
+    !se && /* @__PURE__ */ g("div", { className: "gvp-volume-slider-wrap", children: [
       /* @__PURE__ */ t("div", { className: "gvp-volume-track", children: /* @__PURE__ */ t(
         "div",
         {
           className: "gvp-volume-fill",
-          style: { width: `${i}%` }
+          style: { width: `${p}%` }
         }
       ) }),
       /* @__PURE__ */ t(
@@ -666,140 +729,185 @@ const X = (() => {
           min: 0,
           max: 100,
           step: 1,
-          value: i,
-          onChange: c,
+          value: p,
+          onChange: u,
           "aria-label": "Volume",
           "aria-valuemin": 0,
           "aria-valuemax": 100,
-          "aria-valuenow": i
+          "aria-valuenow": p
         }
       )
     ] })
   ] });
-}, $e = [0.5, 0.75, 1, 1.25, 1.5, 2], Re = ({ video: e }) => {
-  const [n, s] = k(1), [r, l] = k(!1), u = V(null);
-  x(() => {
+}, Ye = [0.5, 0.75, 1, 1.25, 1.5, 2], ze = ({ video: e }) => {
+  const [n, s] = k(1), [r, l] = k(!1), c = H(null);
+  M(() => {
     if (!e) return;
-    const i = () => s(e.playbackRate);
-    return i(), e.addEventListener("ratechange", i), () => e.removeEventListener("ratechange", i);
-  }, [e]), x(() => {
-    if (!r) return;
-    const i = (f) => {
-      u.current && !u.current.contains(f.target) && l(!1);
-    }, m = (f) => {
-      f.key === "Escape" && l(!1);
-    };
-    return document.addEventListener("mousedown", i), document.addEventListener("keydown", m), () => {
-      document.removeEventListener("mousedown", i), document.removeEventListener("keydown", m);
-    };
-  }, [r]);
-  const c = (i) => {
-    e && (e.playbackRate = i), s(i), l(!1);
-  }, a = n === 1 ? "1×" : `${n}×`;
-  return /* @__PURE__ */ v("div", { className: "gvp-speed", ref: u, children: [
-    /* @__PURE__ */ v(
+    const d = () => s(e.playbackRate);
+    return d(), e.addEventListener("ratechange", d), () => e.removeEventListener("ratechange", d);
+  }, [e]);
+  const u = P(() => l(!1), []);
+  ee(r, c, u);
+  const i = (d) => {
+    e && (e.playbackRate = d), s(d), l(!1);
+  }, p = n === 1 ? "1×" : `${n}×`;
+  return /* @__PURE__ */ g("div", { className: "gvp-speed", ref: c, children: [
+    /* @__PURE__ */ g(
       "button",
       {
         type: "button",
         className: "gvp-ctrl-btn gvp-speed-btn",
         "aria-haspopup": "listbox",
         "aria-expanded": r,
-        "aria-label": `Playback speed: ${a}`,
-        onClick: () => l((i) => !i),
+        "aria-label": `Playback speed: ${p}`,
+        onClick: () => l((d) => !d),
         children: [
-          /* @__PURE__ */ t(Te, {}),
-          /* @__PURE__ */ t("span", { className: "gvp-speed-label", children: a })
+          /* @__PURE__ */ t($e, {}),
+          /* @__PURE__ */ t("span", { className: "gvp-speed-label", children: p })
         ]
       }
     ),
     r && // NOSONAR: typescript:S6819
-    /* @__PURE__ */ t("ul", { className: "gvp-speed-menu", role: "listbox", "aria-label": "Playback speed", children: $e.map((i) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+    /* @__PURE__ */ t("ul", { className: "gvp-speed-menu", role: "listbox", "aria-label": "Playback speed", children: Ye.map((d) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
       "button",
       {
         type: "button",
         role: "option",
-        "aria-selected": i === n,
-        className: H("gvp-speed-menu-item", i === n && "is-active"),
-        onClick: () => c(i),
-        children: i === 1 ? "Normal" : `${i}×`
+        "aria-selected": d === n,
+        className: I("gvp-speed-menu-item", d === n && "is-active"),
+        onClick: () => i(d),
+        children: d === 1 ? "Normal" : `${d}×`
       }
-    ) }, i)) })
+    ) }, d)) })
+  ] });
+}, Ke = ({ levels: e, currentLevel: n, selectedLevel: s, onSelect: r }) => {
+  const [l, c] = k(!1), u = H(null), i = P(() => c(!1), []);
+  if (ee(l, u, i), e.length < 2) return null;
+  const p = (o) => {
+    r == null || r(o), c(!1);
+  }, d = [...e].sort((o, a) => a.height - o.height), C = e.find((o) => o.index === n);
+  let b;
+  if (s < 0)
+    b = C ? `Auto (${C.label})` : "Auto";
+  else {
+    const o = e.find((a) => a.index === s);
+    b = (o == null ? void 0 : o.label) ?? "Auto";
+  }
+  return /* @__PURE__ */ g("div", { className: "gvp-quality", ref: u, children: [
+    /* @__PURE__ */ g(
+      "button",
+      {
+        type: "button",
+        className: "gvp-ctrl-btn gvp-quality-btn",
+        "aria-haspopup": "listbox",
+        "aria-expanded": l,
+        "aria-label": `Quality: ${b}`,
+        onClick: () => c((o) => !o),
+        children: [
+          /* @__PURE__ */ t(We, {}),
+          /* @__PURE__ */ t("span", { className: "gvp-quality-label", children: b })
+        ]
+      }
+    ),
+    l && // NOSONAR: typescript:S6819
+    /* @__PURE__ */ g("ul", { className: "gvp-quality-menu", role: "listbox", "aria-label": "Quality", children: [
+      /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          "aria-selected": s < 0,
+          className: I(
+            "gvp-quality-menu-item",
+            s < 0 && "is-active"
+          ),
+          onClick: () => p(_e.index),
+          children: C ? `Auto (${C.label})` : "Auto"
+        }
+      ) }),
+      d.map((o) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          "aria-selected": o.index === s,
+          className: I(
+            "gvp-quality-menu-item",
+            o.index === s && "is-active"
+          ),
+          onClick: () => p(o.index),
+          children: o.label
+        }
+      ) }, o.index))
+    ] })
   ] });
-}, We = ({ video: e }) => {
-  const [n, s] = k([]), [r, l] = k(-1), [u, c] = k(!1), a = V(null), i = S((o) => {
-    const h = [];
-    for (let d = 0; d < o.length; d++) {
-      const w = o[d];
-      (w.kind === "subtitles" || w.kind === "captions") && h.push({ index: d, label: w.label || w.language || `Track ${d + 1}`, language: w.language });
+}, Je = ({ video: e }) => {
+  const [n, s] = k([]), [r, l] = k(-1), [c, u] = k(!1), i = H(null), p = P((o) => {
+    const a = [];
+    for (let f = 0; f < o.length; f++) {
+      const w = o[f];
+      (w.kind === "subtitles" || w.kind === "captions") && a.push({ index: f, label: w.label || w.language || `Track ${f + 1}`, language: w.language });
     }
-    s(h);
-    let g = -1;
-    for (let d = 0; d < o.length; d++)
-      if (o[d].mode === "showing") {
-        g = d;
+    s(a);
+    let m = -1;
+    for (let f = 0; f < o.length; f++)
+      if (o[f].mode === "showing") {
+        m = f;
         break;
       }
-    l(g);
+    l(m);
   }, []);
-  x(() => {
+  M(() => {
     if (!e) {
       s([]), l(-1);
       return;
     }
     const o = e.textTracks;
-    i(o);
-    const h = () => i(o);
+    p(o);
+    const a = () => p(o);
     if (typeof o.addEventListener == "function")
-      return o.addEventListener("addtrack", h), o.addEventListener("removetrack", h), o.addEventListener("change", h), () => {
-        o.removeEventListener("addtrack", h), o.removeEventListener("removetrack", h), o.removeEventListener("change", h);
+      return o.addEventListener("addtrack", a), o.addEventListener("removetrack", a), o.addEventListener("change", a), () => {
+        o.removeEventListener("addtrack", a), o.removeEventListener("removetrack", a), o.removeEventListener("change", a);
       };
-  }, [e, i]), x(() => {
-    if (!u) return;
-    const o = (g) => {
-      a.current && !a.current.contains(g.target) && c(!1);
-    }, h = (g) => {
-      g.key === "Escape" && c(!1);
-    };
-    return document.addEventListener("mousedown", o), document.addEventListener("keydown", h), () => {
-      document.removeEventListener("mousedown", o), document.removeEventListener("keydown", h);
-    };
-  }, [u]);
-  const m = (o) => {
+  }, [e, p]);
+  const d = P(() => u(!1), []);
+  ee(c, i, d);
+  const C = (o) => {
     if (!e) return;
-    const h = e.textTracks;
-    for (let g = 0; g < h.length; g++)
-      h[g].mode = g === o ? "showing" : "hidden";
-    l(o), c(!1);
-  }, f = () => {
+    const a = e.textTracks;
+    for (let m = 0; m < a.length; m++)
+      a[m].mode = m === o ? "showing" : "hidden";
+    l(o), u(!1);
+  }, b = () => {
     if (!e) return;
     const o = e.textTracks;
-    for (let h = 0; h < o.length; h++) o[h].mode = "hidden";
-    l(-1), c(!1);
+    for (let a = 0; a < o.length; a++) o[a].mode = "hidden";
+    l(-1), u(!1);
   };
-  return n.length === 0 ? null : /* @__PURE__ */ v("div", { className: "gvp-captions", ref: a, children: [
+  return n.length === 0 ? null : /* @__PURE__ */ g("div", { className: "gvp-captions", ref: i, children: [
     /* @__PURE__ */ t(
       "button",
       {
         type: "button",
-        className: H("gvp-ctrl-btn", r >= 0 && "is-active"),
+        className: I("gvp-ctrl-btn", r >= 0 && "is-active"),
         "aria-haspopup": "listbox",
-        "aria-expanded": u,
+        "aria-expanded": c,
         "aria-label": "Captions",
         "aria-pressed": r >= 0,
-        onClick: () => c((o) => !o),
-        children: /* @__PURE__ */ t(Pe, {})
+        onClick: () => u((o) => !o),
+        children: /* @__PURE__ */ t(Be, {})
       }
     ),
-    u && // NOSONAR: typescript:S6819
-    /* @__PURE__ */ v("ul", { className: "gvp-captions-menu", role: "listbox", "aria-label": "Captions", children: [
+    c && // NOSONAR: typescript:S6819
+    /* @__PURE__ */ g("ul", { className: "gvp-captions-menu", role: "listbox", "aria-label": "Captions", children: [
       /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
         "button",
         {
           type: "button",
           role: "option",
           "aria-selected": r === -1,
-          className: H("gvp-captions-menu-item", r === -1 && "is-active"),
-          onClick: f,
+          className: I("gvp-captions-menu-item", r === -1 && "is-active"),
+          onClick: b,
           children: "Off"
         }
       ) }),
@@ -809,23 +917,25 @@ const X = (() => {
           type: "button",
           role: "option",
           "aria-selected": o.index === r,
-          className: H("gvp-captions-menu-item", o.index === r && "is-active"),
-          onClick: () => m(o.index),
+          className: I("gvp-captions-menu-item", o.index === r && "is-active"),
+          onClick: () => C(o.index),
           children: o.label
         }
       ) }, o.index))
     ] })
   ] });
-}, je = ({ video: e }) => {
-  const [n, s] = k(!1);
-  if (x(() => {
+}, Xe = ({ video: e }) => {
+  const [n, s] = k(!1), [r, l] = k(!1);
+  if (M(() => {
+    l(!0);
+  }, []), M(() => {
     if (!e) return;
-    const l = () => s(!0), u = () => s(!1);
-    return e.addEventListener("enterpictureinpicture", l), e.addEventListener("leavepictureinpicture", u), () => {
-      e.removeEventListener("enterpictureinpicture", l), e.removeEventListener("leavepictureinpicture", u);
+    const u = () => s(!0), i = () => s(!1);
+    return e.addEventListener("enterpictureinpicture", u), e.addEventListener("leavepictureinpicture", i), () => {
+      e.removeEventListener("enterpictureinpicture", u), e.removeEventListener("leavepictureinpicture", i);
     };
-  }, [e]), !document.pictureInPictureEnabled) return null;
-  const r = () => {
+  }, [e]), !r || !document.pictureInPictureEnabled) return null;
+  const c = () => {
     document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
     }) : e == null || e.requestPictureInPicture().catch(() => {
     });
@@ -834,20 +944,20 @@ const X = (() => {
     "button",
     {
       type: "button",
-      className: H("gvp-ctrl-btn", n && "is-active"),
+      className: I("gvp-ctrl-btn", n && "is-active"),
       "aria-label": n ? "Exit picture-in-picture" : "Picture-in-picture",
       "aria-pressed": n,
-      onClick: r,
-      children: /* @__PURE__ */ t(Me, {})
+      onClick: c,
+      children: /* @__PURE__ */ t(De, {})
     }
   );
-}, Ze = ({ container: e, video: n }) => {
+}, Ge = ({ container: e, video: n }) => {
   const [s, r] = k(!1);
-  return x(() => {
-    if (q) return;
-    const i = () => r(B.element() === e);
-    return i(), B.onChange(i);
-  }, [e]), B.isSupported() || q && n !== null && typeof n.webkitEnterFullscreen == "function" ? /* @__PURE__ */ t(
+  return M(() => {
+    if (G) return;
+    const p = () => r(j.element() === e);
+    return p(), j.onChange(p);
+  }, [e]), j.isSupported() || G && n !== null && typeof n.webkitEnterFullscreen == "function" ? /* @__PURE__ */ t(
     "button",
     {
       type: "button",
@@ -855,120 +965,146 @@ const X = (() => {
       "aria-label": s ? "Exit fullscreen" : "Enter fullscreen",
       "aria-pressed": s,
       onClick: () => {
-        var i;
-        if (q) {
-          (i = n == null ? void 0 : n.webkitEnterFullscreen) == null || i.call(n);
+        var p;
+        if (G) {
+          (p = n == null ? void 0 : n.webkitEnterFullscreen) == null || p.call(n);
           return;
         }
-        s ? B.exit().catch(() => {
-        }) : e && B.request(e).catch(() => {
+        s ? j.exit().catch(() => {
+        }) : e && j.request(e).catch(() => {
         });
       },
-      children: /* @__PURE__ */ t(s ? Ne : xe, {})
+      children: /* @__PURE__ */ t(s ? Ae : Ve, {})
     }
   ) : null;
 };
-function G(e, n, s) {
+function oe(e, n, s) {
   const r = e == null ? void 0 : e.trim();
   if (r) return r;
   if (n) {
     try {
-      const u = new Intl.DisplayNames(void 0, { type: "language" }).of(n);
-      if (u && u !== n) return u;
+      const c = new Intl.DisplayNames(void 0, { type: "language" }).of(n);
+      if (c && c !== n) return c;
     } catch {
     }
     return n;
   }
   return `Audio ${s + 1}`;
 }
-const ee = he.forwardRef(
+const le = we.forwardRef(
   ({
     src: e,
     hlsConfig: n,
     isHls: s,
     autoPlay: r,
     children: l,
-    onAudioTracks: u,
-    audioTrackIndex: c,
-    ...a
-  }, i) => {
-    const m = V(null), f = V(null), o = V(u);
-    o.current = u, me(i, () => m.current);
-    const h = globalThis.window !== void 0 && $.isSupported(), g = !!s || h && typeof e == "string" && e.endsWith(".m3u8");
-    return x(() => {
-      var P, R, D;
+    onAudioTracks: c,
+    audioTrackIndex: u,
+    onQualityLevels: i,
+    onCurrentLevel: p,
+    qualityLevelIndex: d,
+    ...C
+  }, b) => {
+    const o = H(null), a = H(null), m = H(c);
+    m.current = c;
+    const f = H(i);
+    f.current = i;
+    const w = H(p);
+    w.current = p, Le(b, () => o.current);
+    const U = globalThis.window !== void 0 && $.isSupported(), V = !!s || U && typeof e == "string" && e.endsWith(".m3u8");
+    return M(() => {
+      var F, Z, q;
       if (!e) return;
-      const d = m.current;
-      if (!d) return;
-      const w = (p) => {
-        var E;
-        (E = o.current) == null || E.call(o, p);
-      }, C = () => {
-        r && d.play().catch(() => {
+      const v = o.current;
+      if (!v) return;
+      const S = (h) => {
+        var L;
+        (L = m.current) == null || L.call(m, h);
+      }, T = (h) => {
+        var L;
+        (L = f.current) == null || L.call(f, h);
+      }, D = (h) => {
+        var L;
+        (L = w.current) == null || L.call(w, h);
+      }, W = () => {
+        r && v.play().catch(() => {
         });
       };
-      for (f.current && (f.current.destroy(), f.current = null), d.pause(), d.removeAttribute("src"); d.firstChild; ) d.firstChild.remove();
-      w([]);
-      let N;
-      if (g) {
-        const p = new $(n);
-        f.current = p;
-        const E = () => {
-          const M = p.audioTracks.map((b, T) => ({
-            index: T,
-            label: G(b.name, b.lang, T),
-            lang: b.lang || void 0
+      for (a.current && (a.current.destroy(), a.current = null), v.pause(), v.removeAttribute("src"); v.firstChild; ) v.firstChild.remove();
+      S([]), T([]), D(-1);
+      let R;
+      if (V) {
+        const h = new $(n);
+        a.current = h;
+        const L = () => {
+          const N = h.audioTracks.map((y, _) => ({
+            index: _,
+            label: oe(y.name, y.lang, _),
+            lang: y.lang || void 0
           }));
-          w(M);
+          S(N);
+        }, B = () => {
+          const N = h.levels.map((y, _) => ({
+            index: _,
+            height: y.height || 0,
+            label: je(y.height || 0, _)
+          }));
+          T(N);
         };
-        p.on($.Events.MANIFEST_PARSED, C), p.on($.Events.AUDIO_TRACKS_UPDATED, E), p.on($.Events.AUDIO_TRACK_SWITCHED, E), p.on($.Events.ERROR, (M, b) => {
-          b.fatal && (p.destroy(), f.current = null);
-        }), p.attachMedia(d), p.loadSource(e);
+        h.on($.Events.MANIFEST_PARSED, W), h.on($.Events.MANIFEST_PARSED, B), h.on($.Events.LEVELS_UPDATED, B), h.on($.Events.LEVEL_SWITCHED, (N, y) => {
+          D(y.level);
+        }), h.on($.Events.AUDIO_TRACKS_UPDATED, L), h.on($.Events.AUDIO_TRACK_SWITCHED, L), h.on($.Events.ERROR, (N, y) => {
+          y.fatal && (h.destroy(), a.current = null);
+        }), h.attachMedia(v), h.loadSource(e);
       } else {
-        d.src = e, d.load(), d.addEventListener("loadedmetadata", C, { once: !0 });
-        const p = d.audioTracks;
-        if (p) {
-          const E = () => {
-            const M = [];
-            for (let b = 0; b < p.length; b++) {
-              const T = p[b];
-              M.push({
-                index: b,
-                label: G(T.label, T.language, b),
-                lang: T.language || void 0
+        v.src = e, v.load(), v.addEventListener("loadedmetadata", W, { once: !0 });
+        const h = v.audioTracks;
+        if (h) {
+          const L = () => {
+            const B = [];
+            for (let N = 0; N < h.length; N++) {
+              const y = h[N];
+              B.push({
+                index: N,
+                label: oe(y.label, y.language, N),
+                lang: y.language || void 0
               });
             }
-            w(M);
+            S(B);
           };
-          (P = p.addEventListener) == null || P.call(p, "addtrack", E), (R = p.addEventListener) == null || R.call(p, "removetrack", E), (D = p.addEventListener) == null || D.call(p, "change", E), p.length > 0 && E(), N = () => {
-            var M, b, T;
-            (M = p.removeEventListener) == null || M.call(p, "addtrack", E), (b = p.removeEventListener) == null || b.call(p, "removetrack", E), (T = p.removeEventListener) == null || T.call(p, "change", E);
+          (F = h.addEventListener) == null || F.call(h, "addtrack", L), (Z = h.addEventListener) == null || Z.call(h, "removetrack", L), (q = h.addEventListener) == null || q.call(h, "change", L), h.length > 0 && L(), R = () => {
+            var B, N, y;
+            (B = h.removeEventListener) == null || B.call(h, "addtrack", L), (N = h.removeEventListener) == null || N.call(h, "removetrack", L), (y = h.removeEventListener) == null || y.call(h, "change", L);
           };
         }
       }
       return () => {
-        for (d.removeEventListener("loadedmetadata", C), N == null || N(), f.current && (f.current.destroy(), f.current = null), d.pause(), d.removeAttribute("src"); d.firstChild; ) d.firstChild.remove();
-        d.load(), w([]);
+        for (v.removeEventListener("loadedmetadata", W), R == null || R(), a.current && (a.current.destroy(), a.current = null), v.pause(), v.removeAttribute("src"); v.firstChild; ) v.firstChild.remove();
+        v.load(), S([]), T([]), D(-1);
       };
-    }, [e, g, n, r]), x(() => {
-      var C;
-      if (c == null || c < 0) return;
-      const d = f.current;
-      if (d) {
-        d.audioTrack !== c && (d.audioTrack = c);
+    }, [e, V, n, r]), M(() => {
+      if (d == null) return;
+      const v = a.current;
+      v && v.currentLevel !== d && (v.currentLevel = d);
+    }, [d]), M(() => {
+      var T;
+      if (u == null || u < 0) return;
+      const v = a.current;
+      if (v) {
+        v.audioTrack !== u && (v.audioTrack = u);
         return;
       }
-      const w = (C = m.current) == null ? void 0 : C.audioTracks;
-      if (w)
-        for (let N = 0; N < w.length; N++)
-          w[N].enabled = N === c;
-    }, [c]), // Captions are the consumer's responsibility — pass <track> elements as children.
+      const S = (T = o.current) == null ? void 0 : T.audioTracks;
+      if (S)
+        for (let D = 0; D < S.length; D++)
+          S[D].enabled = D === u;
+    }, [u]), // Captions are the consumer's responsibility — pass <track> elements as children.
     // NOSONAR: typescript:S4084
-    /* @__PURE__ */ t("video", { ref: m, ...a, children: l });
+    /* @__PURE__ */ t("video", { ref: o, ...C, children: l });
   }
 );
-ee.displayName = "HLSPlayer";
-function Ue(e) {
+le.displayName = "HLSPlayer";
+function et(e) {
   if (!e) return null;
   if (/^[A-Za-z0-9_-]{11}$/.test(e)) return e;
   let n;
@@ -992,49 +1128,49 @@ function Ue(e) {
   }
   return null;
 }
-function _e(e) {
+function tt(e) {
   try {
     const n = new URL(e), s = n.searchParams.get("t") ?? n.searchParams.get("start");
     if (!s) return null;
     if (/^\d+s?$/.test(s)) return Number.parseInt(s, 10);
     const r = /^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/.exec(s);
     if (r) {
-      const l = Number.parseInt(r[1] ?? "0", 10), u = Number.parseInt(r[2] ?? "0", 10), c = Number.parseInt(r[3] ?? "0", 10), a = l * 3600 + u * 60 + c;
-      return a > 0 ? a : null;
+      const l = Number.parseInt(r[1] ?? "0", 10), c = Number.parseInt(r[2] ?? "0", 10), u = Number.parseInt(r[3] ?? "0", 10), i = l * 3600 + c * 60 + u;
+      return i > 0 ? i : null;
     }
   } catch {
   }
   return null;
 }
-function Oe(e, n = {}) {
-  const { autoPlay: s = !1, muted: r = !0, loop: l = !1, controls: u = !0, startSeconds: c } = n, a = new URLSearchParams({
+function nt(e, n = {}) {
+  const { autoPlay: s = !1, muted: r = !0, loop: l = !1, controls: c = !0, startSeconds: u } = n, i = new URLSearchParams({
     rel: "0",
     modestbranding: "1",
     playsinline: "1",
-    controls: u ? "1" : "0"
+    controls: c ? "1" : "0"
   });
-  return s ? (a.set("autoplay", "1"), a.set("mute", "1")) : r && a.set("mute", "1"), l && (a.set("loop", "1"), a.set("playlist", e)), c && c > 0 && a.set("start", String(c)), `https://www.youtube-nocookie.com/embed/${e}?${a.toString()}`;
+  return s ? (i.set("autoplay", "1"), i.set("mute", "1")) : r && i.set("mute", "1"), l && (i.set("loop", "1"), i.set("playlist", e)), u && u > 0 && i.set("start", String(u)), `https://www.youtube-nocookie.com/embed/${e}?${i.toString()}`;
 }
-const Fe = ({
+const rt = ({
   tracks: e,
   activeIndex: n,
   onSelect: s
 }) => {
-  const [r, l] = k(!1), u = V(null);
-  x(() => {
+  const [r, l] = k(!1), c = H(null);
+  M(() => {
     if (!r) return;
-    const a = (m) => {
-      u.current && !u.current.contains(m.target) && l(!1);
-    }, i = (m) => {
-      m.key === "Escape" && l(!1);
+    const i = (d) => {
+      c.current && !c.current.contains(d.target) && l(!1);
+    }, p = (d) => {
+      d.key === "Escape" && l(!1);
     };
-    return document.addEventListener("mousedown", a), document.addEventListener("keydown", i), () => {
-      document.removeEventListener("mousedown", a), document.removeEventListener("keydown", i);
+    return document.addEventListener("mousedown", i), document.addEventListener("keydown", p), () => {
+      document.removeEventListener("mousedown", i), document.removeEventListener("keydown", p);
     };
   }, [r]);
-  const c = e.find((a) => a.index === n) ?? e[0];
-  return /* @__PURE__ */ v("div", { className: "gvp-audio", ref: u, children: [
-    /* @__PURE__ */ v(
+  const u = e.find((i) => i.index === n) ?? e[0];
+  return /* @__PURE__ */ g("div", { className: "gvp-audio", ref: c, children: [
+    /* @__PURE__ */ g(
       "button",
       {
         type: "button",
@@ -1042,11 +1178,11 @@ const Fe = ({
         "aria-haspopup": "listbox",
         "aria-expanded": r,
         "aria-label": "Audio track",
-        onClick: () => l((a) => !a),
+        onClick: () => l((i) => !i),
         children: [
-          /* @__PURE__ */ t(we, {}),
-          /* @__PURE__ */ t("span", { className: "gvp-audio-label", children: c == null ? void 0 : c.label }),
-          /* @__PURE__ */ t(Ie, {})
+          /* @__PURE__ */ t(Me, {}),
+          /* @__PURE__ */ t("span", { className: "gvp-audio-label", children: u == null ? void 0 : u.label }),
+          /* @__PURE__ */ t(Re, {})
         ]
       }
     ),
@@ -1054,149 +1190,154 @@ const Fe = ({
     // (it renders the OS dropdown chrome), so this is a custom listbox with
     // full keyboard + ARIA support.
     // NOSONAR: typescript:S6819
-    /* @__PURE__ */ t("ul", { className: "gvp-audio-menu", role: "listbox", "aria-label": "Audio tracks", children: e.map((a) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+    /* @__PURE__ */ t("ul", { className: "gvp-audio-menu", role: "listbox", "aria-label": "Audio tracks", children: e.map((i) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
       "button",
       {
         type: "button",
         role: "option",
-        "aria-selected": a.index === n,
-        className: H(
+        "aria-selected": i.index === n,
+        className: I(
           "gvp-audio-menu-item",
-          a.index === n && "is-active"
+          i.index === n && "is-active"
         ),
         onClick: () => {
-          s(a.index), l(!1);
+          s(i.index), l(!1);
         },
-        children: a.label
+        children: i.label
       }
-    ) }, a.index)) })
+    ) }, i.index)) })
   ] });
-}, Ke = ({
+}, lt = ({
   src: e,
   poster: n,
   showDeviceToggle: s = !0,
   defaultDevice: r = "desktop",
   hoverPlay: l = !1,
-  tooltipText: u,
-  onClose: c,
-  className: a = "",
-  muted: i = !0,
-  loop: m = !1,
-  controls: f = !0,
-  autoPlay: o = !1,
-  frameMaxWidth: h,
-  aspectRatio: g,
-  hlsConfig: d,
-  children: w
+  tooltipText: c,
+  onClose: u,
+  className: i = "",
+  muted: p = !0,
+  loop: d = !1,
+  controls: C = !0,
+  autoPlay: b = !1,
+  frameMaxWidth: o,
+  aspectRatio: a,
+  hlsConfig: m,
+  children: f
 }) => {
-  const C = V(null), N = V(null), [P, R] = k(r), [D, p] = k(!1), [E, M] = k(!1), [b, T] = k([]), [_, z] = k(-1), [te, ne] = k(null), [re, se] = k(null), oe = S((y) => {
-    C.current = y, se(y);
-  }, []), A = f === !0 || f === "custom", O = f === "native", W = U(() => Ue(e), [e]), I = W !== null, ae = U(() => P === "mobile" ? (g == null ? void 0 : g.mobile) ?? "9/16" : (g == null ? void 0 : g.desktop) ?? "16/9", [P, g]), ie = U(() => P === "mobile" ? (h == null ? void 0 : h.mobile) ?? "420px" : (h == null ? void 0 : h.desktop) ?? "960px", [P, h]), le = U(
-    () => W ? Oe(W, {
-      autoPlay: o,
-      muted: i,
-      loop: m,
+  const w = H(null), U = H(null), [V, v] = k(r), [S, T] = k(!1), [D, W] = k(!1), [R, F] = k([]), [Z, q] = k(-1), [h, L] = k([]), [B, N] = k(-1), [y, _] = k(-1), [ie, ce] = k(null), [ue, de] = k(null), he = P((E) => {
+    w.current = E, de(E);
+  }, []), O = C === !0 || C === "custom", J = C === "native", Q = K(() => et(e), [e]), A = Q !== null, pe = K(() => V === "mobile" ? (a == null ? void 0 : a.mobile) ?? "9/16" : (a == null ? void 0 : a.desktop) ?? "16/9", [V, a]), me = K(() => V === "mobile" ? (o == null ? void 0 : o.mobile) ?? "420px" : (o == null ? void 0 : o.desktop) ?? "960px", [V, o]), fe = K(
+    () => Q ? nt(Q, {
+      autoPlay: b,
+      muted: p,
+      loop: d,
       // Custom controls can't drive an iframe, so YouTube falls
       // back to its own controls in that mode.
-      controls: A ? !0 : O,
-      startSeconds: _e(e)
+      controls: O ? !0 : J,
+      startSeconds: tt(e)
     }) : null,
-    [W, e, o, i, m, A, O]
-  ), ce = S((y) => {
-    T(y), z(-1);
-  }, []), j = S(async () => {
-    const y = C.current;
-    if (y) {
-      if (N.current)
+    [Q, e, b, p, d, O, J]
+  ), ge = P((E) => {
+    F(E), q(-1);
+  }, []), ve = P((E) => {
+    L(E), _(-1);
+  }, []), Y = P(async () => {
+    const E = w.current;
+    if (E) {
+      if (U.current)
         try {
-          await N.current;
+          await U.current;
         } catch {
         }
-      y.pause();
+      E.pause();
     }
-  }, []), Z = S(async () => {
-    const y = C.current;
-    if (y)
+  }, []), z = P(async () => {
+    const E = w.current;
+    if (E)
       try {
-        y.readyState < 2 && y.load();
-        const Y = y.play();
-        N.current = Y, await Y, p(!0);
+        E.readyState < 2 && E.load();
+        const te = E.play();
+        U.current = te, await te, T(!0);
       } catch {
-        p(!1);
+        T(!1);
       } finally {
-        N.current = null;
+        U.current = null;
       }
-  }, []), ue = S(() => {
-    !l || I || Z();
-  }, [l, I, Z]), de = S(() => {
-    !l || I || j().then(() => p(!1));
-  }, [l, I, j]), F = S(async () => {
-    const y = C.current;
-    y && (y.paused ? await Z() : (await j(), p(!1)));
-  }, [Z, j]), pe = !I && b.length > 1;
+  }, []), ke = P(() => {
+    !l || A || z();
+  }, [l, A, z]), be = P(() => {
+    !l || A || Y().then(() => T(!1));
+  }, [l, A, Y]), X = P(async () => {
+    const E = w.current;
+    E && (E.paused ? await z() : (await Y(), T(!1)));
+  }, [z, Y]), Ce = !A && R.length > 1;
   return (
     // The mouse handlers are a progressive enhancement (hoverPlay + tooltip).
     // Keyboard/click users reach the same actions via the inner <button> elements,
     // so the outer container is intentionally non-interactive at the role level.
     // NOSONAR: typescript:S6848
-    /* @__PURE__ */ v(
+    /* @__PURE__ */ g(
       "div",
       {
-        ref: ne,
-        className: H("gvp-root", a),
-        style: { width: ie, aspectRatio: ae },
+        ref: ce,
+        className: I("gvp-root", i),
+        style: { width: me, aspectRatio: pe },
         onMouseEnter: () => {
-          M(!0), ue();
+          W(!0), ke();
         },
         onMouseLeave: () => {
-          M(!1), de();
+          W(!1), be();
         },
         children: [
-          I ? /* @__PURE__ */ t(
+          A ? /* @__PURE__ */ t(
             "iframe",
             {
               className: "gvp-video gvp-youtube",
-              src: le ?? void 0,
+              src: fe ?? void 0,
               title: "YouTube video player",
               allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
               allowFullScreen: !0,
               referrerPolicy: "strict-origin-when-cross-origin"
             }
           ) : /* @__PURE__ */ t(
-            ee,
+            le,
             {
-              ref: oe,
+              ref: he,
               src: e,
               poster: n,
-              muted: i,
-              loop: m,
+              muted: p,
+              loop: d,
               playsInline: !0,
               preload: "metadata",
-              controls: O,
-              autoPlay: o,
-              hlsConfig: d,
+              controls: J,
+              autoPlay: b,
+              hlsConfig: m,
               className: "gvp-video",
-              onPlay: () => p(!0),
-              onPause: () => p(!1),
-              onAudioTracks: ce,
-              audioTrackIndex: _,
-              children: w
+              onPlay: () => T(!0),
+              onPause: () => T(!1),
+              onAudioTracks: ge,
+              audioTrackIndex: Z,
+              onQualityLevels: ve,
+              onCurrentLevel: N,
+              qualityLevelIndex: y,
+              children: f
             }
           ),
-          !I && /* @__PURE__ */ t("div", { className: "gvp-vignette" }),
-          s && /* @__PURE__ */ t("div", { className: "gvp-toggle", children: /* @__PURE__ */ v("div", { className: "gvp-toggle-pill", children: [
+          !A && /* @__PURE__ */ t("div", { className: "gvp-vignette" }),
+          s && /* @__PURE__ */ t("div", { className: "gvp-toggle", children: /* @__PURE__ */ g("div", { className: "gvp-toggle-pill", children: [
             /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
-                onClick: () => R("desktop"),
-                className: H(
+                onClick: () => v("desktop"),
+                className: I(
                   "gvp-toggle-btn",
-                  P === "desktop" && "is-active"
+                  V === "desktop" && "is-active"
                 ),
                 "aria-label": "Desktop view",
-                "aria-pressed": P === "desktop",
-                children: /* @__PURE__ */ t(fe, {})
+                "aria-pressed": V === "desktop",
+                children: /* @__PURE__ */ t(ye, {})
               }
             ),
             /* @__PURE__ */ t("div", { className: "gvp-toggle-divider" }),
@@ -1204,78 +1345,82 @@ const Fe = ({
               "button",
               {
                 type: "button",
-                onClick: () => R("mobile"),
-                className: H(
+                onClick: () => v("mobile"),
+                className: I(
                   "gvp-toggle-btn",
-                  P === "mobile" && "is-active"
+                  V === "mobile" && "is-active"
                 ),
                 "aria-label": "Mobile view",
-                "aria-pressed": P === "mobile",
-                children: /* @__PURE__ */ t(ge, {})
+                "aria-pressed": V === "mobile",
+                children: /* @__PURE__ */ t(Ee, {})
               }
             )
           ] }) }),
-          c && /* @__PURE__ */ t(
+          u && /* @__PURE__ */ t(
             "button",
             {
               type: "button",
-              onClick: c,
+              onClick: u,
               className: "gvp-close",
               "aria-label": "Close",
-              children: /* @__PURE__ */ t(ve, {})
+              children: /* @__PURE__ */ t(xe, {})
             }
           ),
-          pe && /* @__PURE__ */ t(
-            Fe,
+          Ce && /* @__PURE__ */ t(
+            rt,
             {
-              tracks: b,
-              activeIndex: _ >= 0 ? _ : b[0].index,
-              onSelect: z
+              tracks: R,
+              activeIndex: Z >= 0 ? Z : R[0].index,
+              onSelect: q
             }
           ),
-          !I && A && /* @__PURE__ */ t(
+          !A && O && /* @__PURE__ */ t(
             "button",
             {
               type: "button",
               className: "gvp-click-layer",
-              onClick: () => void F(),
-              "aria-label": D ? "Pause" : "Play"
+              onClick: () => void X(),
+              "aria-label": S ? "Pause" : "Play"
             }
           ),
-          !I && !A && !D && /* @__PURE__ */ t("div", { className: "gvp-play-wrap", children: /* @__PURE__ */ v(
+          !A && !O && !S && /* @__PURE__ */ t("div", { className: "gvp-play-wrap", children: /* @__PURE__ */ g(
             "button",
             {
               type: "button",
-              onClick: () => void F(),
-              onMouseEnter: () => M(!0),
-              onMouseLeave: () => M(!1),
+              onClick: () => void X(),
+              onMouseEnter: () => W(!0),
+              onMouseLeave: () => W(!1),
               className: "gvp-play",
               "aria-label": "Play",
               children: [
-                /* @__PURE__ */ t(ke, {}),
-                u && E && /* @__PURE__ */ t("span", { className: "gvp-tooltip", role: "tooltip", children: u })
+                /* @__PURE__ */ t(Ne, {}),
+                c && D && /* @__PURE__ */ t("span", { className: "gvp-tooltip", role: "tooltip", children: c })
               ]
             }
           ) }),
-          !I && A && /* @__PURE__ */ t(
-            He,
+          !A && O && /* @__PURE__ */ t(
+            Ze,
             {
-              video: re,
-              isPlaying: D,
-              container: te,
-              onTogglePlay: () => void F()
+              video: ue,
+              isPlaying: S,
+              container: ie,
+              onTogglePlay: () => void X(),
+              qualityLevels: h,
+              currentLevel: B,
+              selectedLevel: y,
+              onSelectLevel: _
             }
           ),
-          !I && !A && /* @__PURE__ */ t("div", { className: "gvp-bottom-fade" })
+          !A && !O && /* @__PURE__ */ t("div", { className: "gvp-bottom-fade" })
         ]
       }
     )
   );
 };
 export {
-  Ke as ReactVideoPlayer,
-  Ue as parseYouTubeId,
-  _e as parseYouTubeStart,
-  Oe as youTubeEmbedUrl
+  lt as ReactVideoPlayer,
+  et as parseYouTubeId,
+  tt as parseYouTubeStart,
+  nt as youTubeEmbedUrl
 };
 //# sourceMappingURL=index.mjs.map