@xiping/react-components 1.0.70 → 1.0.78

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

@@ -0,0 +1,10 @@
+import './index.module.css';//#region src/components/txt-reader/index.module.css
+var e = {
+	"xiping-top-progress": "_xiping-top-progress_rkm9f_23",
+	"xiping-container": "_xiping-container_rkm9f_33",
+	"xiping-content": "_xiping-content_rkm9f_41",
+	"xiping-bottom-progress": "_xiping-bottom-progress_rkm9f_48",
+	"xiping-text-content": "_xiping-text-content_rkm9f_63"
+};
+//#endregion
+export { e as default };

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

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

package/dist/es/components/typing-animation/index2.js

@@ -0,0 +1,43 @@
+"use client";
+import './index.css';/* empty css      */
+import { jsx as e } from "react/jsx-runtime";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import i from "clsx";
+import { motion as a } from "motion/react";
+//#region src/components/typing-animation/index.tsx
+function o({ children: o, className: s, duration: c = 100, delay: l = 0, as: u = "div", startOnView: d = !1, ...f }) {
+	let p = a.create(u, { forwardMotionProps: !0 }), [m, h] = r(""), [g, _] = r(!1), v = n(null);
+	return t(() => {
+		if (!d) {
+			let e = setTimeout(() => {
+				_(!0);
+			}, l);
+			return () => clearTimeout(e);
+		}
+		let e = new IntersectionObserver(([t]) => {
+			t.isIntersecting && (setTimeout(() => {
+				_(!0);
+			}, l), e.disconnect());
+		}, { threshold: .1 });
+		return v.current && e.observe(v.current), () => e.disconnect();
+	}, [l, d]), t(() => {
+		if (!g) return;
+		let e = 0, t = setInterval(() => {
+			e < o.length ? (h(o.substring(0, e + 1)), e++) : clearInterval(t);
+		}, c);
+		return () => {
+			clearInterval(t);
+		};
+	}, [
+		o,
+		c,
+		g
+	]), /* @__PURE__ */ e(p, {
+		ref: v,
+		className: i("xiping-typing-animation", s),
+		...f,
+		children: m
+	});
+}
+//#endregion
+export { o as default };

package/dist/es/components/variable-proximity/index.css

@@ -1 +1 @@
-.xiping-variable-proximity{font-family:Roboto Flex,Noto Sans SC,PingFang SC,Microsoft YaHei,SimHei,sans-serif}.xiping-variable-proximity__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+.xiping-variable-proximity{font-family:Roboto Flex,Noto Sans SC,PingFang SC,Microsoft YaHei,SimHei,sans-serif}.xiping-variable-proximity__sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}

package/dist/es/components/variable-proximity/index2.js

@@ -0,0 +1,179 @@
+import './index.css';/* empty css      */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { forwardRef as n, useEffect as r, useMemo as i, useRef as a } from "react";
+import o from "clsx";
+import { motion as s } from "motion/react";
+//#region src/components/variable-proximity/index.tsx
+var c = {
+	robotoFlex: !1,
+	notoSansSC: !1,
+	loading: !1
+};
+function l(e) {
+	if (typeof document > "u") return !1;
+	try {
+		return document.fonts.check(`1em "${e}"`);
+	} catch {
+		return !0;
+	}
+}
+function u() {
+	if (c.loading || c.robotoFlex && c.notoSansSC) return;
+	c.loading = !0;
+	let e = l("Roboto Flex"), t = l("Noto Sans SC");
+	if (e && (c.robotoFlex = !0), t && (c.notoSansSC = !0), e && t) {
+		c.loading = !1;
+		return;
+	}
+	let n = (e, t) => {
+		if (document.querySelector(`link[href="${e}"]`)) {
+			t?.();
+			return;
+		}
+		let n = document.createElement("link");
+		n.rel = "stylesheet", n.href = e, n.onload = () => t?.(), document.head.appendChild(n);
+	}, r = [{
+		roboto: "https://fonts.loli.net/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap",
+		noto: "https://fonts.loli.net/css2?family=Noto+Sans+SC:wght@100..900&display=swap"
+	}, {
+		roboto: "https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap",
+		noto: "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap"
+	}], i = (a) => {
+		if (a >= r.length) {
+			c.loading = !1;
+			return;
+		}
+		let o = r[a], s = 0, l = () => {
+			s++, s === 2 && (c.loading = !1);
+		};
+		e ? l() : n(o.roboto, () => {
+			c.robotoFlex = !0, l();
+		}), t ? l() : n(o.noto, () => {
+			c.notoSansSC = !0, l();
+		}), setTimeout(() => {
+			(!c.robotoFlex || !c.notoSansSC) && i(a + 1);
+		}, 3e3);
+	};
+	i(0);
+}
+function d(e = !0) {
+	r(() => {
+		e && typeof document < "u" && u();
+	}, [e]);
+}
+function f(e) {
+	r(() => {
+		let t, n = () => {
+			e(), t = requestAnimationFrame(n);
+		};
+		return t = requestAnimationFrame(n), () => cancelAnimationFrame(t);
+	}, [e]);
+}
+function p(e) {
+	let t = a({
+		x: 0,
+		y: 0
+	});
+	return r(() => {
+		let n = (n, r) => {
+			if (e?.current) {
+				let i = e.current.getBoundingClientRect();
+				t.current = {
+					x: n - i.left,
+					y: r - i.top
+				};
+			} else t.current = {
+				x: n,
+				y: r
+			};
+		}, r = (e) => n(e.clientX, e.clientY), i = (e) => {
+			let t = e.touches[0];
+			n(t.clientX, t.clientY);
+		};
+		return window.addEventListener("mousemove", r), window.addEventListener("touchmove", i), () => {
+			window.removeEventListener("mousemove", r), window.removeEventListener("touchmove", i);
+		};
+	}, [e]), t;
+}
+var m = n((n, r) => {
+	let { label: c, fromFontVariationSettings: l, toFontVariationSettings: u, containerRef: m, radius: h = 50, falloff: g = "linear", className: _ = "", onClick: v, style: y, fontFamily: b, autoLoadFonts: x = !0, ...S } = n;
+	d(x && !b);
+	let C = a([]), w = a([]), T = p(m), E = a({
+		x: null,
+		y: null
+	}), D = i(() => {
+		let e = (e) => new Map(e.split(",").map((e) => e.trim()).map((e) => {
+			let [t, n] = e.split(" ");
+			return [t.replace(/['"]/g, ""), parseFloat(n)];
+		})), t = e(l), n = e(u);
+		return Array.from(t.entries()).map(([e, t]) => ({
+			axis: e,
+			fromValue: t,
+			toValue: n.get(e) ?? t
+		}));
+	}, [l, u]), O = (e, t, n, r) => Math.sqrt((n - e) ** 2 + (r - t) ** 2), k = (e) => {
+		let t = Math.min(Math.max(1 - e / h, 0), 1);
+		switch (g) {
+			case "exponential": return t ** 2;
+			case "gaussian": return Math.exp(-((e / (h / 2)) ** 2) / 2);
+			default: return t;
+		}
+	};
+	f(() => {
+		if (!m?.current) return;
+		let { x: e, y: t } = T.current;
+		if (E.current.x === e && E.current.y === t) return;
+		E.current = {
+			x: e,
+			y: t
+		};
+		let n = m.current.getBoundingClientRect();
+		C.current.forEach((e, t) => {
+			if (!e) return;
+			let r = e.getBoundingClientRect(), i = r.left + r.width / 2 - n.left, a = r.top + r.height / 2 - n.top, o = O(T.current.x, T.current.y, i, a);
+			if (o >= h) {
+				e.style.fontVariationSettings = l;
+				return;
+			}
+			let s = k(o), c = D.map(({ axis: e, fromValue: t, toValue: n }) => `'${e}' ${t + (n - t) * s}`).join(", ");
+			w.current[t] = c, e.style.fontVariationSettings = c;
+		});
+	});
+	let A = /[\u4e00-\u9fa5]/.test(c) ? c.split("") : c.split(" ").flatMap((e, t, n) => {
+		let r = e.split("");
+		return t < n.length - 1 ? [...r, " "] : r;
+	}), j = 0, M = i(() => {
+		let e = {
+			display: "inline",
+			...y
+		};
+		return b && (e.fontFamily = b), e;
+	}, [b, y]);
+	return /* @__PURE__ */ t("span", {
+		ref: r,
+		className: o("xiping-variable-proximity", _),
+		onClick: v,
+		style: M,
+		...S,
+		children: [A.map((t, n) => {
+			let r = j++;
+			return /* @__PURE__ */ e(s.span, {
+				ref: (e) => {
+					C.current[r] = e;
+				},
+				style: {
+					display: t === " " ? "inline" : "inline-block",
+					fontVariationSettings: w.current[r]
+				},
+				"aria-hidden": "true",
+				children: t
+			}, n);
+		}), /* @__PURE__ */ e("span", {
+			className: "xiping-variable-proximity__sr-only",
+			children: c
+		})]
+	});
+});
+m.displayName = "VariableProximity";
+//#endregion
+export { m as default };

package/dist/es/components/video-dialog/VideoDialog.css

@@ -1 +1 @@
-.xiping-video-dialog{position:relative}.xiping-video-dialog-container{position:relative;cursor:pointer}.xiping-video-dialog-thumbnail{width:100%;border-radius:.375rem;border:1px solid;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;transition:all .2s ease-out}.xiping-video-dialog-container:hover .xiping-video-dialog-thumbnail{filter:brightness(.8)}.xiping-video-dialog-overlay{position:absolute;inset:0;display:flex;transform:scale(.9);align-items:center;justify-content:center;border-radius:1rem;transition:all .2s ease-out}.xiping-video-dialog-container:hover .xiping-video-dialog-overlay{transform:scale(1)}.xiping-video-dialog-play-outer{display:flex;width:7rem;height:7rem;align-items:center;justify-content:center;border-radius:9999px;background-color:hsla(var(--primary-h),var(--primary-s),var(--primary-l),.1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.xiping-video-dialog-play-inner{position:relative;display:flex;width:5rem;height:5rem;transform:scale(1);align-items:center;justify-content:center;border-radius:9999px;background:linear-gradient(to bottom,hsla(var(--primary-h),var(--primary-s),var(--primary-l),.3),hsl(var(--primary-h),var(--primary-s),var(--primary-l)));box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:all .2s ease-out}.xiping-video-dialog-container:hover .xiping-video-dialog-play-inner{transform:scale(1.2)}.xiping-video-dialog-play-icon{width:2rem;height:2rem;transform:scale(1);fill:#fff;color:#fff;transition:transform .2s ease-out;filter:drop-shadow(0 4px 3px rgb(0 0 0 / .07)) drop-shadow(0 2px 2px rgb(0 0 0 / .06))}.xiping-video-dialog-container:hover .xiping-video-dialog-play-icon{transform:scale(1.05)}.xiping-video-dialog-modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background-color:#00000080;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.xiping-video-dialog-modal-content{position:relative;margin:0 1rem;aspect-ratio:16 / 9;width:100%;max-width:56rem}@media(min-width:768px){.xiping-video-dialog-modal-content{margin:0}}.xiping-video-dialog-close-button{position:absolute;top:-4rem;right:0;border-radius:9999px;background-color:#17171780;padding:.5rem;font-size:1.25rem;color:#fff;box-shadow:0 0 0 1px #0000001a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}@media(prefers-color-scheme:dark){.xiping-video-dialog-close-button{background-color:#f5f5f580;color:#000}}.xiping-video-dialog-close-icon{width:1.25rem;height:1.25rem}.xiping-video-dialog-video-wrapper{position:relative;isolation:isolate;z-index:1;width:100%;height:100%;overflow:hidden;border-radius:1rem;border:2px solid white}.xiping-video-dialog-iframe{width:100%;height:100%;border-radius:1rem}:root{--primary-h: 221.2;--primary-s: 83.2%;--primary-l: 53.3%}
+.xiping-video-dialog{position:relative}.xiping-video-dialog-container{cursor:pointer;position:relative}.xiping-video-dialog-thumbnail{border:1px solid;border-radius:.375rem;width:100%;transition:all .2s ease-out;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.xiping-video-dialog-container:hover .xiping-video-dialog-thumbnail{filter:brightness(.8)}.xiping-video-dialog-overlay{border-radius:1rem;justify-content:center;align-items:center;transition:all .2s ease-out;display:flex;position:absolute;inset:0;transform:scale(.9)}.xiping-video-dialog-container:hover .xiping-video-dialog-overlay{transform:scale(1)}.xiping-video-dialog-play-outer{background-color:hsla(var(--primary-h), var(--primary-s), var(--primary-l), .1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:9999px;justify-content:center;align-items:center;width:7rem;height:7rem;display:flex}.xiping-video-dialog-play-inner{background:linear-gradient(to bottom, hsla(var(--primary-h), var(--primary-s), var(--primary-l), .3), hsl(var(--primary-h), var(--primary-s), var(--primary-l)));border-radius:9999px;justify-content:center;align-items:center;width:5rem;height:5rem;transition:all .2s ease-out;display:flex;position:relative;transform:scale(1);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.xiping-video-dialog-container:hover .xiping-video-dialog-play-inner{transform:scale(1.2)}.xiping-video-dialog-play-icon{fill:#fff;color:#fff;filter:drop-shadow(0 4px 3px #00000012)drop-shadow(0 2px 2px #0000000f);width:2rem;height:2rem;transition:transform .2s ease-out;transform:scale(1)}.xiping-video-dialog-container:hover .xiping-video-dialog-play-icon{transform:scale(1.05)}.xiping-video-dialog-modal{z-index:50;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.xiping-video-dialog-modal-content{aspect-ratio:16/9;width:100%;max-width:56rem;margin:0 1rem;position:relative}@media (width>=768px){.xiping-video-dialog-modal-content{margin:0}}.xiping-video-dialog-close-button{color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background-color:#17171780;border-radius:9999px;padding:.5rem;font-size:1.25rem;position:absolute;top:-4rem;right:0;box-shadow:0 0 0 1px #0000001a}@media (prefers-color-scheme:dark){.xiping-video-dialog-close-button{color:#000;background-color:#f5f5f580}}.xiping-video-dialog-close-icon{width:1.25rem;height:1.25rem}.xiping-video-dialog-video-wrapper{isolation:isolate;z-index:1;border:2px solid #fff;border-radius:1rem;width:100%;height:100%;position:relative;overflow:hidden}.xiping-video-dialog-iframe{border-radius:1rem;width:100%;height:100%}:root{--primary-h:221.2;--primary-s:83.2%;--primary-l:53.3%}

package/dist/es/components/video-dialog/VideoDialog2.js

@@ -0,0 +1,168 @@
+"use client";
+import './VideoDialog.css';/* empty css            */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { useState as n } from "react";
+import r from "clsx";
+import { AnimatePresence as i, motion as a } from "motion/react";
+import { Play as o, XIcon as s } from "lucide-react";
+//#region src/components/video-dialog/VideoDialog.tsx
+var c = {
+	"from-bottom": {
+		initial: {
+			y: "100%",
+			opacity: 0
+		},
+		animate: {
+			y: 0,
+			opacity: 1
+		},
+		exit: {
+			y: "100%",
+			opacity: 0
+		}
+	},
+	"from-center": {
+		initial: {
+			scale: .5,
+			opacity: 0
+		},
+		animate: {
+			scale: 1,
+			opacity: 1
+		},
+		exit: {
+			scale: .5,
+			opacity: 0
+		}
+	},
+	"from-top": {
+		initial: {
+			y: "-100%",
+			opacity: 0
+		},
+		animate: {
+			y: 0,
+			opacity: 1
+		},
+		exit: {
+			y: "-100%",
+			opacity: 0
+		}
+	},
+	"from-left": {
+		initial: {
+			x: "-100%",
+			opacity: 0
+		},
+		animate: {
+			x: 0,
+			opacity: 1
+		},
+		exit: {
+			x: "-100%",
+			opacity: 0
+		}
+	},
+	"from-right": {
+		initial: {
+			x: "100%",
+			opacity: 0
+		},
+		animate: {
+			x: 0,
+			opacity: 1
+		},
+		exit: {
+			x: "100%",
+			opacity: 0
+		}
+	},
+	fade: {
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 }
+	},
+	"top-in-bottom-out": {
+		initial: {
+			y: "-100%",
+			opacity: 0
+		},
+		animate: {
+			y: 0,
+			opacity: 1
+		},
+		exit: {
+			y: "100%",
+			opacity: 0
+		}
+	},
+	"left-in-right-out": {
+		initial: {
+			x: "-100%",
+			opacity: 0
+		},
+		animate: {
+			x: 0,
+			opacity: 1
+		},
+		exit: {
+			x: "100%",
+			opacity: 0
+		}
+	}
+};
+function l({ animationStyle: l = "from-center", videoSrc: u, thumbnailSrc: d, thumbnailAlt: f = "Video thumbnail", className: p }) {
+	let [m, h] = n(!1), g = c[l];
+	return /* @__PURE__ */ t("div", {
+		className: r("xiping-video-dialog", p),
+		children: [/* @__PURE__ */ t("div", {
+			className: "xiping-video-dialog-container",
+			onClick: () => h(!0),
+			children: [/* @__PURE__ */ e("img", {
+				src: d,
+				alt: f,
+				width: 1920,
+				height: 1080,
+				className: "xiping-video-dialog-thumbnail"
+			}), /* @__PURE__ */ e("div", {
+				className: "xiping-video-dialog-overlay",
+				children: /* @__PURE__ */ e("div", {
+					className: "xiping-video-dialog-play-outer",
+					children: /* @__PURE__ */ e("div", {
+						className: "xiping-video-dialog-play-inner",
+						children: /* @__PURE__ */ e(o, { className: "xiping-video-dialog-play-icon" })
+					})
+				})
+			})]
+		}), /* @__PURE__ */ e(i, { children: m && /* @__PURE__ */ e(a.div, {
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			onClick: () => h(!1),
+			exit: { opacity: 0 },
+			className: "xiping-video-dialog-modal",
+			children: /* @__PURE__ */ t(a.div, {
+				...g,
+				transition: {
+					type: "spring",
+					damping: 30,
+					stiffness: 300
+				},
+				className: "xiping-video-dialog-modal-content",
+				children: [/* @__PURE__ */ e(a.button, {
+					className: "xiping-video-dialog-close-button",
+					children: /* @__PURE__ */ e(s, { className: "xiping-video-dialog-close-icon" })
+				}), /* @__PURE__ */ e("div", {
+					className: "xiping-video-dialog-video-wrapper",
+					children: /* @__PURE__ */ e("iframe", {
+						src: u,
+						className: "xiping-video-dialog-iframe",
+						allowFullScreen: !0,
+						allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+					})
+				})]
+			})
+		}) })]
+	});
+}
+//#endregion
+export { l as VideoDialog };

package/dist/es/components/video-subtitle-player/VideoSubtitlePlayer.css

@@ -1 +1 @@
-.xiping-video-subtitle-player{width:100%;height:100%;background:#1a1a1a;border-radius:8px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.xiping-video-subtitle-player__video-wrapper{width:100%;height:100%;background:#000;overflow:hidden}.xiping-video-subtitle-player__video-container{position:relative;width:100%;height:100%;background:#000;overflow:hidden}.xiping-video-subtitle-player__video{position:absolute;top:0;left:0;width:100%;height:100%;padding:0}.xiping-video-subtitle-player__video-container .xgplayer{width:100%!important;height:100%!important}.xiping-video-subtitle-player__video-container .xgplayer video{object-fit:fill!important}.xiping-video-subtitle-player__subtitle-container{width:100%;height:100%;padding:20px;overflow-y:auto;background:#0000004d}.xiping-video-subtitle-player__right{width:100%;height:100%;background:#00000080;display:flex;flex-direction:column}.xiping-video-subtitle-player__detail{flex:1;padding:24px;overflow-y:auto;color:#fff}.xiping-video-subtitle-player__detail-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;color:#ffffffb3}.xiping-video-subtitle-player__detail-loading-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:#fbbf24;border-radius:50%;animation:xiping-vsp-spin 1s linear infinite}@keyframes xiping-vsp-spin{to{transform:rotate(360deg)}}.xiping-video-subtitle-player__detail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;color:#ffffff80;text-align:center}.xiping-video-subtitle-player__detail-empty-icon{font-size:48px;opacity:.5}.xiping-video-subtitle-player__detail-empty-text{font-size:14px;line-height:1.6}.xiping-video-subtitle-player__detail-content{display:flex;flex-direction:column;gap:20px}.xiping-video-subtitle-player__detail-word{font-size:32px;font-weight:700;color:#fbbf24;line-height:1.2;margin-bottom:8px}.xiping-video-subtitle-player__detail-pronunciation{font-size:18px;color:#ffffffb3;font-style:italic;margin-bottom:4px}.xiping-video-subtitle-player__detail-pos{display:inline-block;padding:4px 12px;background:#fbbf2433;color:#fbbf24;border-radius:4px;font-size:12px;font-weight:600;text-transform:uppercase;width:fit-content;margin-bottom:8px}.xiping-video-subtitle-player__detail-label{font-size:12px;font-weight:600;color:#ffffff80;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}.xiping-video-subtitle-player__detail-text{font-size:16px;line-height:1.6;color:#ffffffe6}.xiping-video-subtitle-player__detail-translation,.xiping-video-subtitle-player__detail-definition{padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}.xiping-video-subtitle-player__detail-definition{border-bottom:none}.xiping-video-subtitle-player__detail-examples{display:flex;flex-direction:column;gap:16px}.xiping-video-subtitle-player__detail-example{padding:16px;background:#ffffff0d;border-radius:8px;border-left:3px solid #fbbf24}.xiping-video-subtitle-player__detail-example-en{font-size:15px;line-height:1.6;color:#fffffff2;margin-bottom:8px}.xiping-video-subtitle-player__detail-example-zh{font-size:14px;line-height:1.6;color:#ffffffb3;padding-left:12px;border-left:2px solid rgba(255,255,255,.2)}.xiping-video-subtitle-player__subtitle-container::-webkit-scrollbar,.xiping-video-subtitle-player__detail::-webkit-scrollbar{width:8px}.xiping-video-subtitle-player__subtitle-container::-webkit-scrollbar-track,.xiping-video-subtitle-player__detail::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.xiping-video-subtitle-player__subtitle-container::-webkit-scrollbar-thumb,.xiping-video-subtitle-player__detail::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.xiping-video-subtitle-player__subtitle-container::-webkit-scrollbar-thumb:hover,.xiping-video-subtitle-player__detail::-webkit-scrollbar-thumb:hover{background:#ffffff4d}
+.xiping-video-subtitle-player{background:#1a1a1a;border-radius:8px;width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;overflow:hidden}.xiping-video-subtitle-player__video-wrapper{background:#000;width:100%;height:100%;overflow:hidden}.xiping-video-subtitle-player__video-container{background:#000;width:100%;height:100%;position:relative;overflow:hidden}.xiping-video-subtitle-player__video{width:100%;height:100%;padding:0;position:absolute;top:0;left:0}.xiping-video-subtitle-player__video-container .xgplayer{width:100%!important;height:100%!important}.xiping-video-subtitle-player__video-container .xgplayer video{object-fit:fill!important}.xiping-video-subtitle-player__subtitle-container{background:#0000004d;width:100%;height:100%;padding:20px;overflow-y:auto}.xiping-video-subtitle-player__right{background:#00000080;flex-direction:column;width:100%;height:100%;display:flex}.xiping-video-subtitle-player__detail{color:#fff;flex:1;padding:24px;overflow-y:auto}.xiping-video-subtitle-player__detail-loading{color:#ffffffb3;flex-direction:column;justify-content:center;align-items:center;gap:16px;height:100%;display:flex}.xiping-video-subtitle-player__detail-loading-spinner{border:3px solid #ffffff1a;border-top-color:#fbbf24;border-radius:50%;width:40px;height:40px;animation:1s linear infinite xiping-vsp-spin}@keyframes xiping-vsp-spin{to{transform:rotate(360deg)}}.xiping-video-subtitle-player__detail-empty{color:#ffffff80;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;height:100%;display:flex}.xiping-video-subtitle-player__detail-empty-icon{opacity:.5;font-size:48px}.xiping-video-subtitle-player__detail-empty-text{font-size:14px;line-height:1.6}.xiping-video-subtitle-player__detail-content{flex-direction:column;gap:20px;display:flex}.xiping-video-subtitle-player__detail-word{color:#fbbf24;margin-bottom:8px;font-size:32px;font-weight:700;line-height:1.2}.xiping-video-subtitle-player__detail-pronunciation{color:#ffffffb3;margin-bottom:4px;font-size:18px;font-style:italic}.xiping-video-subtitle-player__detail-pos{color:#fbbf24;text-transform:uppercase;background:#fbbf2433;border-radius:4px;width:fit-content;margin-bottom:8px;padding:4px 12px;font-size:12px;font-weight:600;display:inline-block}.xiping-video-subtitle-player__detail-label{color:#ffffff80;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;font-size:12px;font-weight:600}.xiping-video-subtitle-player__detail-text{color:#ffffffe6;font-size:16px;line-height:1.6}.xiping-video-subtitle-player__detail-translation,.xiping-video-subtitle-player__detail-definition{border-bottom:1px solid #ffffff1a;padding-bottom:16px}.xiping-video-subtitle-player__detail-definition{border-bottom:none}.xiping-video-subtitle-player__detail-examples{flex-direction:column;gap:16px;display:flex}.xiping-video-subtitle-player__detail-example{background:#ffffff0d;border-left:3px solid #fbbf24;border-radius:8px;padding:16px}.xiping-video-subtitle-player__detail-example-en{color:#fffffff2;margin-bottom:8px;font-size:15px;line-height:1.6}.xiping-video-subtitle-player__detail-example-zh{color:#ffffffb3;border-left:2px solid #fff3;padding-left:12px;font-size:14px;line-height:1.6}.xiping-video-subtitle-player__subtitle-container::-webkit-scrollbar{width:8px}.xiping-video-subtitle-player__detail::-webkit-scrollbar{width:8px}.xiping-video-subtitle-player__subtitle-container::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.xiping-video-subtitle-player__detail::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.xiping-video-subtitle-player__subtitle-container::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.xiping-video-subtitle-player__detail::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.xiping-video-subtitle-player__subtitle-container::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.xiping-video-subtitle-player__detail::-webkit-scrollbar-thumb:hover{background:#ffffff4d}

package/dist/es/components/video-subtitle-player/VideoSubtitlePlayer.mobile.css

@@ -1 +1 @@
-.xiping-video-subtitle-player--mobile{display:flex;flex-direction:column;min-height:0;height:100%}.xiping-video-subtitle-player__mobile-video{flex:0 0 auto;width:100%;aspect-ratio:16 / 9;background:#000}.xiping-video-subtitle-player__mobile-video-wrapper{width:100%;height:100%;background:#000;overflow:hidden}.xiping-video-subtitle-player__mobile-video-container{position:relative;width:100%;height:100%;background-color:#a62c2c;overflow:hidden}.xiping-video-subtitle-player__mobile-video-container .xgplayer{width:100%!important;height:100%!important}.xiping-video-subtitle-player__mobile-video-container .xgplayer video{object-fit:fill!important}.xiping-video-subtitle-player__mobile-subtitle{flex:1;min-height:0;padding:12px 16px;overflow-y:auto;background:#0000004d;-webkit-overflow-scrolling:touch}
+.xiping-video-subtitle-player--mobile{flex-direction:column;height:100%;min-height:0;display:flex}.xiping-video-subtitle-player__mobile-video{aspect-ratio:16/9;background:#000;flex:none;width:100%}.xiping-video-subtitle-player__mobile-video-wrapper{background:#000;width:100%;height:100%;overflow:hidden}.xiping-video-subtitle-player__mobile-video-container{background-color:#a62c2c;width:100%;height:100%;position:relative;overflow:hidden}.xiping-video-subtitle-player__mobile-video-container .xgplayer{width:100%!important;height:100%!important}.xiping-video-subtitle-player__mobile-video-container .xgplayer video{object-fit:fill!important}.xiping-video-subtitle-player__mobile-subtitle{-webkit-overflow-scrolling:touch;background:#0000004d;flex:1;min-height:0;padding:12px 16px;overflow-y:auto}

package/dist/es/components/video-subtitle-player/VideoSubtitlePlayer.pc.css

@@ -1 +1 @@
-.xiping-video-subtitle-player--pc .xiping-video-subtitle-player__panel-group,.xiping-video-subtitle-player--pc .xiping-video-subtitle-player__panel-group-inner{width:100%;height:100%}.xiping-video-subtitle-player--pc .xiping-video-subtitle-player__right{border-left:1px solid rgba(255,255,255,.1)}.xiping-video-subtitle-player__resize-handle--horizontal{position:relative;width:2px;background:#ffffff1a;cursor:col-resize;transition:background .2s ease;flex-shrink:0}.xiping-video-subtitle-player__resize-handle--horizontal:hover{background:#fbbf2480}.xiping-video-subtitle-player__resize-handle--horizontal:active{background:#fbbf24cc}.xiping-video-subtitle-player__resize-handle--horizontal:before{content:"";position:absolute;inset:0 -4px;cursor:col-resize}.xiping-video-subtitle-player__resize-handle--vertical{position:relative;height:2px;background:#ffffff1a;cursor:row-resize;transition:background .2s ease;flex-shrink:0}.xiping-video-subtitle-player__resize-handle--vertical:hover{background:#fbbf2480}.xiping-video-subtitle-player__resize-handle--vertical:active{background:#fbbf24cc}.xiping-video-subtitle-player__resize-handle--vertical:before{content:"";position:absolute;inset:-4px 0;cursor:row-resize}
+.xiping-video-subtitle-player--pc .xiping-video-subtitle-player__panel-group,.xiping-video-subtitle-player--pc .xiping-video-subtitle-player__panel-group-inner{width:100%;height:100%}.xiping-video-subtitle-player--pc .xiping-video-subtitle-player__right{border-left:1px solid #ffffff1a}.xiping-video-subtitle-player__resize-handle--horizontal{cursor:col-resize;background:#ffffff1a;flex-shrink:0;width:2px;transition:background .2s;position:relative}.xiping-video-subtitle-player__resize-handle--horizontal:hover{background:#fbbf2480}.xiping-video-subtitle-player__resize-handle--horizontal:active{background:#fbbf24cc}.xiping-video-subtitle-player__resize-handle--horizontal:before{content:"";cursor:col-resize;position:absolute;inset:0 -4px}.xiping-video-subtitle-player__resize-handle--vertical{cursor:row-resize;background:#ffffff1a;flex-shrink:0;height:2px;transition:background .2s;position:relative}.xiping-video-subtitle-player__resize-handle--vertical:hover{background:#fbbf2480}.xiping-video-subtitle-player__resize-handle--vertical:active{background:#fbbf24cc}.xiping-video-subtitle-player__resize-handle--vertical:before{content:"";cursor:row-resize;position:absolute;inset:-4px 0}

package/dist/es/components/video-subtitle-player/VideoSubtitlePlayer2.js

@@ -0,0 +1,43 @@
+import { useVideoSubtitleStore as e } from "./useVideoSubtitleStore.js";
+import { useXGPlayer as t } from "./useXGPlayer.js";
+import { VideoSubtitlePlayerPC as n } from "./VideoSubtitlePlayerPC.js";
+import { VideoSubtitlePlayerMobile as r } from "./VideoSubtitlePlayerMobile.js";
+import './VideoSubtitlePlayer.css';/* empty css                    */
+import { jsx as i } from "react/jsx-runtime";
+import { useCallback as a, useEffect as o, useRef as s } from "react";
+import { isMobile as c, isTablet as l } from "react-device-detect";
+//#region src/components/video-subtitle-player/VideoSubtitlePlayer.tsx
+var u = ({ videoUrl: u, subtitles: d, poster: f, className: p = "", style: m, onFetchDetail: h, forceLayout: g }) => {
+	let _ = s(null), v = g === void 0 ? c || l : g === "mobile", { currentTime: y, setCurrentTime: b, setIsPlaying: x, setSubtitles: S, currentDetail: C, isLoadingDetail: w, fetchDetail: T } = e();
+	o(() => {
+		S(d);
+	}, [d, S]), t(_, u, f, {
+		setCurrentTime: b,
+		setIsPlaying: x
+	}, y);
+	let E = a(async (e) => {
+		h ? await h(e) : await T(e);
+	}, [h, T]), D = a(async (e) => {
+		h ? await h(e) : await T(e);
+	}, [h, T]);
+	return v ? /* @__PURE__ */ i(r, {
+		playerRef: _,
+		subtitles: d,
+		currentTime: y,
+		onWordHoverChange: E,
+		onWordClick: D,
+		className: p,
+		style: m
+	}) : /* @__PURE__ */ i(n, {
+		playerRef: _,
+		subtitles: d,
+		currentTime: y,
+		currentDetail: C,
+		isLoadingDetail: w,
+		onWordHoverChange: E,
+		className: p,
+		style: m
+	});
+};
+//#endregion
+export { u as default };

package/dist/es/components/video-subtitle-player/VideoSubtitlePlayerMobile.js

@@ -1,47 +1,30 @@
-import { jsx as e } from "react/jsx-runtime";
-import { useCallback as l } from "react";
-import u from "clsx";
-import { SubtitlePlayer as y } from "../subtitle-player/SubtitlePlayer.js";
-import { VideoSubtitlePlayerLayoutMobile as f } from "./layouts/VideoSubtitlePlayerLayoutMobile.js";
-const P = ({
-  playerRef: r,
-  subtitles: a,
-  currentTime: s,
-  onWordHoverChange: t,
-  onWordClick: i,
-  className: c = "",
-  style: m
-}) => {
-  const n = l(
-    async (o) => {
-      await t(o);
-    },
-    [t]
-  ), d = l(
-    async (o) => {
-      await i(o);
-    },
-    [i]
-  ), b = /* @__PURE__ */ e("div", { ref: r, className: "xiping-video-subtitle-player__video" }), p = /* @__PURE__ */ e(
-    y,
-    {
-      subtitles: a,
-      currentTime: s,
-      mode: "lyrics",
-      onWordHoverChange: n,
-      onWordClick: d
-    }
-  );
-  return /* @__PURE__ */ e(
-    f,
-    {
-      className: u(c),
-      style: m,
-      videoSlot: b,
-      subtitleSlot: p
-    }
-  );
-};
-export {
-  P as VideoSubtitlePlayerMobile
+import e from "../subtitle-player/SubtitlePlayer2.js";
+import { VideoSubtitlePlayerLayoutMobile as t } from "./layouts/VideoSubtitlePlayerLayoutMobile.js";
+import { jsx as n } from "react/jsx-runtime";
+import { useCallback as r } from "react";
+import i from "clsx";
+//#region src/components/video-subtitle-player/VideoSubtitlePlayerMobile.tsx
+var a = ({ playerRef: a, subtitles: o, currentTime: s, onWordHoverChange: c, onWordClick: l, className: u = "", style: d }) => {
+	let f = r(async (e) => {
+		await c(e);
+	}, [c]), p = r(async (e) => {
+		await l(e);
+	}, [l]), m = /* @__PURE__ */ n("div", {
+		ref: a,
+		className: "xiping-video-subtitle-player__video"
+	}), h = /* @__PURE__ */ n(e, {
+		subtitles: o,
+		currentTime: s,
+		mode: "lyrics",
+		onWordHoverChange: f,
+		onWordClick: p
+	});
+	return /* @__PURE__ */ n(t, {
+		className: i(u),
+		style: d,
+		videoSlot: m,
+		subtitleSlot: h
+	});
 };
+//#endregion
+export { a as VideoSubtitlePlayerMobile };