@xiping/react-components 1.0.53 → 1.0.55

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

@@ -1,7 +1,8 @@
-import { jsxs as G, jsx as n } from "react/jsx-runtime";
-import T from "clsx";
-import { useState as L, useRef as s, useCallback as a, useEffect as E, useMemo as g } from "react";
-const W = (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,
@@ -9,39 +10,39 @@ const W = (N) => {
     dividerWidth: l = 1,
     originalLabel: I = "原图",
     modifiedLabel: P = "处理过的图"
-  } = N, [i, z] = L(50), [x, $] = L(16 / 9), p = s(null), u = s(!1), o = s(null), d = s(null), t = s(null), k = a((e) => {
-    if (!p.current) return;
-    (!d.current || !u.current) && (d.current = p.current.getBoundingClientRect());
-    const r = d.current, h = (e - r.left) / r.width * 100, f = Math.min(100, Math.max(0, h));
-    z(f);
+  } = 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]), y = a((e) => {
+  }, [k]), M = a((e) => {
     m(e.clientX);
-  }, [m]), M = a((e) => {
+  }, [m]), R = a((e) => {
     e.touches.length > 0 && m(e.touches[0].clientX);
-  }, [m]), R = a(() => {
+  }, [m]), L = a(() => {
     u.current = !0, d.current = null;
-    const e = (w) => y(w), r = (w) => M(w), v = () => {
-      u.current = !1, o.current !== null && (cancelAnimationFrame(o.current), o.current = null), t.current && (t.current(), t.current = null);
-    }, h = () => v(), f = () => v();
-    window.addEventListener("mousemove", e), window.addEventListener("touchmove", r, { passive: !1 }), window.addEventListener("mouseup", h), window.addEventListener("touchend", f);
-    const D = () => {
-      window.removeEventListener("mousemove", e), window.removeEventListener("touchmove", r), window.removeEventListener("mouseup", h), window.removeEventListener("touchend", f);
+    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);
     };
-    t.current = D;
-  }, [y, M]);
-  E(() => () => {
-    t.current && (t.current(), t.current = null);
-  }, []), E(() => {
+    n.current = T;
+  }, [M, R]);
+  y(() => () => {
+    n.current && (n.current(), n.current = null);
+  }, []), y(() => {
     const e = new Image();
     e.onload = () => {
-      $(e.width / e.height);
+      A(e.width / e.height);
     }, e.src = c;
   }, [c]);
-  const j = g(
+  const C = w(
     () => ({
       backgroundRepeat: "no-repeat",
       backgroundPosition: "top left",
@@ -50,54 +51,54 @@ const W = (N) => {
       aspectRatio: x
     }),
     [c, x]
-  ), A = g(
+  ), D = w(
     () => ({
-      width: `${i}%`,
+      width: `${s}%`,
       backgroundImage: `url(${b})`,
       backgroundRepeat: "no-repeat",
       backgroundPosition: "top left",
       backgroundSize: "auto 100%"
     }),
-    [i, b]
-  ), C = g(
+    [s, b]
+  ), G = w(
     () => ({
-      left: `${i}%`,
+      left: `${s}%`,
       transform: "translateX(-50%)",
       width: typeof l == "number" ? `${l}px` : l
     }),
-    [i, l]
+    [s, l]
   );
-  return /* @__PURE__ */ G(
+  return /* @__PURE__ */ j(
     "div",
     {
-      ref: p,
-      className: T("relative select-none overflow-hidden w-full", S),
-      style: j,
+      ref: h,
+      className: F("xiping-image-compare-container", S),
+      style: C,
       children: [
-        /* @__PURE__ */ n("div", { className: "absolute top-4 left-4 px-3 py-1.5 bg-black/60 text-white text-sm font-medium rounded backdrop-blur-sm z-10", children: I }),
-        /* @__PURE__ */ n(
+        /* @__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: A,
-            children: /* @__PURE__ */ n("div", { className: "absolute top-4 right-4 px-3 py-1.5 bg-black/60 text-white text-sm font-medium rounded backdrop-blur-sm z-10", children: P })
+            className: "xiping-image-compare-overlay",
+            style: D,
+            children: /* @__PURE__ */ t("div", { className: "xiping-image-compare-label xiping-image-compare-label-modified", children: P })
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ t(
           "div",
           {
-            className: "absolute top-0 bottom-0 bg-white cursor-ew-resize",
-            style: C,
-            onMouseDown: R,
-            onTouchStart: R,
-            children: /* @__PURE__ */ n("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__ */ n(
+            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__ */ n(
+                children: /* @__PURE__ */ t(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -115,5 +116,5 @@ const W = (N) => {
   );
 };
 export {
-  W as default
+  q as default
 };

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

@@ -30,13 +30,10 @@ const P = ({
           "div",
           {
             ref: h ? a : null,
-            className: W(
-              "xiping-subtitle-player__item",
-              {
-                "xiping-subtitle-player__item--active": h,
-                "xiping-subtitle-player__item--past": w
-              }
-            ),
+            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,
@@ -46,7 +43,14 @@ const P = ({
               /* @__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);
+                  return /* @__PURE__ */ s(
+                    "div",
+                    {
+                      className: "xiping-subtitle-player__line",
+                      children: l
+                    },
+                    d
+                  );
                 const f = A(
                   l,
                   t.words,
@@ -54,7 +58,14 @@ const P = ({
                   d,
                   u ? N(t, i) : void 0
                 );
-                return x = f.nextWordIndex, /* @__PURE__ */ s("div", { className: "xiping-subtitle-player__line", children: f.nodes }, d);
+                return x = f.nextWordIndex, /* @__PURE__ */ s(
+                  "div",
+                  {
+                    className: "xiping-subtitle-player__line",
+                    children: f.nodes
+                  },
+                  d
+                );
               }) })
             ]
           },

package/dist/es/components/video-subtitle-player/VideoSubtitlePlayer.d.ts

@@ -16,7 +16,7 @@ export interface VideoSubtitlePlayerProps {
 }
 /**
  * 视频字幕播放器组件
- * 左侧：上部分16:9视频播放器，下部分字幕显示
+ * 左侧：上部分视频播放器（填充模式），下部分字幕显示
  * 右侧：字幕详情（单词/短语的发音、解释等）
  */
 export declare const VideoSubtitlePlayer: React.FC<VideoSubtitlePlayerProps>;

package/dist/es/components/video-subtitle-player/VideoSubtitlePlayer.js

@@ -1,125 +1,128 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useRef as b, useEffect as c, useCallback as C } from "react";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { useRef as N, useEffect as u, useCallback as H } from "react";
 import I from "xgplayer";
 /* empty css                                                                                               */
-import { SubtitlePlayer as R } from "../subtitle-player/SubtitlePlayer.js";
-import { useVideoSubtitleStore as j } from "./useVideoSubtitleStore.js";
+import { PanelGroup as z, Panel as o, PanelResizeHandle as S } from "react-resizable-panels";
+import { SubtitlePlayer as j } from "../subtitle-player/SubtitlePlayer.js";
+import { useVideoSubtitleStore as D } from "./useVideoSubtitleStore.js";
 /* empty css                        */
-const z = ({
-  videoUrl: u,
-  subtitles: o,
-  poster: m,
-  className: N = "",
+const q = ({
+  videoUrl: m,
+  subtitles: p,
+  poster: v,
+  className: P = "",
   style: w,
-  onFetchDetail: p
+  onFetchDetail: c
 }) => {
-  const n = b(null), d = b(null), {
+  const n = N(null), d = N(null), {
     currentTime: r,
-    isPlaying: D,
-    setCurrentTime: v,
+    isPlaying: E,
+    setCurrentTime: _,
     setIsPlaying: s,
-    setSubtitles: _,
+    setSubtitles: h,
     currentDetail: l,
-    isLoadingDetail: P,
+    isLoadingDetail: T,
     fetchDetail: y
-  } = j();
-  c(() => {
-    _(o);
-  }, [o, _]), c(() => {
+  } = D();
+  u(() => {
+    h(p);
+  }, [p, h]), u(() => {
     if (!n.current) return;
-    const t = `xiping-video-subtitle-player-${Date.now()}`;
-    n.current && (n.current.id = t);
+    const a = `xiping-video-subtitle-player-${Date.now()}`;
+    n.current && (n.current.id = a);
     const i = new I({
-      id: t,
-      url: u,
-      poster: m,
+      id: a,
+      url: m,
+      poster: v,
       autoplay: !1,
-      fluid: !0,
+      fluid: !1,
       width: "100%",
       height: "100%",
       controls: !0
     });
     d.current = i;
-    const h = () => {
-      const T = i.currentTime || 0;
-      v(T);
-    }, f = () => {
-      s(!0);
+    const f = () => {
+      const R = i.currentTime || 0;
+      _(R);
     }, x = () => {
-      s(!1);
+      s(!0);
     }, g = () => {
       s(!1);
+    }, b = () => {
+      s(!1);
     };
-    return i.on("timeupdate", h), i.on("play", f), i.on("pause", x), i.on("ended", g), () => {
-      i.off("timeupdate", h), i.off("play", f), i.off("pause", x), i.off("ended", g), i.destroy(), d.current = null;
+    return i.on("timeupdate", f), i.on("play", x), i.on("pause", g), i.on("ended", b), () => {
+      i.off("timeupdate", f), i.off("play", x), i.off("pause", g), i.off("ended", b), i.destroy(), d.current = null;
     };
-  }, [u, m, v, s]), c(() => {
+  }, [m, v, _, s]), u(() => {
     if (d.current) {
-      const t = d.current;
-      Math.abs(t.currentTime - r) > 0.5 && (t.currentTime = r);
+      const a = d.current;
+      Math.abs(a.currentTime - r) > 0.5 && (a.currentTime = r);
     }
   }, [r]);
-  const S = C(
-    async (t) => {
-      p ? await p(t) : await y(t);
+  const C = H(
+    async (a) => {
+      c ? await c(a) : await y(a);
     },
-    [p, y]
-  );
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      className: `xiping-video-subtitle-player ${N}`,
-      style: w,
-      children: [
-        /* @__PURE__ */ a("div", { className: "xiping-video-subtitle-player__left", children: [
-          /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__video-container", children: /* @__PURE__ */ e(
-            "div",
-            {
-              ref: n,
-              className: "xiping-video-subtitle-player__video"
-            }
-          ) }),
-          /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__subtitle-container", children: /* @__PURE__ */ e(
-            R,
-            {
-              subtitles: o,
-              currentTime: r,
-              mode: "current",
-              onWordHoverChange: S
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__right", children: /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail", children: P ? /* @__PURE__ */ a("div", { className: "xiping-video-subtitle-player__detail-loading", children: [
-          /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-loading-spinner" }),
-          /* @__PURE__ */ e("span", { children: "加载中..." })
-        ] }) : l ? /* @__PURE__ */ a("div", { className: "xiping-video-subtitle-player__detail-content", children: [
-          /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-word", children: l.word }),
-          l.pronunciation && /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-pronunciation", children: l.pronunciation }),
-          l.partOfSpeech && /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-pos", children: l.partOfSpeech }),
-          l.translation && /* @__PURE__ */ a("div", { className: "xiping-video-subtitle-player__detail-translation", children: [
-            /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-label", children: "中文翻译" }),
-            /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-text", children: l.translation })
-          ] }),
-          l.definition && /* @__PURE__ */ a("div", { className: "xiping-video-subtitle-player__detail-definition", children: [
-            /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-label", children: "英文解释" }),
-            /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-text", children: l.definition })
-          ] }),
-          l.examples && l.examples.length > 0 && /* @__PURE__ */ a("div", { className: "xiping-video-subtitle-player__detail-examples", children: [
-            /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-label", children: "例句" }),
-            l.examples.map((t, i) => /* @__PURE__ */ a("div", { className: "xiping-video-subtitle-player__detail-example", children: [
-              /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-example-en", children: t.sentence }),
-              /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-example-zh", children: t.translation })
-            ] }, i))
-          ] })
-        ] }) : /* @__PURE__ */ a("div", { className: "xiping-video-subtitle-player__detail-empty", children: [
-          /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-empty-icon", children: "📖" }),
-          /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-empty-text", children: "将鼠标悬停在字幕单词上查看详情" })
-        ] }) }) })
-      ]
-    }
+    [c, y]
   );
+  return /* @__PURE__ */ e("div", { className: `xiping-video-subtitle-player ${P}`, style: w, children: /* @__PURE__ */ t(z, { direction: "horizontal", children: [
+    /* @__PURE__ */ e(o, { defaultSize: 65, minSize: 40, children: /* @__PURE__ */ t(z, { direction: "vertical", children: [
+      /* @__PURE__ */ e(o, { defaultSize: 60, minSize: 30, children: /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__video-wrapper", children: /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__video-container", children: /* @__PURE__ */ e(
+        "div",
+        {
+          ref: n,
+          className: "xiping-video-subtitle-player__video"
+        }
+      ) }) }) }),
+      /* @__PURE__ */ e(S, { className: "xiping-video-subtitle-player__resize-handle xiping-video-subtitle-player__resize-handle--vertical" }),
+      /* @__PURE__ */ e(o, { defaultSize: 40, minSize: 20, children: /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__subtitle-container", children: /* @__PURE__ */ e(
+        j,
+        {
+          subtitles: p,
+          currentTime: r,
+          mode: "current",
+          onWordHoverChange: C
+        }
+      ) }) })
+    ] }) }),
+    /* @__PURE__ */ e(S, { className: "xiping-video-subtitle-player__resize-handle xiping-video-subtitle-player__resize-handle--horizontal" }),
+    /* @__PURE__ */ e(o, { defaultSize: 35, minSize: 25, maxSize: 50, children: /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__right", children: /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail", children: T ? /* @__PURE__ */ t("div", { className: "xiping-video-subtitle-player__detail-loading", children: [
+      /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-loading-spinner" }),
+      /* @__PURE__ */ e("span", { children: "加载中..." })
+    ] }) : l ? /* @__PURE__ */ t("div", { className: "xiping-video-subtitle-player__detail-content", children: [
+      /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-word", children: l.word }),
+      l.pronunciation && /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-pronunciation", children: l.pronunciation }),
+      l.partOfSpeech && /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-pos", children: l.partOfSpeech }),
+      l.translation && /* @__PURE__ */ t("div", { className: "xiping-video-subtitle-player__detail-translation", children: [
+        /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-label", children: "中文翻译" }),
+        /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-text", children: l.translation })
+      ] }),
+      l.definition && /* @__PURE__ */ t("div", { className: "xiping-video-subtitle-player__detail-definition", children: [
+        /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-label", children: "英文解释" }),
+        /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-text", children: l.definition })
+      ] }),
+      l.examples && l.examples.length > 0 && /* @__PURE__ */ t("div", { className: "xiping-video-subtitle-player__detail-examples", children: [
+        /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-label", children: "例句" }),
+        l.examples.map((a, i) => /* @__PURE__ */ t(
+          "div",
+          {
+            className: "xiping-video-subtitle-player__detail-example",
+            children: [
+              /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-example-en", children: a.sentence }),
+              /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-example-zh", children: a.translation })
+            ]
+          },
+          i
+        ))
+      ] })
+    ] }) : /* @__PURE__ */ t("div", { className: "xiping-video-subtitle-player__detail-empty", children: [
+      /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-empty-icon", children: "📖" }),
+      /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-empty-text", children: "将鼠标悬停在字幕单词上查看详情" })
+    ] }) }) }) })
+  ] }) });
 };
 export {
-  z as VideoSubtitlePlayer,
-  z as default
+  q as VideoSubtitlePlayer,
+  q as default
 };