markdown-flow-ui 0.1.100-beta.2 → 0.1.100-beta.21

package/dist/components/Slide/Player.es.js

@@ -1,14 +1,19 @@
 import { j as r } from "../../_virtual/jsx-runtime.es.js";
-import { useRef as o, useState as te, useMemo as ne, useEffect as v, useCallback as a } from "react";
-import { cn as Z } from "../../lib/utils.es.js";
+import { useRef as i, useState as fe, useMemo as de, useEffect as R, useCallback as o } from "react";
+import { cn as G } from "../../lib/utils.es.js";
 /* empty css              */
-import se from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/lucide-react@0.525.0_react@19.0.1/node_modules/lucide-react/dist/esm/icons/ellipsis-vertical.es.js";
-import le from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/lucide-react@0.525.0_react@19.0.1/node_modules/lucide-react/dist/esm/icons/volume-2.es.js";
-import ce from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/lucide-react@0.525.0_react@19.0.1/node_modules/lucide-react/dist/esm/icons/rotate-ccw.es.js";
-import ue from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/lucide-react@0.525.0_react@19.0.1/node_modules/lucide-react/dist/esm/icons/rotate-cw.es.js";
-import ae from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/lucide-react@0.525.0_react@19.0.1/node_modules/lucide-react/dist/esm/icons/maximize.es.js";
-import ie from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/lucide-react@0.525.0_react@19.0.1/node_modules/lucide-react/dist/esm/icons/file-pen-line.es.js";
-const oe = () => /* @__PURE__ */ r.jsxs(
+import me from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/lucide-react@0.525.0_react@19.0.1/node_modules/lucide-react/dist/esm/icons/ellipsis-vertical.es.js";
+import pe from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/lucide-react@0.525.0_react@19.0.1/node_modules/lucide-react/dist/esm/icons/volume-2.es.js";
+import he from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/lucide-react@0.525.0_react@19.0.1/node_modules/lucide-react/dist/esm/icons/rotate-ccw.es.js";
+import ge from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/lucide-react@0.525.0_react@19.0.1/node_modules/lucide-react/dist/esm/icons/rotate-cw.es.js";
+import ye from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/lucide-react@0.525.0_react@19.0.1/node_modules/lucide-react/dist/esm/icons/maximize.es.js";
+import _e from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/lucide-react@0.525.0_react@19.0.1/node_modules/lucide-react/dist/esm/icons/file-pen-line.es.js";
+const J = /* @__PURE__ */ new Set(), Q = (g) => {
+  if (typeof document > "u" || !g || J.has(g))
+    return;
+  const v = document.createElement("link");
+  v.rel = "preload", v.as = "audio", v.href = g, /^https?:/i.test(g) && (v.crossOrigin = "anonymous"), document.head.appendChild(v), J.add(g);
+}, Se = () => /* @__PURE__ */ r.jsxs(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -27,7 +32,7 @@ const oe = () => /* @__PURE__ */ r.jsxs(
       /* @__PURE__ */ r.jsx("path", { d: "M12 10H16V24H12V10ZM18 10H22V24H18V10Z", fill: "white" })
     ]
   }
-), fe = () => /* @__PURE__ */ r.jsxs(
+), be = () => /* @__PURE__ */ r.jsxs(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -46,240 +51,275 @@ const oe = () => /* @__PURE__ */ r.jsxs(
       /* @__PURE__ */ r.jsx("path", { d: "M13.3333 10L23.3333 16.6667L13.3333 23.3333V10Z", fill: "white" })
     ]
   }
-), Se = ({
-  audioList: $ = [],
-  className: H,
-  currentAudioIndex: t = -1,
-  defaultPlaying: s = !0,
-  onPrev: U,
-  onNext: B,
-  onFullscreen: K,
-  onEnded: W,
-  onPlayRequest: R,
-  onInteractionToggle: z,
-  hasInteraction: G = !1,
-  isInteractionOpen: J = !1,
-  prevDisabled: O = !1,
-  nextDisabled: P = !1,
-  showControls: Q = !0,
-  ...X
+), Me = ({
+  audioList: g = [],
+  className: v,
+  currentAudioIndex: c = -1,
+  defaultPlaying: d = !0,
+  onLoadingChange: F,
+  onPrev: X,
+  onNext: Y,
+  onFullscreen: q,
+  onEnded: K,
+  onPlayRequest: T,
+  onInteractionToggle: D,
+  hasInteraction: I = !1,
+  isInteractionOpen: ee = !1,
+  prevDisabled: re = !1,
+  nextDisabled: te = !1,
+  showControls: ne = !0,
+  ...se
 }) => {
-  const p = o(null), y = o(null), F = o(null), _ = o(0), f = o(null), A = o(void 0), C = o([]), m = o(!1), n = o(!1), i = o(null), h = o(!1), [M, l] = te(s), d = t >= 0 ? $[t] : void 0, j = d?.audioUrl, g = ne(
-    () => [...d?.audioSegments ?? []].sort(
-      (e, u) => e.segment_index - u.segment_index
+  const y = i(null), x = i(null), L = i(null), j = i(0), f = i(null), Z = i(void 0), E = i([]), B = i(!1), a = i(!1), N = i(null), h = i(!1), s = i(!1), p = i(null), _ = i(!1), [V, u] = fe(d), m = c >= 0 ? g[c] : void 0, k = m?.audioUrl, S = de(
+    () => [...m?.audioSegments ?? []].sort(
+      (e, l) => e.segment_index - l.segment_index
     ),
-    [d?.audioSegments]
-  ), V = `${t}:${d?.serialNumber ?? "none"}:${j ?? ""}`;
-  v(() => {
-    A.current = d;
-  }, [d]), v(() => {
-    C.current = g;
-  }, [g]);
-  const L = a((e) => e ? e.startsWith("data:") ? e : `data:audio/mpeg;base64,${e}` : "", []), S = a(() => {
-    const e = p.current;
-    e && (n.current = !1, i.current = null, m.current = !1, h.current = !1, e.pause(), e.removeAttribute("src"), e.load(), y.current = null, _.current = 0, f.current = null, l(!1));
-  }, [t]), b = a(
+    [m?.audioSegments]
+  ), P = `${c}:${m?.audioKey ?? "none"}`;
+  R(() => {
+    Z.current = m;
+  }, [m]), R(() => {
+    E.current = S;
+  }, [S]), R(() => {
+    const e = m?.audioUrl, l = c >= 0 ? g[c + 1]?.audioUrl : void 0;
+    Q(e), Q(l);
+  }, [g, m?.audioUrl, c]);
+  const t = o(
     (e) => {
-      const u = p.current;
-      if (!u)
+      B.current !== e && (B.current = e, F?.(e));
+    },
+    [F]
+  ), H = o((e) => e ? e.startsWith("data:") ? e : `data:audio/mpeg;base64,${e}` : "", []), $ = o(() => {
+    const e = f.current;
+    return e == null || e <= 0 ? 0 : E.current.slice(0, e).reduce(
+      (l, n) => l + Math.max(Number(n.duration_ms ?? 0), 0),
+      0
+    ) / 1e3;
+  }, []), M = o(() => {
+    const e = y.current;
+    e && (s.current = !1, a.current = !1, N.current = null, p.current = null, h.current = !1, _.current = !1, e.pause(), e.removeAttribute("src"), e.load(), x.current = null, j.current = 0, f.current = null, u(!1), t(!1));
+  }, [t]), b = o(
+    (e) => {
+      const l = y.current;
+      if (!l)
         return !1;
-      const c = u.play();
-      return c && typeof c.then == "function" && c.then(() => {
-        n.current = !1, h.current = !1;
-      }).catch((w) => {
-        l(!1);
+      const n = l.play();
+      return n && typeof n.then == "function" && n.then(() => {
+        s.current = !1, _.current = !1;
+      }).catch((C) => {
+        u(!1);
       }), !0;
     },
-    [t]
-  ), x = a(
-    (e, u) => {
-      const c = p.current, w = C.current[e];
-      if (!c || !w)
+    [c]
+  ), A = o(
+    (e, l) => {
+      const n = y.current, C = E.current[e];
+      if (!n || !C)
         return !1;
-      const N = L(w.audio_data);
-      _.current = e, f.current = null, m.current = !1, h.current = !0, n.current = s;
-      const k = y.current !== N;
-      return k && (c.pause(), c.removeAttribute("src"), c.load(), y.current = N, c.src = N, c.load()), i.current = 0, c.readyState > 0 && (c.currentTime = 0, i.current = null), s ? k ? !0 : b(`start-segment:${u}`) : (n.current = !1, h.current = !1, c.pause(), l(!1), !0);
+      const w = H(C.audio_data);
+      j.current = e, f.current = null, h.current = !1, _.current = !0;
+      const W = d && !a.current;
+      s.current = W, t(!1);
+      const O = x.current !== w;
+      return N.current = "segment", O && (n.pause(), n.removeAttribute("src"), n.load(), x.current = w, n.src = w, n.load()), p.current = 0, n.readyState > 0 && (n.currentTime = 0, p.current = null), W ? O ? !0 : b(`start-segment:${l}`) : (s.current = !1, _.current = !1, n.pause(), u(!1), !0);
+    },
+    [d, H, b, t]
+  ), U = o(
+    (e) => {
+      s.current = !1, h.current = !1, _.current = !1, u(!1), t(!1), c >= 0 && K?.(c);
     },
-    [t, s, L, b]
-  ), E = a(() => {
-    n.current = !1, m.current = !1, h.current = !1, l(!1), t >= 0 && W?.(t);
-  }, [t, W]), T = a(() => {
-    const e = _.current + 1, u = C.current, c = u[e], w = A.current, N = u.some((k) => k.is_final);
-    if (c) {
-      x(e, "ended");
+    [c, K, t]
+  ), z = o(() => {
+    const e = j.current + 1, l = E.current, n = l[e], C = Z.current, w = l.some((W) => W.is_final);
+    if (n) {
+      A(e, "ended");
       return;
     }
-    if (w?.isAudioStreaming || !N) {
-      _.current = e, f.current = e, m.current = !0, n.current = s, l(s);
+    if (C?.isAudioStreaming || !w) {
+      j.current = e, f.current = e, h.current = !0, s.current = d, u(!1), t(!0);
       return;
     }
-    E("segments-completed");
-  }, [
-    t,
-    s,
-    E,
-    x
-  ]);
-  v(() => {
-    if (F.current === V)
+    U("segments-completed");
+  }, [d, U, A, t]);
+  R(() => {
+    if (L.current === P)
       return;
-    F.current = V, _.current = 0, f.current = null, m.current = !1, n.current = !1, h.current = !1, y.current = null;
-    const e = p.current;
-    e && (e.pause(), e.removeAttribute("src"), e.load(), l(!1));
+    L.current = P, j.current = 0, f.current = null, h.current = !1, a.current = !1, s.current = !1, _.current = !1, N.current = null, x.current = null, t(!1);
+    const e = y.current;
+    e && (e.pause(), e.removeAttribute("src"), e.load(), u(!1));
   }, [
-    t,
-    V,
-    g.length,
-    j
-  ]), v(() => {
-    const e = p.current;
+    c,
+    P,
+    S.length,
+    k,
+    t
+  ]), R(() => {
+    const e = y.current;
     if (e) {
-      if (!d) {
-        S();
+      if (!m) {
+        M();
         return;
       }
-      if (j) {
-        const u = y.current !== j;
-        if (u && (e.pause(), e.removeAttribute("src"), e.load(), y.current = j, e.src = j, e.load()), i.current = 0, e.readyState > 0 && (e.currentTime = 0, i.current = null), n.current = s, m.current = !1, h.current = !1, !s) {
-          n.current = !1, e.pause(), l(!1);
+      if (k) {
+        const l = x.current !== k, n = d && !a.current;
+        if (N.current === "segment" && !!x.current && f.current === null) {
+          if (!n) {
+            s.current = !1, e.pause(), u(!1);
+            return;
+          }
+          e.paused && (s.current = !0, b("keep-segment-source"));
           return;
         }
-        u || b("sync-url");
+        if (l) {
+          const w = f.current !== null ? $() : 0;
+          e.pause(), e.removeAttribute("src"), e.load(), x.current = k, N.current = "url", e.src = k, e.load(), p.current = w, e.readyState > 0 && (e.currentTime = w, p.current = null);
+        }
+        if (s.current = n, h.current = !1, _.current = !1, t(!1), !n) {
+          s.current = !1, e.pause(), u(!1);
+          return;
+        }
+        l || b("sync-url");
         return;
       }
       if (f.current !== null) {
-        if (f.current < g.length) {
-          x(f.current, "wait-resume");
+        if (f.current < S.length) {
+          if (a.current) {
+            u(!1), t(!1);
+            return;
+          }
+          A(f.current, "wait-resume");
           return;
         }
-        m.current = !0, n.current = s, l(s);
+        h.current = !0, s.current = d && !a.current, u(!1), t(!a.current);
         return;
       }
-      if (!g.length) {
-        if (d.isAudioStreaming) {
-          f.current = _.current, m.current = !0, n.current = s, l(s);
+      if (!S.length) {
+        if (m.isAudioStreaming) {
+          f.current = j.current, h.current = !0, s.current = d && !a.current, u(!1), t(!a.current);
           return;
         }
-        S();
+        M();
         return;
       }
-      if (!y.current) {
-        x(
+      if (!x.current) {
+        A(
           Math.min(
-            _.current,
-            g.length - 1
+            j.current,
+            S.length - 1
           ),
           "effect-init"
         );
         return;
       }
-      if (!s) {
-        n.current = !1, e.pause(), l(!1);
+      if (!d || a.current) {
+        s.current = !1, e.pause(), u(!1);
         return;
       }
-      e.paused && (n.current = !0, b("sync-paused-retry"));
+      e.paused && (s.current = !0, b("sync-paused-retry"));
     }
   }, [
-    d,
-    t,
-    g,
-    j,
-    s,
+    m,
+    c,
     S,
-    x,
-    b
-  ]), v(() => S, [S]);
-  const Y = a(() => {
-    l(!0);
-  }, [t]), q = a(() => {
-    m.current || h.current || l(!1);
-  }, [t]), D = a(() => {
-    const e = p.current;
-    e && i.current !== null && (e.currentTime = i.current, i.current = null), !(!n.current || !s) && b("canplay");
-  }, [t, s, b]), I = a(() => {
-    const e = p.current;
-    e && i.current !== null && (e.currentTime = i.current, i.current = null);
-  }, [t]), ee = a(() => {
-    if (h.current = !1, A.current?.audioUrl || C.current.length === 0) {
-      E("url-ended");
+    k,
+    d,
+    M,
+    A,
+    b,
+    $,
+    t
+  ]), R(() => M, [M]);
+  const ue = o(() => {
+    u(!0), t(!1);
+  }, [t]), le = o(() => {
+    h.current || _.current || u(!1);
+  }, [c]), ce = o(() => {
+    const e = y.current;
+    e && p.current !== null && (e.currentTime = p.current, p.current = null), !(!s.current || !d) && b("canplay");
+  }, [c, d, b]), ae = o(() => {
+    const e = y.current;
+    e && p.current !== null && (e.currentTime = p.current, p.current = null);
+  }, [c]), ie = o(() => {
+    const e = N.current === "url" || E.current.length === 0;
+    if (_.current = !1, e) {
+      U("url-ended");
       return;
     }
-    T();
-  }, [t, E, T]), re = a(() => {
-    l(!1);
+    z();
+  }, [U, z]), oe = o(() => {
+    u(!1), t(!1);
   }, [t]);
-  return /* @__PURE__ */ r.jsxs("div", { className: Z("slide-player", H), ...X, children: [
+  return /* @__PURE__ */ r.jsxs("div", { className: G("slide-player", v), ...se, children: [
     /* @__PURE__ */ r.jsx(
       "audio",
       {
-        ref: p,
-        preload: "metadata",
+        ref: y,
+        preload: "auto",
         playsInline: !0,
-        onLoadedMetadata: I,
-        onCanPlay: D,
-        onPlay: Y,
-        onPause: q,
-        onEnded: ee,
-        onError: re
+        onLoadedMetadata: ae,
+        onCanPlay: ce,
+        onPlay: ue,
+        onPause: le,
+        onEnded: ie,
+        onError: oe
       }
     ),
-    Q ? /* @__PURE__ */ r.jsxs("div", { className: "slide-player__controls", children: [
+    ne ? /* @__PURE__ */ r.jsxs("div", { className: "slide-player__controls", children: [
       /* @__PURE__ */ r.jsxs("div", { className: "slide-player__group", children: [
         /* @__PURE__ */ r.jsx("button", { "aria-label": "More options", className: "hidden", type: "button", children: /* @__PURE__ */ r.jsx(
-          se,
+          me,
           {
             className: "slide-player__icon",
             strokeWidth: 2.25
           }
         ) }),
-        /* @__PURE__ */ r.jsx("button", { "aria-label": "Volume", className: "hidden", type: "button", children: /* @__PURE__ */ r.jsx(le, { className: "slide-player__icon", strokeWidth: 2.25 }) }),
+        /* @__PURE__ */ r.jsx("button", { "aria-label": "Volume", className: "hidden", type: "button", children: /* @__PURE__ */ r.jsx(pe, { className: "slide-player__icon", strokeWidth: 2.25 }) }),
         /* @__PURE__ */ r.jsx(
           "button",
           {
             "aria-label": "Rewind",
             className: "slide-player__action",
-            disabled: O,
-            onClick: U,
+            disabled: re,
+            onClick: X,
             type: "button",
-            children: /* @__PURE__ */ r.jsx(ce, { className: "slide-player__icon", strokeWidth: 2.25 })
+            children: /* @__PURE__ */ r.jsx(he, { className: "slide-player__icon", strokeWidth: 2.25 })
           }
         ),
         /* @__PURE__ */ r.jsx(
           "button",
           {
-            "aria-label": M ? "Pause" : "Play",
+            "aria-label": V ? "Pause" : "Play",
             className: "slide-player__toggle",
             onClick: () => {
-              const e = p.current;
-              if (!(!e || !d)) {
+              const e = y.current;
+              if (!(!e || !m)) {
                 if (f.current !== null) {
-                  if (M) {
-                    n.current = !1, f.current = null, m.current = !1, l(!1), e.pause();
+                  if (V) {
+                    s.current = !1, a.current = !0, f.current = null, h.current = !1, u(!1), t(!1), e.pause();
                     return;
                   }
-                  R?.(), n.current = !0, l(!0);
+                  T?.(), a.current = !1, s.current = !0, t(!0);
                   return;
                 }
-                if (!e.src && g.length > 0) {
-                  R?.(), x(
+                if (!e.src && S.length > 0) {
+                  T?.(), a.current = !1, A(
                     Math.min(
-                      _.current,
-                      g.length - 1
+                      j.current,
+                      S.length - 1
                     ),
                     "toggle"
                   );
                   return;
                 }
                 if (e.paused) {
-                  R?.(), n.current = !0, b("toggle-resume");
+                  T?.(), a.current = !1, s.current = !0, b("toggle-resume");
                   return;
                 }
-                n.current = !1, e.pause();
+                s.current = !1, a.current = !0, e.pause();
               }
             },
             type: "button",
-            children: M ? /* @__PURE__ */ r.jsx(oe, {}) : /* @__PURE__ */ r.jsx(fe, {})
+            children: V ? /* @__PURE__ */ r.jsx(Se, {}) : /* @__PURE__ */ r.jsx(be, {})
           }
         ),
         /* @__PURE__ */ r.jsx(
@@ -287,10 +327,10 @@ const oe = () => /* @__PURE__ */ r.jsxs(
           {
             "aria-label": "Forward",
             className: "slide-player__action",
-            disabled: P,
-            onClick: B,
+            disabled: te,
+            onClick: Y,
             type: "button",
-            children: /* @__PURE__ */ r.jsx(ue, { className: "slide-player__icon", strokeWidth: 2.25 })
+            children: /* @__PURE__ */ r.jsx(ge, { className: "slide-player__icon", strokeWidth: 2.25 })
           }
         ),
         /* @__PURE__ */ r.jsx(
@@ -298,9 +338,9 @@ const oe = () => /* @__PURE__ */ r.jsxs(
           {
             "aria-label": "Fullscreen",
             className: "hidden",
-            onClick: K,
+            onClick: q,
             type: "button",
-            children: /* @__PURE__ */ r.jsx(ae, { className: "slide-player__icon", strokeWidth: 2.25 })
+            children: /* @__PURE__ */ r.jsx(ye, { className: "slide-player__icon", strokeWidth: 2.25 })
           }
         )
       ] }),
@@ -309,20 +349,20 @@ const oe = () => /* @__PURE__ */ r.jsxs(
         "button",
         {
           "aria-label": "Notes",
-          className: Z(
+          className: G(
             "slide-player__action",
-            J && "slide-player__action--active"
+            ee && "slide-player__action--active"
           ),
-          disabled: !G,
-          onClick: z,
+          disabled: !I,
+          onClick: D,
           type: "button",
-          children: /* @__PURE__ */ r.jsx(ie, { className: "slide-player__icon", strokeWidth: 2.25 })
+          children: /* @__PURE__ */ r.jsx(_e, { className: "slide-player__icon", strokeWidth: 2.25 })
         }
       ) })
     ] }) : null
   ] });
 };
 export {
-  Se as default
+  Me as default
 };
 //# sourceMappingURL=Player.es.js.map