@glitchlab/react-video-player 1.2.0 → 1.3.0

package/dist/index.mjs

@@ -1,18 +1,18 @@
 "use client";
 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 he, { 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 i = e.length;
-    for (n = 0; n < i; n++) e[n] && (s = Q(e[n])) && (r && (r += " "), r += s);
+    var l = e.length;
+    for (n = 0; n < l; 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 H() {
-  for (var e, n, s = 0, r = "", i = arguments.length; s < i; s++) (e = arguments[s]) && (n = Q(e)) && (r && (r += " "), r += n);
+  for (var e, n, s = 0, r = "", l = arguments.length; s < l; s++) (e = arguments[s]) && (n = Q(e)) && (r && (r += " "), r += n);
   return r;
 }
 const K = "gvp-icon", L = (e) => e ? `${K} ${e}` : K, fe = ({ className: e }) => /* @__PURE__ */ v(
@@ -455,20 +455,20 @@ const X = (() => {
   container: s,
   onTogglePlay: r
 }) => {
-  const [i, u] = k(!0), c = V(null), a = S(() => {
+  const [l, u] = k(!0), c = V(null), a = S(() => {
     c.current !== null && (clearTimeout(c.current), c.current = null);
-  }, []), l = S(() => {
+  }, []), i = S(() => {
     a(), n && (c.current = setTimeout(() => u(!1), Se));
   }, [a, n]), m = S(() => {
-    u(!0), l();
-  }, [l]);
+    u(!0), i();
+  }, [i]);
   return x(() => {
     if (!n) {
       a(), u(!0);
       return;
     }
-    return l(), a;
-  }, [n, l, a]), x(() => {
+    return i(), a;
+  }, [n, i, a]), x(() => {
     if (!s) return;
     const f = () => m();
     return s.addEventListener("mousemove", f), s.addEventListener("touchstart", f), s.addEventListener("focusin", f), () => {
@@ -516,9 +516,9 @@ const X = (() => {
     {
       role: "toolbar",
       "aria-label": "Video controls",
-      className: H("gvp-controls", !i && "is-hidden"),
+      className: H("gvp-controls", !l && "is-hidden"),
       onMouseEnter: a,
-      onMouseLeave: l,
+      onMouseLeave: i,
       children: /* @__PURE__ */ v("div", { className: "gvp-controls-row", children: [
         /* @__PURE__ */ t(Ve, { isPlaying: n, onToggle: r }),
         /* @__PURE__ */ t(Be, { video: e }),
@@ -545,10 +545,10 @@ const X = (() => {
     children: e ? /* @__PURE__ */ t(Ce, {}) : /* @__PURE__ */ t(be, {})
   }
 ), Be = ({ video: e }) => {
-  const [n, s] = k(0), [r, i] = k(0), [u, c] = k(0);
+  const [n, s] = k(0), [r, l] = 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 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);
@@ -562,14 +562,14 @@ const X = (() => {
         }
       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);
+    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);
     };
   }, [e]);
-  const a = r > 0, l = a ? n / r * 100 : 0, m = a ? u / r * 100 : 0, f = (o) => {
+  const a = r > 0, i = 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);
+    const h = Number(o.target.value) / 100 * r;
+    e.currentTime = h, s(h);
   };
   return /* @__PURE__ */ v("div", { className: "gvp-seek", children: [
     /* @__PURE__ */ v("div", { className: "gvp-seek-track", children: [
@@ -584,7 +584,7 @@ const X = (() => {
         "div",
         {
           className: "gvp-seek-progress",
-          style: { width: `${l}%` }
+          style: { width: `${i}%` }
         }
       )
     ] }),
@@ -596,7 +596,7 @@ const X = (() => {
         min: 0,
         max: 100,
         step: 0.1,
-        value: l,
+        value: i,
         onChange: f,
         disabled: !a,
         "aria-label": "Seek",
@@ -607,10 +607,10 @@ const X = (() => {
     )
   ] });
 }, De = ({ video: e }) => {
-  const [n, s] = k(0), [r, i] = k(0);
+  const [n, s] = k(0), [r, l] = k(0);
   return x(() => {
     if (!e) return;
-    const u = () => s(e.currentTime), c = () => i(Number.isFinite(e.duration) ? e.duration : 0);
+    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);
     };
@@ -620,11 +620,11 @@ const X = (() => {
     J(r)
   ] });
 }, Ae = ({ video: e }) => {
-  const [n, s] = k(1), [r, i] = k(!1);
+  const [n, s] = k(1), [r, l] = k(!1);
   x(() => {
     if (!e) return;
     const m = () => {
-      s(e.volume), i(e.muted);
+      s(e.volume), l(e.muted);
     };
     return m(), e.addEventListener("volumechange", m), () => e.removeEventListener("volumechange", m);
   }, [e]);
@@ -637,7 +637,7 @@ const X = (() => {
   };
   let a = Le;
   r || n === 0 ? a = ye : n < 0.5 && (a = Ee);
-  const l = r ? 0 : Math.round(n * 100);
+  const i = r ? 0 : Math.round(n * 100);
   return /* @__PURE__ */ v("div", { className: H("gvp-volume", !X && "is-expandable"), children: [
     /* @__PURE__ */ t(
       "button",
@@ -655,7 +655,7 @@ const X = (() => {
         "div",
         {
           className: "gvp-volume-fill",
-          style: { width: `${l}%` }
+          style: { width: `${i}%` }
         }
       ) }),
       /* @__PURE__ */ t(
@@ -666,35 +666,35 @@ const X = (() => {
           min: 0,
           max: 100,
           step: 1,
-          value: l,
+          value: i,
           onChange: c,
           "aria-label": "Volume",
           "aria-valuemin": 0,
           "aria-valuemax": 100,
-          "aria-valuenow": l
+          "aria-valuenow": i
         }
       )
     ] })
   ] });
 }, $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);
+  const [n, s] = k(1), [r, l] = k(!1), u = V(null);
   x(() => {
     if (!e) return;
-    const l = () => s(e.playbackRate);
-    return l(), e.addEventListener("ratechange", l), () => e.removeEventListener("ratechange", l);
+    const i = () => s(e.playbackRate);
+    return i(), e.addEventListener("ratechange", i), () => e.removeEventListener("ratechange", i);
   }, [e]), x(() => {
     if (!r) return;
-    const l = (f) => {
-      u.current && !u.current.contains(f.target) && i(!1);
+    const i = (f) => {
+      u.current && !u.current.contains(f.target) && l(!1);
     }, m = (f) => {
-      f.key === "Escape" && i(!1);
+      f.key === "Escape" && l(!1);
     };
-    return document.addEventListener("mousedown", l), document.addEventListener("keydown", m), () => {
-      document.removeEventListener("mousedown", l), document.removeEventListener("keydown", m);
+    return document.addEventListener("mousedown", i), document.addEventListener("keydown", m), () => {
+      document.removeEventListener("mousedown", i), document.removeEventListener("keydown", m);
     };
   }, [r]);
-  const c = (l) => {
-    e && (e.playbackRate = l), s(l), i(!1);
+  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(
@@ -705,7 +705,7 @@ const X = (() => {
         "aria-haspopup": "listbox",
         "aria-expanded": r,
         "aria-label": `Playback speed: ${a}`,
-        onClick: () => i((l) => !l),
+        onClick: () => l((i) => !i),
         children: [
           /* @__PURE__ */ t(Te, {}),
           /* @__PURE__ */ t("span", { className: "gvp-speed-label", children: a })
@@ -713,67 +713,68 @@ const X = (() => {
       }
     ),
     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(
+    /* @__PURE__ */ t("ul", { className: "gvp-speed-menu", role: "listbox", "aria-label": "Playback speed", children: $e.map((i) => /* @__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}×`
+        "aria-selected": i === n,
+        className: H("gvp-speed-menu-item", i === n && "is-active"),
+        onClick: () => c(i),
+        children: i === 1 ? "Normal" : `${i}×`
       }
-    ) }, l)) })
+    ) }, i)) })
   ] });
 }, We = ({ video: e }) => {
-  const [n, s] = k([]), [r, i] = k(-1), [u, c] = k(!1), a = V(null), l = S((o) => {
-    const p = [];
+  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") && p.push({ index: d, label: w.label || w.language || `Track ${d + 1}`, language: w.language });
+      (w.kind === "subtitles" || w.kind === "captions") && h.push({ index: d, label: w.label || w.language || `Track ${d + 1}`, language: w.language });
     }
-    s(p);
+    s(h);
     let g = -1;
     for (let d = 0; d < o.length; d++)
       if (o[d].mode === "showing") {
         g = d;
         break;
       }
-    i(g);
+    l(g);
   }, []);
   x(() => {
     if (!e) {
-      s([]), i(-1);
+      s([]), l(-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(() => {
+    i(o);
+    const h = () => i(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);
+      };
+  }, [e, i]), x(() => {
     if (!u) return;
     const o = (g) => {
       a.current && !a.current.contains(g.target) && c(!1);
-    }, p = (g) => {
+    }, h = (g) => {
       g.key === "Escape" && c(!1);
     };
-    return document.addEventListener("mousedown", o), document.addEventListener("keydown", p), () => {
-      document.removeEventListener("mousedown", o), document.removeEventListener("keydown", p);
+    return document.addEventListener("mousedown", o), document.addEventListener("keydown", h), () => {
+      document.removeEventListener("mousedown", o), document.removeEventListener("keydown", h);
     };
   }, [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);
+    const h = e.textTracks;
+    for (let g = 0; g < h.length; g++)
+      h[g].mode = g === o ? "showing" : "hidden";
+    l(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);
+    for (let h = 0; h < o.length; h++) o[h].mode = "hidden";
+    l(-1), c(!1);
   };
   return n.length === 0 ? null : /* @__PURE__ */ v("div", { className: "gvp-captions", ref: a, children: [
     /* @__PURE__ */ t(
@@ -819,9 +820,9 @@ const X = (() => {
   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);
+    const l = () => s(!0), u = () => s(!1);
+    return e.addEventListener("enterpictureinpicture", l), e.addEventListener("leavepictureinpicture", u), () => {
+      e.removeEventListener("enterpictureinpicture", l), e.removeEventListener("leavepictureinpicture", u);
     };
   }, [e]), !document.pictureInPictureEnabled) return null;
   const r = () => {
@@ -844,8 +845,8 @@ const X = (() => {
   const [s, r] = k(!1);
   return x(() => {
     if (q) return;
-    const l = () => r(B.element() === e);
-    return l(), B.onChange(l);
+    const i = () => r(B.element() === e);
+    return i(), B.onChange(i);
   }, [e]), B.isSupported() || q && n !== null && typeof n.webkitEnterFullscreen == "function" ? /* @__PURE__ */ t(
     "button",
     {
@@ -854,9 +855,9 @@ const X = (() => {
       "aria-label": s ? "Exit fullscreen" : "Enter fullscreen",
       "aria-pressed": s,
       onClick: () => {
-        var l;
+        var i;
         if (q) {
-          (l = n == null ? void 0 : n.webkitEnterFullscreen) == null || l.call(n);
+          (i = n == null ? void 0 : n.webkitEnterFullscreen) == null || i.call(n);
           return;
         }
         s ? B.exit().catch(() => {
@@ -880,28 +881,28 @@ function G(e, n, s) {
   }
   return `Audio ${s + 1}`;
 }
-const ee = pe.forwardRef(
+const ee = he.forwardRef(
   ({
     src: e,
     hlsConfig: n,
     isHls: s,
     autoPlay: r,
-    children: i,
+    children: l,
     onAudioTracks: u,
     audioTrackIndex: c,
     ...a
-  }, l) => {
+  }, i) => {
     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");
+    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;
       if (!e) return;
       const d = m.current;
       if (!d) return;
-      const w = (h) => {
+      const w = (p) => {
         var E;
-        (E = o.current) == null || E.call(o, h);
+        (E = o.current) == null || E.call(o, p);
       }, C = () => {
         r && d.play().catch(() => {
         });
@@ -910,27 +911,27 @@ const ee = pe.forwardRef(
       w([]);
       let N;
       if (g) {
-        const h = new $(n);
-        f.current = h;
+        const p = new $(n);
+        f.current = p;
         const E = () => {
-          const M = h.audioTracks.map((b, T) => ({
+          const M = p.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);
+        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);
       } else {
         d.src = e, d.load(), d.addEventListener("loadedmetadata", C, { once: !0 });
-        const h = d.audioTracks;
-        if (h) {
+        const p = d.audioTracks;
+        if (p) {
           const E = () => {
             const M = [];
-            for (let b = 0; b < h.length; b++) {
-              const T = h[b];
+            for (let b = 0; b < p.length; b++) {
+              const T = p[b];
               M.push({
                 index: b,
                 label: G(T.label, T.language, b),
@@ -939,9 +940,9 @@ const ee = pe.forwardRef(
             }
             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 = () => {
+          (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 = 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);
+            (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);
           };
         }
       }
@@ -963,7 +964,7 @@ const ee = pe.forwardRef(
           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 });
+    /* @__PURE__ */ t("video", { ref: m, ...a, children: l });
   }
 );
 ee.displayName = "HLSPlayer";
@@ -984,10 +985,10 @@ function Ue(e) {
   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(
+    const l = /^\/(?:embed|shorts|v|live)\/([A-Za-z0-9_-]{11})/.exec(
       n.pathname
     );
-    if (i) return i[1];
+    if (l) return l[1];
   }
   return null;
 }
@@ -998,7 +999,7 @@ function _e(e) {
     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;
+      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;
     }
   } catch {
@@ -1006,29 +1007,29 @@ function _e(e) {
   return null;
 }
 function Oe(e, n = {}) {
-  const { autoPlay: s = !1, muted: r = !0, loop: i = !1, controls: u = !0, startSeconds: c } = n, a = new URLSearchParams({
+  const { autoPlay: s = !1, muted: r = !0, loop: l = !1, controls: u = !0, startSeconds: c } = n, a = new URLSearchParams({
     rel: "0",
     modestbranding: "1",
     playsinline: "1",
     controls: u ? "1" : "0"
   });
-  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()}`;
+  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()}`;
 }
 const Fe = ({
   tracks: e,
   activeIndex: n,
   onSelect: s
 }) => {
-  const [r, i] = k(!1), u = V(null);
+  const [r, l] = 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);
+      u.current && !u.current.contains(m.target) && l(!1);
+    }, i = (m) => {
+      m.key === "Escape" && l(!1);
     };
-    return document.addEventListener("mousedown", a), document.addEventListener("keydown", l), () => {
-      document.removeEventListener("mousedown", a), document.removeEventListener("keydown", l);
+    return document.addEventListener("mousedown", a), document.addEventListener("keydown", i), () => {
+      document.removeEventListener("mousedown", a), document.removeEventListener("keydown", i);
     };
   }, [r]);
   const c = e.find((a) => a.index === n) ?? e[0];
@@ -1041,7 +1042,7 @@ const Fe = ({
         "aria-haspopup": "listbox",
         "aria-expanded": r,
         "aria-label": "Audio track",
-        onClick: () => i((a) => !a),
+        onClick: () => l((a) => !a),
         children: [
           /* @__PURE__ */ t(we, {}),
           /* @__PURE__ */ t("span", { className: "gvp-audio-label", children: c == null ? void 0 : c.label }),
@@ -1064,7 +1065,7 @@ const Fe = ({
           a.index === n && "is-active"
         ),
         onClick: () => {
-          s(a.index), i(!1);
+          s(a.index), l(!1);
         },
         children: a.label
       }
@@ -1075,32 +1076,32 @@ const Fe = ({
   poster: n,
   showDeviceToggle: s = !0,
   defaultDevice: r = "desktop",
-  hoverPlay: i = !1,
+  hoverPlay: l = !1,
   tooltipText: u,
   onClose: c,
   className: a = "",
-  muted: l = !0,
+  muted: i = !0,
   loop: m = !1,
-  controls: f = !1,
+  controls: f = !0,
   autoPlay: o = !1,
-  frameMaxWidth: p,
+  frameMaxWidth: h,
   aspectRatio: g,
   hlsConfig: d,
   children: w
 }) => {
-  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) => {
+  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 === "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(
+  }, []), 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: l,
+      muted: i,
       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,
-    [W, e, o, l, m, A, O]
+    [W, e, o, i, m, A, O]
   ), ce = S((y) => {
     T(y), z(-1);
   }, []), j = S(async () => {
@@ -1119,20 +1120,20 @@ const Fe = ({
       try {
         y.readyState < 2 && y.load();
         const Y = y.play();
-        N.current = Y, await Y, h(!0);
+        N.current = Y, await Y, p(!0);
       } catch {
-        h(!1);
+        p(!1);
       } finally {
         N.current = null;
       }
   }, []), ue = S(() => {
-    !i || I || Z();
-  }, [i, I, Z]), de = S(() => {
-    !i || I || j().then(() => h(!1));
-  }, [i, I, j]), F = S(async () => {
+    !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(), h(!1)));
-  }, [Z, j]), he = !I && b.length > 1;
+    y && (y.paused ? await Z() : (await j(), p(!1)));
+  }, [Z, j]), pe = !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,
@@ -1143,7 +1144,7 @@ const Fe = ({
       {
         ref: ne,
         className: H("gvp-root", a),
-        style: { width: le, aspectRatio: ae },
+        style: { width: ie, aspectRatio: ae },
         onMouseEnter: () => {
           M(!0), ue();
         },
@@ -1155,7 +1156,7 @@ const Fe = ({
             "iframe",
             {
               className: "gvp-video gvp-youtube",
-              src: ie ?? void 0,
+              src: le ?? void 0,
               title: "YouTube video player",
               allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
               allowFullScreen: !0,
@@ -1167,7 +1168,7 @@ const Fe = ({
               ref: oe,
               src: e,
               poster: n,
-              muted: l,
+              muted: i,
               loop: m,
               playsInline: !0,
               preload: "metadata",
@@ -1175,8 +1176,8 @@ const Fe = ({
               autoPlay: o,
               hlsConfig: d,
               className: "gvp-video",
-              onPlay: () => h(!0),
-              onPause: () => h(!1),
+              onPlay: () => p(!0),
+              onPause: () => p(!1),
               onAudioTracks: ce,
               audioTrackIndex: _,
               children: w
@@ -1224,7 +1225,7 @@ const Fe = ({
               children: /* @__PURE__ */ t(ve, {})
             }
           ),
-          he && /* @__PURE__ */ t(
+          pe && /* @__PURE__ */ t(
             Fe,
             {
               tracks: b,