markdown-flow-ui 0.1.100-beta.4 → 0.1.100-beta.40

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

@@ -1,14 +1,20 @@
 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 be, { useRef as o, useState as Se, useMemo as T, useEffect as M, useCallback as a } from "react";
+import { cn as Y } from "../../lib/utils.es.js";
+import { toPlayerCustomActionList as _e } from "./utils/playerCustomActions.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 xe 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 we 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 je 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 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/rotate-cw.es.js";
+import ke 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 Ne 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 D = /* @__PURE__ */ new Map(), I = (_) => {
+  if (typeof window > "u" || !_ || D.has(_))
+    return;
+  const N = window.document.createElement("audio");
+  N.preload = "auto", N.setAttribute("playsinline", "true"), N.src = _, N.load(), D.set(_, N);
+}, Re = () => /* @__PURE__ */ r.jsxs(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -27,7 +33,7 @@ const oe = () => /* @__PURE__ */ r.jsxs(
       /* @__PURE__ */ r.jsx("path", { d: "M12 10H16V24H12V10ZM18 10H22V24H18V10Z", fill: "white" })
     ]
   }
-), fe = () => /* @__PURE__ */ r.jsxs(
+), ve = () => /* @__PURE__ */ r.jsxs(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -46,240 +52,289 @@ 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
+), Ke = ({
+  audioList: _ = [],
+  className: N,
+  currentAudioIndex: i = -1,
+  defaultPlaying: g = !0,
+  onLoadingChange: B,
+  onPrev: ee,
+  onNext: re,
+  onFullscreen: te,
+  onEnded: K,
+  onInteractionToggle: ne,
+  hasInteraction: se = !1,
+  isInteractionOpen: ue = !1,
+  prevDisabled: le = !1,
+  nextDisabled: ce = !1,
+  showControls: ae = !0,
+  customActions: Z,
+  ...oe
 }) => {
-  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(
+  const y = o(null), x = o(null), $ = o(null), w = o(0), f = o(null), H = o(void 0), P = o([]), q = o(!1), m = o(!1), v = o(null), p = o(!1), n = o(!1), d = o(null), h = o(!1), j = o("unknown"), [F, l] = Se(g), c = i >= 0 ? _[i] : void 0, C = c?.audioUrl, b = T(
+    () => [...c?.audioSegments ?? []].sort(
       (e, u) => e.segment_index - u.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(
+    [c?.audioSegments]
+  ), z = T(
+    () => _e(Z),
+    [Z]
+  ), O = z.length + 4, ie = T(
+    () => ({
+      "--slide-player-mobile-control-count": String(O)
+    }),
+    [O]
+  ), L = T(() => c ? c.audioKey ?? `${String(c.sequenceNumber ?? "none")}:${String(c.audioUrl ?? "")}` : "none", [c]);
+  M(() => {
+    H.current = c;
+  }, [c]), M(() => {
+    P.current = b;
+  }, [b]), M(() => {
+    const e = c?.audioUrl, u = i >= 0 ? _[i + 1]?.audioUrl : void 0;
+    I(e), I(u);
+  }, [_, c?.audioUrl, i]);
+  const t = a(
     (e) => {
-      const u = p.current;
+      q.current !== e && (q.current = e, B?.(e));
+    },
+    [B]
+  ), G = a((e) => e instanceof DOMException ? e.name === "NotAllowedError" || e.name === "SecurityError" : !1, []), A = a(() => g && !m.current && j.current !== "blocked", [g]), J = a((e) => e ? e.startsWith("data:") ? e : `data:audio/mpeg;base64,${e}` : "", []), Q = a(() => {
+    const e = f.current;
+    return e == null || e <= 0 ? 0 : P.current.slice(0, e).reduce(
+      (u, s) => u + Math.max(Number(s.duration_ms ?? 0), 0),
+      0
+    ) / 1e3;
+  }, []), U = a(() => {
+    const e = y.current;
+    e && (n.current = !1, m.current = !1, v.current = null, d.current = null, p.current = !1, h.current = !1, e.pause(), e.removeAttribute("src"), e.load(), x.current = null, w.current = 0, f.current = null, l(!1), t(!1));
+  }, [t]), S = a(
+    (e) => {
+      const u = y.current;
       if (!u)
         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 s = u.play();
+      return s && typeof s.then == "function" && s.then(() => {
+        j.current === "unknown" && (j.current = "auto"), n.current = !1, h.current = !1;
+      }).catch((R) => {
+        j.current === "unknown" && G(R) && (j.current = "blocked", n.current = !1, t(!1)), h.current = !1, l(!1);
       }), !0;
     },
-    [t]
-  ), x = a(
+    [G, t]
+  ), E = a(
     (e, u) => {
-      const c = p.current, w = C.current[e];
-      if (!c || !w)
+      const s = y.current, R = P.current[e];
+      if (!s || !R)
         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 k = J(R.audio_data);
+      w.current = e, f.current = null, p.current = !1, h.current = !0;
+      const W = A();
+      n.current = W, t(!1);
+      const ye = x.current !== k;
+      return v.current = "segment", ye && (s.pause(), s.removeAttribute("src"), s.load(), x.current = k, s.src = k, s.load()), d.current = 0, s.readyState > 0 && (s.currentTime = 0, d.current = null), W ? S(`start-segment:${u}`) : (n.current = !1, h.current = !1, s.pause(), l(!1), !0);
+    },
+    [
+      A,
+      J,
+      S,
+      t
+    ]
+  ), V = a(
+    (e) => {
+      n.current = !1, p.current = !1, h.current = !1, l(!1), t(!1), i >= 0 && K?.(i);
     },
-    [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");
+    [i, K, t]
+  ), X = a(() => {
+    const e = w.current + 1, u = P.current, s = u[e], R = H.current, k = u.some((W) => W.is_final);
+    if (s) {
+      E(e, "ended");
       return;
     }
-    if (w?.isAudioStreaming || !N) {
-      _.current = e, f.current = e, m.current = !0, n.current = s, l(s);
+    if (R?.isAudioStreaming || !k) {
+      w.current = e, f.current = e, p.current = !0, n.current = g, l(!1), t(!0);
       return;
     }
-    E("segments-completed");
-  }, [
-    t,
-    s,
-    E,
-    x
-  ]);
-  v(() => {
-    if (F.current === V)
+    V("segments-completed");
+  }, [g, V, E, t]);
+  M(() => {
+    if ($.current === L)
       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;
+    $.current = L, w.current = 0, f.current = null, p.current = !1, m.current = !1, n.current = !1, h.current = !1, v.current = null, x.current = null, t(!1);
+    const e = y.current;
     e && (e.pause(), e.removeAttribute("src"), e.load(), l(!1));
   }, [
-    t,
-    V,
-    g.length,
-    j
-  ]), v(() => {
-    const e = p.current;
+    i,
+    L,
+    b.length,
+    C,
+    t
+  ]), M(() => {
+    const e = y.current;
     if (e) {
-      if (!d) {
-        S();
+      if (!c) {
+        U();
         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) {
+      if (C) {
+        const u = x.current !== C, s = A();
+        if (v.current === "segment" && !!x.current && f.current === null) {
+          if (!s) {
+            n.current = !1, e.pause(), l(!1);
+            return;
+          }
+          e.paused && (n.current = !0, S("keep-segment-source"));
+          return;
+        }
+        if (u) {
+          const k = f.current !== null ? Q() : 0;
+          e.pause(), e.removeAttribute("src"), e.load(), x.current = C, v.current = "url", e.src = C, e.load(), d.current = k, e.readyState > 0 && (e.currentTime = k, d.current = null);
+        }
+        if (n.current = s, p.current = !1, h.current = !1, t(!1), !s) {
           n.current = !1, e.pause(), l(!1);
           return;
         }
-        u || b("sync-url");
+        S(u ? "sync-url-init" : "sync-url");
         return;
       }
       if (f.current !== null) {
-        if (f.current < g.length) {
-          x(f.current, "wait-resume");
+        if (f.current < b.length) {
+          if (m.current) {
+            l(!1), t(!1);
+            return;
+          }
+          E(f.current, "wait-resume");
           return;
         }
-        m.current = !0, n.current = s, l(s);
+        p.current = !0, n.current = A(), l(!1), t(A());
         return;
       }
-      if (!g.length) {
-        if (d.isAudioStreaming) {
-          f.current = _.current, m.current = !0, n.current = s, l(s);
+      if (!b.length) {
+        if (c.isAudioStreaming) {
+          f.current = w.current, p.current = !0, n.current = A(), l(!1), t(A());
           return;
         }
-        S();
+        U();
         return;
       }
-      if (!y.current) {
-        x(
+      if (!x.current) {
+        E(
           Math.min(
-            _.current,
-            g.length - 1
+            w.current,
+            b.length - 1
           ),
           "effect-init"
         );
         return;
       }
-      if (!s) {
+      if (!g || m.current) {
         n.current = !1, e.pause(), l(!1);
         return;
       }
-      e.paused && (n.current = !0, b("sync-paused-retry"));
+      e.paused && (n.current = !0, S("sync-paused-retry"));
     }
   }, [
-    d,
-    t,
+    c,
+    i,
+    b,
+    C,
     g,
-    j,
-    s,
+    A,
+    U,
+    E,
     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");
+    Q,
+    t
+  ]), M(() => U, [U]);
+  const fe = a(() => {
+    l(!0), t(!1);
+  }, [t]), de = a(() => {
+    p.current || h.current || l(!1);
+  }, [i]), me = a(() => {
+    const e = y.current;
+    e && d.current !== null && (e.currentTime = d.current, d.current = null), !(!n.current || !g) && S("canplay");
+  }, [i, g, S]), pe = a(() => {
+    const e = y.current;
+    e && d.current !== null && (e.currentTime = d.current, d.current = null);
+  }, [i]), he = a(() => {
+    const e = v.current === "url" || P.current.length === 0;
+    if (h.current = !1, e) {
+      V("url-ended");
       return;
     }
-    T();
-  }, [t, E, T]), re = a(() => {
-    l(!1);
+    X();
+  }, [V, X]), ge = a(() => {
+    l(!1), t(!1);
   }, [t]);
-  return /* @__PURE__ */ r.jsxs("div", { className: Z("slide-player", H), ...X, children: [
+  return /* @__PURE__ */ r.jsxs("div", { className: Y("slide-player", N), ...oe, 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: pe,
+        onCanPlay: me,
+        onPlay: fe,
+        onPause: de,
+        onEnded: he,
+        onError: ge
       }
     ),
-    Q ? /* @__PURE__ */ r.jsxs("div", { className: "slide-player__controls", children: [
+    ae ? /* @__PURE__ */ r.jsxs("div", { className: "slide-player__controls", style: ie, 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,
+          xe,
           {
             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(we, { className: "slide-player__icon", strokeWidth: 2.25 }) }),
         /* @__PURE__ */ r.jsx(
           "button",
           {
             "aria-label": "Rewind",
             className: "slide-player__action",
-            disabled: O,
-            onClick: U,
+            disabled: le,
+            onClick: ee,
             type: "button",
-            children: /* @__PURE__ */ r.jsx(ce, { className: "slide-player__icon", strokeWidth: 2.25 })
+            children: /* @__PURE__ */ r.jsx(je, { className: "slide-player__icon", strokeWidth: 2.25 })
           }
         ),
         /* @__PURE__ */ r.jsx(
           "button",
           {
-            "aria-label": M ? "Pause" : "Play",
+            "aria-label": F ? "Pause" : "Play",
             className: "slide-player__toggle",
             onClick: () => {
-              const e = p.current;
-              if (!(!e || !d)) {
+              const e = y.current;
+              if (!(!e || !c)) {
                 if (f.current !== null) {
-                  if (M) {
-                    n.current = !1, f.current = null, m.current = !1, l(!1), e.pause();
+                  if (F) {
+                    n.current = !1, m.current = !0, f.current = null, p.current = !1, l(!1), t(!1), e.pause();
                     return;
                   }
-                  R?.(), n.current = !0, l(!0);
+                  j.current = "manual", m.current = !1, n.current = !0, t(!0);
                   return;
                 }
-                if (!e.src && g.length > 0) {
-                  R?.(), x(
+                if (!e.src && b.length > 0) {
+                  j.current = "manual", m.current = !1, E(
                     Math.min(
-                      _.current,
-                      g.length - 1
+                      w.current,
+                      b.length - 1
                     ),
                     "toggle"
                   );
                   return;
                 }
                 if (e.paused) {
-                  R?.(), n.current = !0, b("toggle-resume");
+                  j.current = "manual", m.current = !1, n.current = !0, S("toggle-resume");
                   return;
                 }
-                n.current = !1, e.pause();
+                n.current = !1, m.current = !0, e.pause();
               }
             },
             type: "button",
-            children: M ? /* @__PURE__ */ r.jsx(oe, {}) : /* @__PURE__ */ r.jsx(fe, {})
+            children: F ? /* @__PURE__ */ r.jsx(Re, {}) : /* @__PURE__ */ r.jsx(ve, {})
           }
         ),
         /* @__PURE__ */ r.jsx(
@@ -287,10 +342,10 @@ const oe = () => /* @__PURE__ */ r.jsxs(
           {
             "aria-label": "Forward",
             className: "slide-player__action",
-            disabled: P,
-            onClick: B,
+            disabled: ce,
+            onClick: re,
             type: "button",
-            children: /* @__PURE__ */ r.jsx(ue, { className: "slide-player__icon", strokeWidth: 2.25 })
+            children: /* @__PURE__ */ r.jsx(Ae, { className: "slide-player__icon", strokeWidth: 2.25 })
           }
         ),
         /* @__PURE__ */ r.jsx(
@@ -298,31 +353,34 @@ const oe = () => /* @__PURE__ */ r.jsxs(
           {
             "aria-label": "Fullscreen",
             className: "hidden",
-            onClick: K,
+            onClick: te,
             type: "button",
-            children: /* @__PURE__ */ r.jsx(ae, { className: "slide-player__icon", strokeWidth: 2.25 })
+            children: /* @__PURE__ */ r.jsx(ke, { className: "slide-player__icon", strokeWidth: 2.25 })
           }
         )
       ] }),
       /* @__PURE__ */ r.jsx("div", { className: "slide-player__separator" }),
-      /* @__PURE__ */ r.jsx("div", { className: "slide-player__group", children: /* @__PURE__ */ r.jsx(
-        "button",
-        {
-          "aria-label": "Notes",
-          className: Z(
-            "slide-player__action",
-            J && "slide-player__action--active"
-          ),
-          disabled: !G,
-          onClick: z,
-          type: "button",
-          children: /* @__PURE__ */ r.jsx(ie, { className: "slide-player__icon", strokeWidth: 2.25 })
-        }
-      ) })
+      /* @__PURE__ */ r.jsxs("div", { className: "slide-player__group", children: [
+        z.map((e, u) => /* @__PURE__ */ r.jsx(be.Fragment, { children: e }, `custom-action-${u}`)),
+        /* @__PURE__ */ r.jsx(
+          "button",
+          {
+            "aria-label": "Notes",
+            className: Y(
+              "slide-player__action",
+              ue && "slide-player__action--active"
+            ),
+            disabled: !se,
+            onClick: ne,
+            type: "button",
+            children: /* @__PURE__ */ r.jsx(Ne, { className: "slide-player__icon", strokeWidth: 2.25 })
+          }
+        )
+      ] })
     ] }) : null
   ] });
 };
 export {
-  Se as default
+  Ke as default
 };
 //# sourceMappingURL=Player.es.js.map