@xiping/react-components 1.0.49 → 1.0.51

package/dist/es/components/subtitle-player/SubtitlePlayer.js

@@ -1,301 +1,184 @@
-import { jsx as p, jsxs as $ } from "react/jsx-runtime";
-import { useMemo as x, useRef as D, useState as G, useEffect as O, useCallback as R } from "react";
-import { parseSRT as I, parseVTT as A } from "../../packages/subtitle/lib/src/parser.js";
-import { srtToJson as U, vttToJson as X } from "../../packages/subtitle/lib/src/json-converter.js";
+import { jsx as d, jsxs as W } from "react/jsx-runtime";
+import { useMemo as u, useRef as O, useState as j, useEffect as _, useCallback as T } from "react";
+import { parseSRT as S, parseVTT as v } from "../../packages/subtitle/lib/src/parser.js";
+import { srtToJson as k, vttToJson as z } from "../../packages/subtitle/lib/src/json-converter.js";
+import C from "clsx";
+import { CurrentMode as D } from "./CurrentMode.js";
+import { LyricsMode as F } from "./LyricsMode.js";
+import { getCurrentSubtitleEntry as G, timeStringToSeconds as A } from "./utils.js";
 /* empty css                   */
-function E(l) {
-  const c = l.replace(",", ".").split(":");
-  if (c.length !== 3)
-    return 0;
-  const h = parseInt(c[0], 10) || 0, g = parseInt(c[1], 10) || 0, i = parseFloat(c[2]) || 0;
-  return h * 3600 + g * 60 + i;
-}
-function Y(l) {
-  const a = Math.floor(l / 3600), c = Math.floor(l % 3600 / 60), h = Math.floor(l % 60);
-  return a > 0 ? `${a.toString().padStart(2, "0")}:${c.toString().padStart(2, "0")}:${h.toString().padStart(2, "0")}` : `${c.toString().padStart(2, "0")}:${h.toString().padStart(2, "0")}`;
-}
-function Z(l, a) {
-  for (const c of l) {
-    const h = E(c.startTime), g = E(c.endTime);
-    if (a >= h && a <= g)
-      return c;
-  }
-  return null;
-}
-function q(l, a, c, h, g) {
-  if (!a || a.length === 0)
-    return { nodes: l, nextWordIndex: c };
-  const i = [];
-  let d = 0;
-  for (let u = c; u < a.length; u++) {
-    const m = a[u], f = l.substring(d).indexOf(m);
-    if (f === -1)
-      return {
-        nodes: i.length > 0 ? i : l,
-        nextWordIndex: u
-      };
-    const b = d + f;
-    if (b > d) {
-      const S = l.substring(d, b);
-      S && i.push(
-        /* @__PURE__ */ p("span", { className: "subtitle-word-before", children: S }, `before-${h}-${u}`)
-      );
-    }
-    const y = g?.(m, u, h);
-    if (i.push(
-      /* @__PURE__ */ p(
-        "span",
-        {
-          className: "subtitle-word",
-          "data-word": m,
-          onMouseEnter: y?.onMouseEnter,
-          onMouseLeave: y?.onMouseLeave,
-          children: m
-        },
-        `word-${h}-${u}`
-      )
-    ), d = b + m.length, d >= l.length)
-      return { nodes: i, nextWordIndex: u + 1 };
-  }
-  if (d < l.length) {
-    const u = l.substring(d);
-    u && i.push(
-      /* @__PURE__ */ p("span", { className: "subtitle-word-after", children: u }, `after-${h}`)
-    );
-  }
-  return {
-    nodes: i.length > 0 ? i : l,
-    nextWordIndex: a.length
-  };
-}
-const st = ({
-  subtitles: l,
-  currentTime: a,
-  mode: c = "current",
-  className: h = "",
-  style: g,
-  onWordHoverChange: i,
-  renderWordOverlay: d
+const H = ({
+  subtitles: i,
+  currentTime: m,
+  mode: f = "current",
+  className: B = "",
+  style: J,
+  onWordHoverChange: a,
+  renderWordOverlay: h
 }) => {
-  const u = x(
-    () => Array.isArray(l) ? l : [l],
-    [l]
-  ), m = D(null), N = D(null), [f, b] = G(null), [y, S] = G([]);
-  O(() => {
-    let n = !0;
+  const l = u(
+    () => Array.isArray(i) ? i : [i],
+    [i]
+  ), y = O(null), [c, x] = j(null), [g, E] = j([]);
+  _(() => {
+    let r = !0;
     async function s() {
       try {
-        const e = await Promise.all(
-          u.map(async (t) => {
+        const t = await Promise.all(
+          l.map(async (e) => {
             try {
-              const r = t.language || "zh", o = t.type === "srt" ? await U(t.content, r) : await X(t.content, r);
+              const n = e.language || "zh", o = e.type === "srt" ? await k(e.content, n) : await z(e.content, n);
               return {
                 entries: JSON.parse(o),
-                label: t.label
+                label: e.label
               };
-            } catch (r) {
-              return console.error("字幕解析失败:", r), {
-                entries: t.type === "srt" ? I(t.content) : A(t.content),
-                label: t.label
+            } catch (n) {
+              return console.error("字幕解析失败:", n), {
+                entries: e.type === "srt" ? S(e.content) : v(e.content),
+                label: e.label
               };
             }
           })
         );
-        n && S(e);
-      } catch (e) {
-        if (console.error("加载字幕失败:", e), n) {
-          const t = u.map((r) => {
+        r && E(t);
+      } catch (t) {
+        if (console.error("加载字幕失败:", t), r) {
+          const e = l.map((n) => {
             try {
               return {
-                entries: r.type === "srt" ? I(r.content) : A(r.content),
-                label: r.label
+                entries: n.type === "srt" ? S(n.content) : v(n.content),
+                label: n.label
               };
             } catch (o) {
               return console.error("字幕解析失败:", o), {
                 entries: [],
-                label: r.label
+                label: n.label
               };
             }
           });
-          S(t);
+          E(e);
         }
       }
     }
     return s(), () => {
-      n = !1;
+      r = !1;
     };
-  }, [u]);
-  const w = x(() => y.length > 0 ? y : u.map((n) => {
+  }, [l]);
+  const p = u(() => g.length > 0 ? g : l.map((r) => {
     try {
       return {
-        entries: n.type === "srt" ? I(n.content) : A(n.content),
-        label: n.label
+        entries: r.type === "srt" ? S(r.content) : v(r.content),
+        label: r.label
       };
     } catch (s) {
       return console.error("字幕解析失败:", s), {
         entries: [],
-        label: n.label
+        label: r.label
       };
     }
-  }), [y, u]), L = x(() => w.map(({ entries: n, label: s }) => ({
-    entry: Z(n, a),
+  }), [g, l]), L = u(() => p.map(({ entries: r, label: s }) => ({
+    entry: G(r, m),
     label: s,
-    entries: n
+    entries: r
     // 保留所有条目用于歌词模式
-  })), [w, a]), H = x(() => {
-    const n = [];
-    w.forEach(({ entries: t, label: r }) => {
-      t.forEach((o) => {
-        n.push({
+  })), [p, m]), P = u(() => {
+    const r = [];
+    p.forEach(({ entries: e, label: n }) => {
+      e.forEach((o) => {
+        r.push({
           entry: o,
-          label: r,
-          startTime: E(o.startTime),
-          endTime: E(o.endTime)
+          label: n,
+          startTime: A(o.startTime),
+          endTime: A(o.endTime)
         });
       });
-    }), n.sort((t, r) => t.startTime - r.startTime);
+    }), r.sort((e, n) => e.startTime - n.startTime);
     const s = [];
-    let e = [];
-    for (const t of n)
-      if (e.length === 0)
-        e.push(t);
+    let t = [];
+    for (const e of r)
+      if (t.length === 0)
+        t.push(e);
       else {
-        const r = e[e.length - 1];
-        t.startTime <= r.endTime ? e.push(t) : (s.push(e), e = [t]);
+        const n = t[t.length - 1];
+        e.startTime <= n.endTime ? t.push(e) : (s.push(t), t = [e]);
       }
-    return e.length > 0 && s.push(e), s;
-  }, [w]);
-  O(() => {
-    if (c === "lyrics" && N.current && m.current) {
-      const n = m.current, s = N.current, e = s.offsetTop, t = n.clientHeight, r = s.clientHeight, o = e - t / 2 + r / 2;
-      n.scrollTo({
-        top: o,
-        behavior: "smooth"
-      });
-    }
-  }, [c, a]);
-  const P = R(
-    (n, s) => {
-      const e = n.currentTarget.getBoundingClientRect(), t = m.current?.getBoundingClientRect(), r = t !== void 0 ? new DOMRect(
-        e.left - t.left,
-        e.top - t.top,
-        e.width,
-        e.height
-      ) : e, o = {
+    return t.length > 0 && s.push(t), s;
+  }, [p]), R = T(
+    (r, s) => {
+      const t = r.currentTarget.getBoundingClientRect(), e = y.current?.getBoundingClientRect(), n = e !== void 0 ? new DOMRect(
+        t.left - e.left,
+        t.top - e.top,
+        t.width,
+        t.height
+      ) : t, o = {
         ...s,
-        rect: r
+        rect: n,
+        element: r.currentTarget
       };
-      b(o), i?.(o);
+      x(o), a?.(o);
     },
-    [i]
-  ), j = R(() => {
-    b(null), i?.(null);
-  }, [i]), z = R(
-    (n, s) => (e, t, r) => ({
-      onMouseEnter: (o) => P(o, {
-        word: e,
-        wordIndex: t,
-        lineIndex: r,
-        entry: n,
+    [a]
+  ), w = T(() => {
+    x(null), a?.(null);
+  }, [a]), M = T(
+    (r, s) => (t, e, n) => ({
+      onMouseEnter: (o) => R(o, {
+        word: t,
+        wordIndex: e,
+        lineIndex: n,
+        entry: r,
         label: s
       }),
-      onMouseLeave: j
+      onMouseLeave: w
     }),
-    [P, j]
-  ), B = d && f ? /* @__PURE__ */ p(
+    [R, w]
+  ), b = h && c ? /* @__PURE__ */ d(
     "div",
     {
-      className: "subtitle-player-hover-overlay",
+      className: "xiping-subtitle-player__hover-overlay",
       style: {
-        left: f.rect.x + f.rect.width / 2,
-        top: f.rect.y + f.rect.height
+        left: c.rect.x + c.rect.width / 2,
+        top: c.rect.y + c.rect.height
       },
-      children: d(f)
+      children: h(c)
     }
-  ) : null;
-  return c === "current" ? L.some(({ entry: s }) => s !== null) ? /* @__PURE__ */ $(
+  ) : null, N = !!(h || a);
+  return /* @__PURE__ */ W(
     "div",
     {
-      ref: m,
-      className: `subtitle-player subtitle-player--current ${h}`,
-      style: g,
+      ref: y,
+      className: C(
+        "xiping-subtitle-player",
+        f === "lyrics" ? "xiping-subtitle-player--lyrics" : "xiping-subtitle-player--current",
+        B
+      ),
+      style: J,
       children: [
-        L.map(({ entry: s, label: e }, t) => s ? /* @__PURE__ */ $(
-          "div",
+        f === "current" && /* @__PURE__ */ d(
+          D,
           {
-            className: "subtitle-player-item",
-            "data-label": e || void 0,
-            children: [
-              e && /* @__PURE__ */ p("span", { className: "subtitle-player-label", children: e }),
-              /* @__PURE__ */ p("div", { className: "subtitle-player-text", children: (() => {
-                let r = 0;
-                return s.text.split(`
-`).map((o, T) => {
-                  if (!s.words || s.words.length === 0)
-                    return /* @__PURE__ */ p("div", { className: "subtitle-player-line", children: o }, T);
-                  const v = q(
-                    o,
-                    s.words,
-                    r,
-                    T,
-                    d || i ? z(s, e) : void 0
-                  );
-                  return r = v.nextWordIndex, /* @__PURE__ */ p("div", { className: "subtitle-player-line", children: v.nodes }, T);
-                });
-              })() })
-            ]
-          },
-          t
-        ) : null),
-        (d || i) && /* @__PURE__ */ p("div", { className: "subtitle-player-hover-layer", children: B })
-      ]
-    }
-  ) : null : /* @__PURE__ */ $(
-    "div",
-    {
-      ref: m,
-      className: `subtitle-player subtitle-player--lyrics ${h}`,
-      style: g,
-      children: [
-        H.map((n, s) => {
-          const e = n[0]?.startTime ?? 0, t = Y(e);
-          return /* @__PURE__ */ p("div", { className: "subtitle-player-group", children: n.map(({ entry: r, label: o, startTime: T, endTime: v }, F) => {
-            const J = a >= T && a <= v, K = a > v, Q = F === 0;
-            let V = 0;
-            return /* @__PURE__ */ $(
-              "div",
-              {
-                ref: J ? N : null,
-                className: `subtitle-player-item ${J ? "subtitle-player-item--active" : ""} ${K ? "subtitle-player-item--past" : ""}`,
-                "data-label": o || void 0,
-                children: [
-                  Q && /* @__PURE__ */ p("span", { className: "subtitle-player-time", children: t }),
-                  o && /* @__PURE__ */ p("span", { className: "subtitle-player-label", children: o }),
-                  /* @__PURE__ */ p("div", { className: "subtitle-player-text", children: r.text.split(`
-`).map((W, M) => {
-                    if (!r.words || r.words.length === 0)
-                      return /* @__PURE__ */ p("div", { className: "subtitle-player-line", children: W }, M);
-                    const k = q(
-                      W,
-                      r.words,
-                      V,
-                      M,
-                      d || i ? z(r, o) : void 0
-                    );
-                    return V = k.nextWordIndex, /* @__PURE__ */ p("div", { className: "subtitle-player-line", children: k.nodes }, M);
-                  }) })
-                ]
-              },
-              `${s}-${F}`
-            );
-          }) }, s);
-        }),
-        (d || i) && /* @__PURE__ */ p("div", { className: "subtitle-player-hover-layer", children: B })
+            currentEntries: L,
+            wordHoverFactory: M,
+            enableWordHover: N,
+            overlayNode: b
+          }
+        ),
+        f === "lyrics" && /* @__PURE__ */ d(
+          F,
+          {
+            groupedEntriesByTime: P,
+            currentTime: m,
+            wordHoverFactory: M,
+            enableWordHover: N,
+            overlayNode: b,
+            containerRef: y
+          }
+        )
       ]
     }
   );
 };
 export {
-  st as SubtitlePlayer,
-  st as default
+  H as SubtitlePlayer,
+  H as default
 };

package/dist/es/components/subtitle-player/utils.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { SubtitleEntry } from '@xiping/subtitle';
+/**
+ * 将时间字符串（HH:MM:SS,mmm 或 HH:MM:SS.mmm）转换为秒数
+ */
+export declare function timeStringToSeconds(timeString: string): number;
+/**
+ * 将秒数转换为时间字符串（MM:SS 或 HH:MM:SS）
+ */
+export declare function secondsToTimeString(seconds: number): string;
+/**
+ * 根据当前时间获取应该显示的字幕条目
+ */
+export declare function getCurrentSubtitleEntry(entries: SubtitleEntry[], currentTime: number): SubtitleEntry | null;
+/**
+ * 单词悬停处理器工厂函数类型
+ */
+export type WordHoverHandlerFactory = (word: string, wordIndex: number, lineIndex: number) => {
+    onMouseEnter: React.MouseEventHandler<HTMLSpanElement>;
+    onMouseLeave: React.MouseEventHandler<HTMLSpanElement>;
+} | undefined;
+/**
+ * 将文本按照分词结果分割并渲染，并返回消耗到的分词下标
+ */
+export declare function renderTextWithWords(text: string, words: string[] | undefined, startWordIndex: number, lineIndex: number, createHoverHandlers?: WordHoverHandlerFactory): {
+    nodes: React.ReactNode;
+    nextWordIndex: number;
+};

package/dist/es/components/subtitle-player/utils.js

@@ -0,0 +1,72 @@
+import { jsx as d } from "react/jsx-runtime";
+function h(t) {
+  const n = t.replace(",", ".").split(":");
+  if (n.length !== 3)
+    return 0;
+  const r = parseInt(n[0], 10) || 0, a = parseInt(n[1], 10) || 0, s = parseFloat(n[2]) || 0;
+  return r * 3600 + a * 60 + s;
+}
+function S(t) {
+  const e = Math.floor(t / 3600), n = Math.floor(t % 3600 / 60), r = Math.floor(t % 60);
+  return e > 0 ? `${e.toString().padStart(2, "0")}:${n.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}` : `${n.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}`;
+}
+function x(t, e) {
+  for (const n of t) {
+    const r = h(n.startTime), a = h(n.endTime);
+    if (e >= r && e <= a)
+      return n;
+  }
+  return null;
+}
+function T(t, e, n, r, a) {
+  if (!e || e.length === 0)
+    return { nodes: t, nextWordIndex: n };
+  const s = [];
+  let i = 0;
+  for (let o = n; o < e.length; o++) {
+    const c = e[o], l = t.substring(i).indexOf(c);
+    if (l === -1)
+      return {
+        nodes: s.length > 0 ? s : t,
+        nextWordIndex: o
+      };
+    const u = i + l;
+    if (u > i) {
+      const g = t.substring(i, u);
+      g && s.push(
+        /* @__PURE__ */ d("span", { className: "xiping-subtitle-word-before", children: g }, `before-${r}-${o}`)
+      );
+    }
+    const f = a?.(c, o, r);
+    if (s.push(
+      /* @__PURE__ */ d(
+        "span",
+        {
+          className: "xiping-subtitle-word",
+          "data-word": c,
+          onMouseEnter: f?.onMouseEnter,
+          onMouseLeave: f?.onMouseLeave,
+          children: c
+        },
+        `word-${r}-${o}`
+      )
+    ), i = u + c.length, i >= t.length)
+      return { nodes: s, nextWordIndex: o + 1 };
+  }
+  if (i < t.length) {
+    const o = t.substring(i);
+    o && s.push(
+      /* @__PURE__ */ d("span", { className: "xiping-subtitle-word-after", children: o }, `after-${r}`)
+    );
+  }
+  return {
+    nodes: s.length > 0 ? s : t,
+    nextWordIndex: e.length
+  };
+}
+export {
+  x as getCurrentSubtitleEntry,
+  T as renderTextWithWords,
+  S as secondsToTimeString,
+  h as timeStringToSeconds
+};

package/dist/es/components/text-animate/TextAnimate.js

@@ -273,7 +273,6 @@ function U({
       e = i.split(`
 `);
       break;
-    case "text":
     default:
       e = [i];
       break;

package/dist/es/components/text-type/TextType.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as b } from "react/jsx-runtime";
-import { useState as u, useRef as k, useMemo as U, useCallback as V, useEffect as p, createElement as W } from "react";
+import { useState as o, useRef as k, useMemo as U, useCallback as V, useEffect as I, createElement as W } from "react";
 import { gsap as q } from "gsap";
 /* empty css             */
 const D = ({
-  text: i,
+  text: u,
   as: v = "div",
   typingSpeed: f = 50,
   initialDelay: _ = 0,
-  pauseDuration: x = 2e3,
+  pauseDuration: h = 2e3,
   deletingSpeed: A = 30,
   loop: R = !0,
   className: w = "",
@@ -17,33 +17,33 @@ const D = ({
   cursorCharacter: F = "|",
   cursorClassName: G = "",
   cursorBlinkDuration: E = 0.5,
-  textColors: d = [],
+  textColors: g = [],
   variableSpeed: c,
-  onSentenceComplete: y,
-  startOnVisible: g = !1,
+  onSentenceComplete: d,
+  startOnVisible: y = !1,
   reverseMode: N = !1,
   ...J
 }) => {
-  const [l, $] = u(""), [o, j] = u(0), [a, C] = u(!1), [t, K] = u(0), [H, L] = u(!g), m = k(null), I = k(null), r = U(() => Array.isArray(i) ? i : [i], [i]), O = V(() => {
+  const [l, $] = o(""), [i, j] = o(0), [a, C] = o(!1), [t, K] = o(0), [H, L] = o(!y), m = k(null), p = k(null), r = U(() => Array.isArray(u) ? u : [u], [u]), O = V(() => {
     if (!c) return f;
     const { min: e, max: n } = c;
     return Math.random() * (n - e) + e;
   }, [c, f]), P = () => {
-    if (d.length !== 0)
-      return d[t % d.length];
+    if (g.length !== 0)
+      return g[t % g.length];
   };
-  p(() => {
-    if (!g || !I.current) return;
+  I(() => {
+    if (!y || !p.current) return;
     const e = new IntersectionObserver(
       (n) => {
-        n.forEach((h) => {
-          h.isIntersecting && L(!0);
+        n.forEach((x) => {
+          x.isIntersecting && L(!0);
         });
       },
       { threshold: 0.1 }
     );
-    return e.observe(I.current), () => e.disconnect();
-  }, [g]), p(() => {
+    return e.observe(p.current), () => e.disconnect();
+  }, [y]), I(() => {
     T && m.current && (q.set(m.current, { opacity: 1 }), q.to(m.current, {
       opacity: 0,
       duration: E,
@@ -51,38 +51,38 @@ const D = ({
       yoyo: !0,
       ease: "power2.inOut"
     }));
-  }, [T, E]), p(() => {
+  }, [T, E]), I(() => {
     if (!H) return;
     let e;
-    const n = r[t], h = N ? n.split("").reverse().join("") : n, M = () => {
+    const n = r[t], x = N ? n.split("").reverse().join("") : n, M = () => {
       if (a)
         if (l === "") {
           if (C(!1), t === r.length - 1 && !R)
             return;
-          y && y(r[t], t), K((s) => (s + 1) % r.length), j(0), e = setTimeout(() => {
-          }, x);
+          d && d(r[t], t), K((s) => (s + 1) % r.length), j(0), e = setTimeout(() => {
+          }, h);
         } else
           e = setTimeout(() => {
             $((s) => s.slice(0, -1));
           }, A);
       else
-        o < h.length ? e = setTimeout(
+        i < x.length ? e = setTimeout(
           () => {
-            $((s) => s + h[o]), j((s) => s + 1);
+            $((s) => s + x[i]), j((s) => s + 1);
           },
           c ? O() : f
         ) : r.length > 1 && (e = setTimeout(() => {
           C(!0);
-        }, x));
+        }, h));
     };
-    return o === 0 && !a && l === "" ? e = setTimeout(M, _) : M(), () => clearTimeout(e);
+    return i === 0 && !a && l === "" ? e = setTimeout(M, _) : M(), () => clearTimeout(e);
   }, [
-    o,
+    i,
     l,
     a,
     f,
     A,
-    x,
+    h,
     r,
     t,
     R,
@@ -90,22 +90,22 @@ const D = ({
     H,
     N,
     c,
-    y
+    d
   ]);
-  const Q = z && (o < r[t].length || a);
+  const Q = z && (i < r[t].length || a);
   return W(
     v,
     {
-      ref: I,
-      className: `text-type ${w}`,
+      ref: p,
+      className: `xiping-text-type ${w}`,
       ...J
     },
-    /* @__PURE__ */ b("span", { className: "text-type__content", style: { color: P() || "inherit" }, children: l }),
+    /* @__PURE__ */ b("span", { className: "xiping-text-type__content", style: { color: P() || "inherit" }, children: l }),
     T && /* @__PURE__ */ b(
       "span",
       {
         ref: m,
-        className: `text-type__cursor ${G} ${Q ? "text-type__cursor--hidden" : ""}`,
+        className: `xiping-text-type__cursor ${G} ${Q ? "xiping-text-type__cursor--hidden" : ""}`,
         children: F
       }
     )