@xiping/react-components 1.0.52 → 1.0.54

package/dist/es/components/image-compare/ImageCompare.js

@@ -1,85 +1,104 @@
-import { jsxs as R, jsx as s } from "react/jsx-runtime";
-import y from "clsx";
-import { useState as d, useRef as I, useCallback as t, useEffect as N } from "react";
-const T = (i, o) => {
-  let n;
-  return function(...l) {
-    n || (i.apply(this, l), n = !0, setTimeout(() => n = !1, o));
-  };
-}, P = (i) => {
-  const { originalImage: o, modifiedImage: n, className: l } = i, [h, v] = d(50), [a, g] = d(!1), [w, b] = d(16 / 9), c = I(null), f = t(
-    (e) => {
-      if (!a || !c.current) return;
-      const p = c.current.getBoundingClientRect(), x = (e - p.left) / p.width * 100;
-      v(Math.min(100, Math.max(0, x)));
-    },
-    [a]
-  ), r = t(
-    T((e) => f(e), 16),
-    [f]
-  ), M = t((e) => {
-    r(e.clientX);
-  }, [r]), k = t((e) => {
-    r(e.touches[0].clientX);
-  }, [r]), m = t(() => {
-    g(!0);
-  }, []), u = t(() => {
-    g(!1);
-  }, []);
-  return N(() => {
+import { jsxs as j, jsx as t } from "react/jsx-runtime";
+import F from "clsx";
+import { useState as E, useRef as i, useCallback as a, useEffect as y, useMemo as w } from "react";
+/* empty css                 */
+const q = (N) => {
+  const {
+    originalImage: c,
+    modifiedImage: b,
+    className: S,
+    dividerWidth: l = 1,
+    originalLabel: I = "原图",
+    modifiedLabel: P = "处理过的图"
+  } = N, [s, $] = E(50), [x, A] = E(16 / 9), h = i(null), u = i(!1), o = i(null), d = i(null), n = i(null), k = a((e) => {
+    if (!h.current) return;
+    (!d.current || !u.current) && (d.current = h.current.getBoundingClientRect());
+    const r = d.current, g = (e - r.left) / r.width * 100, p = Math.min(100, Math.max(0, g));
+    $(p);
+  }, []), m = a((e) => {
+    u.current && (o.current !== null && cancelAnimationFrame(o.current), o.current = requestAnimationFrame(() => {
+      k(e);
+    }));
+  }, [k]), M = a((e) => {
+    m(e.clientX);
+  }, [m]), R = a((e) => {
+    e.touches.length > 0 && m(e.touches[0].clientX);
+  }, [m]), L = a(() => {
+    u.current = !0, d.current = null;
+    const e = (f) => M(f), r = (f) => R(f), v = () => {
+      u.current = !1, o.current !== null && (cancelAnimationFrame(o.current), o.current = null), n.current && (n.current(), n.current = null);
+    }, g = () => v(), p = () => v();
+    window.addEventListener("mousemove", e), window.addEventListener("touchmove", r, { passive: !1 }), window.addEventListener("mouseup", g), window.addEventListener("touchend", p);
+    const T = () => {
+      window.removeEventListener("mousemove", e), window.removeEventListener("touchmove", r), window.removeEventListener("mouseup", g), window.removeEventListener("touchend", p);
+    };
+    n.current = T;
+  }, [M, R]);
+  y(() => () => {
+    n.current && (n.current(), n.current = null);
+  }, []), y(() => {
     const e = new Image();
     e.onload = () => {
-      b(e.width / e.height);
-    }, e.src = o;
-  }, [o]), /* @__PURE__ */ R(
+      A(e.width / e.height);
+    }, e.src = c;
+  }, [c]);
+  const C = w(
+    () => ({
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "top left",
+      backgroundImage: `url(${c})`,
+      backgroundSize: "contain",
+      aspectRatio: x
+    }),
+    [c, x]
+  ), D = w(
+    () => ({
+      width: `${s}%`,
+      backgroundImage: `url(${b})`,
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "top left",
+      backgroundSize: "auto 100%"
+    }),
+    [s, b]
+  ), G = w(
+    () => ({
+      left: `${s}%`,
+      transform: "translateX(-50%)",
+      width: typeof l == "number" ? `${l}px` : l
+    }),
+    [s, l]
+  );
+  return /* @__PURE__ */ j(
     "div",
     {
-      ref: c,
-      className: y("relative select-none overflow-hidden w-full", l),
-      style: {
-        backgroundRepeat: "no-repeat",
-        backgroundPosition: "top left",
-        backgroundImage: `url(${o})`,
-        backgroundSize: "contain",
-        aspectRatio: w
-      },
-      onMouseMove: a ? M : void 0,
-      onTouchMove: a ? k : void 0,
-      onMouseUp: u,
-      onMouseLeave: u,
-      onTouchEnd: u,
+      ref: h,
+      className: F("xiping-image-compare-container", S),
+      style: C,
       children: [
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ t("div", { className: "xiping-image-compare-label xiping-image-compare-label-original", children: I }),
+        /* @__PURE__ */ t(
           "div",
           {
-            className: "absolute inset-0 h-full overflow-hidden",
-            style: {
-              width: `${h}%`,
-              backgroundImage: `url(${n})`,
-              backgroundRepeat: "no-repeat",
-              backgroundPosition: "top left",
-              backgroundSize: "auto 100%"
-            }
+            className: "xiping-image-compare-overlay",
+            style: D,
+            children: /* @__PURE__ */ t("div", { className: "xiping-image-compare-label xiping-image-compare-label-modified", children: P })
           }
         ),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ t(
           "div",
           {
-            className: "absolute top-0 bottom-0 w-1 bg-white cursor-ew-resize",
-            style: {
-              left: `${h}%`,
-              transform: "translateX(-50%)"
-            },
-            onMouseDown: m,
-            onTouchStart: m,
-            children: /* @__PURE__ */ s("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-white shadow-lg flex items-center justify-center", children: /* @__PURE__ */ s(
+            className: "xiping-image-compare-divider",
+            style: G,
+            onMouseDown: L,
+            onTouchStart: L,
+            children: /* @__PURE__ */ t("div", { className: "xiping-image-compare-divider-button", children: /* @__PURE__ */ t(
               "svg",
               {
-                className: "w-6 h-6 text-gray-600",
+                className: "xiping-image-compare-divider-icon",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ s(
+                children: /* @__PURE__ */ t(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -97,5 +116,5 @@ const T = (i, o) => {
   );
 };
 export {
-  P as default
+  q as default
 };

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

@@ -13,6 +13,8 @@ export interface CurrentModeProps {
     enableWordHover: boolean;
     /** 悬停覆盖层节点 */
     overlayNode: React.ReactNode;
+    /** 整条字幕点击处理器 */
+    onSubtitleClick?: (event: React.MouseEvent<HTMLDivElement>, entry: SubtitleEntry, label?: string) => void;
 }
 /**
  * 当前模式组件：只显示当前时间对应的字幕

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

@@ -1,40 +1,43 @@
-import { jsxs as u, Fragment as m, jsx as e } from "react/jsx-runtime";
-import { renderTextWithWords as h } from "./utils.js";
-const g = ({
-  currentEntries: t,
-  wordHoverFactory: o,
-  enableWordHover: l,
-  overlayNode: p
-}) => t.some(({ entry: i }) => i !== null) ? /* @__PURE__ */ u(m, { children: [
-  t.map(({ entry: i, label: s }, c) => i ? /* @__PURE__ */ u(
+import { jsxs as p, Fragment as h, jsx as r } from "react/jsx-runtime";
+import { renderTextWithWords as x } from "./utils.js";
+const N = ({
+  currentEntries: a,
+  wordHoverFactory: u,
+  enableWordHover: d,
+  overlayNode: c,
+  onSubtitleClick: t
+}) => a.some(({ entry: i }) => i !== null) ? /* @__PURE__ */ p(h, { children: [
+  a.map(({ entry: i, label: s }, m) => i ? /* @__PURE__ */ p(
     "div",
     {
       className: "xiping-subtitle-player__item",
       "data-label": s || void 0,
+      onClick: t ? (e) => t(e, i, s) : void 0,
+      style: t ? { cursor: "pointer" } : void 0,
       children: [
-        s && /* @__PURE__ */ e("span", { className: "xiping-subtitle-player__label", children: s }),
-        /* @__PURE__ */ e("div", { className: "xiping-subtitle-player__text", children: (() => {
-          let a = 0;
+        s && /* @__PURE__ */ r("span", { className: "xiping-subtitle-player__label", children: s }),
+        /* @__PURE__ */ r("div", { className: "xiping-subtitle-player__text", children: (() => {
+          let e = 0;
           return i.text.split(`
-`).map((n, r) => {
+`).map((n, l) => {
             if (!i.words || i.words.length === 0)
-              return /* @__PURE__ */ e("div", { className: "xiping-subtitle-player__line", children: n }, r);
-            const d = h(
+              return /* @__PURE__ */ r("div", { className: "xiping-subtitle-player__line", children: n }, l);
+            const o = x(
               n,
               i.words,
-              a,
-              r,
-              l ? o(i, s) : void 0
+              e,
+              l,
+              d ? u(i, s) : void 0
             );
-            return a = d.nextWordIndex, /* @__PURE__ */ e("div", { className: "xiping-subtitle-player__line", children: d.nodes }, r);
+            return e = o.nextWordIndex, /* @__PURE__ */ r("div", { className: "xiping-subtitle-player__line", children: o.nodes }, l);
           });
         })() })
       ]
     },
-    c
+    m
   ) : null),
-  l && /* @__PURE__ */ e("div", { className: "xiping-subtitle-player__hover-layer", children: p })
+  d && /* @__PURE__ */ r("div", { className: "xiping-subtitle-player__hover-layer", children: c })
 ] }) : null;
 export {
-  g as CurrentMode
+  N as CurrentMode
 };

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

@@ -19,6 +19,8 @@ export interface LyricsModeProps {
     overlayNode: React.ReactNode;
     /** 容器引用，用于滚动 */
     containerRef: React.RefObject<HTMLDivElement | null>;
+    /** 整条字幕点击处理器 */
+    onSubtitleClick?: (event: React.MouseEvent<HTMLDivElement>, entry: SubtitleEntry, label?: string) => void;
 }
 /**
  * 歌词模式组件：显示全部字幕并高亮当前字幕

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

@@ -1,67 +1,70 @@
-import { jsxs as f, Fragment as S, jsx as i } from "react/jsx-runtime";
-import { useRef as H, useEffect as j } from "react";
-import F from "clsx";
-import { secondsToTimeString as W, renderTextWithWords as $ } from "./utils.js";
-const M = ({
-  groupedEntriesByTime: v,
-  currentTime: l,
-  wordHoverFactory: b,
-  enableWordHover: m,
-  overlayNode: y,
-  containerRef: o
+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
 }) => {
-  const n = H(null);
-  return j(() => {
-    if (n.current && o.current) {
-      const s = o.current, r = n.current, c = r.offsetTop, a = s.clientHeight, t = r.clientHeight, e = c - a / 2 + t / 2;
-      s.scrollTo({
-        top: 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;
+      e.scrollTo({
+        top: i,
         behavior: "smooth"
       });
     }
-  }, [l, o]), /* @__PURE__ */ f(S, { children: [
-    v.map((s, r) => {
-      const c = s[0]?.startTime ?? 0, a = W(c);
-      return /* @__PURE__ */ i("div", { className: "xiping-subtitle-player__group", children: s.map(({ entry: t, label: e, startTime: N, endTime: d }, u) => {
-        const _ = l >= N && l <= d, T = l > d, w = u === 0;
-        let g = 0;
-        return /* @__PURE__ */ f(
+  }, [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",
           {
-            ref: _ ? n : null,
-            className: F(
+            ref: h ? a : null,
+            className: W(
               "xiping-subtitle-player__item",
               {
-                "xiping-subtitle-player__item--active": _,
-                "xiping-subtitle-player__item--past": T
+                "xiping-subtitle-player__item--active": h,
+                "xiping-subtitle-player__item--past": w
               }
             ),
-            "data-label": e || void 0,
+            "data-label": i || void 0,
+            onClick: c ? (l) => c(l, t, i) : void 0,
+            style: c ? { cursor: "pointer" } : void 0,
             children: [
-              w && /* @__PURE__ */ i("span", { className: "xiping-subtitle-player__time", children: a }),
-              e && /* @__PURE__ */ i("span", { className: "xiping-subtitle-player__label", children: e }),
-              /* @__PURE__ */ i("div", { className: "xiping-subtitle-player__text", children: t.text.split(`
-`).map((h, p) => {
+              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__ */ i("div", { className: "xiping-subtitle-player__line", children: h }, p);
-                const x = $(
-                  h,
+                  return /* @__PURE__ */ s("div", { className: "xiping-subtitle-player__line", children: l }, d);
+                const f = A(
+                  l,
                   t.words,
-                  g,
-                  p,
-                  m ? b(t, e) : void 0
+                  x,
+                  d,
+                  u ? N(t, i) : void 0
                 );
-                return g = x.nextWordIndex, /* @__PURE__ */ i("div", { className: "xiping-subtitle-player__line", children: x.nodes }, p);
+                return x = f.nextWordIndex, /* @__PURE__ */ s("div", { className: "xiping-subtitle-player__line", children: f.nodes }, d);
               }) })
             ]
           },
-          `${r}-${u}`
+          `${r}-${g}`
         );
       }) }, r);
     }),
-    m && /* @__PURE__ */ i("div", { className: "xiping-subtitle-player__hover-layer", children: y })
+    u && /* @__PURE__ */ s("div", { className: "xiping-subtitle-player__hover-layer", children: b })
   ] });
 };
 export {
-  M as LyricsMode
+  P as LyricsMode
 };

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

@@ -26,6 +26,7 @@ export interface SubtitlePlayerProps {
     /**
      * 分词 hover 状态回调，由外部决定如何处理（比如请求第三方接口、展示弹窗等）
      * 传入 null 表示 hover 结束
+     * target.entry 包含完整的字幕条目数据（JSON 格式的数据项）
      */
     onWordHoverChange?: (target: HoverTarget | null) => void;
     /**
@@ -33,16 +34,49 @@ export interface SubtitlePlayerProps {
      * 建议将数据请求放到父组件，通过该函数返回需要展示的内容
      */
     renderWordOverlay?: (target: HoverTarget) => React.ReactNode;
+    /**
+     * 单词点击回调
+     * target.entry 包含完整的字幕条目数据（JSON 格式的数据项）
+     */
+    onWordClick?: (target: WordClickTarget) => void;
+    /**
+     * 整条字幕点击回调
+     * target.entry 包含完整的字幕条目数据（JSON 格式的数据项）
+     */
+    onSubtitleClick?: (target: SubtitleClickTarget) => void;
 }
 export interface HoverTarget {
     word: string;
     wordIndex: number;
     lineIndex: number;
+    /** 完整的字幕条目数据（JSON 格式的数据项） */
+    entry: SubtitleEntry;
+    label?: string;
+    rect: DOMRect;
+    element: HTMLElement;
+}
+/** 点击目标类型：单词或整条字幕 */
+export type ClickTargetType = "word" | "subtitle";
+export interface WordClickTarget {
+    type: "word";
+    word: string;
+    wordIndex: number;
+    lineIndex: number;
+    /** 完整的字幕条目数据（JSON 格式的数据项） */
+    entry: SubtitleEntry;
+    label?: string;
+    rect: DOMRect;
+    element: HTMLElement;
+}
+export interface SubtitleClickTarget {
+    type: "subtitle";
+    /** 完整的字幕条目数据（JSON 格式的数据项） */
     entry: SubtitleEntry;
     label?: string;
     rect: DOMRect;
     element: HTMLElement;
 }
+export type ClickTarget = WordClickTarget | SubtitleClickTarget;
 /**
  * 字幕播放组件
  * 支持 SRT 和 WebVTT 格式，可以同时显示多个字幕进行对照