@glitchlab/react-video-player 1.1.1 → 1.2.0

package/dist/index.mjs

@@ -1,53 +1,24 @@
 "use client";
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import X, { useRef as H, useImperativeHandle as q, useEffect as G, useState as $, useMemo as I, useCallback as b } from "react";
-import E from "hls.js";
-function _(e) {
-  var o, n, t = "";
-  if (typeof e == "string" || typeof e == "number") t += e;
+import { jsxs as v, jsx as t } from "react/jsx-runtime";
+import pe, { useState as k, useRef as V, useCallback as S, useEffect as x, useImperativeHandle as me, useMemo as U } from "react";
+import $ from "hls.js";
+function Q(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 (o = 0; o < l; o++) e[o] && (n = _(e[o])) && (t && (t += " "), t += n);
-  } else for (n in e) e[n] && (t && (t += " "), t += n);
-  return t;
+    var i = e.length;
+    for (n = 0; n < i; n++) e[n] && (s = Q(e[n])) && (r && (r += " "), r += s);
+  } else for (s in e) e[s] && (r && (r += " "), r += s);
+  return r;
 }
-function Z() {
-  for (var e, o, n = 0, t = "", l = arguments.length; n < l; n++) (e = arguments[n]) && (o = _(e)) && (t && (t += " "), t += o);
-  return t;
+function H() {
+  for (var e, n, s = 0, r = "", i = arguments.length; s < i; s++) (e = arguments[s]) && (n = Q(e)) && (r && (r += " "), r += n);
+  return r;
 }
-const B = X.forwardRef(
-  ({ src: e, hlsConfig: o, isHls: n, autoPlay: t, children: l, ...f }, d) => {
-    const a = H(null), c = H(null);
-    q(d, () => a.current);
-    const y = globalThis.window !== void 0 && E.isSupported(), C = !!n || y && typeof e == "string" && e.endsWith(".m3u8");
-    return G(() => {
-      if (!e) return;
-      const s = a.current;
-      if (!s) return;
-      const u = () => {
-        t && s.play().catch(() => {
-        });
-      };
-      for (c.current && (c.current.destroy(), c.current = null), s.pause(), s.removeAttribute("src"); s.firstChild; ) s.firstChild.remove();
-      if (C) {
-        const i = new E(o);
-        c.current = i, i.attachMedia(s), i.loadSource(e), i.on(E.Events.MANIFEST_PARSED, u), i.on(E.Events.ERROR, (R, T) => {
-          T.fatal && (i.destroy(), c.current = null);
-        });
-      } else
-        s.src = e, s.load(), s.addEventListener("loadedmetadata", u, { once: !0 });
-      return () => {
-        for (s.removeEventListener("loadedmetadata", u), c.current && (c.current.destroy(), c.current = null), s.pause(), s.removeAttribute("src"); s.firstChild; ) s.firstChild.remove();
-        s.load();
-      };
-    }, [e, C, o, t]), /* @__PURE__ */ r("video", { ref: a, ...f, children: l });
-  }
-);
-B.displayName = "HLSPlayer";
-const U = "gvp-icon", M = (e) => e ? `${U} ${e}` : U, K = ({ className: e }) => /* @__PURE__ */ m(
+const K = "gvp-icon", L = (e) => e ? `${K} ${e}` : K, fe = ({ className: e }) => /* @__PURE__ */ v(
   "svg",
   {
-    className: M(e),
+    className: L(e),
     width: "20",
     height: "20",
     viewBox: "0 0 24 24",
@@ -55,7 +26,7 @@ const U = "gvp-icon", M = (e) => e ? `${U} ${e}` : U, K = ({ className: e }) =>
     xmlns: "http://www.w3.org/2000/svg",
     "aria-hidden": "true",
     children: [
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ t(
         "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",
@@ -64,7 +35,7 @@ const U = "gvp-icon", M = (e) => e ? `${U} ${e}` : U, K = ({ className: e }) =>
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ t(
         "path",
         {
           d: "M11 15H13",
@@ -74,7 +45,7 @@ const U = "gvp-icon", M = (e) => e ? `${U} ${e}` : U, K = ({ className: e }) =>
           strokeLinejoin: "round"
         }
       ),
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ t(
         "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",
@@ -83,13 +54,13 @@ const U = "gvp-icon", M = (e) => e ? `${U} ${e}` : U, K = ({ className: e }) =>
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ r("path", { d: "M7 22H17", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+      /* @__PURE__ */ t("path", { d: "M7 22H17", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
     ]
   }
-), Q = ({ className: e }) => /* @__PURE__ */ m(
+), ge = ({ className: e }) => /* @__PURE__ */ v(
   "svg",
   {
-    className: M(e),
+    className: L(e),
     width: "20",
     height: "20",
     viewBox: "0 0 24 24",
@@ -97,7 +68,7 @@ const U = "gvp-icon", M = (e) => e ? `${U} ${e}` : U, K = ({ className: e }) =>
     xmlns: "http://www.w3.org/2000/svg",
     "aria-hidden": "true",
     children: [
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ t(
         "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",
@@ -106,7 +77,7 @@ const U = "gvp-icon", M = (e) => e ? `${U} ${e}` : U, K = ({ className: e }) =>
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ t(
         "path",
         {
           d: "M11 19H13",
@@ -116,7 +87,7 @@ const U = "gvp-icon", M = (e) => e ? `${U} ${e}` : U, K = ({ className: e }) =>
           strokeLinejoin: "round"
         }
       ),
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ t(
         "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",
@@ -127,17 +98,17 @@ const U = "gvp-icon", M = (e) => e ? `${U} ${e}` : U, K = ({ className: e }) =>
       )
     ]
   }
-), F = ({ className: e }) => /* @__PURE__ */ r(
+), ve = ({ className: e }) => /* @__PURE__ */ t(
   "svg",
   {
-    className: M(e),
+    className: L(e),
     width: "14",
     height: "14",
     viewBox: "0 0 14 14",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ r(
+    children: /* @__PURE__ */ t(
       "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",
@@ -145,17 +116,17 @@ const U = "gvp-icon", M = (e) => e ? `${U} ${e}` : U, K = ({ className: e }) =>
       }
     )
   }
-), ee = ({ className: e }) => /* @__PURE__ */ r(
+), ke = ({ className: e }) => /* @__PURE__ */ t(
   "svg",
   {
-    className: M(e),
+    className: L(e),
     width: "22",
     height: "22",
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ r(
+    children: /* @__PURE__ */ t(
       "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",
@@ -163,224 +134,1147 @@ const U = "gvp-icon", M = (e) => e ? `${U} ${e}` : U, K = ({ className: e }) =>
       }
     )
   }
+), we = ({ className: e }) => /* @__PURE__ */ v(
+  "svg",
+  {
+    className: L(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: "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",
+          strokeWidth: "1.5",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ t(
+        "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",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      )
+    ]
+  }
+), be = ({ className: e }) => /* @__PURE__ */ t(
+  "svg",
+  {
+    className: L(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: "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"
+      }
+    )
+  }
+), Ce = ({ className: e }) => /* @__PURE__ */ v(
+  "svg",
+  {
+    className: L(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("rect", { x: "6", y: "5", width: "4", height: "14", rx: "1", fill: "currentColor" }),
+      /* @__PURE__ */ t("rect", { x: "14", y: "5", width: "4", height: "14", rx: "1", fill: "currentColor" })
+    ]
+  }
+), Le = ({ className: e }) => /* @__PURE__ */ v(
+  "svg",
+  {
+    className: L(e),
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ t(
+        "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",
+          strokeWidth: "1.5",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ t(
+        "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",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      )
+    ]
+  }
+), Ee = ({ className: e }) => /* @__PURE__ */ v(
+  "svg",
+  {
+    className: L(e),
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ t(
+        "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",
+          strokeWidth: "1.5",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M16.5 8C17.5 9 18 10.5 18 12C18 13.5 17.5 15 16.5 16",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      )
+    ]
+  }
+), ye = ({ className: e }) => /* @__PURE__ */ v(
+  "svg",
+  {
+    className: L(e),
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ t(
+        "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",
+          strokeWidth: "1.5",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M16 9L22 15M22 9L16 15",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      )
+    ]
+  }
+), xe = ({ className: e }) => /* @__PURE__ */ t(
+  "svg",
+  {
+    className: L(e),
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ t(
+      "path",
+      {
+        d: "M4 9V4H9M15 4H20V9M20 15V20H15M9 20H4V15",
+        stroke: "currentColor",
+        strokeWidth: "1.75",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+), Ne = ({ className: e }) => /* @__PURE__ */ t(
+  "svg",
+  {
+    className: L(e),
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ t(
+      "path",
+      {
+        d: "M9 4V9H4M15 9V4H20M15 20V15H20M9 15H4V20",
+        stroke: "currentColor",
+        strokeWidth: "1.75",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+), Me = ({ className: e }) => /* @__PURE__ */ v(
+  "svg",
+  {
+    className: L(e),
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ t("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ t("rect", { x: "12", y: "12", width: "8", height: "5", rx: "1", fill: "currentColor" })
+    ]
+  }
+), Pe = ({ className: e }) => /* @__PURE__ */ v(
+  "svg",
+  {
+    className: L(e),
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ t("rect", { x: "2", y: "5", width: "20", height: "14", rx: "3", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ t("path", { d: "M7 12H11M13 12H17M7 15H9M11 15H13M15 15H17", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+    ]
+  }
+), Te = ({ className: e }) => /* @__PURE__ */ v(
+  "svg",
+  {
+    className: L(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 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",
+          strokeWidth: "1.5"
+        }
+      ),
+      /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M12 8V12L14.5 14.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+), Ie = ({ className: e }) => /* @__PURE__ */ t(
+  "svg",
+  {
+    className: L(e),
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ t(
+      "path",
+      {
+        d: "M6 9L12 15L18 9",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+function J(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");
+  if (s > 0) {
+    const c = r.toString().padStart(2, "0");
+    return `${s}:${c}:${u}`;
+  }
+  return `${r}:${u}`;
+}
+const X = (() => {
+  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 = {
+  isSupported() {
+    return typeof document > "u" ? !1 : !!(document.fullscreenEnabled || document.webkitFullscreenEnabled);
+  },
+  element() {
+    return typeof document > "u" ? null : document.fullscreenElement ?? document.webkitFullscreenElement ?? null;
+  },
+  request(e) {
+    const n = e.requestFullscreen ?? e.webkitRequestFullscreen;
+    return n ? n.call(e) : Promise.reject(new Error("Fullscreen not supported"));
+  },
+  exit() {
+    const e = document.exitFullscreen ?? document.webkitExitFullscreen;
+    return e ? e.call(document) : Promise.reject(new Error("Fullscreen not supported"));
+  },
+  onChange(e) {
+    return document.addEventListener("fullscreenchange", e), document.addEventListener("webkitfullscreenchange", e), () => {
+      document.removeEventListener("fullscreenchange", e), document.removeEventListener("webkitfullscreenchange", e);
+    };
+  }
+}, He = ({
+  video: e,
+  isPlaying: n,
+  container: s,
+  onTogglePlay: r
+}) => {
+  const [i, u] = k(!0), c = V(null), a = S(() => {
+    c.current !== null && (clearTimeout(c.current), c.current = null);
+  }, []), l = S(() => {
+    a(), n && (c.current = setTimeout(() => u(!1), Se));
+  }, [a, n]), m = S(() => {
+    u(!0), l();
+  }, [l]);
+  return x(() => {
+    if (!n) {
+      a(), u(!0);
+      return;
+    }
+    return l(), a;
+  }, [n, l, a]), x(() => {
+    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);
+    };
+  }, [s, m]), x(() => {
+    if (!s || !e) return;
+    const f = (o) => {
+      if (!(!s.contains(document.activeElement) || o.target.tagName === "INPUT" && o.key !== " "))
+        switch (o.key) {
+          case " ":
+          case "k":
+            o.preventDefault(), r(), m();
+            break;
+          case "ArrowLeft":
+            o.preventDefault(), e.currentTime = Math.max(0, e.currentTime - 5), m();
+            break;
+          case "ArrowRight":
+            o.preventDefault(), e.currentTime = Math.min(e.duration || 0, e.currentTime + 5), m();
+            break;
+          case "ArrowUp":
+            o.preventDefault(), e.volume = Math.min(1, e.volume + 0.1), e.muted && (e.muted = !1), m();
+            break;
+          case "ArrowDown":
+            o.preventDefault(), e.volume = Math.max(0, e.volume - 0.1), m();
+            break;
+          case "m":
+            e.muted = !e.muted, m();
+            break;
+          case "f":
+            B.element() === s ? B.exit().catch(() => {
+            }) : B.request(s).catch(() => {
+            }), m();
+            break;
+          case "p":
+            document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
+            }) : document.pictureInPictureEnabled && e.requestPictureInPicture().catch(() => {
+            }), m();
+            break;
+        }
+    };
+    return document.addEventListener("keydown", f), () => document.removeEventListener("keydown", f);
+  }, [s, e, r, m]), /* @__PURE__ */ t(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": "Video controls",
+      className: H("gvp-controls", !i && "is-hidden"),
+      onMouseEnter: a,
+      onMouseLeave: l,
+      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 })
+      ] })
+    }
+  );
+}, Ve = ({
+  isPlaying: e,
+  onToggle: n
+}) => /* @__PURE__ */ t(
+  "button",
+  {
+    type: "button",
+    className: "gvp-ctrl-btn",
+    "aria-label": e ? "Pause" : "Play",
+    "aria-pressed": e,
+    onClick: n,
+    children: e ? /* @__PURE__ */ t(Ce, {}) : /* @__PURE__ */ t(be, {})
+  }
+), Be = ({ video: e }) => {
+  const [n, s] = k(0), [r, i] = k(0), [u, c] = k(0);
+  x(() => {
+    if (!e) return;
+    const o = () => s(e.currentTime), p = () => i(Number.isFinite(e.duration) ? e.duration : 0), g = () => {
+      const d = e.buffered;
+      if (!d || d.length === 0) {
+        c(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);
+          break;
+        }
+      c(w);
+    };
+    return o(), p(), g(), e.addEventListener("timeupdate", o), e.addEventListener("durationchange", p), e.addEventListener("loadedmetadata", p), e.addEventListener("progress", g), e.addEventListener("timeupdate", g), () => {
+      e.removeEventListener("timeupdate", o), e.removeEventListener("durationchange", p), e.removeEventListener("loadedmetadata", p), e.removeEventListener("progress", g), e.removeEventListener("timeupdate", g);
+    };
+  }, [e]);
+  const a = r > 0, l = a ? n / r * 100 : 0, m = a ? u / r * 100 : 0, f = (o) => {
+    if (!e || !a) return;
+    const p = Number(o.target.value) / 100 * r;
+    e.currentTime = p, s(p);
+  };
+  return /* @__PURE__ */ v("div", { className: "gvp-seek", children: [
+    /* @__PURE__ */ v("div", { className: "gvp-seek-track", children: [
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: "gvp-seek-buffered",
+          style: { width: `${m}%` }
+        }
+      ),
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: "gvp-seek-progress",
+          style: { width: `${l}%` }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t(
+      "input",
+      {
+        type: "range",
+        className: "gvp-seek-input",
+        min: 0,
+        max: 100,
+        step: 0.1,
+        value: l,
+        onChange: f,
+        disabled: !a,
+        "aria-label": "Seek",
+        "aria-valuemin": 0,
+        "aria-valuemax": Math.floor(r),
+        "aria-valuenow": Math.floor(n)
+      }
+    )
+  ] });
+}, De = ({ video: e }) => {
+  const [n, s] = k(0), [r, i] = k(0);
+  return x(() => {
+    if (!e) return;
+    const u = () => s(e.currentTime), c = () => i(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);
+    };
+  }, [e]), /* @__PURE__ */ v("span", { className: "gvp-time", "aria-live": "off", children: [
+    J(n),
+    " / ",
+    J(r)
+  ] });
+}, Ae = ({ video: e }) => {
+  const [n, s] = k(1), [r, i] = k(!1);
+  x(() => {
+    if (!e) return;
+    const m = () => {
+      s(e.volume), i(e.muted);
+    };
+    return m(), e.addEventListener("volumechange", m), () => e.removeEventListener("volumechange", m);
+  }, [e]);
+  const u = () => {
+    e && (e.muted = !e.muted);
+  }, c = (m) => {
+    if (!e) return;
+    const f = Number(m.target.value) / 100;
+    e.volume = f, f > 0 && e.muted && (e.muted = !1);
+  };
+  let a = Le;
+  r || n === 0 ? a = ye : n < 0.5 && (a = Ee);
+  const l = r ? 0 : Math.round(n * 100);
+  return /* @__PURE__ */ v("div", { className: H("gvp-volume", !X && "is-expandable"), children: [
+    /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        className: "gvp-ctrl-btn",
+        "aria-label": r ? "Unmute" : "Mute",
+        "aria-pressed": r,
+        onClick: u,
+        children: /* @__PURE__ */ t(a, {})
+      }
+    ),
+    !X && /* @__PURE__ */ v("div", { className: "gvp-volume-slider-wrap", children: [
+      /* @__PURE__ */ t("div", { className: "gvp-volume-track", children: /* @__PURE__ */ t(
+        "div",
+        {
+          className: "gvp-volume-fill",
+          style: { width: `${l}%` }
+        }
+      ) }),
+      /* @__PURE__ */ t(
+        "input",
+        {
+          type: "range",
+          className: "gvp-volume-input",
+          min: 0,
+          max: 100,
+          step: 1,
+          value: l,
+          onChange: c,
+          "aria-label": "Volume",
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-valuenow": l
+        }
+      )
+    ] })
+  ] });
+}, $e = [0.5, 0.75, 1, 1.25, 1.5, 2], Re = ({ video: e }) => {
+  const [n, s] = k(1), [r, i] = k(!1), u = V(null);
+  x(() => {
+    if (!e) return;
+    const l = () => s(e.playbackRate);
+    return l(), e.addEventListener("ratechange", l), () => e.removeEventListener("ratechange", l);
+  }, [e]), x(() => {
+    if (!r) return;
+    const l = (f) => {
+      u.current && !u.current.contains(f.target) && i(!1);
+    }, m = (f) => {
+      f.key === "Escape" && i(!1);
+    };
+    return document.addEventListener("mousedown", l), document.addEventListener("keydown", m), () => {
+      document.removeEventListener("mousedown", l), document.removeEventListener("keydown", m);
+    };
+  }, [r]);
+  const c = (l) => {
+    e && (e.playbackRate = l), s(l), i(!1);
+  }, a = n === 1 ? "1×" : `${n}×`;
+  return /* @__PURE__ */ v("div", { className: "gvp-speed", ref: u, children: [
+    /* @__PURE__ */ v(
+      "button",
+      {
+        type: "button",
+        className: "gvp-ctrl-btn gvp-speed-btn",
+        "aria-haspopup": "listbox",
+        "aria-expanded": r,
+        "aria-label": `Playback speed: ${a}`,
+        onClick: () => i((l) => !l),
+        children: [
+          /* @__PURE__ */ t(Te, {}),
+          /* @__PURE__ */ t("span", { className: "gvp-speed-label", children: a })
+        ]
+      }
+    ),
+    r && // NOSONAR: typescript:S6819
+    /* @__PURE__ */ t("ul", { className: "gvp-speed-menu", role: "listbox", "aria-label": "Playback speed", children: $e.map((l) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        role: "option",
+        "aria-selected": l === n,
+        className: H("gvp-speed-menu-item", l === n && "is-active"),
+        onClick: () => c(l),
+        children: l === 1 ? "Normal" : `${l}×`
+      }
+    ) }, l)) })
+  ] });
+}, We = ({ video: e }) => {
+  const [n, s] = k([]), [r, i] = k(-1), [u, c] = k(!1), a = V(null), l = S((o) => {
+    const p = [];
+    for (let d = 0; d < o.length; d++) {
+      const w = o[d];
+      (w.kind === "subtitles" || w.kind === "captions") && p.push({ index: d, label: w.label || w.language || `Track ${d + 1}`, language: w.language });
+    }
+    s(p);
+    let g = -1;
+    for (let d = 0; d < o.length; d++)
+      if (o[d].mode === "showing") {
+        g = d;
+        break;
+      }
+    i(g);
+  }, []);
+  x(() => {
+    if (!e) {
+      s([]), i(-1);
+      return;
+    }
+    const o = e.textTracks;
+    l(o);
+    const p = () => l(o);
+    return o.addEventListener("addtrack", p), o.addEventListener("removetrack", p), o.addEventListener("change", p), () => {
+      o.removeEventListener("addtrack", p), o.removeEventListener("removetrack", p), o.removeEventListener("change", p);
+    };
+  }, [e, l]), x(() => {
+    if (!u) return;
+    const o = (g) => {
+      a.current && !a.current.contains(g.target) && c(!1);
+    }, p = (g) => {
+      g.key === "Escape" && c(!1);
+    };
+    return document.addEventListener("mousedown", o), document.addEventListener("keydown", p), () => {
+      document.removeEventListener("mousedown", o), document.removeEventListener("keydown", p);
+    };
+  }, [u]);
+  const m = (o) => {
+    if (!e) return;
+    const p = e.textTracks;
+    for (let g = 0; g < p.length; g++)
+      p[g].mode = g === o ? "showing" : "hidden";
+    i(o), c(!1);
+  }, f = () => {
+    if (!e) return;
+    const o = e.textTracks;
+    for (let p = 0; p < o.length; p++) o[p].mode = "hidden";
+    i(-1), c(!1);
+  };
+  return n.length === 0 ? null : /* @__PURE__ */ v("div", { className: "gvp-captions", ref: a, children: [
+    /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        className: H("gvp-ctrl-btn", r >= 0 && "is-active"),
+        "aria-haspopup": "listbox",
+        "aria-expanded": u,
+        "aria-label": "Captions",
+        "aria-pressed": r >= 0,
+        onClick: () => c((o) => !o),
+        children: /* @__PURE__ */ t(Pe, {})
+      }
+    ),
+    u && // NOSONAR: typescript:S6819
+    /* @__PURE__ */ v("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,
+          children: "Off"
+        }
+      ) }),
+      n.map((o) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          "aria-selected": o.index === r,
+          className: H("gvp-captions-menu-item", o.index === r && "is-active"),
+          onClick: () => m(o.index),
+          children: o.label
+        }
+      ) }, o.index))
+    ] })
+  ] });
+}, je = ({ video: e }) => {
+  const [n, s] = k(!1);
+  if (x(() => {
+    if (!e) return;
+    const i = () => s(!0), u = () => s(!1);
+    return e.addEventListener("enterpictureinpicture", i), e.addEventListener("leavepictureinpicture", u), () => {
+      e.removeEventListener("enterpictureinpicture", i), e.removeEventListener("leavepictureinpicture", u);
+    };
+  }, [e]), !document.pictureInPictureEnabled) return null;
+  const r = () => {
+    document.pictureInPictureElement ? document.exitPictureInPicture().catch(() => {
+    }) : e == null || e.requestPictureInPicture().catch(() => {
+    });
+  };
+  return /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      className: H("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, {})
+    }
+  );
+}, Ze = ({ container: e, video: n }) => {
+  const [s, r] = k(!1);
+  return x(() => {
+    if (q) return;
+    const l = () => r(B.element() === e);
+    return l(), B.onChange(l);
+  }, [e]), B.isSupported() || q && n !== null && typeof n.webkitEnterFullscreen == "function" ? /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      className: "gvp-ctrl-btn",
+      "aria-label": s ? "Exit fullscreen" : "Enter fullscreen",
+      "aria-pressed": s,
+      onClick: () => {
+        var l;
+        if (q) {
+          (l = n == null ? void 0 : n.webkitEnterFullscreen) == null || l.call(n);
+          return;
+        }
+        s ? B.exit().catch(() => {
+        }) : e && B.request(e).catch(() => {
+        });
+      },
+      children: /* @__PURE__ */ t(s ? Ne : xe, {})
+    }
+  ) : null;
+};
+function G(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;
+    } catch {
+    }
+    return n;
+  }
+  return `Audio ${s + 1}`;
+}
+const ee = pe.forwardRef(
+  ({
+    src: e,
+    hlsConfig: n,
+    isHls: s,
+    autoPlay: r,
+    children: i,
+    onAudioTracks: u,
+    audioTrackIndex: c,
+    ...a
+  }, l) => {
+    const m = V(null), f = V(null), o = V(u);
+    o.current = u, me(l, () => m.current);
+    const p = globalThis.window !== void 0 && $.isSupported(), g = !!s || p && typeof e == "string" && e.endsWith(".m3u8");
+    return x(() => {
+      var P, R, D;
+      if (!e) return;
+      const d = m.current;
+      if (!d) return;
+      const w = (h) => {
+        var E;
+        (E = o.current) == null || E.call(o, h);
+      }, C = () => {
+        r && d.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 h = new $(n);
+        f.current = h;
+        const E = () => {
+          const M = h.audioTracks.map((b, T) => ({
+            index: T,
+            label: G(b.name, b.lang, T),
+            lang: b.lang || void 0
+          }));
+          w(M);
+        };
+        h.on($.Events.MANIFEST_PARSED, C), h.on($.Events.AUDIO_TRACKS_UPDATED, E), h.on($.Events.AUDIO_TRACK_SWITCHED, E), h.on($.Events.ERROR, (M, b) => {
+          b.fatal && (h.destroy(), f.current = null);
+        }), h.attachMedia(d), h.loadSource(e);
+      } else {
+        d.src = e, d.load(), d.addEventListener("loadedmetadata", C, { once: !0 });
+        const h = d.audioTracks;
+        if (h) {
+          const E = () => {
+            const M = [];
+            for (let b = 0; b < h.length; b++) {
+              const T = h[b];
+              M.push({
+                index: b,
+                label: G(T.label, T.language, b),
+                lang: T.language || void 0
+              });
+            }
+            w(M);
+          };
+          (P = h.addEventListener) == null || P.call(h, "addtrack", E), (R = h.addEventListener) == null || R.call(h, "removetrack", E), (D = h.addEventListener) == null || D.call(h, "change", E), h.length > 0 && E(), N = () => {
+            var M, b, T;
+            (M = h.removeEventListener) == null || M.call(h, "addtrack", E), (b = h.removeEventListener) == null || b.call(h, "removetrack", E), (T = h.removeEventListener) == null || T.call(h, "change", E);
+          };
+        }
+      }
+      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([]);
+      };
+    }, [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);
+        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.
+    // NOSONAR: typescript:S4084
+    /* @__PURE__ */ t("video", { ref: m, ...a, children: i });
+  }
 );
-function te(e) {
+ee.displayName = "HLSPlayer";
+function Ue(e) {
   if (!e) return null;
   if (/^[A-Za-z0-9_-]{11}$/.test(e)) return e;
-  let o;
+  let n;
   try {
-    o = new URL(e);
+    n = new URL(e);
   } catch {
     return null;
   }
-  const n = o.hostname.replace(/^www\./, "");
-  if (n === "youtu.be") {
-    const t = o.pathname.slice(1).split("/")[0];
-    return /^[A-Za-z0-9_-]{11}$/.test(t) ? t : null;
+  const s = n.hostname.replace(/^www\./, "");
+  if (s === "youtu.be") {
+    const r = n.pathname.slice(1).split("/")[0];
+    return /^[A-Za-z0-9_-]{11}$/.test(r) ? r : null;
   }
-  if (n === "youtube.com" || n === "m.youtube.com" || n === "music.youtube.com" || n === "youtube-nocookie.com") {
-    const t = o.searchParams.get("v");
-    if (t && /^[A-Za-z0-9_-]{11}$/.test(t)) return t;
-    const l = /^\/(?:embed|shorts|v|live)\/([A-Za-z0-9_-]{11})/.exec(
-      o.pathname
+  if (s === "youtube.com" || s === "m.youtube.com" || s === "music.youtube.com" || s === "youtube-nocookie.com") {
+    const r = n.searchParams.get("v");
+    if (r && /^[A-Za-z0-9_-]{11}$/.test(r)) return r;
+    const i = /^\/(?:embed|shorts|v|live)\/([A-Za-z0-9_-]{11})/.exec(
+      n.pathname
     );
-    if (l) return l[1];
+    if (i) return i[1];
   }
   return null;
 }
-function re(e) {
+function _e(e) {
   try {
-    const o = new URL(e), n = o.searchParams.get("t") ?? o.searchParams.get("start");
-    if (!n) return null;
-    if (/^\d+s?$/.test(n)) return Number.parseInt(n, 10);
-    const t = /^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/.exec(n);
-    if (t) {
-      const l = Number.parseInt(t[1] ?? "0", 10), f = Number.parseInt(t[2] ?? "0", 10), d = Number.parseInt(t[3] ?? "0", 10), a = l * 3600 + f * 60 + d;
+    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 i = Number.parseInt(r[1] ?? "0", 10), u = Number.parseInt(r[2] ?? "0", 10), c = Number.parseInt(r[3] ?? "0", 10), a = i * 3600 + u * 60 + c;
       return a > 0 ? a : null;
     }
   } catch {
   }
   return null;
 }
-function ne(e, o = {}) {
-  const { autoPlay: n = !1, muted: t = !0, loop: l = !1, controls: f = !0, startSeconds: d } = o, a = new URLSearchParams({
+function Oe(e, n = {}) {
+  const { autoPlay: s = !1, muted: r = !0, loop: i = !1, controls: u = !0, startSeconds: c } = n, a = new URLSearchParams({
     rel: "0",
     modestbranding: "1",
     playsinline: "1",
-    controls: f ? "1" : "0"
+    controls: u ? "1" : "0"
   });
-  return n ? (a.set("autoplay", "1"), a.set("mute", "1")) : t && a.set("mute", "1"), l && (a.set("loop", "1"), a.set("playlist", e)), d && d > 0 && a.set("start", String(d)), `https://www.youtube-nocookie.com/embed/${e}?${a.toString()}`;
+  return s ? (a.set("autoplay", "1"), a.set("mute", "1")) : r && a.set("mute", "1"), i && (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()}`;
 }
-const ae = ({
+const Fe = ({
+  tracks: e,
+  activeIndex: n,
+  onSelect: s
+}) => {
+  const [r, i] = k(!1), u = V(null);
+  x(() => {
+    if (!r) return;
+    const a = (m) => {
+      u.current && !u.current.contains(m.target) && i(!1);
+    }, l = (m) => {
+      m.key === "Escape" && i(!1);
+    };
+    return document.addEventListener("mousedown", a), document.addEventListener("keydown", l), () => {
+      document.removeEventListener("mousedown", a), document.removeEventListener("keydown", l);
+    };
+  }, [r]);
+  const c = e.find((a) => a.index === n) ?? e[0];
+  return /* @__PURE__ */ v("div", { className: "gvp-audio", ref: u, children: [
+    /* @__PURE__ */ v(
+      "button",
+      {
+        type: "button",
+        className: "gvp-audio-btn",
+        "aria-haspopup": "listbox",
+        "aria-expanded": r,
+        "aria-label": "Audio track",
+        onClick: () => i((a) => !a),
+        children: [
+          /* @__PURE__ */ t(we, {}),
+          /* @__PURE__ */ t("span", { className: "gvp-audio-label", children: c == null ? void 0 : c.label }),
+          /* @__PURE__ */ t(Ie, {})
+        ]
+      }
+    ),
+    r && // A native <select> can't be styled to sit inside the player overlay
+    // (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(
+      "button",
+      {
+        type: "button",
+        role: "option",
+        "aria-selected": a.index === n,
+        className: H(
+          "gvp-audio-menu-item",
+          a.index === n && "is-active"
+        ),
+        onClick: () => {
+          s(a.index), i(!1);
+        },
+        children: a.label
+      }
+    ) }, a.index)) })
+  ] });
+}, Ke = ({
   src: e,
-  poster: o,
-  showDeviceToggle: n = !0,
-  defaultDevice: t = "desktop",
-  hoverPlay: l = !1,
-  tooltipText: f,
-  onClose: d,
+  poster: n,
+  showDeviceToggle: s = !0,
+  defaultDevice: r = "desktop",
+  hoverPlay: i = !1,
+  tooltipText: u,
+  onClose: c,
   className: a = "",
-  muted: c = !0,
-  loop: y = !1,
-  controls: C = !1,
-  autoPlay: s = !1,
-  frameMaxWidth: u,
-  aspectRatio: i,
-  hlsConfig: R,
-  children: T
+  muted: l = !0,
+  loop: m = !1,
+  controls: f = !1,
+  autoPlay: o = !1,
+  frameMaxWidth: p,
+  aspectRatio: g,
+  hlsConfig: d,
+  children: w
 }) => {
-  const w = H(null), k = H(null), [h, j] = $(t), [V, g] = $(!1), [z, L] = $(!1), N = I(() => te(e), [e]), v = N !== null, D = I(() => h === "mobile" ? (i == null ? void 0 : i.mobile) ?? "9/16" : (i == null ? void 0 : i.desktop) ?? "16/9", [h, i]), Y = I(() => h === "mobile" ? (u == null ? void 0 : u.mobile) ?? "420px" : (u == null ? void 0 : u.desktop) ?? "960px", [h, u]), A = I(
-    () => N ? ne(N, {
-      autoPlay: s,
-      muted: c,
-      loop: y,
-      controls: C,
-      startSeconds: re(e)
+  const C = V(null), N = V(null), [P, R] = k(r), [D, h] = 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 === "custom", O = f === !0, 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]), le = U(() => P === "mobile" ? (p == null ? void 0 : p.mobile) ?? "420px" : (p == null ? void 0 : p.desktop) ?? "960px", [P, p]), ie = U(
+    () => W ? Oe(W, {
+      autoPlay: o,
+      muted: l,
+      loop: m,
+      // 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)
     }) : null,
-    [N, e, s, c, y, C]
-  ), S = b(async () => {
-    const p = w.current;
-    if (p) {
-      if (k.current)
+    [W, e, o, l, m, A, O]
+  ), ce = S((y) => {
+    T(y), z(-1);
+  }, []), j = S(async () => {
+    const y = C.current;
+    if (y) {
+      if (N.current)
         try {
-          await k.current;
+          await N.current;
         } catch {
         }
-      p.pause();
+      y.pause();
     }
-  }, []), P = b(async () => {
-    const p = w.current;
-    if (p)
+  }, []), Z = S(async () => {
+    const y = C.current;
+    if (y)
       try {
-        p.readyState < 2 && p.load();
-        const x = p.play();
-        k.current = x, await x, g(!0);
+        y.readyState < 2 && y.load();
+        const Y = y.play();
+        N.current = Y, await Y, h(!0);
       } catch {
-        g(!1);
+        h(!1);
       } finally {
-        k.current = null;
+        N.current = null;
       }
-  }, []), J = b(() => {
-    !l || v || P();
-  }, [l, v, P]), O = b(() => {
-    !l || v || S().then(() => g(!1));
-  }, [l, v, S]), W = b(async () => {
-    const p = w.current;
-    p && (p.paused ? await P() : (await S(), g(!1)));
-  }, [P, S]);
+  }, []), ue = S(() => {
+    !i || I || Z();
+  }, [i, I, Z]), de = S(() => {
+    !i || I || j().then(() => h(!1));
+  }, [i, I, j]), F = S(async () => {
+    const y = C.current;
+    y && (y.paused ? await Z() : (await j(), h(!1)));
+  }, [Z, j]), he = !I && b.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__ */ m(
+    /* @__PURE__ */ v(
       "div",
       {
-        className: Z("gvp-root", a),
-        style: { width: Y, aspectRatio: D },
+        ref: ne,
+        className: H("gvp-root", a),
+        style: { width: le, aspectRatio: ae },
         onMouseEnter: () => {
-          L(!0), J();
+          M(!0), ue();
         },
         onMouseLeave: () => {
-          L(!1), O();
+          M(!1), de();
         },
         children: [
-          v ? /* @__PURE__ */ r(
+          I ? /* @__PURE__ */ t(
             "iframe",
             {
               className: "gvp-video gvp-youtube",
-              src: A ?? void 0,
+              src: ie ?? 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__ */ r(
-            B,
+          ) : /* @__PURE__ */ t(
+            ee,
             {
-              ref: w,
+              ref: oe,
               src: e,
-              poster: o,
-              muted: c,
-              loop: y,
+              poster: n,
+              muted: l,
+              loop: m,
               playsInline: !0,
               preload: "metadata",
-              controls: C,
-              autoPlay: s,
-              hlsConfig: R,
+              controls: O,
+              autoPlay: o,
+              hlsConfig: d,
               className: "gvp-video",
-              onPlay: () => g(!0),
-              onPause: () => g(!1),
-              children: T
+              onPlay: () => h(!0),
+              onPause: () => h(!1),
+              onAudioTracks: ce,
+              audioTrackIndex: _,
+              children: w
             }
           ),
-          !v && /* @__PURE__ */ r("div", { className: "gvp-vignette" }),
-          n && /* @__PURE__ */ r("div", { className: "gvp-toggle", children: /* @__PURE__ */ m("div", { className: "gvp-toggle-pill", children: [
-            /* @__PURE__ */ r(
+          !I && /* @__PURE__ */ t("div", { className: "gvp-vignette" }),
+          s && /* @__PURE__ */ t("div", { className: "gvp-toggle", children: /* @__PURE__ */ v("div", { className: "gvp-toggle-pill", children: [
+            /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
-                onClick: () => j("desktop"),
-                className: Z(
+                onClick: () => R("desktop"),
+                className: H(
                   "gvp-toggle-btn",
-                  h === "desktop" && "is-active"
+                  P === "desktop" && "is-active"
                 ),
                 "aria-label": "Desktop view",
-                "aria-pressed": h === "desktop",
-                children: /* @__PURE__ */ r(K, {})
+                "aria-pressed": P === "desktop",
+                children: /* @__PURE__ */ t(fe, {})
               }
             ),
-            /* @__PURE__ */ r("div", { className: "gvp-toggle-divider" }),
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ t("div", { className: "gvp-toggle-divider" }),
+            /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
-                onClick: () => j("mobile"),
-                className: Z(
+                onClick: () => R("mobile"),
+                className: H(
                   "gvp-toggle-btn",
-                  h === "mobile" && "is-active"
+                  P === "mobile" && "is-active"
                 ),
                 "aria-label": "Mobile view",
-                "aria-pressed": h === "mobile",
-                children: /* @__PURE__ */ r(Q, {})
+                "aria-pressed": P === "mobile",
+                children: /* @__PURE__ */ t(ge, {})
               }
             )
           ] }) }),
-          d && /* @__PURE__ */ r(
+          c && /* @__PURE__ */ t(
             "button",
             {
               type: "button",
-              onClick: d,
+              onClick: c,
               className: "gvp-close",
               "aria-label": "Close",
-              children: /* @__PURE__ */ r(F, {})
+              children: /* @__PURE__ */ t(ve, {})
+            }
+          ),
+          he && /* @__PURE__ */ t(
+            Fe,
+            {
+              tracks: b,
+              activeIndex: _ >= 0 ? _ : b[0].index,
+              onSelect: z
             }
           ),
-          !v && !V && /* @__PURE__ */ r("div", { className: "gvp-play-wrap", children: /* @__PURE__ */ m(
+          !I && A && /* @__PURE__ */ t(
             "button",
             {
               type: "button",
-              onClick: () => void W(),
-              onMouseEnter: () => L(!0),
-              onMouseLeave: () => L(!1),
+              className: "gvp-click-layer",
+              onClick: () => void F(),
+              "aria-label": D ? "Pause" : "Play"
+            }
+          ),
+          !I && !A && !D && /* @__PURE__ */ t("div", { className: "gvp-play-wrap", children: /* @__PURE__ */ v(
+            "button",
+            {
+              type: "button",
+              onClick: () => void F(),
+              onMouseEnter: () => M(!0),
+              onMouseLeave: () => M(!1),
               className: "gvp-play",
               "aria-label": "Play",
               children: [
-                /* @__PURE__ */ r(ee, {}),
-                f && z && /* @__PURE__ */ r("span", { className: "gvp-tooltip", role: "tooltip", children: f })
+                /* @__PURE__ */ t(ke, {}),
+                u && E && /* @__PURE__ */ t("span", { className: "gvp-tooltip", role: "tooltip", children: u })
               ]
             }
           ) }),
-          !v && /* @__PURE__ */ r("div", { className: "gvp-bottom-fade" })
+          !I && A && /* @__PURE__ */ t(
+            He,
+            {
+              video: re,
+              isPlaying: D,
+              container: te,
+              onTogglePlay: () => void F()
+            }
+          ),
+          !I && !A && /* @__PURE__ */ t("div", { className: "gvp-bottom-fade" })
         ]
       }
     )
   );
 };
 export {
-  ae as ReactVideoPlayer,
-  te as parseYouTubeId,
-  re as parseYouTubeStart,
-  ne as youTubeEmbedUrl
+  Ke as ReactVideoPlayer,
+  Ue as parseYouTubeId,
+  _e as parseYouTubeStart,
+  Oe as youTubeEmbedUrl
 };
 //# sourceMappingURL=index.mjs.map