@xiping/react-components 1.0.55 → 1.0.57

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

@@ -1,35 +1,36 @@
-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 { jsx as S, jsxs as F } from "react/jsx-runtime";
+import { useMemo as f, useRef as G, useState as D, useEffect as V, 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 ot = ({
+import { srtToJson as q, vttToJson as K } from "../../packages/subtitle/lib/src/json-converter.js";
+import Q from "clsx";
+import { CurrentMode as U } from "./CurrentMode.js";
+import { LyricsMode as X } from "./LyricsMode.js";
+import { getCurrentSubtitleEntry as Y, timeStringToSeconds as J } from "./utils.js";
+import './SubtitlePlayer.css';/* empty css                   */
+const ct = ({
   subtitles: p,
-  currentTime: f,
+  currentTime: h,
   mode: m = "current",
-  className: D = "",
-  style: J,
+  textAlign: E = "left",
+  className: L = "",
+  style: A,
   onWordHoverChange: a,
   renderWordOverlay: d,
   onWordClick: y,
   onSubtitleClick: T
 }) => {
-  const i = h(
+  const i = f(
     () => Array.isArray(p) ? p : [p],
     [p]
-  ), l = F(null), [s, E] = k(null), [R, M] = k([]);
-  G(() => {
+  ), l = G(null), [s, M] = D(null), [R, b] = D([]);
+  V(() => {
     let r = !0;
     async function c() {
       try {
         const e = await Promise.all(
           i.map(async (t) => {
             try {
-              const n = t.language || "zh", o = t.type === "srt" ? await V(t.content, n) : await q(t.content, n);
+              const n = t.language || "zh", o = t.type === "srt" ? await q(t.content, n) : await K(t.content, n);
               return {
                 entries: JSON.parse(o),
                 label: t.label
@@ -42,7 +43,7 @@ const ot = ({
             }
           })
         );
-        r && M(e);
+        r && b(e);
       } catch (e) {
         if (console.error("加载字幕失败:", e), r) {
           const t = i.map((n) => {
@@ -58,7 +59,7 @@ const ot = ({
               };
             }
           });
-          M(t);
+          b(t);
         }
       }
     }
@@ -66,7 +67,7 @@ const ot = ({
       r = !1;
     };
   }, [i]);
-  const g = h(() => R.length > 0 ? R : i.map((r) => {
+  const g = f(() => R.length > 0 ? R : i.map((r) => {
     try {
       return {
         entries: r.type === "srt" ? w(r.content) : v(r.content),
@@ -78,20 +79,20 @@ const ot = ({
         label: r.label
       };
     }
-  }), [R, i]), L = h(() => g.map(({ entries: r, label: c }) => ({
-    entry: X(r, f),
+  }), [R, i]), W = f(() => g.map(({ entries: r, label: c }) => ({
+    entry: Y(r, h),
     label: c,
     entries: r
     // 保留所有条目用于歌词模式
-  })), [g, f]), W = h(() => {
+  })), [g, h]), _ = f(() => {
     const r = [];
     g.forEach(({ entries: t, label: n }) => {
       t.forEach((o) => {
         r.push({
           entry: o,
           label: n,
-          startTime: A(o.startTime),
-          endTime: A(o.endTime)
+          startTime: J(o.startTime),
+          endTime: J(o.endTime)
         });
       });
     }), r.sort((t, n) => t.startTime - n.startTime);
@@ -105,7 +106,7 @@ const ot = ({
         t.startTime <= n.endTime ? e.push(t) : (c.push(e), e = [t]);
       }
     return e.length > 0 && c.push(e), c;
-  }, [g]), b = u(
+  }, [g]), x = u(
     (r, c) => {
       const e = r.currentTarget.getBoundingClientRect(), t = l.current?.getBoundingClientRect(), n = t !== void 0 ? new DOMRect(
         e.left - t.left,
@@ -117,12 +118,12 @@ const ot = ({
         rect: n,
         element: r.currentTarget
       };
-      E(o), a?.(o);
+      M(o), a?.(o);
     },
     [a]
-  ), x = u(() => {
-    E(null), a?.(null);
-  }, [a]), B = u(
+  ), B = u(() => {
+    M(null), a?.(null);
+  }, [a]), C = u(
     (r, c) => {
       if (!y) return;
       r.stopPropagation();
@@ -140,36 +141,36 @@ const ot = ({
       y(o);
     },
     [y]
-  ), C = u(
+  ), N = 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(
+      const n = r.currentTarget.getBoundingClientRect(), o = l.current?.getBoundingClientRect(), k = o !== void 0 ? new DOMRect(
         n.left - o.left,
         n.top - o.top,
         n.width,
         n.height
-      ) : n, _ = {
+      ) : n, z = {
         type: "subtitle",
         entry: c,
         label: e,
-        rect: j,
+        rect: k,
         element: r.currentTarget
       };
-      T(_);
+      T(z);
     },
     [T]
-  ), N = u(
+  ), O = u(
     (r, c) => (e, t, n) => ({
-      onMouseEnter: (o) => b(o, {
+      onMouseEnter: (o) => x(o, {
         word: e,
         wordIndex: t,
         lineIndex: n,
         entry: r,
         label: c
       }),
-      onMouseLeave: x,
-      onClick: (o) => B(o, {
+      onMouseLeave: B,
+      onClick: (o) => C(o, {
         word: e,
         wordIndex: t,
         lineIndex: n,
@@ -177,8 +178,8 @@ const ot = ({
         label: c
       })
     }),
-    [b, x, B]
-  ), O = d && s ? /* @__PURE__ */ S(
+    [x, B, C]
+  ), P = d && s ? /* @__PURE__ */ S(
     "div",
     {
       className: "xiping-subtitle-player__hover-overlay",
@@ -188,38 +189,40 @@ const ot = ({
       },
       children: d(s)
     }
-  ) : null, P = !!(d || a);
-  return /* @__PURE__ */ z(
+  ) : null, j = !!(d || a);
+  return /* @__PURE__ */ F(
     "div",
     {
       ref: l,
-      className: K(
+      className: Q(
         "xiping-subtitle-player",
         m === "lyrics" ? "xiping-subtitle-player--lyrics" : "xiping-subtitle-player--current",
-        D
+        L
       ),
-      style: J,
+      style: A,
       children: [
         m === "current" && /* @__PURE__ */ S(
-          Q,
+          U,
           {
-            currentEntries: L,
-            wordHoverFactory: N,
-            enableWordHover: P,
-            overlayNode: O,
-            onSubtitleClick: C
+            currentEntries: W,
+            wordHoverFactory: O,
+            enableWordHover: j,
+            overlayNode: P,
+            onSubtitleClick: N,
+            textAlign: E
           }
         ),
         m === "lyrics" && /* @__PURE__ */ S(
-          U,
+          X,
           {
-            groupedEntriesByTime: W,
-            currentTime: f,
-            wordHoverFactory: N,
-            enableWordHover: P,
-            overlayNode: O,
+            groupedEntriesByTime: _,
+            currentTime: h,
+            wordHoverFactory: O,
+            enableWordHover: j,
+            overlayNode: P,
             containerRef: l,
-            onSubtitleClick: C
+            onSubtitleClick: N,
+            textAlign: E
           }
         )
       ]
@@ -227,6 +230,6 @@ const ot = ({
   );
 };
 export {
-  ot as SubtitlePlayer,
-  ot as default
+  ct as SubtitlePlayer,
+  ct as default
 };

package/dist/es/components/text-animate/TextAnimate.css

@@ -0,0 +1 @@
+.xiping-text-animate{white-space:pre-wrap}.xiping-text-animate-segment{display:inline-block;white-space:pre}.xiping-text-animate-segment--line{display:block}

package/dist/es/components/text-animate/TextAnimate.js

@@ -1,13 +1,14 @@
 "use client";
 import { jsx as r } from "react/jsx-runtime";
-import { cn as y } from "../../utils/utils.js";
-import { motion as u, AnimatePresence as g } from "motion/react";
+import { motion as y, AnimatePresence as w } from "motion/react";
+import u from "clsx";
+import './TextAnimate.css';/* empty css                */
 const s = {
   text: 0.06,
   word: 0.05,
   character: 0.03,
   line: 0.06
-}, t = {
+}, i = {
   hidden: { opacity: 1 },
   show: {
     opacity: 1,
@@ -32,14 +33,14 @@ const s = {
   }
 }, o = {
   fadeIn: {
-    container: t,
+    container: i,
     item: {
       hidden: { opacity: 0, y: 20 },
-      show: (i) => ({
+      show: (t) => ({
         opacity: 1,
         y: 0,
         transition: {
-          delay: i,
+          delay: t,
           duration: 0.3
         }
       }),
@@ -51,14 +52,14 @@ const s = {
     }
   },
   blurIn: {
-    container: t,
+    container: i,
     item: {
       hidden: { opacity: 0, filter: "blur(10px)" },
-      show: (i) => ({
+      show: (t) => ({
         opacity: 1,
         filter: "blur(0px)",
         transition: {
-          delay: i * 0.1,
+          delay: t * 0.1,
           duration: 0.3
         }
       }),
@@ -70,10 +71,10 @@ const s = {
     }
   },
   blurInUp: {
-    container: t,
+    container: i,
     item: {
       hidden: { opacity: 0, filter: "blur(10px)", y: 20 },
-      show: (i) => ({
+      show: (t) => ({
         opacity: 1,
         filter: "blur(0px)",
         y: 0,
@@ -96,10 +97,10 @@ const s = {
     }
   },
   blurInDown: {
-    container: t,
+    container: i,
     item: {
       hidden: { opacity: 0, filter: "blur(10px)", y: -20 },
-      show: (i) => ({
+      show: (t) => ({
         opacity: 1,
         filter: "blur(0px)",
         y: 0,
@@ -112,14 +113,14 @@ const s = {
     }
   },
   slideUp: {
-    container: t,
+    container: i,
     item: {
       hidden: { y: 20, opacity: 0 },
-      show: (i) => ({
+      show: (t) => ({
         y: 0,
         opacity: 1,
         transition: {
-          delay: i,
+          delay: t,
           duration: 0.3
         }
       }),
@@ -133,7 +134,7 @@ const s = {
     }
   },
   slideDown: {
-    container: t,
+    container: i,
     item: {
       hidden: { y: -20, opacity: 0 },
       show: {
@@ -149,7 +150,7 @@ const s = {
     }
   },
   slideLeft: {
-    container: t,
+    container: i,
     item: {
       hidden: { x: 20, opacity: 0 },
       show: {
@@ -165,7 +166,7 @@ const s = {
     }
   },
   slideRight: {
-    container: t,
+    container: i,
     item: {
       hidden: { x: -20, opacity: 0 },
       show: {
@@ -181,7 +182,7 @@ const s = {
     }
   },
   scaleUp: {
-    container: t,
+    container: i,
     item: {
       hidden: { scale: 0.5, opacity: 0 },
       show: {
@@ -204,14 +205,14 @@ const s = {
     }
   },
   scaleDown: {
-    container: t,
+    container: i,
     item: {
       hidden: { scale: 1.5, opacity: 0 },
-      show: (i) => ({
+      show: (t) => ({
         scale: 1,
         opacity: 1,
         transition: {
-          delay: i,
+          delay: t,
           duration: 0.3,
           scale: {
             type: "spring",
@@ -228,81 +229,82 @@ const s = {
     }
   }
 };
-function U({
-  children: i,
+function $({
+  children: t,
   delay: I = 0,
-  duration: k = 0.3,
-  variants: C,
-  className: h,
-  segmentClassName: x,
+  duration: C = 0.3,
+  variants: v,
+  className: x,
+  segmentClassName: h,
   as: m = "p",
   startOnView: c = !0,
-  once: v = !1,
-  by: a = "word",
-  animation: n = "fadeIn",
+  once: D = !1,
+  by: n = "word",
+  animation: a = "fadeIn",
   ...f
 }) {
-  const w = u.create(m), d = n ? {
+  const g = y.create(m), d = a ? {
     container: {
-      ...o[n].container,
+      ...o[a].container,
       show: {
-        ...o[n].container.show,
+        ...o[a].container.show,
         transition: {
-          staggerChildren: s[a]
+          staggerChildren: s[n]
         }
       },
       exit: {
-        ...o[n].container.exit,
+        ...o[a].container.exit,
         transition: {
-          staggerChildren: s[a],
+          staggerChildren: s[n],
           staggerDirection: -1
         }
       }
     },
-    item: o[n].item
-  } : { container: t, item: b };
+    item: o[a].item
+  } : { container: i, item: b };
   let e = [];
-  switch (a) {
+  switch (n) {
     case "word":
-      e = i.split(/(\s+)/);
+      e = t.split(/(\s+)/);
       break;
     case "character":
-      e = i.split("");
+      e = t.split("");
       break;
     case "line":
-      e = i.split(`
+      e = t.split(`
 `);
       break;
     default:
-      e = [i];
+      e = [t];
       break;
   }
-  return /* @__PURE__ */ r(g, { mode: "popLayout", children: /* @__PURE__ */ r(
-    w,
+  return /* @__PURE__ */ r(w, { mode: "popLayout", children: /* @__PURE__ */ r(
+    g,
     {
       variants: d.container,
       initial: "hidden",
       whileInView: c ? "show" : void 0,
       animate: c ? void 0 : "show",
       exit: "exit",
-      className: y("whitespace-pre-wrap", h),
+      className: u("xiping-text-animate", x),
       ...f,
       children: e.map((p, l) => /* @__PURE__ */ r(
-        u.span,
+        y.span,
         {
           variants: d.item,
-          custom: l * s[a],
-          className: y(
-            a === "line" ? "block" : "inline-block whitespace-pre",
-            x
+          custom: l * s[n],
+          className: u(
+            "xiping-text-animate-segment",
+            n === "line" && "xiping-text-animate-segment--line",
+            h
           ),
           children: p
         },
-        `${a}-${p}-${l}`
+        `${n}-${p}-${l}`
       ))
     }
   ) });
 }
 export {
-  U as TextAnimate
+  $ as TextAnimate
 };

package/dist/es/components/text-type/TextType.css

@@ -0,0 +1 @@
+.xiping-text-type{display:inline-block;white-space:pre-wrap}.xiping-text-type__content{display:inline-block}.xiping-text-type__cursor{margin-left:.25rem;display:inline-block;opacity:1}.xiping-text-type__cursor--hidden{display:none}

package/dist/es/components/text-type/TextType.js

@@ -2,8 +2,9 @@
 import { jsx as b } from "react/jsx-runtime";
 import { useState as o, useRef as k, useMemo as U, useCallback as V, useEffect as I, createElement as W } from "react";
 import { gsap as q } from "gsap";
-/* empty css             */
-const D = ({
+import X from "clsx";
+import './TextType.css';/* empty css             */
+const ee = ({
   text: u,
   as: v = "div",
   typingSpeed: f = 50,
@@ -20,11 +21,11 @@ const D = ({
   textColors: g = [],
   variableSpeed: c,
   onSentenceComplete: d,
-  startOnVisible: y = !1,
+  startOnVisible: p = !1,
   reverseMode: N = !1,
   ...J
 }) => {
-  const [l, $] = o(""), [i, j] = o(0), [a, C] = o(!1), [t, K] = o(0), [H, L] = o(!y), m = k(null), p = k(null), r = U(() => Array.isArray(u) ? u : [u], [u]), O = V(() => {
+  const [l, j] = o(""), [i, C] = o(0), [a, H] = o(!1), [t, K] = o(0), [M, L] = o(!p), m = k(null), y = k(null), r = U(() => Array.isArray(u) ? u : [u], [u]), O = V(() => {
     if (!c) return f;
     const { min: e, max: n } = c;
     return Math.random() * (n - e) + e;
@@ -33,7 +34,7 @@ const D = ({
       return g[t % g.length];
   };
   I(() => {
-    if (!y || !p.current) return;
+    if (!p || !y.current) return;
     const e = new IntersectionObserver(
       (n) => {
         n.forEach((x) => {
@@ -42,8 +43,8 @@ const D = ({
       },
       { threshold: 0.1 }
     );
-    return e.observe(p.current), () => e.disconnect();
-  }, [y]), I(() => {
+    return e.observe(y.current), () => e.disconnect();
+  }, [p]), I(() => {
     T && m.current && (q.set(m.current, { opacity: 1 }), q.to(m.current, {
       opacity: 0,
       duration: E,
@@ -52,30 +53,30 @@ const D = ({
       ease: "power2.inOut"
     }));
   }, [T, E]), I(() => {
-    if (!H) return;
+    if (!M) return;
     let e;
-    const n = r[t], x = N ? n.split("").reverse().join("") : n, M = () => {
+    const n = r[t], x = N ? n.split("").reverse().join("") : n, $ = () => {
       if (a)
         if (l === "") {
-          if (C(!1), t === r.length - 1 && !R)
+          if (H(!1), t === r.length - 1 && !R)
             return;
-          d && d(r[t], t), K((s) => (s + 1) % r.length), j(0), e = setTimeout(() => {
+          d && d(r[t], t), K((s) => (s + 1) % r.length), C(0), e = setTimeout(() => {
           }, h);
         } else
           e = setTimeout(() => {
-            $((s) => s.slice(0, -1));
+            j((s) => s.slice(0, -1));
           }, A);
       else
         i < x.length ? e = setTimeout(
           () => {
-            $((s) => s + x[i]), j((s) => s + 1);
+            j((s) => s + x[i]), C((s) => s + 1);
           },
           c ? O() : f
         ) : r.length > 1 && (e = setTimeout(() => {
-          C(!0);
+          H(!0);
         }, h));
     };
-    return i === 0 && !a && l === "" ? e = setTimeout(M, _) : M(), () => clearTimeout(e);
+    return i === 0 && !a && l === "" ? e = setTimeout($, _) : $(), () => clearTimeout(e);
   }, [
     i,
     l,
@@ -87,7 +88,7 @@ const D = ({
     t,
     R,
     _,
-    H,
+    M,
     N,
     c,
     d
@@ -96,7 +97,7 @@ const D = ({
   return W(
     v,
     {
-      ref: p,
+      ref: y,
       className: `xiping-text-type ${w}`,
       ...J
     },
@@ -105,12 +106,16 @@ const D = ({
       "span",
       {
         ref: m,
-        className: `xiping-text-type__cursor ${G} ${Q ? "xiping-text-type__cursor--hidden" : ""}`,
+        className: X(
+          "xiping-text-type__cursor",
+          G,
+          Q && "xiping-text-type__cursor--hidden"
+        ),
         children: F
       }
     )
   );
 };
 export {
-  D as default
+  ee as default
 };

package/dist/es/components/txt-reader/index.module.css

@@ -0,0 +1 @@
+._xiping-top-progress_rkm9f_23{position:fixed;left:0;top:0;right:0;background-color:#f08;height:10px}._xiping-container_rkm9f_33{position:relative;width:100%;height:100%;overflow-y:auto}._xiping-content_rkm9f_41{width:100%;white-space:pre-wrap;word-break:break-word}._xiping-bottom-progress_rkm9f_48{position:fixed;color:#fff;border-radius:4px;font-size:.875rem;background-color:#000000b3;padding:.25rem .5rem;right:1.25rem;bottom:1.25rem}._xiping-text-content_rkm9f_63::-webkit-scrollbar{width:8px}._xiping-text-content_rkm9f_63::-webkit-scrollbar-thumb{box-shadow:inset 0 0 5px #0003;background:#0003}._xiping-text-content_rkm9f_63::-webkit-scrollbar-track{box-shadow:inset 0 0 5px #0003;border-radius:0;background:#00000014}

package/dist/es/components/txt-reader/index.module.css.js

@@ -1,4 +1,4 @@
-const t = {
+import './index.module.css';const t = {
   "xiping-top-progress": "_xiping-top-progress_rkm9f_23",
   "xiping-container": "_xiping-container_rkm9f_33",
   "xiping-content": "_xiping-content_rkm9f_41",

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

@@ -0,0 +1 @@
+.xiping-typing-animation{font-size:2.25rem;font-weight:700;line-height:5rem;letter-spacing:-.02em}