@layers-app/shared 0.4.9 → 0.4.10

package/dist/components/VideoPlayer/VideoPlayer.js

@@ -1,78 +1,81 @@
-import { jsx as C, jsxs as me, Fragment as De } from "react/jsx-runtime";
-import { useState as b, useRef as R, useEffect as d, useCallback as qe, useMemo as Oe } from "react";
-import { useTranslation as We } from "react-i18next";
-import { Flex as Ve } from "@mantine/core";
-import _e from "shaka-player-react";
-import { VideoCustomControls as $e } from "./components/VideoCustomControls.js";
-import { PlayIcon as je } from "./components/VideoIcons.js";
-import { getSettingsSnapshot as x, setSubtitle as ie, setQuality as Xe, setPlaybackRate as Ye } from "./utils/videoSettings.js";
+import { jsx as w, jsxs as me, Fragment as _e } from "react/jsx-runtime";
+import { useState as T, useRef as R, useEffect as d, useCallback as $e, useMemo as je } from "react";
+import { useTranslation as Xe } from "react-i18next";
+import { Flex as Fe } from "@mantine/core";
+import Ye from "shaka-player-react";
+import { VideoCustomControls as Ge } from "./components/VideoCustomControls.js";
+import { PlayIcon as Je } from "./components/VideoIcons.js";
+import { getSettingsSnapshot as x, setSubtitle as ie, setQuality as Ke, setPlaybackRate as Ze } from "./utils/videoSettings.js";
 /* empty css            */
-function M(T, v) {
-  return T ? T.startsWith("http://") || T.startsWith("https://") ? T : T.startsWith("/") ? `${v || window.location.origin}${T}` : T : null;
+import { AudioOnlyCover as et } from "./AudioOnlyCover.js";
+import { useBlankFrame as tt } from "./useBlankFrame.js";
+import { idFromMediaUrl as pe, useWaveform as nt } from "./useWaveform.js";
+function M(b, p) {
+  return b ? b.startsWith("http://") || b.startsWith("https://") ? b : b.startsWith("/") ? `${p || window.location.origin}${b}` : b : null;
 }
-function Ge(T) {
-  return Array.from(T.textTracks || []).filter(
-    (v) => v.kind === "subtitles" || v.kind === "captions"
+function rt(b) {
+  return Array.from(b.textTracks || []).filter(
+    (p) => p.kind === "subtitles" || p.kind === "captions"
   );
 }
-function pe(T, v) {
-  return T.url ? M(T.url, v) : null;
+function ve(b, p) {
+  return b.url ? M(b.url, p) : null;
 }
-function ct({
-  source: T,
-  videoId: v,
-  language: G,
+function gt({
+  source: b,
+  videoId: p,
+  language: J,
   baseUrl: y,
-  storyboard: we,
-  chapters: ve,
-  subtitles: U,
+  storyboard: Me,
+  chapters: ye,
+  subtitles: B,
   onPlayerInfo: ae,
-  onFallback: D
+  onFallback: z
 }) {
   const {
-    streamUrl: J,
-    nativeUrl: B,
+    streamUrl: D,
+    nativeUrl: I,
     rawUrl: q,
     localBlobUrl: H,
     posterUrl: K,
     optimizedReady: h = !1,
-    isProcessing: Ne = !1
-  } = T, { t: Q, i18n: Fe } = We(), [m, ye] = b(null), [V, he] = b(null), [ge, ke] = b(null), [L, Z] = b(!1), g = R(null), P = R(null), O = R(null), [s, Ee] = b(null), [W, S] = b(() => x(null, null)), [be, le] = b(!0), [k, se] = b([]), [ce, Te] = b([{ id: null, label: Q("editor.video.settings.off") }]), [z, ue] = b(null), [N, _] = b(null), [Me, Ie] = b(!0), [Se, ee] = b(!1), [te, Ue] = b(0), [oe, de] = b(!1), A = R(!1), ne = R(null), p = R(null), $ = R(null), j = R(
+    isProcessing: Ue = !1
+  } = b, { t: O, i18n: Be } = Xe(), [f, he] = T(null), [A, ge] = T(null), [ke, Ee] = T(null), [L, Z] = T(!1), g = R(null), P = R(null), W = R(null), [i, Te] = T(null), [_, S] = T(() => x(null, null)), [be, le] = T(!0), [k, se] = T([]), [ue, Se] = T([{ id: null, label: O("editor.video.settings.off") }]), [Q, ce] = T(null), [N, $] = T(null), [Le, Ie] = T(!0), [Pe, ee] = T(!1), [te, He] = T(0), [oe, de] = T(!1), C = R(!1), ne = R(null), v = R(null), j = R(null), X = R(
     null
-  ), re = R([]), Le = R(!1), X = R(/* @__PURE__ */ new Set()), fe = R(null), I = R(!1);
+  ), re = R([]), Re = R(!1), Y = R(/* @__PURE__ */ new Set()), fe = R(null), U = R(!1);
   d(() => {
-    G && Fe.changeLanguage(G).catch(() => {
+    J && Be.changeLanguage(J).catch(() => {
     });
-  }, [G]), d(() => {
-    if (!v) {
+  }, [J]), d(() => {
+    if (!p) {
       se([]);
       return;
     }
-    if (U != null) {
-      const e = (U || []).filter(
+    if (B != null) {
+      const e = (B || []).filter(
         (t) => t.id && !t.isDisabled
       );
       se(e);
     }
-  }, [v, U]), d(() => {
+  }, [p, B]), d(() => {
     le(!0), fe.current = null;
-  }, [v]);
-  const Be = qe(() => {
-    if (!v || U == null) return;
-    const e = (U || []).filter(
+  }, [p]);
+  const Oe = $e(() => {
+    if (!p || B == null) return;
+    const e = (B || []).filter(
       (t) => t.id && !t.isDisabled
     );
     se(e);
-  }, [v, U]);
+  }, [p, B]);
   d(() => {
     if (k.length === 0) {
-      Te([
-        { id: null, label: Q("editor.video.settings.off") }
-      ]), ue(null);
+      Se([
+        { id: null, label: O("editor.video.settings.off") }
+      ]), ce(null);
       return;
     }
     const e = [
-      { id: null, label: Q("editor.video.settings.off") },
+      { id: null, label: O("editor.video.settings.off") },
       ...k.map((t, n) => ({
         id: n,
         label: t.label || t.lang || "Unknown",
@@ -80,124 +83,124 @@ function ct({
         isDefault: t.isDefault || !1
       }))
     ];
-    Te(e), ue(
+    Se(e), ce(
       (t) => t != null && t >= 0 && t < k.length ? t : null
     );
-  }, [k, Q]), d(() => {
+  }, [k, O]), d(() => {
     let e = !1;
     const t = g.current?.player || null;
     return h ? (async () => {
       if (!t) return;
-      if (z == null) {
+      if (Q == null) {
         ie(t, null), S(
-          x(t, s)
+          x(t, i)
         );
         return;
       }
-      const i = k[z], a = i?.label || i?.lang || "und", l = i?.lang || "und", c = i?.kind || "subtitles", f = t.getTextTracks?.() || [];
-      let o = f.find(
-        (E) => (E.language || "") === l && (E.label || "") === a && (E.kind || "subtitles") === c
+      const a = k[Q], l = a?.label || a?.lang || "und", s = a?.lang || "und", u = a?.kind || "subtitles", m = t.getTextTracks?.() || [];
+      let o = m.find(
+        (E) => (E.language || "") === s && (E.label || "") === l && (E.kind || "subtitles") === u
       );
-      if (!o && N && (o = f.find(
+      if (!o && N && (o = m.find(
         (E) => (E.language || "") === N.lang && (E.label || "") === N.label && (E.kind || "subtitles") === N.kind
       )), !o) {
         const E = N && k.length > 0 && k.find(
-          (Y) => (Y.lang || "und") === N.lang && (Y.label || Y.lang || "und") === N.label && (Y.kind || "subtitles") === N.kind
-        ) || null, F = i || E, u = F ? pe(F, y) : null;
-        if (!u || typeof t.addTextTrackAsync != "function")
+          (G) => (G.lang || "und") === N.lang && (G.label || G.lang || "und") === N.label && (G.kind || "subtitles") === N.kind
+        ) || null, F = a || E, c = F ? ve(F, y) : null;
+        if (!c || typeof t.addTextTrackAsync != "function")
           return;
-        let w = null;
-        w = await t.addTextTrackAsync(
-          u,
-          F?.lang || l,
-          F?.kind || c,
+        let V = null;
+        V = await t.addTextTrackAsync(
+          c,
+          F?.lang || s,
+          F?.kind || u,
           "text/vtt",
           void 0,
-          F?.label || a
-        ), w && typeof w.id == "number" && (o = w);
+          F?.label || l
+        ), V && typeof V.id == "number" && (o = V);
       }
       e || o && (t.selectTextTrack?.(o), t.setTextTrackVisibility?.(!0), S(
-        x(t, s)
+        x(t, i)
       ));
     })().catch(() => {
-    }) : s && (ie(null, z, s), S(x(null, s))), () => {
+    }) : i && (ie(null, Q, i), S(x(null, i))), () => {
       e = !0;
     };
   }, [
-    z,
+    Q,
     k,
     h,
-    s,
+    i,
     y,
-    v,
+    p,
     N
   ]), d(() => {
-    if (!m) return;
+    if (!f) return;
     let e = !1, t = null;
-    const n = (l) => {
+    const n = (s) => {
       if (e) return;
-      M(B, y) || M(q ?? null, y) ? (Z(!0), D?.(!0)) : ke(
-        Q("editor.video.player.playbackError", { code: l.code })
+      M(I, y) || M(q ?? null, y) ? (Z(!0), z?.(!0)) : Ee(
+        O("editor.video.player.playbackError", { code: s.code })
       );
-    }, r = (l) => {
-      const c = l.detail;
-      if (c.severity === 2)
-        n(c);
+    }, r = (s) => {
+      const u = s.detail;
+      if (u.severity === 2)
+        n(u);
       else
         try {
           t?.recover();
         } catch {
         }
-    }, i = () => {
+    }, a = () => {
       if (t = g.current?.player, !t) {
-        const l = requestAnimationFrame(i);
-        return () => cancelAnimationFrame(l);
+        const s = requestAnimationFrame(a);
+        return () => cancelAnimationFrame(s);
       }
-      if ($.current)
+      if (j.current)
         try {
-          t.removeEventListener("error", $.current);
+          t.removeEventListener("error", j.current);
         } catch {
         }
-      $.current = r, t.addEventListener("error", r), t.load(m).catch((l) => {
-        e || l.code !== 7e3 && n(l);
+      j.current = r, t.addEventListener("error", r), t.load(f).catch((s) => {
+        e || s.code !== 7e3 && n(s);
       });
-    }, a = requestAnimationFrame(i);
+    }, l = requestAnimationFrame(a);
     return () => {
-      if (e = !0, cancelAnimationFrame(a), t && $.current)
+      if (e = !0, cancelAnimationFrame(l), t && j.current)
         try {
-          t.removeEventListener("error", $.current);
+          t.removeEventListener("error", j.current);
         } catch {
         }
     };
-  }, [m, B, q, y, D]), d(() => {
+  }, [f, I, q, y, z]), d(() => {
     let e = !1, t = null;
-    if (h && J) {
-      const n = M(J, y);
+    if (h && D) {
+      const n = M(D, y);
       if (n) {
-        if (!V) {
-          const f = H || M(q ?? null, y);
-          f && he(f);
+        if (!A) {
+          const m = H || M(q ?? null, y);
+          m && ge(m);
         }
         if (fe.current === n)
           return;
         const r = P.current;
-        r && r.currentTime > 0 && (p.current = {
+        r && r.currentTime > 0 && (v.current = {
           time: r.currentTime,
           paused: r.paused
-        }, I.current = !0);
-        const i = (f) => {
+        }, U.current = !0);
+        const a = (m) => {
           e || fetch(n, { method: "HEAD", credentials: "include" }).then((o) => {
-            e || (fe.current = n, o.ok ? (ye(n), ke(null), Z(!1), D?.(!1), X.current.clear()) : (X.current.clear(), Z(!0), D?.(!0), c(f)));
+            e || (fe.current = n, o.ok ? (he(n), Ee(null), Z(!1), z?.(!1), Y.current.clear()) : (Y.current.clear(), Z(!0), z?.(!0), u(m)));
           }).catch(() => {
-            e || (X.current.clear(), Z(!0), D?.(!0), c(f));
+            e || (Y.current.clear(), Z(!0), z?.(!0), u(m));
           });
-        }, a = 10, l = 5e3, c = (f) => {
-          e || f >= a || (t = setTimeout(() => i(f + 1), l));
+        }, l = 10, s = 5e3, u = (m) => {
+          e || m >= l || (t = setTimeout(() => a(m + 1), s));
         };
-        i(0);
+        a(0);
       }
-    } else if (H || B) {
-      const n = H || M(B, y);
+    } else if (H || I) {
+      const n = H || M(I, y);
       if (n) {
         if (ne.current === n)
           return;
@@ -206,17 +209,17 @@ function ct({
           ne.current = n;
           return;
         }
-        ne.current && r && r.currentTime > 0 && (p.current = {
+        ne.current && r && r.currentTime > 0 && (v.current = {
           time: r.currentTime,
           paused: r.paused
-        }), he(n), ye(null), ne.current = n;
+        }), ge(n), he(null), ne.current = n;
       }
     }
     return () => {
       e = !0, t && clearTimeout(t);
     };
-  }, [J, y, h, B, H]), d(() => {
-    if (!h || !m) return;
+  }, [D, y, h, I, H]), d(() => {
+    if (!h || !f) return;
     let e = !1, t = null;
     const n = () => {
       if (e) return;
@@ -225,87 +228,87 @@ function ct({
         requestAnimationFrame(n);
         return;
       }
-      const i = () => {
+      const a = () => {
         if (e || r.readyState < 1) return;
-        const a = P.current, l = a && a.currentTime > 0 ? a.currentTime : p.current?.time ?? 0;
-        l > 0 && Math.abs(r.currentTime - l) > 0.05 && (r.currentTime = l), p.current = null, I.current = !1;
+        const l = P.current, s = l && l.currentTime > 0 ? l.currentTime : v.current?.time ?? 0;
+        s > 0 && Math.abs(r.currentTime - s) > 0.05 && (r.currentTime = s), v.current = null, U.current = !1;
       };
-      r.readyState >= 1 ? i() : (r.addEventListener("loadedmetadata", i, {
+      r.readyState >= 1 ? a() : (r.addEventListener("loadedmetadata", a, {
         once: !0
-      }), r.addEventListener("canplay", i, { once: !0 }), t = () => {
-        r.removeEventListener("loadedmetadata", i), r.removeEventListener("canplay", i);
+      }), r.addEventListener("canplay", a, { once: !0 }), t = () => {
+        r.removeEventListener("loadedmetadata", a), r.removeEventListener("canplay", a);
       });
     };
     return n(), () => {
       e = !0, t?.();
     };
-  }, [h, m]), d(() => {
+  }, [h, f]), d(() => {
     const e = P.current;
-    e && m && !L && (A.current = !e.paused, e.currentTime > 0 && (p.current = {
+    e && f && !L && (C.current = !e.paused, e.currentTime > 0 && (v.current = {
       time: e.currentTime,
       paused: e.paused
     }));
-  }, [m, L]), d(() => {
-    if (!m || L) {
+  }, [f, L]), d(() => {
+    if (!f || L) {
       de(!1);
       return;
     }
-    let e = !1, t = null, n = null, r = 0, i = !1;
-    const a = 3, l = () => {
+    let e = !1, t = null, n = null, r = 0, a = !1;
+    const l = 3, s = () => {
       if (e) return;
-      const c = g.current?.videoElement;
-      if (!c) {
-        requestAnimationFrame(l);
+      const u = g.current?.videoElement;
+      if (!u) {
+        requestAnimationFrame(s);
         return;
       }
-      const f = () => {
-        if (e || !A.current || !c.paused || c.ended) return;
-        const u = c.play();
-        !u || typeof u.then != "function" || u.then(() => {
-          e || !A.current || c.paused && (n && clearTimeout(n), n = setTimeout(() => {
-            e || !A.current || !c.paused || r >= a || (r += 1, f());
+      const m = () => {
+        if (e || !C.current || !u.paused || u.ended) return;
+        const c = u.play();
+        !c || typeof c.then != "function" || c.then(() => {
+          e || !C.current || u.paused && (n && clearTimeout(n), n = setTimeout(() => {
+            e || !C.current || !u.paused || r >= l || (r += 1, m());
           }, 250));
         }).catch(() => {
         });
       }, o = () => {
-        if (!e && c.readyState >= 2 && !c.seeking) {
-          const u = P.current, w = !!(u && !u.paused && !u.ended);
-          if (!(A.current && w)) {
-            !i && u && Math.abs(c.currentTime - u.currentTime) > 0.1 && (c.currentTime = u.currentTime), i = !0, A.current = !1, de(!0);
+        if (!e && u.readyState >= 2 && !u.seeking) {
+          const c = P.current, V = !!(c && !c.paused && !c.ended);
+          if (!(C.current && V)) {
+            !a && c && Math.abs(u.currentTime - c.currentTime) > 0.1 && (u.currentTime = c.currentTime), a = !0, C.current = !1, de(!0);
             return;
           }
-          c.paused && u && (i || Math.abs(c.currentTime - u.currentTime) > 0.1 && (c.currentTime = u.currentTime), i = !0, c.muted = !0, f());
+          u.paused && c && (a || Math.abs(u.currentTime - c.currentTime) > 0.1 && (u.currentTime = c.currentTime), a = !0, u.muted = !0, m());
         }
       }, E = () => {
         if (e) return;
-        const u = P.current;
-        u && !u.paused && u.pause(), c.muted && (c.muted = !1), de(!0), A.current = !1, r = 0, n && (clearTimeout(n), n = null);
+        const c = P.current;
+        c && !c.paused && c.pause(), u.muted && (u.muted = !1), de(!0), C.current = !1, r = 0, n && (clearTimeout(n), n = null);
       }, F = () => {
-        if (!(e || !A.current) && !(c.seeking || c.ended) && !(c.readyState < 2)) {
-          if (r >= a) {
-            A.current = !1;
+        if (!(e || !C.current) && !(u.seeking || u.ended) && !(u.readyState < 2)) {
+          if (r >= l) {
+            C.current = !1;
             return;
           }
-          r += 1, f();
+          r += 1, m();
         }
       };
-      c.addEventListener("seeked", o), c.addEventListener("canplay", o), c.addEventListener("loadeddata", o), c.addEventListener("playing", o), c.addEventListener("playing", E), c.addEventListener("pause", F), o(), t = () => {
-        c.removeEventListener("seeked", o), c.removeEventListener("canplay", o), c.removeEventListener("loadeddata", o), c.removeEventListener("playing", o), c.removeEventListener("playing", E), c.removeEventListener("pause", F);
+      u.addEventListener("seeked", o), u.addEventListener("canplay", o), u.addEventListener("loadeddata", o), u.addEventListener("playing", o), u.addEventListener("playing", E), u.addEventListener("pause", F), o(), t = () => {
+        u.removeEventListener("seeked", o), u.removeEventListener("canplay", o), u.removeEventListener("loadeddata", o), u.removeEventListener("playing", o), u.removeEventListener("playing", E), u.removeEventListener("pause", F);
       };
     };
-    return l(), () => {
+    return s(), () => {
       e = !0, n && clearTimeout(n), t?.();
     };
-  }, [m, L]), d(() => {
-    if (m && !L && oe) {
+  }, [f, L]), d(() => {
+    if (f && !L && oe) {
       const e = g.current?.videoElement || null;
-      e && Ee(e);
-    } else if (!m || L) {
+      e && Te(e);
+    } else if (!f || L) {
       const e = P.current;
-      if (Ee(e), L && A.current && e && e.paused && !e.ended) {
+      if (Te(e), L && C.current && e && e.paused && !e.ended) {
         const t = () => {
-          !A.current || !e.paused || e.ended || e.play().then(() => {
-            e.paused || (A.current = !1);
+          !C.current || !e.paused || e.ended || e.play().then(() => {
+            e.paused || (C.current = !1);
           }).catch(() => {
           });
         };
@@ -315,81 +318,81 @@ function ct({
   }, [
     h,
     L,
-    m,
-    V,
+    f,
+    A,
     oe
   ]), d(() => {
-    if (!s) {
+    if (!i) {
       ee(!1);
       return;
     }
-    const e = s, t = () => ee(!0), n = () => {
+    const e = i, t = () => ee(!0), n = () => {
       e.readyState >= 3 && ee(!1);
     }, r = () => ee(!1);
     return e.addEventListener("waiting", t), e.addEventListener("seeking", t), e.addEventListener("seeked", n), e.addEventListener("canplay", n), e.addEventListener("playing", r), () => {
       e.removeEventListener("waiting", t), e.removeEventListener("seeking", t), e.removeEventListener("seeked", n), e.removeEventListener("canplay", n), e.removeEventListener("playing", r);
     };
-  }, [s]), d(() => {
-    if (!s) return;
+  }, [i]), d(() => {
+    if (!i) return;
     const e = () => {
-      Ie(s.paused);
+      Ie(i.paused);
     };
-    return e(), s.addEventListener("play", e), s.addEventListener("pause", e), s.addEventListener("ended", e), () => {
-      s.removeEventListener("play", e), s.removeEventListener("pause", e), s.removeEventListener("ended", e);
+    return e(), i.addEventListener("play", e), i.addEventListener("pause", e), i.addEventListener("ended", e), () => {
+      i.removeEventListener("play", e), i.removeEventListener("pause", e), i.removeEventListener("ended", e);
     };
-  }, [s]), d(() => {
-    const e = O.current;
+  }, [i]), d(() => {
+    const e = W.current;
     if (!e) return;
     const t = new ResizeObserver((n) => {
       const r = n[0];
-      r && Ue(Math.round(r.contentRect.width));
+      r && He(Math.round(r.contentRect.width));
     });
     return t.observe(e), () => t.disconnect();
   }, []), d(() => {
     if (!ae) return;
-    const e = g.current?.player || null, t = P.current || null, n = O.current || null, r = m && !L && e ? "shaka" : "native";
-    let i = null;
+    const e = g.current?.player || null, t = P.current || null, n = W.current || null, r = f && !L && e ? "shaka" : "native";
+    let a = null;
     try {
-      const a = e?.seekRange?.();
-      a && Number.isFinite(a.end) && a.end > 0 && (i = a.end);
+      const l = e?.seekRange?.();
+      l && Number.isFinite(l.end) && l.end > 0 && (a = l.end);
     } catch {
     }
-    if (i == null && s) {
-      const a = s.duration;
-      Number.isFinite(a) && a > 0 && (i = a);
+    if (a == null && i) {
+      const l = i.duration;
+      Number.isFinite(l) && l > 0 && (a = l);
     }
     ae({
       shakaPlayer: e,
       nativeVideo: t,
       mode: r,
       containerEl: n,
-      videoDuration: i
+      videoDuration: a
     });
   }, [
     ae,
     h,
     L,
-    m,
-    V,
-    s
+    f,
+    A,
+    i
   ]), d(() => {
     const e = P.current;
     e && (e.poster = K || "");
     const t = g.current?.videoElement;
     t && (t.poster = K || "");
-  }, [K, m, V]), d(() => {
+  }, [K, f, A]), d(() => {
     const e = g.current?.player || null;
     if (!h || !e) {
-      S(x(null, s));
+      S(x(null, i));
       return;
     }
-    S(x(e, s));
-  }, [h, m, s]), d(() => {
+    S(x(e, i));
+  }, [h, f, i]), d(() => {
     const e = g.current?.player || null;
     if (!h || !e)
       return;
     const t = () => {
-      S(x(e, s));
+      S(x(e, i));
     }, n = ["variantchanged", "adaptation", "trackschanged"];
     return n.forEach((r) => {
       e.addEventListener?.(r, t);
@@ -398,64 +401,64 @@ function ct({
         e.removeEventListener?.(r, t);
       });
     };
-  }, [h, m, s]), d(() => {
-    if (!s) return;
+  }, [h, f, i]), d(() => {
+    if (!i) return;
     const e = () => {
       const t = g.current?.player || null;
-      S(x(t, s));
+      S(x(t, i));
     };
-    return s.addEventListener("ratechange", e), () => {
-      s.removeEventListener("ratechange", e);
+    return i.addEventListener("ratechange", e), () => {
+      i.removeEventListener("ratechange", e);
     };
-  }, [s]), d(() => () => {
+  }, [i]), d(() => () => {
     const e = document.pictureInPictureElement;
     if (!e) return;
-    const t = g.current?.videoElement || null, n = P.current || null, r = O.current || null, i = e instanceof HTMLVideoElement && (n && n.currentSrc === e.currentSrc || t && t.currentSrc === e.currentSrc);
-    (e === t || e === n || r && r.contains(e) || i) && document.exitPictureInPicture?.().catch(() => {
+    const t = g.current?.videoElement || null, n = P.current || null, r = W.current || null, a = e instanceof HTMLVideoElement && (n && n.currentSrc === e.currentSrc || t && t.currentSrc === e.currentSrc);
+    (e === t || e === n || r && r.contains(e) || a) && document.exitPictureInPicture?.().catch(() => {
     });
   }, []), d(() => {
     const e = P.current;
-    if (!e || !V) return;
+    if (!e || !A) return;
     const t = () => {
-      p.current && (e.currentTime = p.current.time, p.current.paused || e.play().catch(() => {
-      }), I.current = !1);
+      v.current && (e.currentTime = v.current.time, v.current.paused || e.play().catch(() => {
+      }), U.current = !1);
     };
     e.readyState >= 1 ? t() : e.addEventListener("loadedmetadata", t, {
       once: !0
     });
     const n = () => {
-      I.current || (j.current && clearTimeout(j.current), j.current = setTimeout(() => {
-        I.current || (p.current || (p.current = { time: 0, paused: !0 }), p.current.time = e.currentTime);
+      U.current || (X.current && clearTimeout(X.current), X.current = setTimeout(() => {
+        U.current || (v.current || (v.current = { time: 0, paused: !0 }), v.current.time = e.currentTime);
       }, 100));
     }, r = () => {
-      I.current || (p.current ? p.current.paused = !1 : p.current = { time: 0, paused: !1 });
-    }, i = () => {
-      I.current || (p.current ? p.current.paused = !0 : p.current = { time: e.currentTime, paused: !0 });
+      U.current || (v.current ? v.current.paused = !1 : v.current = { time: 0, paused: !1 });
+    }, a = () => {
+      U.current || (v.current ? v.current.paused = !0 : v.current = { time: e.currentTime, paused: !0 });
     };
-    return e.addEventListener("timeupdate", n), e.addEventListener("play", r), e.addEventListener("pause", i), () => {
-      e.removeEventListener("loadedmetadata", t), e.removeEventListener("timeupdate", n), e.removeEventListener("play", r), e.removeEventListener("pause", i), j.current && clearTimeout(j.current), e.currentTime > 0 && (p.current = {
+    return e.addEventListener("timeupdate", n), e.addEventListener("play", r), e.addEventListener("pause", a), () => {
+      e.removeEventListener("loadedmetadata", t), e.removeEventListener("timeupdate", n), e.removeEventListener("play", r), e.removeEventListener("pause", a), X.current && clearTimeout(X.current), e.currentTime > 0 && (v.current = {
         time: e.currentTime,
         paused: e.paused
       });
     };
-  }, [V]), d(() => {
+  }, [A]), d(() => {
     if (h) return;
     const e = P.current;
     if (!e) return;
     e.querySelectorAll(
       'track[data-subtitle-track="managed"]'
-    ).forEach((i) => i.remove()), v && k.forEach((i) => {
-      const a = pe(i, y);
-      if (!a)
+    ).forEach((a) => a.remove()), p && k.forEach((a) => {
+      const l = ve(a, y);
+      if (!l)
         return;
-      const l = document.createElement("track");
-      l.setAttribute("data-subtitle-track", "managed"), l.kind = i.kind || "subtitles", l.label = i.label || i.lang || "und", l.srclang = i.lang || "und", l.src = a, l.setAttribute("crossorigin", "use-credentials"), l.default = !1, e.appendChild(l);
+      const s = document.createElement("track");
+      s.setAttribute("data-subtitle-track", "managed"), s.kind = a.kind || "subtitles", s.label = a.label || a.lang || "und", s.srclang = a.lang || "und", s.src = l, s.setAttribute("crossorigin", "use-credentials"), s.default = !1, e.appendChild(s);
     });
-    const n = Ge(e);
-    n.some((i) => i.mode === "showing") && n.forEach((i) => {
-      i.mode = "disabled";
+    const n = rt(e);
+    n.some((a) => a.mode === "showing") && n.forEach((a) => {
+      a.mode = "disabled";
     }), S(x(null, e));
-  }, [h, V, k, v, y]), d(() => {
+  }, [h, A, k, p, y]), d(() => {
     if (!h) {
       re.current = [];
       return;
@@ -463,67 +466,67 @@ function ct({
     const e = g.current?.player || null;
     if (!e) return;
     const t = e.getNetworkingEngine?.();
-    t && !Le.current && (t.registerRequestFilter?.((a, l) => {
-      l.allowCrossSiteCredentials = !0;
-    }), Le.current = !0), (e.getTextTracks?.() || []).forEach((a) => {
-      re.current.includes(a.id) && e.removeTextTrack?.(a);
+    t && !Re.current && (t.registerRequestFilter?.((l, s) => {
+      s.allowCrossSiteCredentials = !0;
+    }), Re.current = !0), (e.getTextTracks?.() || []).forEach((l) => {
+      re.current.includes(l.id) && e.removeTextTrack?.(l);
     }), re.current = [];
     let r = !1;
     return (async () => {
-      const a = e.getTextTracks?.() || [];
-      if (v)
-        for (const l of k) {
-          const c = pe(l, y);
-          if (!c || typeof e.addTextTrackAsync != "function")
+      const l = e.getTextTracks?.() || [];
+      if (p)
+        for (const s of k) {
+          const u = ve(s, y);
+          if (!u || typeof e.addTextTrackAsync != "function")
             continue;
-          const f = l.label || l.lang || "und", o = l.lang || "und", E = l.kind || "subtitles";
-          if (a.some(
-            (w) => (w.language || "") === o && (w.label || "") === f && (w.kind || "subtitles") === E
+          const m = s.label || s.lang || "und", o = s.lang || "und", E = s.kind || "subtitles";
+          if (l.some(
+            (V) => (V.language || "") === o && (V.label || "") === m && (V.kind || "subtitles") === E
           ))
             continue;
-          let u = null;
-          if (u = await e.addTextTrackAsync(
-            c,
+          let c = null;
+          if (c = await e.addTextTrackAsync(
+            u,
             o,
             E,
             "text/vtt",
             void 0,
-            f
+            m
           ), r) return;
-          u && typeof u.id == "number" && (re.current.push(u.id), a.push(u));
+          c && typeof c.id == "number" && (re.current.push(c.id), l.push(c));
         }
-      e.setTextTrackVisibility?.(!1), S(x(e, s));
+      e.setTextTrackVisibility?.(!1), S(x(e, i));
     })().catch(() => {
     }), () => {
       r = !0;
     };
   }, [
     h,
-    m,
+    f,
     k,
-    v,
+    p,
     y,
-    s
+    i
   ]);
-  const He = Oe(() => ({
-    ...W,
-    subtitles: ce,
-    currentSubtitleId: z,
-    currentQualityId: be ? null : W.currentQualityId,
-    hasRealSubtitles: ce.length > 1
+  const Qe = je(() => ({
+    ..._,
+    subtitles: ue,
+    currentSubtitleId: Q,
+    currentQualityId: be ? null : _.currentQualityId,
+    hasRealSubtitles: ue.length > 1
   }), [
-    W,
-    ce,
-    z,
+    _,
+    ue,
+    Q,
     be
-  ]), Qe = (e) => {
-    if (!s) return;
-    e.target.closest(".video-player-controls") !== null || (s.paused ? s.play().catch(() => {
-    }) : s.pause());
+  ]), ze = (e) => {
+    if (!i) return;
+    e.target.closest(".video-player-controls") !== null || (i.paused ? i.play().catch(() => {
+    }) : i.pause());
   };
-  if (ge)
-    return /* @__PURE__ */ C(
-      Ve,
+  if (ke)
+    return /* @__PURE__ */ w(
+      Fe,
       {
         justify: "center",
         align: "center",
@@ -535,12 +538,12 @@ function ct({
             padding: 16
           }
         },
-        children: /* @__PURE__ */ C("div", { style: { textAlign: "center", color: "red" }, children: ge })
+        children: /* @__PURE__ */ w("div", { style: { textAlign: "center", color: "red" }, children: ke })
       }
     );
-  const Pe = H || M(q ?? null, y) || V, Re = !!(m && !L), xe = Re && oe, Ae = te > 0 && te < 500, Ce = te > 0 && te < 380, ze = (ve?.length ?? 0) > 0 && !Ce ? "48px" : "16px";
-  return /* @__PURE__ */ C(
-    Ve,
+  const xe = H || M(q ?? null, y) || A, Ae = !!(f && !L), Ce = Ae && oe, we = te > 0 && te < 500, Ve = te > 0 && te < 380, De = (ye?.length ?? 0) > 0 && !Ve ? "48px" : "16px", Ne = tt(i, A || f), qe = p || pe(A) || pe(f) || pe(D), We = nt(qe, Ne);
+  return /* @__PURE__ */ w(
+    Fe,
     {
       justify: "center",
       align: "center",
@@ -556,159 +559,170 @@ function ct({
         "div",
         {
           "data-test-id": "video-player-container",
-          className: `video-player-container video-player-container--with-player ${Ae ? "video-player--compact" : ""} ${Ce ? "video-player--narrow" : ""}`,
+          className: `video-player-container video-player-container--with-player ${we ? "video-player--compact" : ""} ${Ve ? "video-player--narrow" : ""}`,
           style: {
-            "--video-subtitles-offset": ze
+            "--video-subtitles-offset": De
           },
-          ref: O,
-          onClick: Qe,
+          ref: W,
+          onClick: ze,
           children: [
-            /* @__PURE__ */ C(
+            /* @__PURE__ */ w(
               "video",
               {
                 ref: P,
-                src: V || (L ? Pe : null) || void 0,
+                src: A || (L ? xe : null) || void 0,
                 className: "video-player-media",
-                style: xe ? { display: "none" } : void 0,
+                style: Ce ? { display: "none" } : void 0,
                 poster: K || void 0,
                 onError: (e) => {
                   const t = e.currentTarget, n = t.currentSrc || t.src;
                   if (!n || !t.error) return;
-                  X.current.add(n);
-                  const i = [
+                  Y.current.add(n);
+                  const a = [
                     H,
                     M(q ?? null, y),
-                    M(B, y)
+                    M(I, y)
                   ].filter(
-                    (a) => !!a && !X.current.has(a)
+                    (l) => !!l && !Y.current.has(l)
                   );
-                  i.length > 0 && (t.src = i[0], t.load());
+                  a.length > 0 && (t.src = a[0], t.load());
                 }
               }
             ),
-            Re && /* @__PURE__ */ C(
-              _e,
+            Ne && /* @__PURE__ */ w(
+              et,
+              {
+                playing: !Le,
+                peaks: We,
+                progress: i && i.duration > 0 ? i.currentTime / i.duration : 0,
+                onSeekRatio: (e) => {
+                  !i || !(i.duration > 0) || (i.currentTime = i.duration * e);
+                }
+              }
+            ),
+            Ae && /* @__PURE__ */ w(
+              Ye,
               {
                 ref: g,
                 autoPlay: !1,
-                className: `video-player-media${xe ? "" : " video-player-media--loading"}`
+                className: `video-player-media${Ce ? "" : " video-player-media--loading"}`
               }
             ),
-            (V || m || J || L && Pe) && /* @__PURE__ */ me(De, { children: [
-              Se && /* @__PURE__ */ C(
+            (A || f || D || L && xe) && /* @__PURE__ */ me(_e, { children: [
+              Pe && /* @__PURE__ */ w(
                 "div",
                 {
                   className: "video-player-buffering",
                   "data-test-id": "video-player-buffering",
-                  children: /* @__PURE__ */ C("div", { className: "video-player-buffering-ring" })
+                  children: /* @__PURE__ */ w("div", { className: "video-player-buffering-ring" })
                 }
               ),
-              Me && !Ae && !Se && /* @__PURE__ */ C(
+              Le && !we && !Pe && /* @__PURE__ */ w(
                 "button",
                 {
                   className: "video-player-center-play",
                   type: "button",
-                  "aria-label": Q("editor.video.player.play"),
+                  "aria-label": O("editor.video.player.play"),
                   onClick: (e) => {
-                    e.stopPropagation(), s?.play().catch(() => {
+                    e.stopPropagation(), i?.play().catch(() => {
                     });
                   },
-                  children: /* @__PURE__ */ C(je, { size: 32 })
+                  children: /* @__PURE__ */ w(Je, { size: 32 })
                 }
               ),
               /* @__PURE__ */ me("div", { className: "video-player-overlay", children: [
-                /* @__PURE__ */ C("div", { className: "video-player-gradient" }),
-                /* @__PURE__ */ C(
-                  $e,
+                /* @__PURE__ */ w("div", { className: "video-player-gradient" }),
+                /* @__PURE__ */ w(
+                  Ge,
                   {
-                    video: s,
-                    containerRef: O,
-                    settings: He,
+                    video: i,
+                    containerRef: W,
+                    settings: Qe,
                     isSettingsDisabled: !1,
-                    onSubtitlesOpen: Be,
-                    storyboard: we,
-                    chapters: h ? ve : void 0,
-                    isProcessing: Ne,
+                    onSubtitlesOpen: Oe,
+                    storyboard: Me,
+                    chapters: h ? ye : void 0,
+                    isProcessing: Ue,
                     baseUrl: y,
                     onSpeedClick: (e) => {
                       const t = g.current?.player || null;
                       S((n) => ({
                         ...n,
                         currentSpeed: e
-                      })), t && Ye(t, e), s && (s.playbackRate = e);
+                      })), t && Ze(t, e), i && (i.playbackRate = e);
                     },
                     onQualityClick: (e) => {
                       const t = g.current?.player || null;
-                      if (!t || W.qualities.length === 0)
+                      if (!t || _.qualities.length === 0)
                         return;
                       if (e == null) {
                         t.configure?.({ abr: { enabled: !0 } }), le(!0), S(
-                          x(t, s)
+                          x(t, i)
                         );
                         return;
                       }
                       t.configure?.({ abr: { enabled: !1 } });
-                      const n = W.qualities.find(
+                      const n = _.qualities.find(
                         (r) => r.id === e
                       ) || null;
-                      n && Xe(t, n.id), le(!1), S((r) => ({
+                      n && Ke(t, n.id), le(!1), S((r) => ({
                         ...r,
                         currentQualityId: e
                       }));
                     },
                     onSubtitleSelect: (e) => {
                       const t = g.current?.player || null, n = typeof e == "number" ? e : null;
-                      if (ue(n), t) {
+                      if (ce(n), t) {
                         const r = t.getTextTracks?.() ?? [];
                         if (n == null)
-                          _(null);
+                          $(null);
                         else {
-                          const a = r.find(
-                            (l) => l.id === n
+                          const l = r.find(
+                            (s) => s.id === n
                           );
-                          if (a)
-                            _({
-                              lang: a.language || "und",
-                              label: a.label || "und",
-                              kind: a.kind || "subtitles"
+                          if (l)
+                            $({
+                              lang: l.language || "und",
+                              label: l.label || "und",
+                              kind: l.kind || "subtitles"
                             });
                           else {
-                            const l = k[n];
-                            l && _({
-                              lang: l.lang || "und",
-                              label: l.label || l.lang || "und",
-                              kind: l.kind || "subtitles"
+                            const s = k[n];
+                            s && $({
+                              lang: s.lang || "und",
+                              label: s.label || s.lang || "und",
+                              kind: s.kind || "subtitles"
                             });
                           }
                         }
-                        let i = n;
-                        if (typeof n == "number" && !r.find((a) => a.id === n)) {
-                          const a = k[n];
-                          if (a) {
-                            const l = a.label || a.lang || "und", c = a.lang || "und", f = r.find(
-                              (o) => (o.language || "") === c && (o.label || "") === l
+                        let a = n;
+                        if (typeof n == "number" && !r.find((l) => l.id === n)) {
+                          const l = k[n];
+                          if (l) {
+                            const s = l.label || l.lang || "und", u = l.lang || "und", m = r.find(
+                              (o) => (o.language || "") === u && (o.label || "") === s
                             );
-                            f && (i = f.id);
+                            m && (a = m.id);
                           }
                         }
-                        ie(t, i), S(
-                          x(t, s)
+                        ie(t, a), S(
+                          x(t, i)
                         );
                         return;
                       }
-                      if (s) {
+                      if (i) {
                         if (n == null)
-                          _(null);
+                          $(null);
                         else {
                           const r = k[n];
-                          r && _({
+                          r && $({
                             lang: r.lang || "und",
                             label: r.label || r.lang || "und",
                             kind: r.kind || "subtitles"
                           });
                         }
-                        ie(null, n, s), S(
-                          x(null, s)
+                        ie(null, n, i), S(
+                          x(null, i)
                         );
                       }
                     }
@@ -723,5 +737,5 @@ function ct({
   );
 }
 export {
-  ct as VideoPlayer
+  gt as VideoPlayer
 };