@xiping/react-components 1.0.69 → 1.0.77

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

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

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

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

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

@@ -0,0 +1,169 @@
+import { parseSRT as e, parseVTT as t } from "../../packages/subtitle/lib/src/parser.js";
+import { srtToJson as n, vttToJson as r } from "../../packages/subtitle/lib/src/json-converter.js";
+import './SubtitlePlayer.css';/* empty css                                */
+import { getCurrentSubtitleEntry as i, timeStringToSeconds as a } from "./utils.js";
+import { CurrentMode as o } from "./CurrentMode2.js";
+import { LyricsMode as s } from "./LyricsMode2.js";
+/* empty css               */
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useCallback as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
+import h from "clsx";
+//#region src/components/subtitle-player/SubtitlePlayer.tsx
+var g = ({ subtitles: g, currentTime: _, mode: v = "current", textAlign: y = "left", className: b = "", style: x, onWordHoverChange: S, renderWordOverlay: C, onWordClick: w, onSubtitleClick: T }) => {
+	let E = f(() => Array.isArray(g) ? g : [g], [g]), D = p(null), [O, k] = m(null), [A, j] = m([]);
+	d(() => {
+		let i = !0;
+		async function a() {
+			try {
+				let a = await Promise.all(E.map(async (i) => {
+					try {
+						let e = i.language || "zh", t = i.type === "srt" ? await n(i.content, e) : await r(i.content, e);
+						return {
+							entries: JSON.parse(t),
+							label: i.label
+						};
+					} catch (n) {
+						return console.error("字幕解析失败:", n), {
+							entries: i.type === "srt" ? e(i.content) : t(i.content),
+							label: i.label
+						};
+					}
+				}));
+				i && j(a);
+			} catch (n) {
+				console.error("加载字幕失败:", n), i && j(E.map((n) => {
+					try {
+						return {
+							entries: n.type === "srt" ? e(n.content) : t(n.content),
+							label: n.label
+						};
+					} catch (e) {
+						return console.error("字幕解析失败:", e), {
+							entries: [],
+							label: n.label
+						};
+					}
+				}));
+			}
+		}
+		return a(), () => {
+			i = !1;
+		};
+	}, [E]);
+	let M = f(() => A.length > 0 ? A : E.map((n) => {
+		try {
+			return {
+				entries: n.type === "srt" ? e(n.content) : t(n.content),
+				label: n.label
+			};
+		} catch (e) {
+			return console.error("字幕解析失败:", e), {
+				entries: [],
+				label: n.label
+			};
+		}
+	}), [A, E]), N = f(() => M.map(({ entries: e, label: t }) => ({
+		entry: i(e, _),
+		label: t,
+		entries: e
+	})), [M, _]), P = f(() => {
+		let e = [];
+		M.forEach(({ entries: t, label: n }) => {
+			t.forEach((t) => {
+				e.push({
+					entry: t,
+					label: n,
+					startTime: a(t.startTime),
+					endTime: a(t.endTime)
+				});
+			});
+		}), e.sort((e, t) => e.startTime - t.startTime);
+		let t = [], n = [];
+		for (let r of e) if (n.length === 0) n.push(r);
+		else {
+			let e = n[n.length - 1];
+			r.startTime <= e.endTime ? n.push(r) : (t.push(n), n = [r]);
+		}
+		return n.length > 0 && t.push(n), t;
+	}, [M]), F = u((e, t) => {
+		let n = e.currentTarget.getBoundingClientRect(), r = D.current?.getBoundingClientRect(), i = r === void 0 ? n : new DOMRect(n.left - r.left, n.top - r.top, n.width, n.height), a = {
+			...t,
+			rect: i,
+			element: e.currentTarget
+		};
+		k(a), S?.(a);
+	}, [S]), I = u(() => {
+		k(null), S?.(null);
+	}, [S]), L = u((e, t) => {
+		if (!w) return;
+		e.stopPropagation();
+		let n = e.currentTarget.getBoundingClientRect(), r = D.current?.getBoundingClientRect(), i = r === void 0 ? n : new DOMRect(n.left - r.left, n.top - r.top, n.width, n.height);
+		w({
+			type: "word",
+			...t,
+			rect: i,
+			element: e.currentTarget
+		});
+	}, [w]), R = u((e, t, n) => {
+		if (!T || e.target.closest(".xiping-subtitle-word")) return;
+		let r = e.currentTarget.getBoundingClientRect(), i = D.current?.getBoundingClientRect();
+		T({
+			type: "subtitle",
+			entry: t,
+			label: n,
+			rect: i === void 0 ? r : new DOMRect(r.left - i.left, r.top - i.top, r.width, r.height),
+			element: e.currentTarget
+		});
+	}, [T]), z = u((e, t) => (n, r, i) => ({
+		onMouseEnter: (a) => F(a, {
+			word: n,
+			wordIndex: r,
+			lineIndex: i,
+			entry: e,
+			label: t
+		}),
+		onMouseLeave: I,
+		onClick: (a) => L(a, {
+			word: n,
+			wordIndex: r,
+			lineIndex: i,
+			entry: e,
+			label: t
+		})
+	}), [
+		F,
+		I,
+		L
+	]), B = C && O ? /* @__PURE__ */ c("div", {
+		className: "xiping-subtitle-player__hover-overlay",
+		style: {
+			left: O.rect.x + O.rect.width / 2,
+			top: O.rect.y + O.rect.height
+		},
+		children: C(O)
+	}) : null, V = !!(C || S);
+	return /* @__PURE__ */ l("div", {
+		ref: D,
+		className: h("xiping-subtitle-player", v === "lyrics" ? "xiping-subtitle-player--lyrics" : "xiping-subtitle-player--current", b),
+		style: x,
+		children: [v === "current" && /* @__PURE__ */ c(o, {
+			currentEntries: N,
+			wordHoverFactory: z,
+			enableWordHover: V,
+			overlayNode: B,
+			onSubtitleClick: R,
+			textAlign: y
+		}), v === "lyrics" && /* @__PURE__ */ c(s, {
+			groupedEntriesByTime: P,
+			currentTime: _,
+			wordHoverFactory: z,
+			enableWordHover: V,
+			overlayNode: B,
+			containerRef: D,
+			onSubtitleClick: R,
+			textAlign: y
+		})]
+	});
+};
+//#endregion
+export { g as default };

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

@@ -1,73 +1,67 @@
-import { jsx as d } from "react/jsx-runtime";
-function h(t) {
-  const n = t.replace(",", ".").split(":");
-  if (n.length !== 3)
-    return 0;
-  const r = parseInt(n[0], 10) || 0, a = parseInt(n[1], 10) || 0, s = parseFloat(n[2]) || 0;
-  return r * 3600 + a * 60 + s;
+import { jsx as e } from "react/jsx-runtime";
+import "react";
+//#region src/components/subtitle-player/utils.tsx
+function t(e) {
+	let t = e.replace(",", ".").split(":");
+	if (t.length !== 3) return 0;
+	let n = parseInt(t[0], 10) || 0, r = parseInt(t[1], 10) || 0, i = parseFloat(t[2]) || 0;
+	return n * 3600 + r * 60 + i;
 }
-function S(t) {
-  const e = Math.floor(t / 3600), n = Math.floor(t % 3600 / 60), r = Math.floor(t % 60);
-  return e > 0 ? `${e.toString().padStart(2, "0")}:${n.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}` : `${n.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}`;
+function n(e) {
+	let t = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), r = Math.floor(e % 60);
+	return t > 0 ? `${t.toString().padStart(2, "0")}:${n.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}` : `${n.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}`;
 }
-function x(t, e) {
-  for (const n of t) {
-    const r = h(n.startTime), a = h(n.endTime);
-    if (e >= r && e <= a)
-      return n;
-  }
-  return null;
+function r(e, n) {
+	for (let r of e) {
+		let e = t(r.startTime), i = t(r.endTime);
+		if (n >= e && n <= i) return r;
+	}
+	return null;
 }
-function T(t, e, n, r, a) {
-  if (!e || e.length === 0)
-    return { nodes: t, nextWordIndex: n };
-  const s = [];
-  let i = 0;
-  for (let o = n; o < e.length; o++) {
-    const c = e[o], f = t.substring(i).indexOf(c);
-    if (f === -1)
-      return {
-        nodes: s.length > 0 ? s : t,
-        nextWordIndex: o
-      };
-    const u = i + f;
-    if (u > i) {
-      const g = t.substring(i, u);
-      g && s.push(
-        /* @__PURE__ */ d("span", { className: "xiping-subtitle-word-before", children: g }, `before-${r}-${o}`)
-      );
-    }
-    const l = a?.(c, o, r);
-    if (s.push(
-      /* @__PURE__ */ d(
-        "span",
-        {
-          className: "xiping-subtitle-word",
-          "data-word": c,
-          onMouseEnter: l?.onMouseEnter,
-          onMouseLeave: l?.onMouseLeave,
-          onClick: l?.onClick,
-          children: c
-        },
-        `word-${r}-${o}`
-      )
-    ), i = u + c.length, i >= t.length)
-      return { nodes: s, nextWordIndex: o + 1 };
-  }
-  if (i < t.length) {
-    const o = t.substring(i);
-    o && s.push(
-      /* @__PURE__ */ d("span", { className: "xiping-subtitle-word-after", children: o }, `after-${r}`)
-    );
-  }
-  return {
-    nodes: s.length > 0 ? s : t,
-    nextWordIndex: e.length
-  };
+function i(t, n, r, i, a) {
+	if (!n || n.length === 0) return {
+		nodes: t,
+		nextWordIndex: r
+	};
+	let o = [], s = 0;
+	for (let c = r; c < n.length; c++) {
+		let r = n[c], l = t.substring(s).indexOf(r);
+		if (l === -1) return {
+			nodes: o.length > 0 ? o : t,
+			nextWordIndex: c
+		};
+		let u = s + l;
+		if (u > s) {
+			let n = t.substring(s, u);
+			n && o.push(/* @__PURE__ */ e("span", {
+				className: "xiping-subtitle-word-before",
+				children: n
+			}, `before-${i}-${c}`));
+		}
+		let d = a?.(r, c, i);
+		if (o.push(/* @__PURE__ */ e("span", {
+			className: "xiping-subtitle-word",
+			"data-word": r,
+			onMouseEnter: d?.onMouseEnter,
+			onMouseLeave: d?.onMouseLeave,
+			onClick: d?.onClick,
+			children: r
+		}, `word-${i}-${c}`)), s = u + r.length, s >= t.length) return {
+			nodes: o,
+			nextWordIndex: c + 1
+		};
+	}
+	if (s < t.length) {
+		let n = t.substring(s);
+		n && o.push(/* @__PURE__ */ e("span", {
+			className: "xiping-subtitle-word-after",
+			children: n
+		}, `after-${i}`));
+	}
+	return {
+		nodes: o.length > 0 ? o : t,
+		nextWordIndex: n.length
+	};
 }
-export {
-  x as getCurrentSubtitleEntry,
-  T as renderTextWithWords,
-  S as secondsToTimeString,
-  h as timeStringToSeconds
-};
+//#endregion
+export { r as getCurrentSubtitleEntry, i as renderTextWithWords, n as secondsToTimeString, t as timeStringToSeconds };

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

@@ -1 +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}
+.xiping-text-animate{white-space:pre-wrap}.xiping-text-animate-segment{white-space:pre;display:inline-block}.xiping-text-animate-segment--line{display:block}