@xiping/react-components 1.0.55 → 1.0.58

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

@@ -1,81 +1,152 @@
-import { jsxs as v, Fragment as j, jsx as s } from "react/jsx-runtime";
-import { useRef as F, useEffect as S } from "react";
-import W from "clsx";
-import { secondsToTimeString as $, renderTextWithWords as A } from "./utils.js";
-const P = ({
-  groupedEntriesByTime: y,
-  currentTime: o,
-  wordHoverFactory: N,
-  enableWordHover: u,
-  overlayNode: b,
-  containerRef: n,
-  onSubtitleClick: c
+import { jsxs as $, Fragment as K, jsx as c } from "react/jsx-runtime";
+import { useRef as W, useMemo as I, useEffect as b, useCallback as j } from "react";
+import A from "clsx";
+import { secondsToTimeString as H, renderTextWithWords as L } from "./utils.js";
+import './LyricsMode.css';/* empty css               */
+const M = ({
+  entry: t,
+  label: s,
+  endTime: v,
+  currentTime: _,
+  isActive: y,
+  isFirstItem: u,
+  timeString: g,
+  textAlign: N,
+  enableWordHover: d,
+  wordHoverFactory: h,
+  onSubtitleClick: n,
+  itemRef: e
 }) => {
-  const a = F(null);
-  return S(() => {
-    if (a.current && n.current) {
-      const e = n.current, r = a.current, p = r.offsetTop, m = e.clientHeight, t = r.clientHeight, i = p - m / 2 + t / 2;
+  const r = _ > v, i = j(
+    (m) => {
+      n && n(m, t, s);
+    },
+    [n, t, s]
+  ), o = I(
+    () => d ? h(t, s) : void 0,
+    [d, h, t, s]
+  ), l = I(() => t.text.split(`
+`).reduce(
+    (p, x, a) => {
+      if (!t.words || t.words.length === 0)
+        return p.content.push(
+          /* @__PURE__ */ c(
+            "div",
+            {
+              className: "xiping-subtitle-player__lyrics-line",
+              children: x
+            },
+            a
+          )
+        ), p;
+      const f = L(
+        x,
+        t.words,
+        p.nextWordIndex,
+        a,
+        o
+      );
+      return p.content.push(
+        /* @__PURE__ */ c(
+          "div",
+          {
+            className: "xiping-subtitle-player__lyrics-line",
+            children: f.nodes
+          },
+          a
+        )
+      ), {
+        content: p.content,
+        nextWordIndex: f.nextWordIndex
+      };
+    },
+    { content: [], nextWordIndex: 0 }
+  ).content, [t.text, t.words, o]);
+  return /* @__PURE__ */ $(
+    "div",
+    {
+      ref: e,
+      className: A("xiping-subtitle-player__lyrics-item", {
+        "xiping-subtitle-player__lyrics-item--active": y,
+        "xiping-subtitle-player__lyrics-item--past": r
+      }),
+      "data-label": s || void 0,
+      onClick: n ? i : void 0,
+      style: n ? { cursor: "pointer" } : void 0,
+      children: [
+        u && g && /* @__PURE__ */ c("span", { className: "xiping-subtitle-player__lyrics-time", children: g }),
+        s && /* @__PURE__ */ c("span", { className: "xiping-subtitle-player__lyrics-label", children: s }),
+        /* @__PURE__ */ c(
+          "div",
+          {
+            className: "xiping-subtitle-player__lyrics-text",
+            style: { textAlign: N },
+            children: l
+          }
+        )
+      ]
+    }
+  );
+}, q = ({
+  groupedEntriesByTime: t,
+  currentTime: s,
+  wordHoverFactory: v,
+  enableWordHover: _,
+  overlayNode: y,
+  containerRef: u,
+  onSubtitleClick: g,
+  textAlign: N = "left"
+}) => {
+  const d = W(null), h = W(null), n = I(() => {
+    for (let e = 0; e < t.length; e++) {
+      const r = t[e];
+      for (let i = 0; i < r.length; i++) {
+        const { startTime: o, endTime: l } = r[i];
+        if (s >= o && s <= l)
+          return `${e}-${i}`;
+      }
+    }
+    return null;
+  }, [t, s]);
+  return b(() => {
+    if (n && n !== h.current && d.current && u.current) {
+      const e = u.current, r = d.current, i = r.offsetTop, o = e.clientHeight, l = r.clientHeight, m = i - o / 2 + l / 2;
       e.scrollTo({
-        top: i,
+        top: m,
         behavior: "smooth"
-      });
+      }), h.current = n;
     }
-  }, [o, n]), /* @__PURE__ */ v(j, { children: [
-    y.map((e, r) => {
-      const p = e[0]?.startTime ?? 0, m = $(p);
-      return /* @__PURE__ */ s("div", { className: "xiping-subtitle-player__group", children: e.map(({ entry: t, label: i, startTime: T, endTime: _ }, g) => {
-        const h = o >= T && o <= _, w = o > _, H = g === 0;
-        let x = 0;
-        return /* @__PURE__ */ v(
-          "div",
+  }, [n, u]), /* @__PURE__ */ $(K, { children: [
+    t.map((e, r) => {
+      const i = e[0];
+      if (!i)
+        return null;
+      const o = H(i.startTime);
+      return /* @__PURE__ */ c("div", { className: "xiping-subtitle-player__group", children: e.map(({ entry: l, label: m, startTime: p, endTime: x }, a) => {
+        const f = s >= p && s <= x, w = `${r}-${a}`;
+        return /* @__PURE__ */ c(
+          M,
           {
-            ref: h ? a : null,
-            className: W("xiping-subtitle-player__item", {
-              "xiping-subtitle-player__item--active": h,
-              "xiping-subtitle-player__item--past": w
-            }),
-            "data-label": i || void 0,
-            onClick: c ? (l) => c(l, t, i) : void 0,
-            style: c ? { cursor: "pointer" } : void 0,
-            children: [
-              H && /* @__PURE__ */ s("span", { className: "xiping-subtitle-player__time", children: m }),
-              i && /* @__PURE__ */ s("span", { className: "xiping-subtitle-player__label", children: i }),
-              /* @__PURE__ */ s("div", { className: "xiping-subtitle-player__text", children: t.text.split(`
-`).map((l, d) => {
-                if (!t.words || t.words.length === 0)
-                  return /* @__PURE__ */ s(
-                    "div",
-                    {
-                      className: "xiping-subtitle-player__line",
-                      children: l
-                    },
-                    d
-                  );
-                const f = A(
-                  l,
-                  t.words,
-                  x,
-                  d,
-                  u ? N(t, i) : void 0
-                );
-                return x = f.nextWordIndex, /* @__PURE__ */ s(
-                  "div",
-                  {
-                    className: "xiping-subtitle-player__line",
-                    children: f.nodes
-                  },
-                  d
-                );
-              }) })
-            ]
+            entry: l,
+            label: m,
+            endTime: x,
+            currentTime: s,
+            isActive: f,
+            isFirstItem: a === 0,
+            timeString: a === 0 ? o : void 0,
+            textAlign: N,
+            enableWordHover: _,
+            wordHoverFactory: v,
+            onSubtitleClick: g,
+            itemRef: f ? d : void 0
           },
-          `${r}-${g}`
+          w
         );
       }) }, r);
     }),
-    u && /* @__PURE__ */ s("div", { className: "xiping-subtitle-player__hover-layer", children: b })
+    _ && /* @__PURE__ */ c("div", { className: "xiping-subtitle-player__lyrics-hover-layer", children: y })
   ] });
 };
 export {
-  P as LyricsMode
+  q as LyricsMode
 };

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

@@ -0,0 +1 @@
+.xiping-subtitle-player{display:flex;flex-direction:column;gap:.75rem;padding:1rem;background:#000000bf;border-radius:.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.6;max-width:100%;box-sizing:border-box;position:relative}.xiping-subtitle-player__hover-overlay{position:absolute;transform:translate(-50%,.5rem);z-index:10;pointer-events:auto}.xiping-subtitle-player:has(.xiping-subtitle-player__current-item:only-child){align-items:center}.xiping-subtitle-player:has(.xiping-subtitle-player__current-item:not(:only-child)){align-items:flex-start}.xiping-subtitle-word{display:inline-block;position:relative;transition:all .2s ease;padding:0 .05em;margin:0 .05em;border-radius:2px}.xiping-subtitle-word:hover{background-color:#ffffff1a;transform:translateY(-1px)}.xiping-subtitle-word-before,.xiping-subtitle-word-after{display:inline}@media(max-width:768px){.xiping-subtitle-player{padding:.75rem;font-size:.9rem}}

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

@@ -19,6 +19,8 @@ export interface SubtitlePlayerProps {
     currentTime: number;
     /** 显示模式：'current' 只显示当前字幕，'lyrics' 显示全部字幕并高亮当前 */
     mode?: SubtitleDisplayMode;
+    /** 文本对齐方式：'left' 左对齐，'center' 居中，默认为 'left' */
+    textAlign?: "left" | "center";
     /** 自定义类名 */
     className?: string;
     /** 自定义样式 */

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

@@ -1,35 +1,36 @@
-import { jsx as S, jsxs as z } from "react/jsx-runtime";
-import { useMemo as h, useRef as F, useState as k, useEffect as G, useCallback as u } from "react";
+import { jsx as S, jsxs as F } from "react/jsx-runtime";
+import { useMemo as f, useRef as G, useState as D, useEffect as V, useCallback as u } from "react";
 import { parseSRT as w, parseVTT as v } from "../../packages/subtitle/lib/src/parser.js";
-import { srtToJson as V, vttToJson as q } from "../../packages/subtitle/lib/src/json-converter.js";
-import K from "clsx";
-import { CurrentMode as Q } from "./CurrentMode.js";
-import { LyricsMode as U } from "./LyricsMode.js";
-import { getCurrentSubtitleEntry as X, timeStringToSeconds as A } from "./utils.js";
-/* empty css                   */
-const ot = ({
+import { srtToJson as q, vttToJson as K } from "../../packages/subtitle/lib/src/json-converter.js";
+import Q from "clsx";
+import { CurrentMode as U } from "./CurrentMode.js";
+import { LyricsMode as X } from "./LyricsMode.js";
+import { getCurrentSubtitleEntry as Y, timeStringToSeconds as J } from "./utils.js";
+import './SubtitlePlayer.css';/* empty css                   */
+const ct = ({
   subtitles: p,
-  currentTime: f,
+  currentTime: h,
   mode: m = "current",
-  className: D = "",
-  style: J,
+  textAlign: E = "left",
+  className: L = "",
+  style: A,
   onWordHoverChange: a,
   renderWordOverlay: d,
   onWordClick: y,
   onSubtitleClick: T
 }) => {
-  const i = h(
+  const i = f(
     () => Array.isArray(p) ? p : [p],
     [p]
-  ), l = F(null), [s, E] = k(null), [R, M] = k([]);
-  G(() => {
+  ), l = G(null), [s, M] = D(null), [R, b] = D([]);
+  V(() => {
     let r = !0;
     async function c() {
       try {
         const e = await Promise.all(
           i.map(async (t) => {
             try {
-              const n = t.language || "zh", o = t.type === "srt" ? await V(t.content, n) : await q(t.content, n);
+              const n = t.language || "zh", o = t.type === "srt" ? await q(t.content, n) : await K(t.content, n);
               return {
                 entries: JSON.parse(o),
                 label: t.label
@@ -42,7 +43,7 @@ const ot = ({
             }
           })
         );
-        r && M(e);
+        r && b(e);
       } catch (e) {
         if (console.error("加载字幕失败:", e), r) {
           const t = i.map((n) => {
@@ -58,7 +59,7 @@ const ot = ({
               };
             }
           });
-          M(t);
+          b(t);
         }
       }
     }
@@ -66,7 +67,7 @@ const ot = ({
       r = !1;
     };
   }, [i]);
-  const g = h(() => R.length > 0 ? R : i.map((r) => {
+  const g = f(() => R.length > 0 ? R : i.map((r) => {
     try {
       return {
         entries: r.type === "srt" ? w(r.content) : v(r.content),
@@ -78,20 +79,20 @@ const ot = ({
         label: r.label
       };
     }
-  }), [R, i]), L = h(() => g.map(({ entries: r, label: c }) => ({
-    entry: X(r, f),
+  }), [R, i]), W = f(() => g.map(({ entries: r, label: c }) => ({
+    entry: Y(r, h),
     label: c,
     entries: r
     // 保留所有条目用于歌词模式
-  })), [g, f]), W = h(() => {
+  })), [g, h]), _ = f(() => {
     const r = [];
     g.forEach(({ entries: t, label: n }) => {
       t.forEach((o) => {
         r.push({
           entry: o,
           label: n,
-          startTime: A(o.startTime),
-          endTime: A(o.endTime)
+          startTime: J(o.startTime),
+          endTime: J(o.endTime)
         });
       });
     }), r.sort((t, n) => t.startTime - n.startTime);
@@ -105,7 +106,7 @@ const ot = ({
         t.startTime <= n.endTime ? e.push(t) : (c.push(e), e = [t]);
       }
     return e.length > 0 && c.push(e), c;
-  }, [g]), b = u(
+  }, [g]), x = u(
     (r, c) => {
       const e = r.currentTarget.getBoundingClientRect(), t = l.current?.getBoundingClientRect(), n = t !== void 0 ? new DOMRect(
         e.left - t.left,
@@ -117,12 +118,12 @@ const ot = ({
         rect: n,
         element: r.currentTarget
       };
-      E(o), a?.(o);
+      M(o), a?.(o);
     },
     [a]
-  ), x = u(() => {
-    E(null), a?.(null);
-  }, [a]), B = u(
+  ), B = u(() => {
+    M(null), a?.(null);
+  }, [a]), C = u(
     (r, c) => {
       if (!y) return;
       r.stopPropagation();
@@ -140,36 +141,36 @@ const ot = ({
       y(o);
     },
     [y]
-  ), C = u(
+  ), N = u(
     (r, c, e) => {
       if (!T || r.target.closest(".xiping-subtitle-word"))
         return;
-      const n = r.currentTarget.getBoundingClientRect(), o = l.current?.getBoundingClientRect(), j = o !== void 0 ? new DOMRect(
+      const n = r.currentTarget.getBoundingClientRect(), o = l.current?.getBoundingClientRect(), k = o !== void 0 ? new DOMRect(
         n.left - o.left,
         n.top - o.top,
         n.width,
         n.height
-      ) : n, _ = {
+      ) : n, z = {
         type: "subtitle",
         entry: c,
         label: e,
-        rect: j,
+        rect: k,
         element: r.currentTarget
       };
-      T(_);
+      T(z);
     },
     [T]
-  ), N = u(
+  ), O = u(
     (r, c) => (e, t, n) => ({
-      onMouseEnter: (o) => b(o, {
+      onMouseEnter: (o) => x(o, {
         word: e,
         wordIndex: t,
         lineIndex: n,
         entry: r,
         label: c
       }),
-      onMouseLeave: x,
-      onClick: (o) => B(o, {
+      onMouseLeave: B,
+      onClick: (o) => C(o, {
         word: e,
         wordIndex: t,
         lineIndex: n,
@@ -177,8 +178,8 @@ const ot = ({
         label: c
       })
     }),
-    [b, x, B]
-  ), O = d && s ? /* @__PURE__ */ S(
+    [x, B, C]
+  ), P = d && s ? /* @__PURE__ */ S(
     "div",
     {
       className: "xiping-subtitle-player__hover-overlay",
@@ -188,38 +189,40 @@ const ot = ({
       },
       children: d(s)
     }
-  ) : null, P = !!(d || a);
-  return /* @__PURE__ */ z(
+  ) : null, j = !!(d || a);
+  return /* @__PURE__ */ F(
     "div",
     {
       ref: l,
-      className: K(
+      className: Q(
         "xiping-subtitle-player",
         m === "lyrics" ? "xiping-subtitle-player--lyrics" : "xiping-subtitle-player--current",
-        D
+        L
       ),
-      style: J,
+      style: A,
       children: [
         m === "current" && /* @__PURE__ */ S(
-          Q,
+          U,
           {
-            currentEntries: L,
-            wordHoverFactory: N,
-            enableWordHover: P,
-            overlayNode: O,
-            onSubtitleClick: C
+            currentEntries: W,
+            wordHoverFactory: O,
+            enableWordHover: j,
+            overlayNode: P,
+            onSubtitleClick: N,
+            textAlign: E
           }
         ),
         m === "lyrics" && /* @__PURE__ */ S(
-          U,
+          X,
           {
-            groupedEntriesByTime: W,
-            currentTime: f,
-            wordHoverFactory: N,
-            enableWordHover: P,
-            overlayNode: O,
+            groupedEntriesByTime: _,
+            currentTime: h,
+            wordHoverFactory: O,
+            enableWordHover: j,
+            overlayNode: P,
             containerRef: l,
-            onSubtitleClick: C
+            onSubtitleClick: N,
+            textAlign: E
           }
         )
       ]
@@ -227,6 +230,6 @@ const ot = ({
   );
 };
 export {
-  ot as SubtitlePlayer,
-  ot as default
+  ct as SubtitlePlayer,
+  ct as default
 };

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

@@ -0,0 +1 @@
+.xiping-text-animate{white-space:pre-wrap}.xiping-text-animate-segment{display:inline-block;white-space:pre}.xiping-text-animate-segment--line{display:block}