@xiping/react-components 1.0.70 → 1.0.77

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

@@ -1,116 +0,0 @@
-import { jsx as E } from "react/jsx-runtime";
-import { useRef as m, useEffect as F } from "react";
-import { gsap as i } from "gsap";
-import { ScrollTrigger as N } from "gsap/ScrollTrigger";
-import { SplitText as S } from "gsap/SplitText";
-import j from "clsx";
-import './SplitText.css';/* empty css              */
-i.registerPlugin(N, S);
-const A = ({
-  text: l,
-  className: C = "",
-  delay: g = 100,
-  duration: d = 0.6,
-  ease: h = "power3.out",
-  splitType: n = "chars",
-  from: w = { opacity: 0, y: 40 },
-  to: c = { opacity: 1, y: 0 },
-  threshold: x = 0.1,
-  rootMargin: y = "-100px",
-  textAlign: R = "center",
-  onLetterAnimationComplete: T
-}) => {
-  const a = m(null), $ = m(!1), o = m(null);
-  return F(() => {
-    if (typeof window > "u" || !a.current || !l) return;
-    const p = a.current;
-    $.current = !1;
-    const b = n === "lines";
-    b && (p.style.position = "relative");
-    let r;
-    try {
-      r = new S(p, {
-        type: n,
-        absolute: b,
-        linesClass: "split-line"
-      });
-    } catch (t) {
-      console.error("Failed to create SplitText:", t);
-      return;
-    }
-    let e;
-    switch (n) {
-      case "lines":
-        e = r.lines;
-        break;
-      case "words":
-        e = r.words;
-        break;
-      case "chars":
-        e = r.chars;
-        break;
-      default:
-        e = r.chars;
-    }
-    if (!e || e.length === 0) {
-      console.warn("No targets found for SplitText animation"), r.revert();
-      return;
-    }
-    e.forEach((t) => {
-      t.style.willChange = "transform, opacity";
-    });
-    const v = (1 - x) * 100, s = /^(-?\d+(?:\.\d+)?)(px|em|rem|%)?$/.exec(y), u = s ? parseFloat(s[1]) : 0, k = s && s[2] || "px", P = u < 0 ? `-=${Math.abs(u)}${k}` : `+=${u}${k}`, D = `top ${v}%${P}`, f = i.timeline({
-      scrollTrigger: {
-        trigger: p,
-        start: D,
-        toggleActions: "play none none none",
-        once: !0,
-        onToggle: (t) => {
-          o.current = t;
-        }
-      },
-      smoothChildTiming: !0,
-      onComplete: () => {
-        $.current = !0, i.set(e, {
-          ...c,
-          clearProps: "willChange",
-          immediateRender: !0
-        }), T?.();
-      }
-    });
-    return f.set(e, { ...w, immediateRender: !1, force3D: !0 }), f.to(e, {
-      ...c,
-      duration: d,
-      ease: h,
-      stagger: g / 1e3,
-      force3D: !0
-    }), () => {
-      f.kill(), o.current && (o.current.kill(), o.current = null), i.killTweensOf(e), r && r.revert();
-    };
-  }, [
-    l,
-    g,
-    d,
-    h,
-    n,
-    w,
-    c,
-    x,
-    y,
-    T
-  ]), /* @__PURE__ */ E(
-    "p",
-    {
-      ref: a,
-      className: j("xiping-split-parent", C),
-      style: {
-        textAlign: R,
-        wordWrap: "break-word"
-      },
-      children: l
-    }
-  );
-};
-export {
-  A as SplitText
-};

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

@@ -1,78 +0,0 @@
-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 {
-  C as CurrentMode
-};

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

@@ -1,152 +0,0 @@
-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 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: m,
-        behavior: "smooth"
-      }), h.current = n;
-    }
-  }, [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,
-          {
-            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
-          },
-          w
-        );
-      }) }, r);
-    }),
-    _ && /* @__PURE__ */ c("div", { className: "xiping-subtitle-player__lyrics-hover-layer", children: y })
-  ] });
-};
-export {
-  q as LyricsMode
-};

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

@@ -1,234 +0,0 @@
-import { jsx as S, jsxs as F } from "react/jsx-runtime";
-import { useMemo as h, 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 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,
-  mode: m = "current",
-  textAlign: E = "left",
-  className: L = "",
-  style: A,
-  onWordHoverChange: a,
-  renderWordOverlay: d,
-  onWordClick: y,
-  onSubtitleClick: T
-}) => {
-  const i = h(
-    () => Array.isArray(p) ? p : [p],
-    [p]
-  ), 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 q(t.content, n) : await K(t.content, n);
-              return {
-                entries: JSON.parse(o),
-                label: t.label
-              };
-            } catch (n) {
-              return console.error("字幕解析失败:", n), {
-                entries: t.type === "srt" ? w(t.content) : v(t.content),
-                label: t.label
-              };
-            }
-          })
-        );
-        r && b(e);
-      } catch (e) {
-        if (console.error("加载字幕失败:", e), r) {
-          const t = i.map((n) => {
-            try {
-              return {
-                entries: n.type === "srt" ? w(n.content) : v(n.content),
-                label: n.label
-              };
-            } catch (o) {
-              return console.error("字幕解析失败:", o), {
-                entries: [],
-                label: n.label
-              };
-            }
-          });
-          b(t);
-        }
-      }
-    }
-    return c(), () => {
-      r = !1;
-    };
-  }, [i]);
-  const g = h(() => R.length > 0 ? R : i.map((r) => {
-    try {
-      return {
-        entries: r.type === "srt" ? w(r.content) : v(r.content),
-        label: r.label
-      };
-    } catch (c) {
-      return console.error("字幕解析失败:", c), {
-        entries: [],
-        label: r.label
-      };
-    }
-  }), [R, i]), W = h(() => g.map(({ entries: r, label: c }) => ({
-    entry: Y(r, f),
-    label: c,
-    entries: r
-    // 保留所有条目用于歌词模式
-  })), [g, f]), _ = h(() => {
-    const r = [];
-    g.forEach(({ entries: t, label: n }) => {
-      t.forEach((o) => {
-        r.push({
-          entry: o,
-          label: n,
-          startTime: J(o.startTime),
-          endTime: J(o.endTime)
-        });
-      });
-    }), r.sort((t, n) => t.startTime - n.startTime);
-    const c = [];
-    let e = [];
-    for (const t of r)
-      if (e.length === 0)
-        e.push(t);
-      else {
-        const n = e[e.length - 1];
-        t.startTime <= n.endTime ? e.push(t) : (c.push(e), e = [t]);
-      }
-    return e.length > 0 && c.push(e), c;
-  }, [g]), x = u(
-    (r, c) => {
-      const e = r.currentTarget.getBoundingClientRect(), t = l.current?.getBoundingClientRect(), n = t !== void 0 ? new DOMRect(
-        e.left - t.left,
-        e.top - t.top,
-        e.width,
-        e.height
-      ) : e, o = {
-        ...c,
-        rect: n,
-        element: r.currentTarget
-      };
-      M(o), a?.(o);
-    },
-    [a]
-  ), B = u(() => {
-    M(null), a?.(null);
-  }, [a]), C = u(
-    (r, c) => {
-      if (!y) return;
-      r.stopPropagation();
-      const e = r.currentTarget.getBoundingClientRect(), t = l.current?.getBoundingClientRect(), n = t !== void 0 ? new DOMRect(
-        e.left - t.left,
-        e.top - t.top,
-        e.width,
-        e.height
-      ) : e, o = {
-        type: "word",
-        ...c,
-        rect: n,
-        element: r.currentTarget
-      };
-      y(o);
-    },
-    [y]
-  ), N = u(
-    (r, c, e) => {
-      if (!T || r.target.closest(".xiping-subtitle-word"))
-        return;
-      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, z = {
-        type: "subtitle",
-        entry: c,
-        label: e,
-        rect: k,
-        element: r.currentTarget
-      };
-      T(z);
-    },
-    [T]
-  ), O = u(
-    (r, c) => (e, t, n) => ({
-      onMouseEnter: (o) => x(o, {
-        word: e,
-        wordIndex: t,
-        lineIndex: n,
-        entry: r,
-        label: c
-      }),
-      onMouseLeave: B,
-      onClick: (o) => C(o, {
-        word: e,
-        wordIndex: t,
-        lineIndex: n,
-        entry: r,
-        label: c
-      })
-    }),
-    [x, B, C]
-  ), P = d && s ? /* @__PURE__ */ S(
-    "div",
-    {
-      className: "xiping-subtitle-player__hover-overlay",
-      style: {
-        left: s.rect.x + s.rect.width / 2,
-        top: s.rect.y + s.rect.height
-      },
-      children: d(s)
-    }
-  ) : null, j = !!(d || a);
-  return /* @__PURE__ */ F(
-    "div",
-    {
-      ref: l,
-      className: Q(
-        "xiping-subtitle-player",
-        m === "lyrics" ? "xiping-subtitle-player--lyrics" : "xiping-subtitle-player--current",
-        L
-      ),
-      style: A,
-      children: [
-        m === "current" && /* @__PURE__ */ S(
-          U,
-          {
-            currentEntries: W,
-            wordHoverFactory: O,
-            enableWordHover: j,
-            overlayNode: P,
-            onSubtitleClick: N,
-            textAlign: E
-          }
-        ),
-        m === "lyrics" && /* @__PURE__ */ S(
-          X,
-          {
-            groupedEntriesByTime: _,
-            currentTime: f,
-            wordHoverFactory: O,
-            enableWordHover: j,
-            overlayNode: P,
-            containerRef: l,
-            onSubtitleClick: N,
-            textAlign: E
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  ct as SubtitlePlayer
-};