@xiping/react-components 1.0.57 → 1.0.59

package/dist/es/components/txt-reader/TxtReader.js

@@ -7,10 +7,10 @@ const R = 16, S = 1.5, A = "normal", O = ({
   content: a,
   lineHeight: m = S,
   fontSize: p = R,
-  fontWeight: d = A,
-  className: g = "",
-  style: f = {},
-  onProgressChange: x,
+  fontWeight: g = A,
+  className: d = "",
+  style: x = {},
+  onProgressChange: f,
   initialScrollPosition: D,
   cacheKey: H,
   showTopProgress: u = !0,
@@ -23,7 +23,7 @@ const R = 16, S = 1.5, A = "normal", O = ({
     target: n
   }), i = I(() => (s.get() * 100).toFixed(2).replace(/\.0*$/, "")), F = L`${i}%`;
   return i.on("change", (_) => {
-    x?.(Number(_));
+    f?.(Number(_));
   }), /* @__PURE__ */ h(v, { children: [
     u && /* @__PURE__ */ t(
       l.div,
@@ -45,12 +45,12 @@ const R = 16, S = 1.5, A = "normal", O = ({
           "div",
           {
             ref: n,
-            className: r(e["xiping-content"], g),
+            className: r(e["xiping-content"], d),
             style: {
               fontSize: `${p}px`,
               lineHeight: m,
-              fontWeight: d,
-              ...f
+              fontWeight: g,
+              ...x
             },
             children: a
           }
@@ -71,6 +71,5 @@ const R = 16, S = 1.5, A = "normal", O = ({
   ] });
 };
 export {
-  O as TxtReader,
-  O as default
+  O as TxtReader
 };

package/dist/es/components/typing-animation/index.js

@@ -1,22 +1,22 @@
 "use client";
-import { jsx as T } from "react/jsx-runtime";
+import { jsx as d } from "react/jsx-runtime";
 import { motion as x } from "motion/react";
-import { useState as u, useRef as I, useEffect as a } from "react";
+import { useState as u, useRef as I, useEffect as m } from "react";
 import b from "clsx";
 import './index.css';/* empty css          */
 function S({
   children: r,
-  className: m,
-  duration: o = 100,
+  className: a,
+  duration: s = 100,
   delay: n = 0,
   as: l = "div",
   startOnView: i = !1,
   ...p
 }) {
-  const d = x.create(l, {
+  const g = x.create(l, {
     forwardMotionProps: !0
-  }), [g, v] = u(""), [c, f] = u(!1), s = I(null);
-  return a(() => {
+  }), [v, T] = u(""), [c, f] = u(!1), o = I(null);
+  return m(() => {
     if (!i) {
       const t = setTimeout(() => {
         f(!0);
@@ -31,27 +31,26 @@ function S({
       },
       { threshold: 0.1 }
     );
-    return s.current && e.observe(s.current), () => e.disconnect();
-  }, [n, i]), a(() => {
+    return o.current && e.observe(o.current), () => e.disconnect();
+  }, [n, i]), m(() => {
     if (!c) return;
     let e = 0;
     const t = setInterval(() => {
-      e < r.length ? (v(r.substring(0, e + 1)), e++) : clearInterval(t);
-    }, o);
+      e < r.length ? (T(r.substring(0, e + 1)), e++) : clearInterval(t);
+    }, s);
     return () => {
       clearInterval(t);
     };
-  }, [r, o, c]), /* @__PURE__ */ T(
-    d,
+  }, [r, s, c]), /* @__PURE__ */ d(
+    g,
     {
-      ref: s,
-      className: b("xiping-typing-animation", m),
+      ref: o,
+      className: b("xiping-typing-animation", a),
       ...p,
-      children: g
+      children: v
     }
   );
 }
 export {
-  S as TypingAnimation,
-  S as default
+  S as TypingAnimation
 };

package/dist/es/components/variable-proximity/index.css

@@ -1 +1 @@
-.xiping-variable-proximity{font-family:Roboto Flex,Noto Sans SC,PingFang SC,Microsoft YaHei,SimHei,sans-serif}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+.xiping-variable-proximity{font-family:Roboto Flex,Noto Sans SC,PingFang SC,Microsoft YaHei,SimHei,sans-serif}.xiping-variable-proximity__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

package/dist/es/components/variable-proximity/index.js

@@ -1,7 +1,7 @@
-import { jsxs as G, jsx as k } from "react/jsx-runtime";
-import { forwardRef as H, useRef as y, useMemo as N, useEffect as w } from "react";
-import { motion as J } from "motion/react";
-import K from "clsx";
+import { jsxs as U, jsx as k } from "react/jsx-runtime";
+import { forwardRef as G, useRef as y, useMemo as N, useEffect as w } from "react";
+import { motion as H } from "motion/react";
+import J from "clsx";
 import './index.css';/* empty css          */
 const l = {
   robotoFlex: !1,
@@ -16,7 +16,7 @@ function V(n) {
     return !0;
   }
 }
-function O() {
+function K() {
   if (l.loading || l.robotoFlex && l.notoSansSC) return;
   l.loading = !0;
   const n = V("Roboto Flex"), r = V("Noto Sans SC");
@@ -62,12 +62,12 @@ function O() {
   };
   d(0);
 }
-function Q(n = !0) {
+function O(n = !0) {
   w(() => {
-    n && typeof document < "u" && O();
+    n && typeof document < "u" && K();
   }, [n]);
 }
-function W(n) {
+function Q(n) {
   w(() => {
     let r;
     const i = () => {
@@ -76,7 +76,7 @@ function W(n) {
     return r = requestAnimationFrame(i), () => cancelAnimationFrame(r);
   }, [n]);
 }
-function Z(n) {
+function W(n) {
   const r = y({ x: 0, y: 0 });
   return w(() => {
     const i = (t, s) => {
@@ -94,7 +94,7 @@ function Z(n) {
     };
   }, [n]), r;
 }
-const _ = H(
+const Z = G(
   (n, r) => {
     const {
       label: i,
@@ -106,19 +106,19 @@ const _ = H(
       className: c = "",
       onClick: E,
       style: C,
-      fontFamily: g,
+      fontFamily: h,
       autoLoadFonts: P = !0,
       ...A
     } = n;
-    Q(P && !g);
-    const b = y([]), v = y([]), S = Z(t), x = y({
+    O(P && !h);
+    const b = y([]), v = y([]), S = W(t), x = y({
       x: null,
       y: null
     }), q = N(() => {
       const e = (o) => new Map(
         o.split(",").map((p) => p.trim()).map((p) => {
-          const [h, F] = p.split(" ");
-          return [h.replace(/['"]/g, ""), parseFloat(F)];
+          const [g, F] = p.split(" ");
+          return [g.replace(/['"]/g, ""), parseFloat(F)];
         })
       ), a = e(f), u = e(d);
       return Array.from(a.entries()).map(([o, p]) => ({
@@ -137,7 +137,7 @@ const _ = H(
           return a;
       }
     };
-    W(() => {
+    Q(() => {
       if (!t?.current) return;
       const { x: e, y: a } = S.current;
       if (x.current.x === e && x.current.y === a)
@@ -146,7 +146,7 @@ const _ = H(
       const u = t.current.getBoundingClientRect();
       b.current.forEach((o, p) => {
         if (!o) return;
-        const h = o.getBoundingClientRect(), F = h.left + h.width / 2 - u.left, Y = h.top + h.height / 2 - u.top, L = I(
+        const g = o.getBoundingClientRect(), F = g.left + g.width / 2 - u.left, Y = g.top + g.height / 2 - u.top, L = I(
           S.current.x,
           S.current.y,
           F,
@@ -156,9 +156,9 @@ const _ = H(
           o.style.fontVariationSettings = f;
           return;
         }
-        const z = $(L), M = q.map(({ axis: T, fromValue: R, toValue: D }) => {
-          const U = R + (D - R) * z;
-          return `'${T}' ${U}`;
+        const z = $(L), M = q.map(({ axis: T, fromValue: R, toValue: _ }) => {
+          const D = R + (_ - R) * z;
+          return `'${T}' ${D}`;
         }).join(", ");
         v.current[p] = M, o.style.fontVariationSettings = M;
       });
@@ -170,13 +170,13 @@ const _ = H(
     let B = 0;
     const X = N(() => {
       const e = { display: "inline", ...C };
-      return g && (e.fontFamily = g), e;
-    }, [g, C]);
-    return /* @__PURE__ */ G(
+      return h && (e.fontFamily = h), e;
+    }, [h, C]);
+    return /* @__PURE__ */ U(
       "span",
       {
         ref: r,
-        className: K("xiping-variable-proximity", c),
+        className: J("xiping-variable-proximity", c),
         onClick: E,
         style: X,
         ...A,
@@ -184,7 +184,7 @@ const _ = H(
           j.map((e, a) => {
             const u = B++;
             return /* @__PURE__ */ k(
-              J.span,
+              H.span,
               {
                 ref: (o) => {
                   b.current[u] = o;
@@ -199,14 +199,13 @@ const _ = H(
               a
             );
           }),
-          /* @__PURE__ */ k("span", { className: "sr-only", children: i })
+          /* @__PURE__ */ k("span", { className: "xiping-variable-proximity__sr-only", children: i })
         ]
       }
     );
   }
 );
-_.displayName = "VariableProximity";
+Z.displayName = "VariableProximity";
 export {
-  _ as VariableProximity,
-  _ as default
+  Z as VariableProximity
 };

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

@@ -1 +1 @@
-.xiping-video-subtitle-player{width:100%;height:100%;background:#1a1a1a;border-radius:8px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.xiping-video-subtitle-player__video-wrapper{width:100%;height:100%;background:#000;overflow:hidden}.xiping-video-subtitle-player__video-container{position:relative;width:100%;height:100%;background:#000;overflow:hidden}.xiping-video-subtitle-player__video{position:absolute;top:0;left:0;width:100%;height:100%;padding:0}.xiping-video-subtitle-player__video-container .xgplayer{width:100%!important;height:100%!important}.xiping-video-subtitle-player__video-container .xgplayer video{-o-object-fit:fill!important;object-fit:fill!important}.xiping-video-subtitle-player__subtitle-container{width:100%;height:100%;padding:20px;overflow-y:auto;background:#0000004d}.xiping-video-subtitle-player__resize-handle--horizontal{position:relative;width:2px;background:#ffffff1a;cursor:col-resize;transition:background .2s ease;flex-shrink:0}.xiping-video-subtitle-player__resize-handle--horizontal:hover{background:#fbbf2480}.xiping-video-subtitle-player__resize-handle--horizontal:active{background:#fbbf24cc}.xiping-video-subtitle-player__resize-handle--horizontal:before{content:"";position:absolute;inset:0 -4px;cursor:col-resize}.xiping-video-subtitle-player__resize-handle--vertical{position:relative;height:2px;background:#ffffff1a;cursor:row-resize;transition:background .2s ease;flex-shrink:0}.xiping-video-subtitle-player__resize-handle--vertical:hover{background:#fbbf2480}.xiping-video-subtitle-player__resize-handle--vertical:active{background:#fbbf24cc}.xiping-video-subtitle-player__resize-handle--vertical:before{content:"";position:absolute;inset:-4px 0;cursor:row-resize}.xiping-video-subtitle-player__right{width:100%;height:100%;border-left:1px solid rgba(255,255,255,.1);background:#00000080;display:flex;flex-direction:column}.xiping-video-subtitle-player__detail{flex:1;padding:24px;overflow-y:auto;color:#fff}.xiping-video-subtitle-player__detail-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;color:#ffffffb3}.xiping-video-subtitle-player__detail-loading-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:#fbbf24;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.xiping-video-subtitle-player__detail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;color:#ffffff80;text-align:center}.xiping-video-subtitle-player__detail-empty-icon{font-size:48px;opacity:.5}.xiping-video-subtitle-player__detail-empty-text{font-size:14px;line-height:1.6}.xiping-video-subtitle-player__detail-content{display:flex;flex-direction:column;gap:20px}.xiping-video-subtitle-player__detail-word{font-size:32px;font-weight:700;color:#fbbf24;line-height:1.2;margin-bottom:8px}.xiping-video-subtitle-player__detail-pronunciation{font-size:18px;color:#ffffffb3;font-style:italic;margin-bottom:4px}.xiping-video-subtitle-player__detail-pos{display:inline-block;padding:4px 12px;background:#fbbf2433;color:#fbbf24;border-radius:4px;font-size:12px;font-weight:600;text-transform:uppercase;width:-moz-fit-content;width:fit-content;margin-bottom:8px}.xiping-video-subtitle-player__detail-label{font-size:12px;font-weight:600;color:#ffffff80;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}.xiping-video-subtitle-player__detail-text{font-size:16px;line-height:1.6;color:#ffffffe6}.xiping-video-subtitle-player__detail-translation,.xiping-video-subtitle-player__detail-definition{padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}.xiping-video-subtitle-player__detail-definition{border-bottom:none}.xiping-video-subtitle-player__detail-examples{display:flex;flex-direction:column;gap:16px}.xiping-video-subtitle-player__detail-example{padding:16px;background:#ffffff0d;border-radius:8px;border-left:3px solid #fbbf24}.xiping-video-subtitle-player__detail-example-en{font-size:15px;line-height:1.6;color:#fffffff2;margin-bottom:8px}.xiping-video-subtitle-player__detail-example-zh{font-size:14px;line-height:1.6;color:#ffffffb3;padding-left:12px;border-left:2px solid rgba(255,255,255,.2)}.xiping-video-subtitle-player__subtitle-container::-webkit-scrollbar,.xiping-video-subtitle-player__detail::-webkit-scrollbar{width:8px}.xiping-video-subtitle-player__subtitle-container::-webkit-scrollbar-track,.xiping-video-subtitle-player__detail::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.xiping-video-subtitle-player__subtitle-container::-webkit-scrollbar-thumb,.xiping-video-subtitle-player__detail::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.xiping-video-subtitle-player__subtitle-container::-webkit-scrollbar-thumb:hover,.xiping-video-subtitle-player__detail::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media(max-width:1024px){.xiping-video-subtitle-player{flex-direction:column;min-height:auto}.xiping-video-subtitle-player__right{width:100%;min-width:unset;max-width:unset;border-left:none;border-top:1px solid rgba(255,255,255,.1);max-height:400px}.xiping-video-subtitle-player__subtitle-container{min-height:150px}}@media(max-width:768px){.xiping-video-subtitle-player__detail{padding:16px}.xiping-video-subtitle-player__detail-word{font-size:24px}.xiping-video-subtitle-player__detail-pronunciation{font-size:16px}.xiping-video-subtitle-player__subtitle-container{padding:16px}}
+.xiping-video-subtitle-player{width:100%;height:100%;background:#1a1a1a;border-radius:8px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.xiping-video-subtitle-player__video-wrapper{width:100%;height:100%;background:#000;overflow:hidden}.xiping-video-subtitle-player__video-container{position:relative;width:100%;height:100%;background:#000;overflow:hidden}.xiping-video-subtitle-player__video{position:absolute;top:0;left:0;width:100%;height:100%;padding:0}.xiping-video-subtitle-player__video-container .xgplayer{width:100%!important;height:100%!important}.xiping-video-subtitle-player__video-container .xgplayer video{object-fit:fill!important}.xiping-video-subtitle-player__subtitle-container{width:100%;height:100%;padding:20px;overflow-y:auto;background:#0000004d}.xiping-video-subtitle-player__right{width:100%;height:100%;background:#00000080;display:flex;flex-direction:column}.xiping-video-subtitle-player__detail{flex:1;padding:24px;overflow-y:auto;color:#fff}.xiping-video-subtitle-player__detail-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;color:#ffffffb3}.xiping-video-subtitle-player__detail-loading-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:#fbbf24;border-radius:50%;animation:xiping-vsp-spin 1s linear infinite}@keyframes xiping-vsp-spin{to{transform:rotate(360deg)}}.xiping-video-subtitle-player__detail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;color:#ffffff80;text-align:center}.xiping-video-subtitle-player__detail-empty-icon{font-size:48px;opacity:.5}.xiping-video-subtitle-player__detail-empty-text{font-size:14px;line-height:1.6}.xiping-video-subtitle-player__detail-content{display:flex;flex-direction:column;gap:20px}.xiping-video-subtitle-player__detail-word{font-size:32px;font-weight:700;color:#fbbf24;line-height:1.2;margin-bottom:8px}.xiping-video-subtitle-player__detail-pronunciation{font-size:18px;color:#ffffffb3;font-style:italic;margin-bottom:4px}.xiping-video-subtitle-player__detail-pos{display:inline-block;padding:4px 12px;background:#fbbf2433;color:#fbbf24;border-radius:4px;font-size:12px;font-weight:600;text-transform:uppercase;width:fit-content;margin-bottom:8px}.xiping-video-subtitle-player__detail-label{font-size:12px;font-weight:600;color:#ffffff80;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}.xiping-video-subtitle-player__detail-text{font-size:16px;line-height:1.6;color:#ffffffe6}.xiping-video-subtitle-player__detail-translation,.xiping-video-subtitle-player__detail-definition{padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}.xiping-video-subtitle-player__detail-definition{border-bottom:none}.xiping-video-subtitle-player__detail-examples{display:flex;flex-direction:column;gap:16px}.xiping-video-subtitle-player__detail-example{padding:16px;background:#ffffff0d;border-radius:8px;border-left:3px solid #fbbf24}.xiping-video-subtitle-player__detail-example-en{font-size:15px;line-height:1.6;color:#fffffff2;margin-bottom:8px}.xiping-video-subtitle-player__detail-example-zh{font-size:14px;line-height:1.6;color:#ffffffb3;padding-left:12px;border-left:2px solid rgba(255,255,255,.2)}.xiping-video-subtitle-player__subtitle-container::-webkit-scrollbar,.xiping-video-subtitle-player__detail::-webkit-scrollbar{width:8px}.xiping-video-subtitle-player__subtitle-container::-webkit-scrollbar-track,.xiping-video-subtitle-player__detail::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.xiping-video-subtitle-player__subtitle-container::-webkit-scrollbar-thumb,.xiping-video-subtitle-player__detail::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.xiping-video-subtitle-player__subtitle-container::-webkit-scrollbar-thumb:hover,.xiping-video-subtitle-player__detail::-webkit-scrollbar-thumb:hover{background:#ffffff4d}

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

@@ -13,11 +13,11 @@ export interface VideoSubtitlePlayerProps {
     style?: React.CSSProperties;
     /** 自定义详情获取函数，用于调用大模型API */
     onFetchDetail?: (target: HoverTarget | null) => Promise<void>;
+    /** 强制使用布局：传入则不再做设备检测，直接使用对应布局 */
+    forceLayout?: "mobile" | "pc";
 }
 /**
- * 视频字幕播放器组件
- * 左侧：上部分视频播放器（填充模式），下部分字幕显示
- * 右侧：字幕详情（单词/短语的发音、解释等）
+ * 视频字幕播放器：根据设备或 forceLayout 选择 PC 或移动端视图，二者完全分离
  */
 export declare const VideoSubtitlePlayer: React.FC<VideoSubtitlePlayerProps>;
 export default VideoSubtitlePlayer;

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

@@ -1,135 +1,74 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { useRef as N, useEffect as u, useCallback as R } from "react";
-import j from "xgplayer";
-import './VideoSubtitlePlayer.css';import '../../node_modules/.pnpm/xgplayer@3.0.23_core-js@3.47.0/node_modules/xgplayer/dist/index.min.css';/* empty css                                                                                               */
-import { Group as S, Panel as s, Separator as z } from "react-resizable-panels";
-import D from "clsx";
-import { SubtitlePlayer as E } from "../subtitle-player/SubtitlePlayer.js";
-import { useVideoSubtitleStore as H } from "./useVideoSubtitleStore.js";
-/* empty css                        */
-const A = ({
-  videoUrl: m,
-  subtitles: o,
-  poster: v,
-  className: w = "",
-  style: P,
-  onFetchDetail: p
+import { jsx as u } from "react/jsx-runtime";
+import { useRef as v, useEffect as w, useCallback as d } from "react";
+import { isMobile as V, isTablet as g } from "react-device-detect";
+import { useVideoSubtitleStore as k } from "./useVideoSubtitleStore.js";
+import { useXGPlayer as H } from "./useXGPlayer.js";
+import { VideoSubtitlePlayerPC as M } from "./VideoSubtitlePlayerPC.js";
+import { VideoSubtitlePlayerMobile as T } from "./VideoSubtitlePlayerMobile.js";
+import './VideoSubtitlePlayer.css';/* empty css                        */
+const X = ({
+  videoUrl: p,
+  subtitles: r,
+  poster: b,
+  className: l = "",
+  style: n,
+  onFetchDetail: e,
+  forceLayout: m
 }) => {
-  const c = N(null), n = N(null), {
-    currentTime: r,
-    setCurrentTime: _,
-    setIsPlaying: d,
-    setSubtitles: h,
-    currentDetail: l,
-    isLoadingDetail: T,
-    fetchDetail: y
-  } = H();
-  u(() => {
-    h(o);
-  }, [o, h]), u(() => {
-    if (!c.current) return;
-    const a = `xiping-video-subtitle-player-${Date.now()}`;
-    c.current.id = a;
-    const i = new j({
-      id: a,
-      url: m,
-      poster: v,
-      autoplay: !1,
-      fluid: !1,
-      width: "100%",
-      height: "100%",
-      controls: !0
-    });
-    n.current = i;
-    const x = () => {
-      const I = i.currentTime || 0;
-      _(I);
-    }, f = () => {
-      d(!0);
-    }, b = () => {
-      d(!1);
-    }, g = () => {
-      d(!1);
-    };
-    return i.on("timeupdate", x), i.on("play", f), i.on("pause", b), i.on("ended", g), () => {
-      i.off("timeupdate", x), i.off("play", f), i.off("pause", b), i.off("ended", g), i.destroy(), n.current = null;
-    };
-  }, [m, v, _, d]), u(() => {
-    if (n.current) {
-      const a = n.current;
-      Math.abs(a.currentTime - r) > 0.5 && (a.currentTime = r);
-    }
-  }, [r]);
-  const C = R(
-    async (a) => {
-      p ? await p(a) : await y(a);
+  const t = v(null), c = m !== void 0 ? m === "mobile" : V || g, {
+    currentTime: a,
+    setCurrentTime: C,
+    setIsPlaying: y,
+    setSubtitles: s,
+    currentDetail: P,
+    isLoadingDetail: S,
+    fetchDetail: i
+  } = k();
+  w(() => {
+    s(r);
+  }, [r, s]), H(
+    t,
+    p,
+    b,
+    { setCurrentTime: C, setIsPlaying: y },
+    a
+  );
+  const f = d(
+    async (o) => {
+      e ? await e(o) : await i(o);
+    },
+    [e, i]
+  ), W = d(
+    async (o) => {
+      e ? await e(o) : await i(o);
     },
-    [p, y]
+    [e, i]
   );
-  return /* @__PURE__ */ e(
-    "div",
+  return c ? /* @__PURE__ */ u(
+    T,
+    {
+      playerRef: t,
+      subtitles: r,
+      currentTime: a,
+      onWordHoverChange: f,
+      onWordClick: W,
+      className: l,
+      style: n
+    }
+  ) : /* @__PURE__ */ u(
+    M,
     {
-      className: D("xiping-video-subtitle-player", w),
-      style: P,
-      children: /* @__PURE__ */ t(S, { orientation: "horizontal", children: [
-        /* @__PURE__ */ e(s, { defaultSize: 65, minSize: 40, children: /* @__PURE__ */ t(S, { orientation: "vertical", children: [
-          /* @__PURE__ */ e(s, { 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: c,
-              className: "xiping-video-subtitle-player__video"
-            }
-          ) }) }) }),
-          /* @__PURE__ */ e(z, { className: "xiping-video-subtitle-player__resize-handle xiping-video-subtitle-player__resize-handle--vertical" }),
-          /* @__PURE__ */ e(s, { defaultSize: 40, minSize: 20, children: /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__subtitle-container", children: /* @__PURE__ */ e(
-            E,
-            {
-              subtitles: o,
-              currentTime: r,
-              mode: "current",
-              onWordHoverChange: C
-            }
-          ) }) })
-        ] }) }),
-        /* @__PURE__ */ e(z, { className: "xiping-video-subtitle-player__resize-handle xiping-video-subtitle-player__resize-handle--horizontal" }),
-        /* @__PURE__ */ e(s, { 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: "将鼠标悬停在字幕单词上查看详情" })
-        ] }) }) }) })
-      ] })
+      playerRef: t,
+      subtitles: r,
+      currentTime: a,
+      currentDetail: P,
+      isLoadingDetail: S,
+      onWordHoverChange: f,
+      className: l,
+      style: n
     }
   );
 };
 export {
-  A as VideoSubtitlePlayer,
-  A as default
+  X as VideoSubtitlePlayer
 };

package/dist/es/components/video-subtitle-player/VideoSubtitlePlayer.mobile.css

@@ -0,0 +1 @@
+.xiping-video-subtitle-player--mobile{display:flex;flex-direction:column;min-height:0;height:100%}.xiping-video-subtitle-player__mobile-video{flex:0 0 auto;width:100%;aspect-ratio:16 / 9;background:#000}.xiping-video-subtitle-player__mobile-video-wrapper{width:100%;height:100%;background:#000;overflow:hidden}.xiping-video-subtitle-player__mobile-video-container{position:relative;width:100%;height:100%;background-color:#a62c2c;overflow:hidden}.xiping-video-subtitle-player__mobile-video-container .xgplayer{width:100%!important;height:100%!important}.xiping-video-subtitle-player__mobile-video-container .xgplayer video{object-fit:fill!important}.xiping-video-subtitle-player__mobile-subtitle{flex:1;min-height:0;padding:12px 16px;overflow-y:auto;background:#0000004d;-webkit-overflow-scrolling:touch}

package/dist/es/components/video-subtitle-player/VideoSubtitlePlayer.pc.css

@@ -0,0 +1 @@
+.xiping-video-subtitle-player--pc .xiping-video-subtitle-player__panel-group,.xiping-video-subtitle-player--pc .xiping-video-subtitle-player__panel-group-inner{width:100%;height:100%}.xiping-video-subtitle-player--pc .xiping-video-subtitle-player__right{border-left:1px solid rgba(255,255,255,.1)}.xiping-video-subtitle-player__resize-handle--horizontal{position:relative;width:2px;background:#ffffff1a;cursor:col-resize;transition:background .2s ease;flex-shrink:0}.xiping-video-subtitle-player__resize-handle--horizontal:hover{background:#fbbf2480}.xiping-video-subtitle-player__resize-handle--horizontal:active{background:#fbbf24cc}.xiping-video-subtitle-player__resize-handle--horizontal:before{content:"";position:absolute;inset:0 -4px;cursor:col-resize}.xiping-video-subtitle-player__resize-handle--vertical{position:relative;height:2px;background:#ffffff1a;cursor:row-resize;transition:background .2s ease;flex-shrink:0}.xiping-video-subtitle-player__resize-handle--vertical:hover{background:#fbbf2480}.xiping-video-subtitle-player__resize-handle--vertical:active{background:#fbbf24cc}.xiping-video-subtitle-player__resize-handle--vertical:before{content:"";position:absolute;inset:-4px 0;cursor:row-resize}

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

@@ -0,0 +1,20 @@
+import { default as React, RefObject } from 'react';
+import { SubtitleData, HoverTarget, WordClickTarget } from '../subtitle-player/SubtitlePlayer';
+export interface VideoSubtitlePlayerMobileProps {
+    /** 播放器挂载的容器 ref */
+    playerRef: RefObject<HTMLDivElement | null>;
+    /** 字幕数据 */
+    subtitles: SubtitleData[];
+    /** 当前播放时间（秒） */
+    currentTime: number;
+    /** 单词 hover 变化时拉取/展示详情（可为弹窗等） */
+    onWordHoverChange: (target: HoverTarget | null) => void | Promise<void>;
+    /** 单词点击时拉取/展示详情（移动端主要交互） */
+    onWordClick: (target: WordClickTarget) => void | Promise<void>;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * 移动端视图：上下两栏（视频 + 字幕），无右侧详情区，详情后续以弹窗等形式实现
+ */
+export declare const VideoSubtitlePlayerMobile: React.FC<VideoSubtitlePlayerMobileProps>;

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

@@ -0,0 +1,47 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useCallback as l } from "react";
+import u from "clsx";
+import { SubtitlePlayer as y } from "../subtitle-player/SubtitlePlayer.js";
+import { VideoSubtitlePlayerLayoutMobile as f } from "./layouts/VideoSubtitlePlayerLayoutMobile.js";
+const P = ({
+  playerRef: r,
+  subtitles: a,
+  currentTime: s,
+  onWordHoverChange: t,
+  onWordClick: i,
+  className: c = "",
+  style: m
+}) => {
+  const n = l(
+    async (o) => {
+      await t(o);
+    },
+    [t]
+  ), d = l(
+    async (o) => {
+      await i(o);
+    },
+    [i]
+  ), b = /* @__PURE__ */ e("div", { ref: r, className: "xiping-video-subtitle-player__video" }), p = /* @__PURE__ */ e(
+    y,
+    {
+      subtitles: a,
+      currentTime: s,
+      mode: "lyrics",
+      onWordHoverChange: n,
+      onWordClick: d
+    }
+  );
+  return /* @__PURE__ */ e(
+    f,
+    {
+      className: u(c),
+      style: m,
+      videoSlot: b,
+      subtitleSlot: p
+    }
+  );
+};
+export {
+  P as VideoSubtitlePlayerMobile
+};

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

@@ -0,0 +1,23 @@
+import { default as React, RefObject } from 'react';
+import { SubtitleData, HoverTarget } from '../subtitle-player/SubtitlePlayer';
+import { SubtitleDetail } from './useVideoSubtitleStore';
+export interface VideoSubtitlePlayerPCProps {
+    /** 播放器挂载的容器 ref */
+    playerRef: RefObject<HTMLDivElement | null>;
+    /** 字幕数据 */
+    subtitles: SubtitleData[];
+    /** 当前播放时间（秒） */
+    currentTime: number;
+    /** 当前悬停单词的详情 */
+    currentDetail: SubtitleDetail | null;
+    /** 是否正在加载详情 */
+    isLoadingDetail: boolean;
+    /** 单词 hover 变化时拉取/展示详情 */
+    onWordHoverChange: (target: HoverTarget | null) => void | Promise<void>;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * PC 端视图：可拖拽分栏 + 右侧详情区，所有 PC 专属 UI 集中在此
+ */
+export declare const VideoSubtitlePlayerPC: React.FC<VideoSubtitlePlayerPCProps>;