@xiping/react-components 1.0.43 → 1.0.49

package/dist/es/components/shiny-button/ShinyButton.js

@@ -1,9 +1,10 @@
 "use client";
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
 import { cn as s } from "../../utils/utils.js";
 import { motion as o } from "motion/react";
-import l from "react";
-const p = {
+import p from "react";
+/* empty css                */
+const c = {
   initial: { "--x": "100%", scale: 0.8 },
   animate: { "--x": "-100%", scale: 1 },
   whileTap: { scale: 0.95 },
@@ -22,28 +23,25 @@ const p = {
       mass: 0.5
     }
   }
-}, c = l.forwardRef(({ children: a, className: e, ...t }, i) => /* @__PURE__ */ n(
+}, l = p.forwardRef(({ children: r, className: e, ...n }, i) => /* @__PURE__ */ t(
   o.button,
   {
     ref: i,
-    className: s(
-      "relative cursor-pointer rounded-lg px-6 py-2 font-medium backdrop-blur-xl border transition-shadow duration-300 ease-in-out hover:shadow dark:bg-[radial-gradient(circle_at_50%_0%,var(--primary)/10%_0%,transparent_60%)] dark:hover:shadow-[0_0_20px_var(--primary)/10%]",
-      e
-    ),
-    ...p,
-    ...t,
+    className: s("xiping-shiny-button", e),
+    ...c,
+    ...n,
     children: [
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ a(
         "span",
         {
-          className: "relative block size-full text-sm uppercase tracking-wide text-[rgb(0,0,0,65%)] dark:font-light dark:text-[rgb(255,255,255,90%)]",
+          className: "xiping-shiny-button-text",
           style: {
             maskImage: "linear-gradient(-75deg,var(--primary) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),var(--primary) calc(var(--x) + 100%))"
           },
-          children: a
+          children: r
         }
       ),
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ a(
         "span",
         {
           style: {
@@ -51,13 +49,13 @@ const p = {
             WebkitMask: "linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box exclude,linear-gradient(rgb(0,0,0), rgb(0,0,0))",
             backgroundImage: "linear-gradient(-75deg,var(--primary)/10% calc(var(--x)+20%),var(--primary)/50% calc(var(--x)+25%),var(--primary)/10% calc(var(--x)+100%))"
           },
-          className: "absolute inset-0 z-10 block rounded-[inherit] p-px"
+          className: "xiping-shiny-button-border"
         }
       )
     ]
   }
 ));
-c.displayName = "ShinyButton";
+l.displayName = "ShinyButton";
 export {
-  c as ShinyButton
+  l as ShinyButton
 };

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

@@ -1,19 +1,20 @@
 "use client";
-import { jsx as r, jsxs as x } from "react/jsx-runtime";
-import { motion as L } from "motion/react";
-import { useState as S, useEffect as y } from "react";
-import { cn as M } from "../../utils/utils.js";
-const $ = ({ id: o, x: t, y: i, color: s, delay: l, scale: c }) => /* @__PURE__ */ r(
-  L.svg,
+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(
+  k.svg,
   {
-    className: "pointer-events-none absolute z-20",
-    initial: { opacity: 0, left: t, top: i },
+    className: "xiping-sparkle",
+    initial: { opacity: 0, left: t, top: o },
     animate: {
       opacity: [0, 1, 0],
-      scale: [0, c, 0],
+      scale: [0, l, 0],
       rotate: [75, 120, 150]
     },
-    transition: { duration: 0.8, repeat: 1 / 0, delay: l },
+    transition: { duration: 0.8, repeat: 1 / 0, delay: c },
     width: "21",
     height: "21",
     viewBox: "0 0 21 21",
@@ -25,46 +26,46 @@ const $ = ({ id: o, x: t, y: i, color: s, delay: l, scale: c }) => /* @__PURE__
       }
     )
   },
-  o
-), E = ({
-  children: o,
+  i
+), I = ({
+  children: i,
   colors: t = { first: "#9E7AFF", second: "#FE8BBB" },
-  className: i,
+  className: o,
   sparklesCount: s = 10,
-  ...l
+  ...c
 }) => {
-  const [c, d] = S([]);
-  return y(() => {
+  const [l, p] = L([]);
+  return S(() => {
     const a = () => {
-      const e = `${Math.random() * 100}%`, n = `${Math.random() * 100}%`, h = Math.random() > 0.5 ? t.first : t.second, u = Math.random() * 2, C = Math.random() * 1 + 0.3, v = Math.random() * 10 + 5;
-      return { id: `${e}-${n}-${Date.now()}`, x: e, y: n, color: h, delay: u, scale: C, lifespan: v };
-    }, p = () => {
+      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 };
+    }, d = () => {
       const e = Array.from({ length: s }, a);
-      d(e);
+      p(e);
     }, m = () => {
-      d(
+      p(
         (e) => e.map((n) => n.lifespan <= 0 ? a() : { ...n, lifespan: n.lifespan - 0.1 })
       );
     };
-    p();
+    d();
     const f = setInterval(m, 100);
     return () => clearInterval(f);
   }, [t.first, t.second, s]), /* @__PURE__ */ r(
     "div",
     {
-      className: M("text-6xl font-bold", i),
-      ...l,
+      className: y("xiping-sparkles-text", o),
+      ...c,
       style: {
         "--sparkles-first-color": `${t.first}`,
         "--sparkles-second-color": `${t.second}`
       },
-      children: /* @__PURE__ */ x("span", { className: "relative inline-block", children: [
-        c.map((a) => /* @__PURE__ */ r($, { ...a }, a.id)),
-        /* @__PURE__ */ r("strong", { children: o })
+      children: /* @__PURE__ */ g("span", { className: "xiping-sparkles-text-wrapper", children: [
+        l.map((a) => /* @__PURE__ */ r(M, { ...a }, a.id)),
+        /* @__PURE__ */ r("strong", { children: i })
       ] })
     }
   );
 };
 export {
-  E as SparklesText
+  I as SparklesText
 };

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

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+import { SubtitleEntry, SubtitleLanguage } from '@xiping/subtitle';
+export type SubtitleType = 'srt' | 'vtt';
+export interface SubtitleData {
+    /** 字幕类型 */
+    type: SubtitleType;
+    /** 字幕内容字符串 */
+    content: string;
+    /** 可选的语言标识，用于多字幕对照时的标签显示 */
+    label?: string;
+    /** 字幕语言类型，用于分词，默认为中文 */
+    language?: SubtitleLanguage;
+}
+export type SubtitleDisplayMode = 'current' | 'lyrics';
+export interface SubtitlePlayerProps {
+    /** 字幕数据，可以是单个字幕或多个字幕（用于对照） */
+    subtitles: SubtitleData | SubtitleData[];
+    /** 当前播放进度（秒数） */
+    currentTime: number;
+    /** 显示模式：'current' 只显示当前字幕，'lyrics' 显示全部字幕并高亮当前 */
+    mode?: SubtitleDisplayMode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /**
+     * 分词 hover 状态回调，由外部决定如何处理（比如请求第三方接口、展示弹窗等）
+     * 传入 null 表示 hover 结束
+     */
+    onWordHoverChange?: (target: HoverTarget | null) => void;
+    /**
+     * 可选的渲染函数，在组件内部直接渲染自定义弹窗
+     * 建议将数据请求放到父组件，通过该函数返回需要展示的内容
+     */
+    renderWordOverlay?: (target: HoverTarget) => React.ReactNode;
+}
+export interface HoverTarget {
+    word: string;
+    wordIndex: number;
+    lineIndex: number;
+    entry: SubtitleEntry;
+    label?: string;
+    rect: DOMRect;
+}
+/**
+ * 字幕播放组件
+ * 支持 SRT 和 WebVTT 格式，可以同时显示多个字幕进行对照
+ * 支持两种显示模式：当前模式（只显示当前字幕）和歌词模式（显示全部并高亮当前）
+ */
+export declare const SubtitlePlayer: React.FC<SubtitlePlayerProps>;
+export default SubtitlePlayer;

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

@@ -0,0 +1,301 @@
+import { jsx as p, jsxs as $ } from "react/jsx-runtime";
+import { useMemo as x, useRef as D, useState as G, useEffect as O, useCallback as R } from "react";
+import { parseSRT as I, parseVTT as A } from "../../packages/subtitle/lib/src/parser.js";
+import { srtToJson as U, vttToJson as X } from "../../packages/subtitle/lib/src/json-converter.js";
+/* empty css                   */
+function E(l) {
+  const c = l.replace(",", ".").split(":");
+  if (c.length !== 3)
+    return 0;
+  const h = parseInt(c[0], 10) || 0, g = parseInt(c[1], 10) || 0, i = parseFloat(c[2]) || 0;
+  return h * 3600 + g * 60 + i;
+}
+function Y(l) {
+  const a = Math.floor(l / 3600), c = Math.floor(l % 3600 / 60), h = Math.floor(l % 60);
+  return a > 0 ? `${a.toString().padStart(2, "0")}:${c.toString().padStart(2, "0")}:${h.toString().padStart(2, "0")}` : `${c.toString().padStart(2, "0")}:${h.toString().padStart(2, "0")}`;
+}
+function Z(l, a) {
+  for (const c of l) {
+    const h = E(c.startTime), g = E(c.endTime);
+    if (a >= h && a <= g)
+      return c;
+  }
+  return null;
+}
+function q(l, a, c, h, g) {
+  if (!a || a.length === 0)
+    return { nodes: l, nextWordIndex: c };
+  const i = [];
+  let d = 0;
+  for (let u = c; u < a.length; u++) {
+    const m = a[u], f = l.substring(d).indexOf(m);
+    if (f === -1)
+      return {
+        nodes: i.length > 0 ? i : l,
+        nextWordIndex: u
+      };
+    const b = d + f;
+    if (b > d) {
+      const S = l.substring(d, b);
+      S && i.push(
+        /* @__PURE__ */ p("span", { className: "subtitle-word-before", children: S }, `before-${h}-${u}`)
+      );
+    }
+    const y = g?.(m, u, h);
+    if (i.push(
+      /* @__PURE__ */ p(
+        "span",
+        {
+          className: "subtitle-word",
+          "data-word": m,
+          onMouseEnter: y?.onMouseEnter,
+          onMouseLeave: y?.onMouseLeave,
+          children: m
+        },
+        `word-${h}-${u}`
+      )
+    ), d = b + m.length, d >= l.length)
+      return { nodes: i, nextWordIndex: u + 1 };
+  }
+  if (d < l.length) {
+    const u = l.substring(d);
+    u && i.push(
+      /* @__PURE__ */ p("span", { className: "subtitle-word-after", children: u }, `after-${h}`)
+    );
+  }
+  return {
+    nodes: i.length > 0 ? i : l,
+    nextWordIndex: a.length
+  };
+}
+const st = ({
+  subtitles: l,
+  currentTime: a,
+  mode: c = "current",
+  className: h = "",
+  style: g,
+  onWordHoverChange: i,
+  renderWordOverlay: d
+}) => {
+  const u = x(
+    () => Array.isArray(l) ? l : [l],
+    [l]
+  ), m = D(null), N = D(null), [f, b] = G(null), [y, S] = G([]);
+  O(() => {
+    let n = !0;
+    async function s() {
+      try {
+        const e = await Promise.all(
+          u.map(async (t) => {
+            try {
+              const r = t.language || "zh", o = t.type === "srt" ? await U(t.content, r) : await X(t.content, r);
+              return {
+                entries: JSON.parse(o),
+                label: t.label
+              };
+            } catch (r) {
+              return console.error("字幕解析失败:", r), {
+                entries: t.type === "srt" ? I(t.content) : A(t.content),
+                label: t.label
+              };
+            }
+          })
+        );
+        n && S(e);
+      } catch (e) {
+        if (console.error("加载字幕失败:", e), n) {
+          const t = u.map((r) => {
+            try {
+              return {
+                entries: r.type === "srt" ? I(r.content) : A(r.content),
+                label: r.label
+              };
+            } catch (o) {
+              return console.error("字幕解析失败:", o), {
+                entries: [],
+                label: r.label
+              };
+            }
+          });
+          S(t);
+        }
+      }
+    }
+    return s(), () => {
+      n = !1;
+    };
+  }, [u]);
+  const w = x(() => y.length > 0 ? y : u.map((n) => {
+    try {
+      return {
+        entries: n.type === "srt" ? I(n.content) : A(n.content),
+        label: n.label
+      };
+    } catch (s) {
+      return console.error("字幕解析失败:", s), {
+        entries: [],
+        label: n.label
+      };
+    }
+  }), [y, u]), L = x(() => w.map(({ entries: n, label: s }) => ({
+    entry: Z(n, a),
+    label: s,
+    entries: n
+    // 保留所有条目用于歌词模式
+  })), [w, a]), H = x(() => {
+    const n = [];
+    w.forEach(({ entries: t, label: r }) => {
+      t.forEach((o) => {
+        n.push({
+          entry: o,
+          label: r,
+          startTime: E(o.startTime),
+          endTime: E(o.endTime)
+        });
+      });
+    }), n.sort((t, r) => t.startTime - r.startTime);
+    const s = [];
+    let e = [];
+    for (const t of n)
+      if (e.length === 0)
+        e.push(t);
+      else {
+        const r = e[e.length - 1];
+        t.startTime <= r.endTime ? e.push(t) : (s.push(e), e = [t]);
+      }
+    return e.length > 0 && s.push(e), s;
+  }, [w]);
+  O(() => {
+    if (c === "lyrics" && N.current && m.current) {
+      const n = m.current, s = N.current, e = s.offsetTop, t = n.clientHeight, r = s.clientHeight, o = e - t / 2 + r / 2;
+      n.scrollTo({
+        top: o,
+        behavior: "smooth"
+      });
+    }
+  }, [c, a]);
+  const P = R(
+    (n, s) => {
+      const e = n.currentTarget.getBoundingClientRect(), t = m.current?.getBoundingClientRect(), r = t !== void 0 ? new DOMRect(
+        e.left - t.left,
+        e.top - t.top,
+        e.width,
+        e.height
+      ) : e, o = {
+        ...s,
+        rect: r
+      };
+      b(o), i?.(o);
+    },
+    [i]
+  ), j = R(() => {
+    b(null), i?.(null);
+  }, [i]), z = R(
+    (n, s) => (e, t, r) => ({
+      onMouseEnter: (o) => P(o, {
+        word: e,
+        wordIndex: t,
+        lineIndex: r,
+        entry: n,
+        label: s
+      }),
+      onMouseLeave: j
+    }),
+    [P, j]
+  ), B = d && f ? /* @__PURE__ */ p(
+    "div",
+    {
+      className: "subtitle-player-hover-overlay",
+      style: {
+        left: f.rect.x + f.rect.width / 2,
+        top: f.rect.y + f.rect.height
+      },
+      children: d(f)
+    }
+  ) : null;
+  return c === "current" ? L.some(({ entry: s }) => s !== null) ? /* @__PURE__ */ $(
+    "div",
+    {
+      ref: m,
+      className: `subtitle-player subtitle-player--current ${h}`,
+      style: g,
+      children: [
+        L.map(({ entry: s, label: e }, t) => s ? /* @__PURE__ */ $(
+          "div",
+          {
+            className: "subtitle-player-item",
+            "data-label": e || void 0,
+            children: [
+              e && /* @__PURE__ */ p("span", { className: "subtitle-player-label", children: e }),
+              /* @__PURE__ */ p("div", { className: "subtitle-player-text", children: (() => {
+                let r = 0;
+                return s.text.split(`
+`).map((o, T) => {
+                  if (!s.words || s.words.length === 0)
+                    return /* @__PURE__ */ p("div", { className: "subtitle-player-line", children: o }, T);
+                  const v = q(
+                    o,
+                    s.words,
+                    r,
+                    T,
+                    d || i ? z(s, e) : void 0
+                  );
+                  return r = v.nextWordIndex, /* @__PURE__ */ p("div", { className: "subtitle-player-line", children: v.nodes }, T);
+                });
+              })() })
+            ]
+          },
+          t
+        ) : null),
+        (d || i) && /* @__PURE__ */ p("div", { className: "subtitle-player-hover-layer", children: B })
+      ]
+    }
+  ) : null : /* @__PURE__ */ $(
+    "div",
+    {
+      ref: m,
+      className: `subtitle-player subtitle-player--lyrics ${h}`,
+      style: g,
+      children: [
+        H.map((n, s) => {
+          const e = n[0]?.startTime ?? 0, t = Y(e);
+          return /* @__PURE__ */ p("div", { className: "subtitle-player-group", children: n.map(({ entry: r, label: o, startTime: T, endTime: v }, F) => {
+            const J = a >= T && a <= v, K = a > v, Q = F === 0;
+            let V = 0;
+            return /* @__PURE__ */ $(
+              "div",
+              {
+                ref: J ? N : null,
+                className: `subtitle-player-item ${J ? "subtitle-player-item--active" : ""} ${K ? "subtitle-player-item--past" : ""}`,
+                "data-label": o || void 0,
+                children: [
+                  Q && /* @__PURE__ */ p("span", { className: "subtitle-player-time", children: t }),
+                  o && /* @__PURE__ */ p("span", { className: "subtitle-player-label", children: o }),
+                  /* @__PURE__ */ p("div", { className: "subtitle-player-text", children: r.text.split(`
+`).map((W, M) => {
+                    if (!r.words || r.words.length === 0)
+                      return /* @__PURE__ */ p("div", { className: "subtitle-player-line", children: W }, M);
+                    const k = q(
+                      W,
+                      r.words,
+                      V,
+                      M,
+                      d || i ? z(r, o) : void 0
+                    );
+                    return V = k.nextWordIndex, /* @__PURE__ */ p("div", { className: "subtitle-player-line", children: k.nodes }, M);
+                  }) })
+                ]
+              },
+              `${s}-${F}`
+            );
+          }) }, s);
+        }),
+        (d || i) && /* @__PURE__ */ p("div", { className: "subtitle-player-hover-layer", children: B })
+      ]
+    }
+  );
+};
+export {
+  st as SubtitlePlayer,
+  st as default
+};

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

@@ -0,0 +1,2 @@
+export * from './SubtitlePlayer';
+export { default } from './SubtitlePlayer';

package/dist/es/components/txt-editor/TxtEditor.d.ts

@@ -1,4 +1,4 @@
-import { OnMount } from '@monaco-editor/react';
+import { Editor } from '@tiptap/react';
 export interface TxtEditorProps {
     /**
      * 编辑器高度
@@ -13,6 +13,7 @@ export interface TxtEditorProps {
     /**
      * 编辑器默认语言
      * @default 'plaintext'
+     * @deprecated Tiptap 不支持语法高亮，此属性已废弃
      */
     language?: string;
     /**
@@ -40,13 +41,13 @@ export interface TxtEditorProps {
     /**
      * 编辑器加载完成回调
      */
-    onMount?: OnMount;
+    onMount?: (editor: Editor) => void;
     /**
      * 文本编辑器样式
      */
     className?: string;
 }
 /**
- * Monaco Editor 文本编辑器组件
+ * Tiptap 文本编辑器组件
  */
-export declare const TxtEditor: ({ height, width, language, defaultValue, value, theme, readOnly, onChange, onMount, className, }: TxtEditorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TxtEditor: ({ height, width, language: _language, defaultValue, value, theme, readOnly, onChange, onMount, className, }: TxtEditorProps) => import("react/jsx-runtime").JSX.Element;