@xiping/react-components 1.0.55 → 1.0.57

package/dist/es/components/shiny-text/ShinyText.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+interface ShinyTextProps {
+    text: string;
+    disabled?: boolean;
+    speed?: number;
+    className?: string;
+    color?: string;
+    shineColor?: string;
+    spread?: number;
+    yoyo?: boolean;
+    pauseOnHover?: boolean;
+    direction?: 'left' | 'right';
+    delay?: number;
+}
+declare const ShinyText: React.FC<ShinyTextProps>;
+export default ShinyText;

package/dist/es/components/shiny-text/ShinyText.js

@@ -0,0 +1,76 @@
+import { jsx as L } from "react/jsx-runtime";
+import { useState as W, useRef as d, useEffect as j, useCallback as y } from "react";
+import { useMotionValue as v, useAnimationFrame as z, useTransform as A, motion as B } from "motion/react";
+import './ShinyText.css';/* empty css              */
+const G = ({
+  text: T,
+  disabled: k = !1,
+  speed: $ = 2,
+  className: x = "",
+  color: u = "#b5b5b5",
+  shineColor: h = "#ffffff",
+  spread: C = 120,
+  yoyo: M = !1,
+  pauseOnHover: l = !1,
+  direction: f = "left",
+  delay: D = 0
+}) => {
+  const [R, p] = W(!1), e = v(0), a = d(0), c = d(null), r = d(f === "left" ? 1 : -1), t = $ * 1e3, b = D * 1e3;
+  z((o) => {
+    if (k || R) {
+      c.current = null;
+      return;
+    }
+    if (c.current === null) {
+      c.current = o;
+      return;
+    }
+    const I = o - c.current;
+    if (c.current = o, a.current += I, M) {
+      const s = t + b, i = s * 2, n = a.current % i;
+      if (n < t) {
+        const m = n / t * 100;
+        e.set(r.current === 1 ? m : 100 - m);
+      } else if (n < s)
+        e.set(r.current === 1 ? 100 : 0);
+      else if (n < s + t) {
+        const g = 100 - (n - s) / t * 100;
+        e.set(r.current === 1 ? g : 100 - g);
+      } else
+        e.set(r.current === 1 ? 0 : 100);
+    } else {
+      const s = t + b, i = a.current % s;
+      if (i < t) {
+        const n = i / t * 100;
+        e.set(r.current === 1 ? n : 100 - n);
+      } else
+        e.set(r.current === 1 ? 100 : 0);
+    }
+  }), j(() => {
+    r.current = f === "left" ? 1 : -1, a.current = 0, e.set(0);
+  }, [f]);
+  const S = A(e, (o) => `${150 - o * 2}% center`), E = y(() => {
+    l && p(!0);
+  }, [l]), P = y(() => {
+    l && p(!1);
+  }, [l]), F = {
+    backgroundImage: `linear-gradient(${C}deg, ${u} 0%, ${u} 35%, ${h} 50%, ${u} 65%, ${u} 100%)`,
+    backgroundSize: "200% auto",
+    WebkitBackgroundClip: "text",
+    backgroundClip: "text",
+    WebkitTextFillColor: "transparent"
+  };
+  return /* @__PURE__ */ L(
+    B.span,
+    {
+      className: `shiny-text ${x}`,
+      style: { ...F, backgroundPosition: S },
+      onMouseEnter: E,
+      onMouseLeave: P,
+      children: T
+    }
+  );
+};
+export {
+  G as default
+};

package/dist/es/components/shiny-text/index.d.ts

@@ -0,0 +1,2 @@
+import { default as ShinyText } from './ShinyText';
+export { ShinyText };

package/dist/es/components/sparkles-text/SparklesText.css

@@ -0,0 +1 @@
+.xiping-sparkle{pointer-events:none;position:absolute;z-index:20}.xiping-sparkles-text{font-size:3.75rem;font-weight:700}.xiping-sparkles-text-wrapper{position:relative;display:inline-block}

package/dist/es/components/sparkles-text/SparklesText.js

@@ -2,19 +2,19 @@
 import { jsx as r, jsxs as g } from "react/jsx-runtime";
 import { motion as k } from "motion/react";
 import { useState as L, useEffect as S } from "react";
-import { cn as y } from "../../utils/utils.js";
-/* empty css                 */
-const M = ({ id: i, x: t, y: o, color: s, delay: c, scale: l }) => /* @__PURE__ */ r(
+import y from "clsx";
+import './SparklesText.css';/* empty css                 */
+const M = ({ id: i, x: t, y: o, color: s, delay: l, scale: c }) => /* @__PURE__ */ r(
   k.svg,
   {
     className: "xiping-sparkle",
     initial: { opacity: 0, left: t, top: o },
     animate: {
       opacity: [0, 1, 0],
-      scale: [0, l, 0],
+      scale: [0, c, 0],
       rotate: [75, 120, 150]
     },
-    transition: { duration: 0.8, repeat: 1 / 0, delay: c },
+    transition: { duration: 0.8, repeat: 1 / 0, delay: l },
     width: "21",
     height: "21",
     viewBox: "0 0 21 21",
@@ -32,19 +32,19 @@ const M = ({ id: i, x: t, y: o, color: s, delay: c, scale: l }) => /* @__PURE__
   colors: t = { first: "#9E7AFF", second: "#FE8BBB" },
   className: o,
   sparklesCount: s = 10,
-  ...c
+  ...l
 }) => {
-  const [l, p] = L([]);
+  const [c, p] = L([]);
   return S(() => {
-    const a = () => {
-      const e = `${Math.random() * 100}%`, n = `${Math.random() * 100}%`, h = Math.random() > 0.5 ? t.first : t.second, x = Math.random() * 2, C = Math.random() * 1 + 0.3, u = Math.random() * 10 + 5;
-      return { id: `${e}-${n}-${Date.now()}`, x: e, y: n, color: h, delay: x, scale: C, lifespan: u };
+    const n = () => {
+      const e = `${Math.random() * 100}%`, a = `${Math.random() * 100}%`, h = Math.random() > 0.5 ? t.first : t.second, x = Math.random() * 2, C = Math.random() * 1 + 0.3, u = Math.random() * 10 + 5;
+      return { id: `${e}-${a}-${Date.now()}`, x: e, y: a, color: h, delay: x, scale: C, lifespan: u };
     }, d = () => {
-      const e = Array.from({ length: s }, a);
+      const e = Array.from({ length: s }, n);
       p(e);
     }, m = () => {
       p(
-        (e) => e.map((n) => n.lifespan <= 0 ? a() : { ...n, lifespan: n.lifespan - 0.1 })
+        (e) => e.map((a) => a.lifespan <= 0 ? n() : { ...a, lifespan: a.lifespan - 0.1 })
       );
     };
     d();
@@ -54,13 +54,13 @@ const M = ({ id: i, x: t, y: o, color: s, delay: c, scale: l }) => /* @__PURE__
     "div",
     {
       className: y("xiping-sparkles-text", o),
-      ...c,
+      ...l,
       style: {
         "--sparkles-first-color": `${t.first}`,
         "--sparkles-second-color": `${t.second}`
       },
       children: /* @__PURE__ */ g("span", { className: "xiping-sparkles-text-wrapper", children: [
-        l.map((a) => /* @__PURE__ */ r(M, { ...a }, a.id)),
+        c.map((n) => /* @__PURE__ */ r(M, { ...n }, n.id)),
         /* @__PURE__ */ r("strong", { children: i })
       ] })
     }

package/dist/es/components/split-text/SplitText.css

@@ -0,0 +1 @@
+.xiping-split-parent{overflow:hidden;display:inline-block;white-space:normal}

package/dist/es/components/split-text/SplitText.js

@@ -4,7 +4,7 @@ import { gsap as i } from "gsap";
 import { ScrollTrigger as N } from "gsap/ScrollTrigger";
 import { SplitText as S } from "gsap/SplitText";
 import j from "clsx";
-/* empty css              */
+import './SplitText.css';/* empty css              */
 i.registerPlugin(N, S);
 const A = ({
   text: l,

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

@@ -0,0 +1 @@
+.xiping-subtitle-player__current-item{display:flex;flex-direction:column;gap:.25rem;transition:all .2s ease}.xiping-subtitle-player__current-label{font-size:.75rem;font-weight:600;color:#ffffffb3;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}.xiping-subtitle-player__current-text{font-size:1rem;font-weight:500;text-shadow:0 2px 4px rgba(0,0,0,.5)}.xiping-subtitle-player__current-line{margin:.25rem 0}.xiping-subtitle-player__current-line:first-child{margin-top:0}.xiping-subtitle-player__current-line:last-child{margin-bottom:0}.xiping-subtitle-player__current-hover-layer{position:absolute;inset:0;pointer-events:none}@media(max-width:768px){.xiping-subtitle-player__current-text{font-size:.9rem}}

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

@@ -15,6 +15,8 @@ export interface CurrentModeProps {
     overlayNode: React.ReactNode;
     /** 整条字幕点击处理器 */
     onSubtitleClick?: (event: React.MouseEvent<HTMLDivElement>, entry: SubtitleEntry, label?: string) => void;
+    /** 文本对齐方式 */
+    textAlign?: "left" | "center";
 }
 /**
  * 当前模式组件：只显示当前时间对应的字幕

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

@@ -1,43 +1,78 @@
-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__ */ 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, l) => {
-            if (!i.words || i.words.length === 0)
-              return /* @__PURE__ */ r("div", { className: "xiping-subtitle-player__line", children: n }, l);
-            const o = x(
-              n,
-              i.words,
-              e,
-              l,
-              d ? u(i, s) : void 0
-            );
-            return e = o.nextWordIndex, /* @__PURE__ */ r("div", { className: "xiping-subtitle-player__line", children: o.nodes }, l);
-          });
-        })() })
-      ]
-    },
-    m
-  ) : null),
-  d && /* @__PURE__ */ r("div", { className: "xiping-subtitle-player__hover-layer", children: c })
+import { jsxs as u, Fragment as v, jsx as r } from "react/jsx-runtime";
+import { renderTextWithWords as g } from "./utils.js";
+import './CurrentMode.css';/* empty css                */
+const C = ({
+  currentEntries: l,
+  wordHoverFactory: p,
+  enableWordHover: o,
+  overlayNode: a,
+  onSubtitleClick: i,
+  textAlign: x = "left"
+}) => l.some(({ entry: e }) => e !== null) ? /* @__PURE__ */ u(v, { children: [
+  l.map(({ entry: e, label: n }) => {
+    if (!e)
+      return null;
+    const h = e.text.split(`
+`), m = o ? p(e, n) : void 0, _ = h.reduce(
+      (t, d, s) => {
+        if (!e.words || e.words.length === 0)
+          return t.content.push(
+            /* @__PURE__ */ r(
+              "div",
+              {
+                className: "xiping-subtitle-player__current-line",
+                children: d
+              },
+              s
+            )
+          ), t;
+        const c = g(
+          d,
+          e.words,
+          t.nextWordIndex,
+          s,
+          m
+        );
+        return t.content.push(
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: "xiping-subtitle-player__current-line",
+              children: c.nodes
+            },
+            s
+          )
+        ), {
+          content: t.content,
+          nextWordIndex: c.nextWordIndex
+        };
+      },
+      { content: [], nextWordIndex: 0 }
+    ).content;
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        className: "xiping-subtitle-player__current-item",
+        "data-label": n || void 0,
+        onClick: i ? (t) => i(t, e, n) : void 0,
+        style: i ? { cursor: "pointer" } : void 0,
+        children: [
+          n && /* @__PURE__ */ r("span", { className: "xiping-subtitle-player__current-label", children: n }),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: "xiping-subtitle-player__current-text",
+              style: { textAlign: x },
+              children: _
+            }
+          )
+        ]
+      },
+      `${e.index}-${n || ""}`
+    );
+  }),
+  o && /* @__PURE__ */ r("div", { className: "xiping-subtitle-player__current-hover-layer", children: a })
 ] }) : null;
 export {
-  N as CurrentMode
+  C as CurrentMode
 };

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

@@ -0,0 +1 @@
+.xiping-subtitle-player__lyrics-time{font-size:.7rem;font-weight:500;color:#ffffff80;font-family:Monaco,Menlo,Ubuntu Mono,monospace;margin-bottom:.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.xiping-subtitle-player__lyrics-item{display:flex;flex-direction:column;gap:.25rem;transition:all .2s ease}.xiping-subtitle-player__lyrics-item--active{color:#fbbf24;font-weight:600;transition:all .3s ease;position:relative}.xiping-subtitle-player__lyrics-item--active:before{content:"";position:absolute;left:-1rem;top:50%;transform:translateY(-50%);width:4px;height:92%;background:#fbbf24;border-radius:2px}.xiping-subtitle-player__lyrics-item--past{opacity:.5;color:#fff9}.xiping-subtitle-player__lyrics-label{font-size:.75rem;font-weight:600;color:#ffffffb3;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}.xiping-subtitle-player__lyrics-text{font-size:1rem;font-weight:500;text-shadow:0 2px 4px rgba(0,0,0,.5)}.xiping-subtitle-player__lyrics-line{margin:.25rem 0}.xiping-subtitle-player__lyrics-line:first-child{margin-top:0}.xiping-subtitle-player__lyrics-line:last-child{margin-bottom:0}.xiping-subtitle-player__lyrics-hover-layer{position:absolute;inset:0;pointer-events:none}.xiping-subtitle-player--lyrics{max-height:600px;overflow-y:auto;gap:.5rem;scroll-behavior:smooth}.xiping-subtitle-player--lyrics::-webkit-scrollbar{width:8px}.xiping-subtitle-player--lyrics::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}.xiping-subtitle-player--lyrics::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.xiping-subtitle-player--lyrics::-webkit-scrollbar-thumb:hover{background:#ffffff80}.xiping-subtitle-player__group{display:flex;flex-direction:column;gap:.5rem;width:100%;border-radius:.5rem;padding:.5rem;margin:-.5rem;transition:all .2s ease}.xiping-subtitle-player__group:hover{background-color:#ffffff1a}.xiping-subtitle-player__group:hover .xiping-subtitle-player__lyrics-item{transform:translate(4px)}.xiping-subtitle-player__group:hover .xiping-subtitle-player__lyrics-item--active{background-color:#fbbf2426}.xiping-subtitle-player__lyrics-item--active .xiping-subtitle-word{color:#fbbf24;font-weight:600}@media(max-width:768px){.xiping-subtitle-player__lyrics-text{font-size:.9rem}}

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

@@ -21,6 +21,8 @@ export interface LyricsModeProps {
     containerRef: React.RefObject<HTMLDivElement | null>;
     /** 整条字幕点击处理器 */
     onSubtitleClick?: (event: React.MouseEvent<HTMLDivElement>, entry: SubtitleEntry, label?: string) => void;
+    /** 文本对齐方式 */
+    textAlign?: "left" | "center";
 }
 /**
  * 歌词模式组件：显示全部字幕并高亮当前字幕

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

@@ -1,81 +1,152 @@
-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
+import { jsxs as $, Fragment as K, jsx as c } from "react/jsx-runtime";
+import { useRef as W, useMemo as I, useEffect as b, useCallback as j } from "react";
+import A from "clsx";
+import { secondsToTimeString as H, renderTextWithWords as L } from "./utils.js";
+import './LyricsMode.css';/* empty css               */
+const M = ({
+  entry: t,
+  label: s,
+  endTime: v,
+  currentTime: _,
+  isActive: y,
+  isFirstItem: u,
+  timeString: g,
+  textAlign: N,
+  enableWordHover: d,
+  wordHoverFactory: h,
+  onSubtitleClick: n,
+  itemRef: 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;
+  const r = _ > v, i = j(
+    (m) => {
+      n && n(m, t, s);
+    },
+    [n, t, s]
+  ), o = I(
+    () => d ? h(t, s) : void 0,
+    [d, h, t, s]
+  ), l = I(() => t.text.split(`
+`).reduce(
+    (p, x, a) => {
+      if (!t.words || t.words.length === 0)
+        return p.content.push(
+          /* @__PURE__ */ c(
+            "div",
+            {
+              className: "xiping-subtitle-player__lyrics-line",
+              children: x
+            },
+            a
+          )
+        ), p;
+      const f = L(
+        x,
+        t.words,
+        p.nextWordIndex,
+        a,
+        o
+      );
+      return p.content.push(
+        /* @__PURE__ */ c(
+          "div",
+          {
+            className: "xiping-subtitle-player__lyrics-line",
+            children: f.nodes
+          },
+          a
+        )
+      ), {
+        content: p.content,
+        nextWordIndex: f.nextWordIndex
+      };
+    },
+    { content: [], nextWordIndex: 0 }
+  ).content, [t.text, t.words, o]);
+  return /* @__PURE__ */ $(
+    "div",
+    {
+      ref: e,
+      className: A("xiping-subtitle-player__lyrics-item", {
+        "xiping-subtitle-player__lyrics-item--active": y,
+        "xiping-subtitle-player__lyrics-item--past": r
+      }),
+      "data-label": s || void 0,
+      onClick: n ? i : void 0,
+      style: n ? { cursor: "pointer" } : void 0,
+      children: [
+        u && g && /* @__PURE__ */ c("span", { className: "xiping-subtitle-player__lyrics-time", children: g }),
+        s && /* @__PURE__ */ c("span", { className: "xiping-subtitle-player__lyrics-label", children: s }),
+        /* @__PURE__ */ c(
+          "div",
+          {
+            className: "xiping-subtitle-player__lyrics-text",
+            style: { textAlign: N },
+            children: l
+          }
+        )
+      ]
+    }
+  );
+}, q = ({
+  groupedEntriesByTime: t,
+  currentTime: s,
+  wordHoverFactory: v,
+  enableWordHover: _,
+  overlayNode: y,
+  containerRef: u,
+  onSubtitleClick: g,
+  textAlign: N = "left"
+}) => {
+  const d = W(null), h = W(null), n = I(() => {
+    for (let e = 0; e < t.length; e++) {
+      const r = t[e];
+      for (let i = 0; i < r.length; i++) {
+        const { startTime: o, endTime: l } = r[i];
+        if (s >= o && s <= l)
+          return `${e}-${i}`;
+      }
+    }
+    return null;
+  }, [t, s]);
+  return b(() => {
+    if (n && n !== h.current && d.current && u.current) {
+      const e = u.current, r = d.current, i = r.offsetTop, o = e.clientHeight, l = r.clientHeight, m = i - o / 2 + l / 2;
       e.scrollTo({
-        top: i,
+        top: m,
         behavior: "smooth"
-      });
+      }), h.current = n;
     }
-  }, [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",
+  }, [n, u]), /* @__PURE__ */ $(K, { children: [
+    t.map((e, r) => {
+      const i = e[0];
+      if (!i)
+        return null;
+      const o = H(i.startTime);
+      return /* @__PURE__ */ c("div", { className: "xiping-subtitle-player__group", children: e.map(({ entry: l, label: m, startTime: p, endTime: x }, a) => {
+        const f = s >= p && s <= x, w = `${r}-${a}`;
+        return /* @__PURE__ */ c(
+          M,
           {
-            ref: h ? a : null,
-            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,
-            children: [
-              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__ */ s(
-                    "div",
-                    {
-                      className: "xiping-subtitle-player__line",
-                      children: l
-                    },
-                    d
-                  );
-                const f = A(
-                  l,
-                  t.words,
-                  x,
-                  d,
-                  u ? N(t, i) : void 0
-                );
-                return x = f.nextWordIndex, /* @__PURE__ */ s(
-                  "div",
-                  {
-                    className: "xiping-subtitle-player__line",
-                    children: f.nodes
-                  },
-                  d
-                );
-              }) })
-            ]
+            entry: l,
+            label: m,
+            endTime: x,
+            currentTime: s,
+            isActive: f,
+            isFirstItem: a === 0,
+            timeString: a === 0 ? o : void 0,
+            textAlign: N,
+            enableWordHover: _,
+            wordHoverFactory: v,
+            onSubtitleClick: g,
+            itemRef: f ? d : void 0
           },
-          `${r}-${g}`
+          w
         );
       }) }, r);
     }),
-    u && /* @__PURE__ */ s("div", { className: "xiping-subtitle-player__hover-layer", children: b })
+    _ && /* @__PURE__ */ c("div", { className: "xiping-subtitle-player__lyrics-hover-layer", children: y })
   ] });
 };
 export {
-  P as LyricsMode
+  q as LyricsMode
 };

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

@@ -0,0 +1 @@
+.xiping-subtitle-player{display:flex;flex-direction:column;gap:.75rem;padding:1rem;background:#000000bf;border-radius:.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.6;max-width:100%;box-sizing:border-box;position:relative}.xiping-subtitle-player__hover-overlay{position:absolute;transform:translate(-50%,.5rem);z-index:10;pointer-events:auto}.xiping-subtitle-player:has(.xiping-subtitle-player__current-item:only-child){align-items:center}.xiping-subtitle-player:has(.xiping-subtitle-player__current-item:not(:only-child)){align-items:flex-start}.xiping-subtitle-word{display:inline-block;position:relative;transition:all .2s ease;padding:0 .05em;margin:0 .05em;border-radius:2px}.xiping-subtitle-word:hover{background-color:#ffffff1a;transform:translateY(-1px)}.xiping-subtitle-word-before,.xiping-subtitle-word-after{display:inline}@media(max-width:768px){.xiping-subtitle-player{padding:.75rem;font-size:.9rem}}

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

@@ -19,6 +19,8 @@ export interface SubtitlePlayerProps {
     currentTime: number;
     /** 显示模式：'current' 只显示当前字幕，'lyrics' 显示全部字幕并高亮当前 */
     mode?: SubtitleDisplayMode;
+    /** 文本对齐方式：'left' 左对齐，'center' 居中，默认为 'left' */
+    textAlign?: "left" | "center";
     /** 自定义类名 */
     className?: string;
     /** 自定义样式 */