@xiping/react-components 1.0.52 → 1.0.54

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

@@ -1,52 +1,54 @@
-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";
+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 { 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 H = ({
-  subtitles: i,
-  currentTime: m,
-  mode: f = "current",
-  className: B = "",
+const ot = ({
+  subtitles: p,
+  currentTime: f,
+  mode: m = "current",
+  className: D = "",
   style: J,
   onWordHoverChange: a,
-  renderWordOverlay: h
+  renderWordOverlay: d,
+  onWordClick: y,
+  onSubtitleClick: T
 }) => {
-  const l = u(
-    () => Array.isArray(i) ? i : [i],
-    [i]
-  ), y = O(null), [c, x] = j(null), [g, E] = j([]);
-  _(() => {
+  const i = h(
+    () => Array.isArray(p) ? p : [p],
+    [p]
+  ), l = F(null), [s, E] = k(null), [R, M] = k([]);
+  G(() => {
     let r = !0;
-    async function s() {
+    async function c() {
       try {
-        const t = await Promise.all(
-          l.map(async (e) => {
+        const e = await Promise.all(
+          i.map(async (t) => {
             try {
-              const n = e.language || "zh", o = e.type === "srt" ? await k(e.content, n) : await z(e.content, n);
+              const n = t.language || "zh", o = t.type === "srt" ? await V(t.content, n) : await q(t.content, n);
               return {
                 entries: JSON.parse(o),
-                label: e.label
+                label: t.label
               };
             } catch (n) {
               return console.error("字幕解析失败:", n), {
-                entries: e.type === "srt" ? S(e.content) : v(e.content),
-                label: e.label
+                entries: t.type === "srt" ? w(t.content) : v(t.content),
+                label: t.label
               };
             }
           })
         );
-        r && E(t);
-      } catch (t) {
-        if (console.error("加载字幕失败:", t), r) {
-          const e = l.map((n) => {
+        r && M(e);
+      } catch (e) {
+        if (console.error("加载字幕失败:", e), r) {
+          const t = i.map((n) => {
             try {
               return {
-                entries: n.type === "srt" ? S(n.content) : v(n.content),
+                entries: n.type === "srt" ? w(n.content) : v(n.content),
                 label: n.label
               };
             } catch (o) {
@@ -56,35 +58,35 @@ const H = ({
               };
             }
           });
-          E(e);
+          M(t);
         }
       }
     }
-    return s(), () => {
+    return c(), () => {
       r = !1;
     };
-  }, [l]);
-  const p = u(() => g.length > 0 ? g : l.map((r) => {
+  }, [i]);
+  const g = h(() => R.length > 0 ? R : i.map((r) => {
     try {
       return {
-        entries: r.type === "srt" ? S(r.content) : v(r.content),
+        entries: r.type === "srt" ? w(r.content) : v(r.content),
         label: r.label
       };
-    } catch (s) {
-      return console.error("字幕解析失败:", s), {
+    } catch (c) {
+      return console.error("字幕解析失败:", c), {
         entries: [],
         label: r.label
       };
     }
-  }), [g, l]), L = u(() => p.map(({ entries: r, label: s }) => ({
-    entry: G(r, m),
-    label: s,
+  }), [R, i]), L = h(() => g.map(({ entries: r, label: c }) => ({
+    entry: X(r, f),
+    label: c,
     entries: r
     // 保留所有条目用于歌词模式
-  })), [p, m]), P = u(() => {
+  })), [g, f]), W = h(() => {
     const r = [];
-    p.forEach(({ entries: e, label: n }) => {
-      e.forEach((o) => {
+    g.forEach(({ entries: t, label: n }) => {
+      t.forEach((o) => {
         r.push({
           entry: o,
           label: n,
@@ -92,86 +94,132 @@ const H = ({
           endTime: A(o.endTime)
         });
       });
-    }), r.sort((e, n) => e.startTime - n.startTime);
-    const s = [];
-    let t = [];
-    for (const e of r)
-      if (t.length === 0)
-        t.push(e);
+    }), r.sort((t, n) => t.startTime - n.startTime);
+    const c = [];
+    let e = [];
+    for (const t of r)
+      if (e.length === 0)
+        e.push(t);
       else {
-        const n = t[t.length - 1];
-        e.startTime <= n.endTime ? t.push(e) : (s.push(t), t = [e]);
+        const n = e[e.length - 1];
+        t.startTime <= n.endTime ? e.push(t) : (c.push(e), e = [t]);
       }
-    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,
+    return e.length > 0 && c.push(e), c;
+  }, [g]), b = u(
+    (r, c) => {
+      const e = r.currentTarget.getBoundingClientRect(), t = l.current?.getBoundingClientRect(), n = t !== void 0 ? new DOMRect(
+        e.left - t.left,
+        e.top - t.top,
+        e.width,
+        e.height
+      ) : e, o = {
+        ...c,
         rect: n,
         element: r.currentTarget
       };
-      x(o), a?.(o);
+      E(o), a?.(o);
     },
     [a]
-  ), w = T(() => {
-    x(null), a?.(null);
-  }, [a]), M = T(
-    (r, s) => (t, e, n) => ({
-      onMouseEnter: (o) => R(o, {
-        word: t,
-        wordIndex: e,
+  ), x = u(() => {
+    E(null), a?.(null);
+  }, [a]), B = u(
+    (r, c) => {
+      if (!y) return;
+      r.stopPropagation();
+      const e = r.currentTarget.getBoundingClientRect(), t = l.current?.getBoundingClientRect(), n = t !== void 0 ? new DOMRect(
+        e.left - t.left,
+        e.top - t.top,
+        e.width,
+        e.height
+      ) : e, o = {
+        type: "word",
+        ...c,
+        rect: n,
+        element: r.currentTarget
+      };
+      y(o);
+    },
+    [y]
+  ), C = 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(
+        n.left - o.left,
+        n.top - o.top,
+        n.width,
+        n.height
+      ) : n, _ = {
+        type: "subtitle",
+        entry: c,
+        label: e,
+        rect: j,
+        element: r.currentTarget
+      };
+      T(_);
+    },
+    [T]
+  ), N = u(
+    (r, c) => (e, t, n) => ({
+      onMouseEnter: (o) => b(o, {
+        word: e,
+        wordIndex: t,
         lineIndex: n,
         entry: r,
-        label: s
+        label: c
       }),
-      onMouseLeave: w
+      onMouseLeave: x,
+      onClick: (o) => B(o, {
+        word: e,
+        wordIndex: t,
+        lineIndex: n,
+        entry: r,
+        label: c
+      })
     }),
-    [R, w]
-  ), b = h && c ? /* @__PURE__ */ d(
+    [b, x, B]
+  ), O = d && s ? /* @__PURE__ */ S(
     "div",
     {
       className: "xiping-subtitle-player__hover-overlay",
       style: {
-        left: c.rect.x + c.rect.width / 2,
-        top: c.rect.y + c.rect.height
+        left: s.rect.x + s.rect.width / 2,
+        top: s.rect.y + s.rect.height
       },
-      children: h(c)
+      children: d(s)
     }
-  ) : null, N = !!(h || a);
-  return /* @__PURE__ */ W(
+  ) : null, P = !!(d || a);
+  return /* @__PURE__ */ z(
     "div",
     {
-      ref: y,
-      className: C(
+      ref: l,
+      className: K(
         "xiping-subtitle-player",
-        f === "lyrics" ? "xiping-subtitle-player--lyrics" : "xiping-subtitle-player--current",
-        B
+        m === "lyrics" ? "xiping-subtitle-player--lyrics" : "xiping-subtitle-player--current",
+        D
       ),
       style: J,
       children: [
-        f === "current" && /* @__PURE__ */ d(
-          D,
+        m === "current" && /* @__PURE__ */ S(
+          Q,
           {
             currentEntries: L,
-            wordHoverFactory: M,
-            enableWordHover: N,
-            overlayNode: b
+            wordHoverFactory: N,
+            enableWordHover: P,
+            overlayNode: O,
+            onSubtitleClick: C
           }
         ),
-        f === "lyrics" && /* @__PURE__ */ d(
-          F,
+        m === "lyrics" && /* @__PURE__ */ S(
+          U,
           {
-            groupedEntriesByTime: P,
-            currentTime: m,
-            wordHoverFactory: M,
-            enableWordHover: N,
-            overlayNode: b,
-            containerRef: y
+            groupedEntriesByTime: W,
+            currentTime: f,
+            wordHoverFactory: N,
+            enableWordHover: P,
+            overlayNode: O,
+            containerRef: l,
+            onSubtitleClick: C
           }
         )
       ]
@@ -179,6 +227,6 @@ const H = ({
   );
 };
 export {
-  H as SubtitlePlayer,
-  H as default
+  ot as SubtitlePlayer,
+  ot as default
 };

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

@@ -18,6 +18,7 @@ export declare function getCurrentSubtitleEntry(entries: SubtitleEntry[], curren
 export type WordHoverHandlerFactory = (word: string, wordIndex: number, lineIndex: number) => {
     onMouseEnter: React.MouseEventHandler<HTMLSpanElement>;
     onMouseLeave: React.MouseEventHandler<HTMLSpanElement>;
+    onClick?: React.MouseEventHandler<HTMLSpanElement>;
 } | undefined;
 /**
  * 将文本按照分词结果分割并渲染，并返回消耗到的分词下标

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

@@ -24,28 +24,29 @@ function T(t, e, n, r, a) {
   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)
+    const c = e[o], f = t.substring(i).indexOf(c);
+    if (f === -1)
       return {
         nodes: s.length > 0 ? s : t,
         nextWordIndex: o
       };
-    const u = i + l;
+    const u = i + f;
     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);
+    const l = a?.(c, o, r);
     if (s.push(
       /* @__PURE__ */ d(
         "span",
         {
           className: "xiping-subtitle-word",
           "data-word": c,
-          onMouseEnter: f?.onMouseEnter,
-          onMouseLeave: f?.onMouseLeave,
+          onMouseEnter: l?.onMouseEnter,
+          onMouseLeave: l?.onMouseLeave,
+          onClick: l?.onClick,
           children: c
         },
         `word-${r}-${o}`