npm - @xiping/react-components - Versions diffs - 1.0.54 → 1.0.55 - Mend

@xiping/react-components 1.0.54 → 1.0.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

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

@@ -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
 };