@factorialco/f0-react 7.22.0 → 7.24.0

package/dist/{F0VideoPlayer-BqEMPz3U.js → F0VideoPlayer-DKPfOJBp.js}

@@ -1,7 +1,7 @@
-import { u as W, x as je, y as Xe, o as $, z as Ge, A as Ze, B as qe, E as Ye, G as Je, H as Qe, J as et, K as tt, L as nt, M as rt, N as at, O as ot, Q as st, R as ye, U as it, V as Ce, l as ct, W as lt, X as ut, Y as dt, w as ft, t as mt } from "./F0CanvasPanel-A9QPf6uH.js";
+import { u as W, H as je, J as Xe, y as $, K as Ge, L as Ze, M as qe, N as Ye, O as Je, Q as Qe, R as et, U as tt, V as nt, W as rt, X as at, Y as ot, Z as st, _ as ye, $ as it, a0 as Ce, l as ct, a1 as lt, a2 as ut, v as dt, B as ft, E as mt } from "./F0CanvasPanel-DnlpQoxW.js";
 import { jsxs as S, jsx as c } from "react/jsx-runtime";
-import { forwardRef as re, useId as pt, useState as x, useRef as F, useEffect as N, useMemo as J, useCallback as T } from "react";
-import { d as H, f as ue } from "./tooltip-BElsa4MF.js";
+import { forwardRef as re, useId as pt, useState as E, useRef as F, useEffect as N, useMemo as J, useCallback as T } from "react";
+import { d as H, f as ue } from "./tooltip-CrXp1Uaz.js";
 import { F as Pe, a as ht, b as gt } from "./VolumeMuted-UfTwt2zn.js";
 function Se(e) {
   return Array.isArray(e) && e.every(
@@ -61,7 +61,7 @@ function ne(e) {
 function se(e) {
   return `${e}x`;
 }
-function xt(e) {
+function Et(e) {
   return Re.includes(e);
 }
 const De = {
@@ -177,7 +177,7 @@ const fe = re(
   )
 );
 fe.displayName = "CaptionsLineIcon";
-const Ae = re(
+const Me = re(
   ({ animate: e, ...t }, a) => /* @__PURE__ */ c(
     "svg",
     {
@@ -199,13 +199,13 @@ const Ae = re(
     }
   )
 );
-Ae.displayName = "CaptionsFilledIcon";
-function Et({
+Me.displayName = "CaptionsFilledIcon";
+function xt({
   value: e,
   onChange: t,
   containerRef: a
 }) {
-  const { t: n } = W(), [o, s] = x(!1), r = (d) => {
+  const { t: n } = W(), [o, s] = E(!1), r = (d) => {
     const u = Array.from(
       d.currentTarget.querySelectorAll(
         '[role="menuitemradio"]'
@@ -296,17 +296,17 @@ function Ct({
   blockSeekPastMarker: n = !1,
   onSeek: o
 }) {
-  const { t: s } = W(), r = F(null), [d, u] = x(!1), [m, g] = x(null), y = t > 0 ? Math.min(1, e / t) : 0, l = a !== void 0 && t > 0 ? Math.min(1, a / t) : 0, f = a !== void 0 && t > 0 && a > 0 && a < t - le && e < a - le, h = (v) => {
+  const { t: s } = W(), r = F(null), [d, u] = E(!1), [m, g] = E(null), y = t > 0 ? Math.min(1, e / t) : 0, l = a !== void 0 && t > 0 ? Math.min(1, a / t) : 0, f = a !== void 0 && t > 0 && a > 0 && a < t - le && e < a - le, h = (v) => {
     const P = r.current;
     if (!P)
       return 0;
-    const M = P.getBoundingClientRect();
-    return Math.max(0, Math.min(1, (v - M.left) / M.width));
+    const A = P.getBoundingClientRect();
+    return Math.max(0, Math.min(1, (v - A.left) / A.width));
   }, b = (v) => {
     t && o(h(v) * t);
-  }, E = (v) => {
+  }, x = (v) => {
     t && (v.preventDefault(), v.currentTarget.setPointerCapture(v.pointerId), u(!0), b(v.clientX));
-  }, A = (v) => {
+  }, M = (v) => {
     t && (g(h(v.clientX)), d && b(v.clientX));
   }, k = (v) => {
     d && (u(!1), v.currentTarget.hasPointerCapture(v.pointerId) && v.currentTarget.releasePointerCapture(v.pointerId));
@@ -351,8 +351,8 @@ function Ct({
         current: ne(e),
         total: ne(t)
       }),
-      onPointerDown: E,
-      onPointerMove: A,
+      onPointerDown: x,
+      onPointerMove: M,
       onPointerUp: k,
       onPointerCancel: k,
       onLostPointerCapture: () => u(!1),
@@ -387,7 +387,7 @@ function Ct({
     }
   );
 }
-const ie = "off", we = "py-2 pr-4 text-base font-medium", Pt = "gap-2 py-2 pl-3 pr-2 text-base font-medium", Me = "max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[13rem] overflow-y-auto p-1";
+const ie = "off", we = "py-2 pr-4 text-base font-medium", Pt = "gap-2 py-2 pl-3 pr-2 text-base font-medium", Ae = "max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[13rem] overflow-y-auto p-1";
 function ce({
   icon: e,
   label: t,
@@ -406,7 +406,7 @@ function ce({
       /* @__PURE__ */ c("span", { className: "flex-1", children: t }),
       /* @__PURE__ */ c("span", { className: "text-f1-foreground-secondary", children: y })
     ] }),
-    /* @__PURE__ */ c(at, { container: a ?? void 0, children: /* @__PURE__ */ c(ot, { className: Me, children: /* @__PURE__ */ S(
+    /* @__PURE__ */ c(at, { container: a ?? void 0, children: /* @__PURE__ */ c(ot, { className: Ae, children: /* @__PURE__ */ S(
       st,
       {
         value: m ? r ? o : ie : o,
@@ -443,7 +443,7 @@ function St({
   onAudioDescriptionLanguageChange: l,
   onAudioDescriptionOff: f
 }) {
-  const { t: h } = W(), b = e.current, E = h("videoPlayer.off");
+  const { t: h } = W(), b = e.current, x = h("videoPlayer.off");
   return /* @__PURE__ */ S(qe, { children: [
     /* @__PURE__ */ c(Ye, { asChild: !0, children: /* @__PURE__ */ c(
       $,
@@ -461,7 +461,7 @@ function St({
         container: b,
         side: "top",
         align: "end",
-        className: Me,
+        className: Ae,
         children: [
           t.length > 1 ? /* @__PURE__ */ c(
             ce,
@@ -472,7 +472,7 @@ function St({
               options: t,
               value: a,
               onLanguageChange: n,
-              offLabel: E
+              offLabel: x
             }
           ) : null,
           o.length > 1 ? /* @__PURE__ */ c(
@@ -486,7 +486,7 @@ function St({
               on: r,
               onLanguageChange: d,
               onOff: u,
-              offLabel: E
+              offLabel: x
             }
           ) : null,
           m.length > 1 ? /* @__PURE__ */ c(
@@ -500,7 +500,7 @@ function St({
               on: y,
               onLanguageChange: l,
               onOff: f,
-              offLabel: E
+              offLabel: x
             }
           ) : null
         ]
@@ -544,11 +544,11 @@ function Tt({
         onClick: a
       }
     ),
-    /* @__PURE__ */ c(At, { value: r ? 0 : e, onChange: n })
+    /* @__PURE__ */ c(Mt, { value: r ? 0 : e, onChange: n })
   ] });
 }
-function At({ value: e, onChange: t }) {
-  const { t: a } = W(), n = F(null), [o, s] = x(!1), r = Math.max(0, Math.min(1, e)), d = (l) => {
+function Mt({ value: e, onChange: t }) {
+  const { t: a } = W(), n = F(null), [o, s] = E(!1), r = Math.max(0, Math.min(1, e)), d = (l) => {
     const f = n.current;
     if (!f)
       return 0;
@@ -631,7 +631,7 @@ function At({ value: e, onChange: t }) {
     }
   );
 }
-function Mt({
+function At({
   isPlaying: e,
   currentTime: t,
   duration: a,
@@ -648,14 +648,14 @@ function Mt({
   audioDescriptionOn: f,
   silent: h,
   persist: b,
-  audioLanguages: E,
-  audioLanguage: A,
+  audioLanguages: x,
+  audioLanguage: M,
   onAudioLanguageChange: k,
   captionLanguages: w,
   captionLanguage: O,
   onCaptionLanguageChange: v,
   onCaptionsOff: P,
-  audioDescriptionLanguages: M,
+  audioDescriptionLanguages: A,
   audioDescriptionLanguage: C,
   onAudioDescriptionLanguageChange: i,
   onAudioDescriptionOff: D,
@@ -669,10 +669,10 @@ function Mt({
   onSeek: Y,
   download: G
 }) {
-  const { t: p } = W(), I = g && w.length <= 1, z = l && M.length <= 1, V = Rt({
-    audioLanguages: E.length,
+  const { t: p } = W(), I = g && w.length <= 1, z = l && A.length <= 1, V = Rt({
+    audioLanguages: x.length,
     captionLanguages: w.length,
-    audioDescriptionLanguages: M.length
+    audioDescriptionLanguages: A.length
   });
   return /* @__PURE__ */ S(
     "div",
@@ -732,7 +732,7 @@ function Mt({
           }
         ),
         /* @__PURE__ */ c(
-          Et,
+          xt,
           {
             value: s,
             onChange: K,
@@ -748,7 +748,7 @@ function Mt({
               variant: "ghost",
               size: "sm",
               hideLabel: !0,
-              icon: y ? Ae : fe,
+              icon: y ? Me : fe,
               label: p("videoPlayer.captions"),
               "aria-pressed": y,
               onClick: _
@@ -776,15 +776,15 @@ function Mt({
           St,
           {
             containerRef: m,
-            audioLanguages: E,
-            audioLanguage: A,
+            audioLanguages: x,
+            audioLanguage: M,
             onAudioLanguageChange: k,
             captionLanguages: w,
             captionLanguage: O,
             captionsOn: y,
             onCaptionLanguageChange: v,
             onCaptionsOff: P,
-            audioDescriptionLanguages: M,
+            audioDescriptionLanguages: A,
             audioDescriptionLanguage: C,
             audioDescriptionOn: f,
             onAudioDescriptionLanguageChange: i,
@@ -819,7 +819,7 @@ function Mt({
 }
 const ke = (e) => e.trimStart().startsWith("WEBVTT");
 function Ie(e) {
-  const t = e !== void 0 && ke(e), [a, n] = x();
+  const t = e !== void 0 && ke(e), [a, n] = E();
   return N(() => {
     if (e === void 0 || !ke(e)) {
       n(void 0);
@@ -832,38 +832,38 @@ function Ie(e) {
     needsCrossOrigin: e !== void 0 && !t
   };
 }
-const xe = "descriptions";
+const Ee = "descriptions";
 function It(e, { enabled: t, describedSrc: a, descriptions: n }) {
-  const o = a !== void 0, { trackSrc: s, needsCrossOrigin: r } = Ie(n), [d, u] = x(!1), m = o || n !== void 0 || d, [g, y] = x(), l = F(!1);
+  const o = a !== void 0, { trackSrc: s, needsCrossOrigin: r } = Ie(n), [d, u] = E(!1), m = o || n !== void 0 || d, [g, y] = E(), l = F(!1);
   return N(() => {
     if (!e)
       return;
-    const f = e.textTracks, h = typeof window < "u" && "speechSynthesis" in window, b = t && !o && h, E = () => {
+    const f = e.textTracks, h = typeof window < "u" && "speechSynthesis" in window, b = t && !o && h, x = () => {
       l.current && (l.current = !1, e.play().catch(() => {
       }));
-    }, A = (C) => {
+    }, M = (C) => {
       window.speechSynthesis.cancel();
       const i = new SpeechSynthesisUtterance(C);
-      i.onend = E, i.onerror = E, window.speechSynthesis.speak(i);
+      i.onend = x, i.onerror = x, window.speechSynthesis.speak(i);
     }, k = /* @__PURE__ */ new WeakSet(), w = [], O = (C) => {
-      if (C.kind !== xe || (C.mode = "hidden", k.has(C)) || typeof C.addEventListener != "function")
+      if (C.kind !== Ee || (C.mode = "hidden", k.has(C)) || typeof C.addEventListener != "function")
         return;
       k.add(C);
       const i = () => {
         const R = C.activeCues?.[0]?.text || void 0;
-        y(R), b && R && (e.paused || (e.pause(), l.current = !0), A(R));
+        y(R), b && R && (e.paused || (e.pause(), l.current = !0), M(R));
       };
       C.addEventListener("cuechange", i), w.push(() => C.removeEventListener("cuechange", i));
     }, v = () => {
       let C = !1;
       for (const i of Array.from(f))
-        i.kind === xe && (n === void 0 && (C = !0), O(i));
+        i.kind === Ee && (n === void 0 && (C = !0), O(i));
       u(C);
     };
     v();
-    const P = typeof f.addEventListener == "function", M = () => v();
-    return P && (f.addEventListener("addtrack", M), f.addEventListener("removetrack", M)), () => {
-      P && (f.removeEventListener("addtrack", M), f.removeEventListener("removetrack", M)), w.forEach((C) => C()), h && window.speechSynthesis.cancel(), E();
+    const P = typeof f.addEventListener == "function", A = () => v();
+    return P && (f.addEventListener("addtrack", A), f.addEventListener("removetrack", A)), () => {
+      P && (f.removeEventListener("addtrack", A), f.removeEventListener("removetrack", A)), w.forEach((C) => C()), h && window.speechSynthesis.cancel(), x();
     };
   }, [e, t, o, n, s]), J(
     () => ({ trackSrc: s, needsCrossOrigin: r, available: m, activeCue: g }),
@@ -873,7 +873,7 @@ function It(e, { enabled: t, describedSrc: a, descriptions: n }) {
 function Nt({
   targetRef: e
 }) {
-  const [t, a] = x(!1);
+  const [t, a] = E(!1);
   N(() => {
     const o = () => {
       a(document.fullscreenElement === e.current);
@@ -949,7 +949,7 @@ function Ft({
 }) {
   const n = F(0), o = F(0), s = F(t);
   s.current = t;
-  const [r, d] = x(0);
+  const [r, d] = E(0);
   N(() => {
     n.current = 0, o.current = 0, d(0);
   }, [a]), N(() => {
@@ -977,12 +977,12 @@ function Ft({
   const u = T((m) => s.current ? Math.min(m, n.current) : m, []);
   return { maxWatchedTime: r, clampSeek: u };
 }
-const Ee = /* @__PURE__ */ new Set([
+const xe = /* @__PURE__ */ new Set([
   "captions",
   "subtitles"
 ]), Ot = 2, Vt = 3;
 function Ut(e, t) {
-  const { trackSrc: a, needsCrossOrigin: n } = Ie(t), [o, s] = x(!1), [r, d] = x(!1), [u, m] = x(!1), y = r || t !== void 0 && !u;
+  const { trackSrc: a, needsCrossOrigin: n } = Ie(t), [o, s] = E(!1), [r, d] = E(!1), [u, m] = E(!1), y = r || t !== void 0 && !u;
   return N(() => {
     m(!1), d(!1);
   }, [a]), N(() => {
@@ -993,7 +993,7 @@ function Ut(e, t) {
     ), h = () => {
       let k = !1;
       for (const w of Array.from(l))
-        Ee.has(w.kind) && (w.mode = o ? "showing" : "hidden", w.cues && w.cues.length > 0 && (k = !0));
+        xe.has(w.kind) && (w.mode = o ? "showing" : "hidden", w.cues && w.cues.length > 0 && (k = !0));
       if (d(k), f) {
         if (f.readyState === Vt)
           m(!0);
@@ -1012,14 +1012,14 @@ function Ut(e, t) {
       });
     }
     for (const k of Array.from(l)) {
-      if (!Ee.has(k.kind) || typeof k.addEventListener != "function")
+      if (!xe.has(k.kind) || typeof k.addEventListener != "function")
         continue;
       const w = () => h();
       k.addEventListener("cuechange", w), b.push(() => k.removeEventListener("cuechange", w));
     }
-    const E = typeof l.addEventListener == "function", A = () => h();
-    return E && (l.addEventListener("addtrack", A), l.addEventListener("removetrack", A)), e.addEventListener("loadedmetadata", h), () => {
-      b.forEach((k) => k()), E && (l.removeEventListener("addtrack", A), l.removeEventListener("removetrack", A)), e.removeEventListener("loadedmetadata", h);
+    const x = typeof l.addEventListener == "function", M = () => h();
+    return x && (l.addEventListener("addtrack", M), l.addEventListener("removetrack", M)), e.addEventListener("loadedmetadata", h), () => {
+      b.forEach((k) => k()), x && (l.removeEventListener("addtrack", M), l.removeEventListener("removetrack", M)), e.removeEventListener("loadedmetadata", h);
     };
   }, [e, t, o, a]), J(
     () => ({
@@ -1086,11 +1086,11 @@ function zt({
   }, [e, s]);
 }
 function Bt(e) {
-  const t = F(null), [a, n] = x(
+  const t = F(null), [a, n] = E(
     null
   ), o = F(0), s = T((i) => {
     t.current = i, n(i);
-  }, []), [r, d] = x(!1), [u, m] = x(!1), [g, y] = x(0), [l, f] = x(0), [h, b] = x(1), [E, A] = x(!1), [k, w] = x(
+  }, []), [r, d] = E(!1), [u, m] = E(!1), [g, y] = E(0), [l, f] = E(0), [h, b] = E(1), [x, M] = E(!1), [k, w] = E(
     oe
   );
   N(() => {
@@ -1100,9 +1100,9 @@ function Bt(e) {
     if (!i)
       return;
     const D = () => m(!0), R = () => m(!1), B = () => m(!1), j = () => {
-      b(i.volume), A(i.muted);
+      b(i.volume), M(i.muted);
     }, K = () => f(i.duration || 0), X = () => {
-      xt(i.playbackRate) && w(i.playbackRate);
+      Et(i.playbackRate) && w(i.playbackRate);
     }, _ = () => {
       const U = performance.now();
       U - o.current >= bt && (o.current = U, y(i.currentTime));
@@ -1124,7 +1124,7 @@ function Bt(e) {
       return;
     const R = Math.max(0, Math.min(1, i));
     D.volume = R, D.muted = R === 0;
-  }, []), M = T((i) => {
+  }, []), A = T((i) => {
     const D = t.current;
     D && (D.playbackRate = i);
   }, []), C = T((i) => {
@@ -1143,13 +1143,13 @@ function Bt(e) {
     currentTime: g,
     duration: l,
     volume: h,
-    isMuted: E,
+    isMuted: x,
     playbackRate: k,
     setVideoLoaded: d,
     togglePlay: O,
     toggleMute: v,
     setVolume: P,
-    setPlaybackRate: M,
+    setPlaybackRate: A,
     seekTo: C
   };
 }
@@ -1195,19 +1195,19 @@ function Wt({
   onComplete: f,
   ...h
 }) {
-  const { t: b } = W(), E = F(null), A = J(() => ae(e), [e]), [k, w] = x(
-    () => Z(A, r)
-  ), O = A.some((L) => L.locale === k) ? k : Z(A, r), v = ee(e, O) ?? "", P = J(
+  const { t: b } = W(), x = F(null), M = J(() => ae(e), [e]), [k, w] = E(
+    () => Z(M, r)
+  ), O = M.some((L) => L.locale === k) ? k : Z(M, r), v = ee(e, O) ?? "", P = J(
     () => ae(s?.captions),
     [s?.captions]
-  ), [M, C] = x(
+  ), [A, C] = E(
     () => Z(P, r)
   ), i = P.some(
-    (L) => L.locale === M
-  ) ? M : Z(P, r), D = ee(s?.captions, i), R = J(
+    (L) => L.locale === A
+  ) ? A : Z(P, r), D = ee(s?.captions, i), R = J(
     () => ae(s?.descriptions, s?.describedSrc),
     [s?.descriptions, s?.describedSrc]
-  ), [B, j] = x(
+  ), [B, j] = E(
     () => Z(R, r)
   ), K = R.some(
     (L) => L.locale === B
@@ -1217,7 +1217,7 @@ function Wt({
   ), _ = ee(
     s?.describedSrc,
     K
-  ), [U, Y] = x(!1), G = U && _ ? _ : v, p = Bt(G), I = Ut(p.videoElement, D), z = It(p.videoElement, {
+  ), [U, Y] = E(!1), G = U && _ ? _ : v, p = Bt(G), I = Ut(p.videoElement, D), z = It(p.videoElement, {
     enabled: U,
     describedSrc: _,
     descriptions: X
@@ -1269,7 +1269,7 @@ function Wt({
     (L) => p.seekTo(me(L)),
     [p, me]
   ), { isFullscreen: Ke, toggleFullscreen: he } = Nt({
-    targetRef: E
+    targetRef: x
   }), ge = T(() => {
   }, []), ve = !!(U && _);
   N(() => {
@@ -1285,13 +1285,13 @@ function Wt({
     setVolume: n ? ge : p.setVolume
   });
   N(() => {
-    u && E.current?.focus({ preventScroll: !0 });
+    u && x.current?.focus({ preventScroll: !0 });
   }, [u]);
   const Be = (L) => L.preventDefault();
   return /* @__PURE__ */ S(
     "div",
     {
-      ref: E,
+      ref: x,
       className: H(
         "group relative h-full w-full overflow-hidden rounded-[inherit] bg-f1-foreground dark:bg-f1-background",
         "[&:fullscreen]:h-screen [&:fullscreen]:w-screen [&:fullscreen]:rounded-none",
@@ -1384,7 +1384,7 @@ function Wt({
         ) : null,
         /* @__PURE__ */ c("span", { className: "sr-only", "aria-live": "polite", children: p.isPlaying ? b("videoPlayer.playing") : b("videoPlayer.paused") }),
         p.videoLoaded ? /* @__PURE__ */ c(
-          Mt,
+          At,
           {
             isPlaying: p.isPlaying,
             currentTime: p.currentTime,
@@ -1395,14 +1395,14 @@ function Wt({
             isFullscreen: Ke,
             markerTime: g ? $e : void 0,
             blockSeekPastMarker: g,
-            containerRef: E,
+            containerRef: x,
             captionsAvailable: I.available,
             captionsOn: I.showing,
             audioDescriptionAvailable: z.available,
             audioDescriptionOn: U,
             silent: n,
             persist: o,
-            audioLanguages: A,
+            audioLanguages: M,
             audioLanguage: O,
             onAudioLanguageChange: Ne,
             captionLanguages: P,