@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-versus-card/index.es.js

@@ -0,0 +1,467 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Clock as n, Crown as r, Flame as i, Gift as a, Sparkles as o, Star as s, Swords as c, Target as l, Timer as u, TrendingDown as d, TrendingUp as f, Trophy as p, Zap as m } from "lucide-react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/waka-versus-card/index.tsx
+var v = {
+	score: {
+		icon: l,
+		label: "Score Challenge",
+		color: "text-blue-500",
+		bgColor: "bg-blue-500/10"
+	},
+	time: {
+		icon: u,
+		label: "Time Trial",
+		color: "text-purple-500",
+		bgColor: "bg-purple-500/10"
+	},
+	streak: {
+		icon: i,
+		label: "Streak Battle",
+		color: "text-orange-500",
+		bgColor: "bg-orange-500/10"
+	},
+	collection: {
+		icon: s,
+		label: "Collection Race",
+		color: "text-yellow-500",
+		bgColor: "bg-yellow-500/10"
+	},
+	custom: {
+		icon: c,
+		label: "Custom Challenge",
+		color: "text-red-500",
+		bgColor: "bg-red-500/10"
+	}
+}, y = {
+	upcoming: {
+		label: "Upcoming",
+		color: "text-muted-foreground",
+		bgColor: "bg-muted",
+		dotColor: "bg-muted-foreground"
+	},
+	live: {
+		label: "LIVE",
+		color: "text-red-500",
+		bgColor: "bg-red-500/10",
+		dotColor: "bg-red-500"
+	},
+	finished: {
+		label: "Finished",
+		color: "text-green-500",
+		bgColor: "bg-green-500/10",
+		dotColor: "bg-green-500"
+	}
+}, b = {
+	xp: m,
+	badge: p,
+	item: a,
+	currency: s
+}, x = {
+	sm: {
+		card: "p-3",
+		avatar: "h-12 w-12",
+		name: "text-sm",
+		score: "text-xl",
+		vsSize: "h-10 w-10 text-sm",
+		stats: "text-xs"
+	},
+	default: {
+		card: "p-4",
+		avatar: "h-16 w-16",
+		name: "text-base",
+		score: "text-3xl",
+		vsSize: "h-14 w-14 text-lg",
+		stats: "text-sm"
+	},
+	lg: {
+		card: "p-6",
+		avatar: "h-20 w-20",
+		name: "text-lg",
+		score: "text-4xl",
+		vsSize: "h-16 w-16 text-xl",
+		stats: "text-base"
+	}
+};
+function S({ name: t, avatar: n, size: i, isWinner: a, isLoser: o, className: s }) {
+	return /* @__PURE__ */ _("div", {
+		className: e("relative flex items-center justify-center rounded-full font-semibold overflow-hidden", x[i].avatar, n ? "" : "bg-muted text-muted-foreground", a && "ring-4 ring-yellow-400 shadow-lg shadow-yellow-400/30", o && "opacity-60 grayscale", s),
+		children: [n ? /* @__PURE__ */ g("img", {
+			src: n,
+			alt: t,
+			className: "h-full w-full object-cover"
+		}) : ((e) => e.split(" ").map((e) => e[0]).join("").toUpperCase().slice(0, 2))(t), a && /* @__PURE__ */ g("div", {
+			className: "absolute -top-2 left-1/2 -translate-x-1/2 animate-bounce",
+			children: /* @__PURE__ */ g(r, { className: "h-6 w-6 text-yellow-400 fill-yellow-400 drop-shadow-lg" })
+		})]
+	});
+}
+function C({ size: t, isLive: n, isFinished: r }) {
+	return /* @__PURE__ */ _("div", {
+		className: "relative flex flex-col items-center justify-center",
+		children: [
+			/* @__PURE__ */ g("div", {
+				className: "absolute inset-0 flex items-center",
+				children: /* @__PURE__ */ g("div", { className: "w-full border-t border-dashed border-muted-foreground/30" })
+			}),
+			/* @__PURE__ */ _("div", {
+				className: e("relative flex items-center justify-center rounded-full font-bold", "bg-gradient-to-br from-red-500 via-orange-500 to-yellow-500", "text-white shadow-lg", x[t].vsSize, n && "animate-versus-pulse", r && "from-green-500 via-emerald-500 to-teal-500"),
+				children: [
+					n && /* @__PURE__ */ g("div", { className: "absolute inset-0 rounded-full border-2 border-white/30 animate-versus-spin" }),
+					/* @__PURE__ */ g("div", { className: "absolute inset-1 rounded-full bg-gradient-to-br from-white/20 to-transparent" }),
+					/* @__PURE__ */ g("span", {
+						className: "relative",
+						children: "VS"
+					})
+				]
+			}),
+			n && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(o, { className: "absolute -top-2 -left-2 h-4 w-4 text-yellow-400 animate-versus-sparkle" }), /* @__PURE__ */ g(o, { className: "absolute -bottom-2 -right-2 h-4 w-4 text-orange-400 animate-versus-sparkle-delay" })] }),
+			/* @__PURE__ */ g("style", { children: "\n        @keyframes versus-pulse {\n          0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(239, 68, 68, 0.5); }\n          50% { transform: scale(1.1); box-shadow: 0 0 30px rgba(239, 68, 68, 0.8); }\n        }\n        @keyframes versus-spin {\n          from { transform: rotate(0deg); }\n          to { transform: rotate(360deg); }\n        }\n        @keyframes versus-sparkle {\n          0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }\n          50% { opacity: 1; transform: scale(1) rotate(180deg); }\n        }\n        .animate-versus-pulse {\n          animation: versus-pulse 2s ease-in-out infinite;\n        }\n        .animate-versus-spin {\n          animation: versus-spin 4s linear infinite;\n        }\n        .animate-versus-sparkle {\n          animation: versus-sparkle 1.5s ease-in-out infinite;\n        }\n        .animate-versus-sparkle-delay {\n          animation: versus-sparkle 1.5s ease-in-out infinite 0.75s;\n        }\n      " })
+		]
+	});
+}
+function w({ competitor: n, size: r, isWinner: a, isLoser: o, side: s, targetScore: c }) {
+	let [l, u] = t.useState(n.score), [p, m] = t.useState(!1), h = t.useRef(n.score);
+	t.useEffect(() => {
+		if (n.score !== h.current) {
+			m(!0);
+			let e = h.current, t = n.score, r = performance.now(), i = (n) => {
+				let a = n - r, o = Math.min(a / 500, 1), s = 1 - (1 - o) ** 3, c = Math.round(e + (t - e) * s);
+				u(c), o < 1 ? requestAnimationFrame(i) : m(!1);
+			};
+			requestAnimationFrame(i), h.current = n.score;
+		}
+	}, [n.score]);
+	let v = n.previousScore === void 0 ? 0 : n.score - n.previousScore, y = c ? n.score / c * 100 : null;
+	return /* @__PURE__ */ _("div", {
+		className: e("flex flex-col items-center space-y-2 flex-1", s === "right" && "items-center"),
+		children: [
+			/* @__PURE__ */ g(S, {
+				name: n.name,
+				avatar: n.avatar,
+				size: r,
+				isWinner: a,
+				isLoser: o
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "text-center space-y-0.5",
+				children: [/* @__PURE__ */ _("div", {
+					className: e("font-semibold", x[r].name),
+					children: [n.name, n.isCurrentUser && /* @__PURE__ */ g("span", {
+						className: "ml-1.5 text-xs text-primary",
+						children: "(You)"
+					})]
+				}), n.rank && /* @__PURE__ */ g("div", {
+					className: "text-xs text-muted-foreground",
+					children: n.rank
+				})]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ g("div", {
+					className: e("font-bold tabular-nums transition-all", x[r].score, a && "text-yellow-500", o && "text-muted-foreground", p && "text-primary scale-110"),
+					children: l.toLocaleString()
+				}), v !== 0 && /* @__PURE__ */ _("div", {
+					className: e("absolute -right-6 top-1/2 -translate-y-1/2 flex items-center text-xs font-medium", v > 0 ? "text-green-500" : "text-red-500"),
+					children: [g(v > 0 ? f : d, { className: "h-3 w-3" }), /* @__PURE__ */ g("span", { children: Math.abs(v) })]
+				})]
+			}),
+			y !== null && /* @__PURE__ */ _("div", {
+				className: "w-full max-w-[100px]",
+				children: [/* @__PURE__ */ g("div", {
+					className: "h-1.5 w-full rounded-full bg-muted overflow-hidden",
+					children: /* @__PURE__ */ g("div", {
+						className: e("h-full rounded-full transition-all duration-500", a ? "bg-gradient-to-r from-yellow-400 to-amber-500" : "bg-gradient-to-r from-blue-500 to-purple-500"),
+						style: { width: `${Math.min(100, y)}%` }
+					})
+				}), /* @__PURE__ */ _("div", {
+					className: "mt-0.5 text-center text-[10px] text-muted-foreground",
+					children: [Math.round(y), "%"]
+				})]
+			}),
+			n.winStreak && n.winStreak > 0 && /* @__PURE__ */ _("div", {
+				className: "flex items-center gap-1 text-xs text-orange-500",
+				children: [/* @__PURE__ */ g(i, { className: "h-3 w-3" }), /* @__PURE__ */ _("span", { children: [n.winStreak, " streak"] })]
+			}),
+			n.stats && n.stats.length > 0 && /* @__PURE__ */ g("div", {
+				className: e("flex flex-wrap justify-center gap-2 mt-2", x[r].stats),
+				children: n.stats.map((e, t) => /* @__PURE__ */ _("div", {
+					className: "flex items-center gap-1 rounded-full bg-muted px-2 py-0.5",
+					children: [
+						e.icon,
+						/* @__PURE__ */ _("span", {
+							className: "text-muted-foreground",
+							children: [e.name, ":"]
+						}),
+						/* @__PURE__ */ g("span", {
+							className: "font-medium",
+							children: e.value
+						})
+					]
+				}, t))
+			})
+		]
+	});
+}
+function T({ endTime: r, onExpire: i, className: a }) {
+	let [o, s] = t.useState(""), [c, l] = t.useState(!1);
+	return t.useEffect(() => {
+		let e = () => {
+			let e = /* @__PURE__ */ new Date(), t = r.getTime() - e.getTime();
+			if (t <= 0) {
+				s("00:00"), l(!0), i?.();
+				return;
+			}
+			let n = Math.floor(t / (1e3 * 60 * 60)), a = Math.floor(t % (1e3 * 60 * 60) / (1e3 * 60)), o = Math.floor(t % (1e3 * 60) / 1e3);
+			n > 0 ? (s(`${n}:${String(a).padStart(2, "0")}:${String(o).padStart(2, "0")}`), l(!1)) : (s(`${String(a).padStart(2, "0")}:${String(o).padStart(2, "0")}`), l(a < 1));
+		};
+		e();
+		let t = setInterval(e, 1e3);
+		return () => clearInterval(t);
+	}, [r, i]), /* @__PURE__ */ _("div", {
+		className: e("flex items-center gap-1.5 font-mono text-sm", c ? "text-red-500 animate-pulse" : "text-muted-foreground", a),
+		children: [/* @__PURE__ */ g(n, { className: "h-4 w-4" }), /* @__PURE__ */ g("span", { children: o })]
+	});
+}
+function E({ reward: t, compact: n }) {
+	let r = b[t.type];
+	return /* @__PURE__ */ _("div", {
+		className: e("flex items-center gap-1.5 rounded-full px-2 py-1", {
+			xp: "text-yellow-500 bg-yellow-500/10",
+			badge: "text-purple-500 bg-purple-500/10",
+			item: "text-blue-500 bg-blue-500/10",
+			currency: "text-amber-500 bg-amber-500/10"
+		}[t.type], n && "px-1.5 py-0.5"),
+		children: [t.icon || /* @__PURE__ */ g(r, { className: e("h-3.5 w-3.5", n && "h-3 w-3") }), /* @__PURE__ */ _("span", {
+			className: e("text-xs font-medium", n && "text-[10px]"),
+			children: [typeof t.value == "number" ? `+${t.value}` : t.value, t.type === "xp" && " XP"]
+		})]
+	});
+}
+function D({ active: t, side: n }) {
+	if (!t) return null;
+	let r = [
+		"#fbbf24",
+		"#f59e0b",
+		"#22c55e",
+		"#fcd34d",
+		"#fef08a"
+	];
+	return /* @__PURE__ */ _("div", {
+		className: e("absolute inset-0 pointer-events-none overflow-hidden", n === "left" ? "right-1/2" : "left-1/2"),
+		children: [
+			[...Array(20)].map((e, t) => {
+				let n = 20 + Math.random() * 60, i = 4 + Math.random() * 8;
+				return /* @__PURE__ */ g("div", {
+					className: "absolute animate-winner-confetti",
+					style: {
+						left: `${n}%`,
+						width: i,
+						height: i,
+						backgroundColor: r[Math.floor(Math.random() * r.length)],
+						borderRadius: Math.random() > .5 ? "50%" : "2px",
+						animationDelay: `${Math.random() * .5}s`
+					}
+				}, t);
+			}),
+			/* @__PURE__ */ g("div", { className: e("absolute inset-0 animate-winner-glow", n === "left" ? "bg-gradient-to-r from-yellow-400/20 to-transparent" : "bg-gradient-to-l from-yellow-400/20 to-transparent") }),
+			/* @__PURE__ */ g("style", { children: "\n        @keyframes winner-confetti {\n          0% {\n            top: 100%;\n            transform: translateY(0) rotate(0deg);\n            opacity: 1;\n          }\n          100% {\n            top: -20%;\n            transform: translateY(0) rotate(720deg);\n            opacity: 0;\n          }\n        }\n        @keyframes winner-glow {\n          0%, 100% { opacity: 0; }\n          50% { opacity: 1; }\n        }\n        .animate-winner-confetti {\n          animation: winner-confetti 2s ease-out forwards;\n        }\n        .animate-winner-glow {\n          animation: winner-glow 2s ease-in-out;\n        }\n      " })
+		]
+	});
+}
+function O({ competitorLeft: i, competitorRight: o, challenge: s, status: c, winnerId: l, onStatusChange: u, onScoreUpdate: d, size: f = "default", showLivePulse: m = !0, className: h }) {
+	let [b, S] = t.useState(!1), O = t.useRef(c), k = v[s.type], A = y[c], j = c === "live", M = c === "finished", N = M && l === i.id, P = M && l === o.id;
+	return t.useEffect(() => {
+		if (c === "finished" && O.current !== "finished") {
+			S(!0);
+			let e = setTimeout(() => S(!1), 3e3);
+			return () => clearTimeout(e);
+		}
+		O.current = c;
+	}, [c]), /* @__PURE__ */ _("div", {
+		className: e("relative overflow-hidden rounded-xl border bg-card shadow-sm transition-all", j && m && "ring-2 ring-red-500/50", M && "ring-2 ring-green-500/30", x[f].card, h),
+		children: [
+			/* @__PURE__ */ g(D, {
+				active: b && N,
+				side: "left"
+			}),
+			/* @__PURE__ */ g(D, {
+				active: b && P,
+				side: "right"
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "flex items-center justify-between border-b pb-3 mb-4",
+				children: [/* @__PURE__ */ _("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ g("div", {
+						className: e("rounded-lg p-1.5", k.bgColor),
+						children: /* @__PURE__ */ g(k.icon, { className: e("h-4 w-4", k.color) })
+					}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("div", {
+						className: "text-sm font-medium",
+						children: s.name
+					}), s.description && /* @__PURE__ */ g("div", {
+						className: "text-xs text-muted-foreground",
+						children: s.description
+					})] })]
+				}), /* @__PURE__ */ _("div", {
+					className: e("flex items-center gap-1.5 rounded-full px-2.5 py-1", A.bgColor),
+					children: [/* @__PURE__ */ g("div", { className: e("h-2 w-2 rounded-full", A.dotColor, j && "animate-pulse") }), /* @__PURE__ */ g("span", {
+						className: e("text-xs font-medium", A.color),
+						children: A.label
+					})]
+				})]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "flex items-center gap-4",
+				children: [
+					/* @__PURE__ */ g(w, {
+						competitor: i,
+						size: f,
+						isWinner: N,
+						isLoser: P,
+						side: "left",
+						targetScore: s.targetScore
+					}),
+					/* @__PURE__ */ g(C, {
+						size: f,
+						isLive: j,
+						isFinished: M
+					}),
+					/* @__PURE__ */ g(w, {
+						competitor: o,
+						size: f,
+						isWinner: P,
+						isLoser: N,
+						side: "right",
+						targetScore: s.targetScore
+					})
+				]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "flex items-center justify-between border-t pt-3 mt-4",
+				children: [/* @__PURE__ */ _("div", { children: [
+					j && s.endTime && /* @__PURE__ */ g(T, {
+						endTime: s.endTime,
+						onExpire: () => {
+							u?.("finished");
+						}
+					}),
+					c === "upcoming" && s.startTime && /* @__PURE__ */ _("div", {
+						className: "flex items-center gap-1.5 text-xs text-muted-foreground",
+						children: [/* @__PURE__ */ g(n, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ _("span", { children: ["Starts ", s.startTime.toLocaleDateString("en-US", {
+							month: "short",
+							day: "numeric",
+							hour: "numeric",
+							minute: "2-digit"
+						})] })]
+					}),
+					M && /* @__PURE__ */ _("div", {
+						className: "flex items-center gap-1.5 text-xs text-green-500",
+						children: [/* @__PURE__ */ g(p, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ _("span", { children: ["Winner: ", N ? i.name : o.name] })]
+					})
+				] }), s.rewards.length > 0 && /* @__PURE__ */ _("div", {
+					className: "flex items-center gap-1.5",
+					children: [/* @__PURE__ */ g(a, { className: "h-3.5 w-3.5 text-muted-foreground" }), /* @__PURE__ */ g("div", {
+						className: "flex flex-wrap gap-1",
+						children: s.rewards.map((e, t) => /* @__PURE__ */ g(E, {
+							reward: e,
+							compact: !0
+						}, t))
+					})]
+				})]
+			}),
+			M && b && /* @__PURE__ */ _("div", {
+				className: "absolute inset-0 flex items-center justify-center bg-background/60 backdrop-blur-sm",
+				children: [/* @__PURE__ */ _("div", {
+					className: "flex flex-col items-center gap-2 animate-winner-reveal",
+					children: [/* @__PURE__ */ g(r, { className: "h-12 w-12 text-yellow-400 fill-yellow-400 animate-bounce" }), /* @__PURE__ */ _("div", {
+						className: "text-2xl font-bold text-yellow-500",
+						children: [N ? i.name : o.name, " Wins!"]
+					})]
+				}), /* @__PURE__ */ g("style", { children: "\n            @keyframes winner-reveal {\n              0% { opacity: 0; transform: scale(0.5); }\n              100% { opacity: 1; transform: scale(1); }\n            }\n            .animate-winner-reveal {\n              animation: winner-reveal 0.5s ease-out;\n            }\n          " })]
+			})
+		]
+	});
+}
+function k({ competitorLeft: e, competitorRight: n, challenge: r, initialStatus: i = "upcoming", onStatusChange: a, onWinner: o, autoWinner: s = !0 }) {
+	let [c, l] = t.useState(e), [u, d] = t.useState(n), [f, p] = t.useState(i), [m, h] = t.useState(), g = t.useCallback((e) => {
+		if (p(e), a?.(e), e === "finished" && s && !m) {
+			let e = c.score > u.score ? c.id : u.score > c.score ? u.id : void 0;
+			e && (h(e), o?.(e));
+		}
+	}, [
+		c,
+		u,
+		s,
+		m,
+		a,
+		o
+	]), _ = t.useCallback((e, t) => {
+		e === c.id ? l((e) => ({
+			...e,
+			previousScore: e.score,
+			score: t
+		})) : e === u.id && d((e) => ({
+			...e,
+			previousScore: e.score,
+			score: t
+		})), r.targetScore && t >= r.targetScore && f === "live" && (h(e), o?.(e), g("finished"));
+	}, [
+		c.id,
+		u.id,
+		r.targetScore,
+		f,
+		o,
+		g
+	]);
+	return {
+		competitorLeft: c,
+		competitorRight: u,
+		status: f,
+		winnerId: m,
+		updateScore: _,
+		incrementScore: t.useCallback((e, t = 1) => {
+			let n = e === c.id ? c : u;
+			_(e, n.score + t);
+		}, [
+			c,
+			u,
+			_
+		]),
+		updateStatus: g,
+		declareWinner: t.useCallback((e) => {
+			h(e), o?.(e), f !== "finished" && g("finished");
+		}, [
+			f,
+			o,
+			g
+		]),
+		start: t.useCallback(() => {
+			f === "upcoming" && g("live");
+		}, [f, g]),
+		finish: t.useCallback(() => {
+			f === "live" && g("finished");
+		}, [f, g]),
+		reset: t.useCallback(() => {
+			l({
+				...e,
+				previousScore: void 0
+			}), d({
+				...n,
+				previousScore: void 0
+			}), p("upcoming"), h(void 0);
+		}, [e, n]),
+		isLive: f === "live",
+		isFinished: f === "finished",
+		isUpcoming: f === "upcoming",
+		leftIsWinning: c.score > u.score,
+		rightIsWinning: u.score > c.score,
+		isTied: c.score === u.score,
+		scoreDifference: Math.abs(c.score - u.score)
+	};
+}
+//#endregion
+export { O as WakaVersusCard, O as default, k as useVersusCard };

package/dist/components/waka-video/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../utils/cn.cjs.js"),n=require("../button/index.cjs.js"),r=require("../dropdown-menu/index.cjs.js"),i=require("../slider/index.cjs.js");let a=require("react");a=e.__toESM(a);let o=require("lucide-react"),s=require("react/jsx-runtime");function c(e){let t=Math.floor(e/3600),n=Math.floor(e%3600/60),r=Math.floor(e%60);return t>0?`${t}:${n.toString().padStart(2,`0`)}:${r.toString().padStart(2,`0`)}`:`${n}:${r.toString().padStart(2,`0`)}`}function l({src:e,poster:l,autoPlay:u=!1,loop:d=!1,muted:f=!1,controls:p=!0,preload:ee=`metadata`,width:m,height:h,aspectRatio:g=`16/9`,showFullscreen:_=!0,showPlaybackSpeed:v=!0,showQualitySelector:y=!1,playbackSpeeds:b=[.5,.75,1,1.25,1.5,2],onReady:x,onPlay:te,onPause:ne,onEnded:re,onTimeUpdate:S,onError:C,className:w}){let T=a.useRef(null),E=a.useRef(null),[D,O]=a.useState(u),[k,A]=a.useState(f),[j,M]=a.useState(1),[N,P]=a.useState(0),[F,I]=a.useState(0),[L,R]=a.useState(!1),[z,B]=a.useState(!0),[V,H]=a.useState(!0),[U,W]=a.useState(1),[G,K]=a.useState(``),q=a.useRef(void 0),J=a.useMemo(()=>typeof e==`string`?[{src:e,type:`video/mp4`}]:e,[e]);a.useEffect(()=>{J.length>0&&J[0].quality&&K(J[0].quality)},[J]);let Y=()=>{let e=T.current;e&&(I(e.duration),B(!1),x?.())},X=()=>{let e=T.current;e&&(P(e.currentTime),S?.(e.currentTime))},ie=()=>{O(!0),te?.()},Z=()=>{O(!1),ne?.()},ae=()=>{O(!1),re?.()},oe=()=>{B(!1),C?.(Error(`Video failed to load`))},se=()=>{B(!0)},ce=()=>{B(!1)},Q=()=>{let e=T.current;e&&(D?e.pause():e.play())},le=()=>{let e=T.current;e&&(e.muted=!k,A(!k))},ue=e=>{let t=T.current;if(!t)return;let n=e[0];t.volume=n,M(n),A(n===0)},de=e=>{let t=T.current;t&&(t.currentTime=e[0],P(e[0]))},$=e=>{let t=T.current;t&&(t.currentTime=Math.max(0,Math.min(F,t.currentTime+e)))},fe=e=>{let t=T.current;t&&(t.playbackRate=e,W(e))},pe=e=>{let t=T.current;if(!t)return;let n=t.currentTime;t.src=e.src,t.currentTime=n,K(e.quality||``),D&&t.play()};return a.useEffect(()=>()=>{q.current&&clearTimeout(q.current)},[]),a.useEffect(()=>{let e=()=>{R(!!document.fullscreenElement)};return document.addEventListener(`fullscreenchange`,e),()=>{document.removeEventListener(`fullscreenchange`,e)}},[]),(0,s.jsxs)(`div`,{ref:E,className:t.cn(`relative bg-black overflow-hidden group`,w),style:{width:m,height:h,aspectRatio:h?void 0:g},onMouseMove:()=>{H(!0),q.current&&clearTimeout(q.current),D&&(q.current=setTimeout(()=>{H(!1)},3e3))},onMouseLeave:()=>D&&H(!1),children:[(0,s.jsx)(`video`,{ref:T,className:`w-full h-full`,poster:l,autoPlay:u,loop:d,muted:f,preload:ee,playsInline:!0,onLoadedMetadata:Y,onTimeUpdate:X,onPlay:ie,onPause:Z,onEnded:ae,onError:oe,onWaiting:se,onCanPlay:ce,onClick:Q,children:J.map((e,t)=>(0,s.jsx)(`source`,{src:e.src,type:e.type},t))}),z&&(0,s.jsx)(`div`,{className:`absolute inset-0 flex items-center justify-center bg-black/50`,children:(0,s.jsx)(o.Loader2,{className:`h-10 w-10 text-white animate-spin`})}),!D&&!z&&(0,s.jsx)(`div`,{className:`absolute inset-0 flex items-center justify-center bg-black/30`,children:(0,s.jsx)(n.Button,{variant:`ghost`,size:`icon`,className:`h-16 w-16 rounded-full bg-white/90 hover:bg-white text-black`,onClick:Q,children:(0,s.jsx)(o.Play,{className:`h-8 w-8 ml-1`})})}),p&&(0,s.jsxs)(`div`,{className:t.cn(`absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4 transition-opacity duration-300`,V||!D?`opacity-100`:`opacity-0`),children:[(0,s.jsx)(i.Slider,{value:[N],max:F||100,step:.1,onValueChange:de,className:`mb-3`}),(0,s.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,s.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,s.jsx)(n.Button,{variant:`ghost`,size:`icon`,className:`h-8 w-8 text-white hover:bg-white/20`,onClick:Q,children:D?(0,s.jsx)(o.Pause,{className:`h-5 w-5`}):(0,s.jsx)(o.Play,{className:`h-5 w-5`})}),(0,s.jsx)(n.Button,{variant:`ghost`,size:`icon`,className:`h-8 w-8 text-white hover:bg-white/20`,onClick:()=>$(-10),children:(0,s.jsx)(o.SkipBack,{className:`h-4 w-4`})}),(0,s.jsx)(n.Button,{variant:`ghost`,size:`icon`,className:`h-8 w-8 text-white hover:bg-white/20`,onClick:()=>$(10),children:(0,s.jsx)(o.SkipForward,{className:`h-4 w-4`})}),(0,s.jsx)(n.Button,{variant:`ghost`,size:`icon`,className:`h-8 w-8 text-white hover:bg-white/20`,onClick:le,children:k||j===0?(0,s.jsx)(o.VolumeX,{className:`h-5 w-5`}):(0,s.jsx)(o.Volume2,{className:`h-5 w-5`})}),(0,s.jsx)(i.Slider,{value:[k?0:j],max:1,step:.1,onValueChange:ue,className:`w-20`}),(0,s.jsxs)(`span`,{className:`text-white text-sm ml-2`,children:[c(N),` / `,c(F)]})]}),(0,s.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(v||y)&&(0,s.jsxs)(r.DropdownMenu,{children:[(0,s.jsx)(r.DropdownMenuTrigger,{asChild:!0,children:(0,s.jsx)(n.Button,{variant:`ghost`,size:`icon`,className:`h-8 w-8 text-white hover:bg-white/20`,children:(0,s.jsx)(o.Settings,{className:`h-5 w-5`})})}),(0,s.jsxs)(r.DropdownMenuContent,{align:`end`,children:[v&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(`div`,{className:`px-2 py-1 text-xs text-muted-foreground`,children:`Vitesse`}),b.map(e=>(0,s.jsxs)(r.DropdownMenuItem,{onClick:()=>fe(e),className:t.cn(U===e&&`bg-muted`),children:[e,`x`]},e))]}),y&&J.some(e=>e.quality)&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(`div`,{className:`px-2 py-1 text-xs text-muted-foreground mt-2`,children:`Qualité`}),J.filter(e=>e.quality).map((e,n)=>(0,s.jsx)(r.DropdownMenuItem,{onClick:()=>pe(e),className:t.cn(G===e.quality&&`bg-muted`),children:e.quality},n))]})]})]}),_&&(0,s.jsx)(n.Button,{variant:`ghost`,size:`icon`,className:`h-8 w-8 text-white hover:bg-white/20`,onClick:async()=>{let e=E.current;if(e)try{document.fullscreenElement?(await document.exitFullscreen(),R(!1)):(await e.requestFullscreen(),R(!0))}catch(e){console.error(`Fullscreen error:`,e)}},children:L?(0,s.jsx)(o.Minimize,{className:`h-5 w-5`}):(0,s.jsx)(o.Maximize,{className:`h-5 w-5`})})]})]})]})]})}function u(e={}){let[t,n]=a.useState(e.autoPlay??!1),[r,i]=a.useState(e.muted??!1),[o,s]=a.useState(0),[c,l]=a.useState(0);return{isPlaying:t,isMuted:r,currentTime:o,duration:c,onPlay:()=>n(!0),onPause:()=>n(!1),onTimeUpdate:s,onReady:()=>{}}}exports.WakaVideo=l,exports.default=l,exports.useVideo=u;