@openrails/contentkit-ui 0.103.1 → 0.104.0-rc.1

package/dist/components/video-player.js

@@ -40,323 +40,327 @@ function Be(e, t, n) {
 	return e instanceof Element ? e.closest(_) || e.closest(v) || e.closest("input[type=range], [role=slider]") && /^(Arrow|Page|Home$|End$)/.test(t) ? !1 : n.contains(e) || !e.closest(y) : !0;
 }
 var Ve = (e, t) => e instanceof Element && t.contains(e) && !!e.closest("button") && !e.closest(v);
-function b({ base: o, poster: h, width: _, height: v, duration: y, pending: b, progress: Ke, failed: S, layout: qe = "frame", maxHeight: Je = "80svh", inlinePreview: Ye, previewStart: Xe, keyboard: C = "focus", onProgress: Ze, progressInterval: Qe = 1e4, onEvent: $e, theater: w, onTheaterChange: T, onMiniPlayer: E, renderDownloads: et, menuItems: tt, crossOrigin: nt, label: rt, className: it, style: at, appearance: ot, startAt: st, ...D }) {
-	let { t: O } = i(), ct = r(), k = !!o && !b && !S, lt = k ? `${o}master.m3u8` : null, A = oe(st, y), j = ce({
-		...D,
-		src: lt,
-		startAt: A
-	}), { status: M, error: N, started: P, previewing: F, audio: I, subtitles: L, quality: R } = j, [z, ut] = d(null), [B, dt] = d(null), ft = j.ref, pt = c((e) => {
-		ft(e), dt(e);
-	}, [ft]);
+function b({ base: o, poster: h, width: _, height: v, duration: y, pending: b, progress: Ke, failed: qe, layout: Je = "frame", maxHeight: Ye = "80svh", inlinePreview: Xe, previewStart: Ze, keyboard: Qe = "focus", onProgress: $e, engagement: et, progressInterval: tt = 1e4, onEvent: nt, theater: S, onTheaterChange: C, onMiniPlayer: w, renderDownloads: rt, menuItems: it, crossOrigin: at, label: ot, className: st, style: ct, appearance: lt, startAt: ut, ...T }) {
+	let { t: E } = i(), dt = r(), D = !!o && !b && !qe, ft = D ? `${o}master.m3u8` : null, O = oe(ut, y), k = ce({
+		...T,
+		src: ft,
+		startAt: O
+	}), { status: A, error: j, started: M, previewing: N, audio: P, subtitles: F, quality: I } = k, [L, pt] = d(null), [R, mt] = d(null), ht = k.ref, gt = c((e) => {
+		ht(e), mt(e);
+	}, [ht]);
 	e({
-		setting: Ye,
-		available: k && !P && !N && D.active !== !1 && !D.autoPlay,
-		target: z,
-		playing: P && M === "playing",
-		start: () => j.preview(We(Xe, y)),
-		stop: j.unload
+		setting: Xe,
+		available: D && !M && !j && T.active !== !1 && !T.autoPlay,
+		target: L,
+		playing: M && A === "playing",
+		start: () => k.preview(We(Ze, y)),
+		stop: k.unload
 	});
-	let V = de(B), H = ue(z, B), U = fe(B), mt = le(B), ht = me(P && o ? `${o}sprite.vtt` : null, D.loader), gt = !F && P;
-	pe(B, {
-		enabled: gt,
-		source: gt ? lt : null,
-		interval: Qe,
-		onProgress: Ze
+	let z = de(R), B = ue(L, R), V = fe(R), _t = le(R), vt = me(M && o ? `${o}sprite.vtt` : null, T.loader), H = !N && M, U = et?.video;
+	l(() => (U?.(H ? R : null), () => U?.(null)), [
+		U,
+		H,
+		R
+	]), pe(R, {
+		enabled: H,
+		source: H ? ft : null,
+		interval: tt,
+		onProgress: $e
 	});
-	let _t = u($e);
-	_t.current = $e;
-	let vt = u(!1);
-	vt.current = !F && M !== "idle";
-	let W = c((e, t = !1) => {
-		(t || vt.current) && _t.current && _t.current({
+	let W = u(nt);
+	W.current = nt;
+	let yt = u(!1);
+	yt.current = !N && A !== "idle";
+	let G = c((e, t = !1) => {
+		(t || yt.current) && W.current && W.current({
 			...e,
-			time: B?.currentTime ?? 0
+			time: R?.currentTime ?? 0
 		});
-	}, [B]);
+	}, [R]);
 	l(() => {
-		if (!B) return;
+		if (!R) return;
 		let e = 0, t = {
-			play: () => W({ type: "play" }),
-			playing: () => W({ type: "playing" }),
-			pause: () => !B.ended && W({ type: "pause" }),
-			waiting: () => W({ type: "waiting" }),
-			ended: () => W({ type: "ended" }),
+			play: () => G({ type: "play" }),
+			playing: () => G({ type: "playing" }),
+			pause: () => !R.ended && G({ type: "pause" }),
+			waiting: () => G({ type: "waiting" }),
+			ended: () => G({ type: "ended" }),
 			timeupdate: () => {
-				B.seeking || (e = B.currentTime);
+				R.seeking || (e = R.currentTime);
 			},
 			seeked: () => {
-				W({
+				G({
 					type: "seek",
 					from: e
-				}), e = B.currentTime;
+				}), e = R.currentTime;
 			},
-			ratechange: () => W({
+			ratechange: () => G({
 				type: "rate",
-				rate: B.playbackRate
+				rate: R.playbackRate
 			})
 		};
-		for (let [e, n] of Object.entries(t)) B.addEventListener(e, n);
+		for (let [e, n] of Object.entries(t)) R.addEventListener(e, n);
 		return () => {
-			for (let [e, n] of Object.entries(t)) B.removeEventListener(e, n);
+			for (let [e, n] of Object.entries(t)) R.removeEventListener(e, n);
 		};
-	}, [B, W]), l(() => {
-		N && !F && W({
+	}, [R, G]), l(() => {
+		j && !N && G({
 			type: "error",
-			error: N
+			error: j
 		}, !0);
 	}, [
+		j,
 		N,
-		F,
-		W
+		G
 	]);
-	let yt = u({
+	let bt = u({
 		fs: !1,
 		pip: !1
 	});
 	l(() => {
-		yt.current.fs !== H.active && W({
+		bt.current.fs !== B.active && G({
 			type: "fullscreen",
-			on: H.active
-		}), yt.current.pip !== U.active && W({
+			on: B.active
+		}), bt.current.pip !== V.active && G({
 			type: "pip",
-			on: U.active
-		}), yt.current = {
-			fs: H.active,
-			pip: U.active
+			on: V.active
+		}), bt.current = {
+			fs: B.active,
+			pip: V.active
 		};
 	}, [
-		H.active,
-		U.active,
-		W
+		B.active,
+		V.active,
+		G
 	]);
-	let bt = u(A);
+	let xt = u(O);
 	l(() => {
-		bt.current !== A && (bt.current = A, B && P && (B.currentTime = A));
+		xt.current !== O && (xt.current = O, R && M && (R.currentTime = O));
 	}, [
-		A,
-		B,
-		P
+		O,
+		R,
+		M
 	]);
-	let [xt, St] = d(!1), G = u(void 0), K = c(() => {
-		St(!0), clearTimeout(G.current), G.current = setTimeout(() => St(!1), Fe);
-	}, []), Ct = c(() => {
-		clearTimeout(G.current), St(!1);
+	let [St, Ct] = d(!1), K = u(void 0), q = c(() => {
+		Ct(!0), clearTimeout(K.current), K.current = setTimeout(() => Ct(!1), Fe);
+	}, []), wt = c(() => {
+		clearTimeout(K.current), Ct(!1);
 	}, []);
-	l(() => () => clearTimeout(G.current), []), l(() => {
-		P && K();
-	}, [P, K]);
-	let [wt, Tt] = d(!1), [Et, Dt] = d(!1), [Ot, kt] = d(!1), q = P && !N && (xt || V.paused || V.ended || wt || Et || Ot), [At, jt] = d(null), J = u(void 0), Mt = c((e, t) => {
-		let n = J.current !== void 0;
-		clearTimeout(J.current), jt((r) => ({
+	l(() => () => clearTimeout(K.current), []), l(() => {
+		M && q();
+	}, [M, q]);
+	let [Tt, Et] = d(!1), [Dt, Ot] = d(!1), [kt, At] = d(!1), J = M && !j && (St || z.paused || z.ended || Tt || Dt || kt), [jt, Mt] = d(null), Y = u(void 0), Nt = c((e, t) => {
+		let n = Y.current !== void 0;
+		clearTimeout(Y.current), Mt((r) => ({
 			direction: e,
 			seconds: n && r?.direction === e ? r.seconds + t : t
-		})), J.current = setTimeout(() => {
-			jt(null), J.current = void 0;
+		})), Y.current = setTimeout(() => {
+			Mt(null), Y.current = void 0;
 		}, Re);
 	}, []);
-	l(() => () => clearTimeout(J.current), []);
-	let Nt = D.volumeKey === void 0 ? re : D.volumeKey, Y = V.duration || y || 0, Pt = (e) => {
-		B && (B.currentTime = Math.min(Y || e, Math.max(0, e)));
-	}, Ft = (e) => {
-		B && (Pt(B.currentTime + e), Mt(e < 0 ? -1 : 1, Math.abs(e)));
-	}, X = () => {
-		B && (!P || B.ended ? (B.ended && (B.currentTime = 0), j.play()) : B.paused ? j.play() : B.pause());
+	l(() => () => clearTimeout(Y.current), []);
+	let Pt = T.volumeKey === void 0 ? re : T.volumeKey, X = z.duration || y || 0, Ft = (e) => {
+		R && (R.currentTime = Math.min(X || e, Math.max(0, e)));
 	}, It = (e) => {
-		B && (B.volume = Math.min(1, Math.max(0, e)), B.volume > 0 && B.muted && (B.muted = !1), se(Nt, {
-			volume: B.volume,
-			muted: B.muted
-		}), W({
+		R && (Ft(R.currentTime + e), Nt(e < 0 ? -1 : 1, Math.abs(e)));
+	}, Z = () => {
+		R && (!M || R.ended ? (R.ended && (R.currentTime = 0), k.play()) : R.paused ? k.play() : R.pause());
+	}, Lt = (e) => {
+		R && (R.volume = Math.min(1, Math.max(0, e)), R.volume > 0 && R.muted && (R.muted = !1), se(Pt, {
+			volume: R.volume,
+			muted: R.muted
+		}), G({
 			type: "volume",
-			volume: B.volume,
-			muted: B.muted
+			volume: R.volume,
+			muted: R.muted
 		}));
-	}, Lt = () => {
-		B && (B.muted = !B.muted, !B.muted && B.volume === 0 && (B.volume = 1), se(Nt, {
-			volume: B.volume,
-			muted: B.muted
-		}), W({
+	}, Rt = () => {
+		R && (R.muted = !R.muted, !R.muted && R.volume === 0 && (R.volume = 1), se(Pt, {
+			volume: R.volume,
+			muted: R.muted
+		}), G({
 			type: "volume",
-			volume: B.volume,
-			muted: B.muted
+			volume: R.volume,
+			muted: R.muted
 		}));
-	}, Rt = (e) => {
-		I.select(e);
-		let t = I.list[e];
-		t && W({
+	}, zt = (e) => {
+		P.select(e);
+		let t = P.list[e];
+		t && G({
 			type: "audio",
 			track: t
 		});
-	}, zt = u(-1);
-	L.selected >= 0 && (zt.current = L.selected);
-	let Bt = (e) => {
-		L.select(e), W({
+	}, Bt = u(-1);
+	F.selected >= 0 && (Bt.current = F.selected);
+	let Vt = (e) => {
+		F.select(e), G({
 			type: "subtitles",
-			track: L.list[e] ?? null
+			track: F.list[e] ?? null
 		});
-	}, Vt = () => Bt(L.selected >= 0 ? -1 : zt.current >= 0 ? zt.current : 0), Ht = (e) => {
-		R.select(e), W({
+	}, Ht = () => Vt(F.selected >= 0 ? -1 : Bt.current >= 0 ? Bt.current : 0), Ut = (e) => {
+		I.select(e), G({
 			type: "quality",
-			height: R.levels.find((t) => t.index === e)?.height ?? null
+			height: I.levels.find((t) => t.index === e)?.height ?? null
 		});
-	}, Ut = () => {
-		T?.(!w), W({
+	}, Wt = () => {
+		C?.(!S), G({
 			type: "theater",
-			on: !w
+			on: !S
 		});
-	}, Wt = () => {
-		if (!E || !o || !B) return;
-		let e = I.list[I.selected], t = L.list[L.selected], n = {
+	}, Gt = () => {
+		if (!w || !o || !R) return;
+		let e = P.list[P.selected], t = F.list[F.selected], n = {
 			base: o,
-			time: B.currentTime,
-			playing: !B.paused && !B.ended,
-			width: _ ?? (B.videoWidth || void 0),
-			height: v ?? (B.videoHeight || void 0),
-			duration: Y || void 0,
+			time: R.currentTime,
+			playing: !R.paused && !R.ended,
+			width: _ ?? (R.videoWidth || void 0),
+			height: v ?? (R.videoHeight || void 0),
+			duration: X || void 0,
 			poster: h,
 			audioLanguage: e?.lang,
 			subtitleLanguage: t?.lang ?? null
 		};
-		B.pause(), H.active && H.toggle(), E(n);
-	}, Gt = (e) => {
-		if (!B || !P && e.type !== "toggle") return !1;
+		R.pause(), B.active && B.toggle(), w(n);
+	}, Kt = (e) => {
+		if (!R || !M && e.type !== "toggle") return !1;
 		switch (e.type) {
 			case "toggle":
-				X();
+				Z();
 				break;
 			case "seekBy":
-				Ft(e.seconds);
+				It(e.seconds);
 				break;
 			case "seekTo":
-				if (!Y) return !1;
-				Pt(Y * e.fraction);
+				if (!X) return !1;
+				Ft(X * e.fraction);
 				break;
 			case "volumeBy":
-				It((B.muted ? 0 : B.volume) + e.delta);
+				Lt((R.muted ? 0 : R.volume) + e.delta);
 				break;
 			case "mute":
-				Lt();
+				Rt();
 				break;
 			case "captions":
-				if (!L.list.length) return !1;
-				Vt();
+				if (!F.list.length) return !1;
+				Ht();
 				break;
 			case "fullscreen":
-				if (!H.supported) return !1;
-				H.toggle();
+				if (!B.supported) return !1;
+				B.toggle();
 				break;
 			case "theater":
-				if (!T) return !1;
-				Ut();
+				if (!C) return !1;
+				Wt();
 				break;
 			case "miniPlayer":
-				if (!E) return !1;
-				Wt();
+				if (!w) return !1;
+				Gt();
 				break;
-			case "speed": B.playbackRate = ie(B.playbackRate, e.step);
+			case "speed": R.playbackRate = ie(R.playbackRate, e.step);
 		}
-		return P && K(), !0;
-	}, Kt = u(Gt);
-	Kt.current = Gt;
-	let qt = D.active !== !1;
+		return M && q(), !0;
+	}, qt = u(Kt);
+	qt.current = Kt;
+	let Jt = T.active !== !1;
 	l(() => {
-		if (!C || !z || !qt) return;
-		let e = C === "global" ? document : z, t = (e) => {
+		if (!Qe || !L || !Jt) return;
+		let e = Qe === "global" ? document : L, t = (e) => {
 			let t = e;
 			if (t.defaultPrevented) return;
 			let n = ae(t);
-			n && Be(t.target, t.key, z) && Kt.current(n) && t.preventDefault();
+			n && Be(t.target, t.key, L) && qt.current(n) && t.preventDefault();
 		}, n = (e) => {
 			let t = e;
-			t.key === " " && Ve(t.target, z) && t.preventDefault();
+			t.key === " " && Ve(t.target, L) && t.preventDefault();
 		};
 		return e.addEventListener("keydown", t), e.addEventListener("keyup", n), () => {
 			e.removeEventListener("keydown", t), e.removeEventListener("keyup", n);
 		};
 	}, [
-		C,
-		z,
-		qt
+		Qe,
+		L,
+		Jt
 	]);
-	let Jt = u("mouse"), Yt = u(null), Z = u(0), Xt = (e) => {
-		if (Jt.current === "mouse") {
-			X(), K();
+	let Yt = u("mouse"), Xt = u(null), Zt = u(0), Qt = (e) => {
+		if (Yt.current === "mouse") {
+			Z(), q();
 			return;
 		}
-		let t = e.currentTarget.getBoundingClientRect(), n = t.width ? (e.clientX - t.left) / t.width : .5, r = n < .4 ? -1 : n > .6 ? 1 : null, i = Date.now(), a = Yt.current;
-		if (Yt.current = r ? {
+		let t = e.currentTarget.getBoundingClientRect(), n = t.width ? (e.clientX - t.left) / t.width : .5, r = n < .4 ? -1 : n > .6 ? 1 : null, i = Date.now(), a = Xt.current;
+		if (Xt.current = r ? {
 			at: i,
 			side: r
-		} : null, r && a?.side === r && (i < Z.current || i - a.at <= Ie)) {
-			Z.current = i + Le, Ft(r * 10);
+		} : null, r && a?.side === r && (i < Zt.current || i - a.at <= Ie)) {
+			Zt.current = i + Le, It(r * 10);
 			return;
 		}
-		q && !V.paused ? Ct() : K();
-	}, Zt = () => {
-		Date.now() >= Z.current && H.supported && H.toggle();
-	}, Qt = _ && v ? _ / v : V.aspect ?? 16 / 9, $t = H.active ? {
+		J && !z.paused ? wt() : q();
+	}, $t = () => {
+		Date.now() >= Zt.current && B.supported && B.toggle();
+	}, en = _ && v ? _ / v : z.aspect ?? 16 / 9, tn = B.active ? {
 		width: "100%",
 		height: "100%",
 		borderRadius: 0
-	} : qe === "frame" ? {
-		aspectRatio: String(Qt),
-		width: `min(100%, calc(${Je} * ${Qt}))`,
+	} : Je === "frame" ? {
+		aspectRatio: String(en),
+		width: `min(100%, calc(${Ye} * ${en}))`,
 		marginInline: "auto"
-	} : {}, en = typeof h == "string" ? [] : n(h), Q = !N && !F && (M === "loading" || M === "buffering"), $ = m("transition-opacity duration-300 motion-reduce:transition-none", F && M === "playing" && "opacity-0"), tn = H.active && z ? z : void 0, nn = an();
-	function rn(e) {
-		let t = ze(e, ct) || O("player.track", { number: e.index + 1 });
-		return e.forced ? O("player.forced", { label: t }) : t;
+	} : {}, nn = typeof h == "string" ? [] : n(h), Q = !j && !N && (A === "loading" || A === "buffering"), $ = m("transition-opacity duration-300 motion-reduce:transition-none", N && A === "playing" && "opacity-0"), rn = B.active && L ? L : void 0, an = sn();
+	function on(e) {
+		let t = ze(e, dt) || E("player.track", { number: e.index + 1 });
+		return e.forced ? E("player.forced", { label: t }) : t;
 	}
-	function an() {
+	function sn() {
 		let e = [];
-		if (I.list.length > 1 && e.push({
+		if (P.list.length > 1 && e.push({
 			key: "audio",
-			label: O("player.audio"),
-			value: String(I.selected),
-			options: I.list.map((e) => ({
+			label: E("player.audio"),
+			value: String(P.selected),
+			options: P.list.map((e) => ({
 				value: String(e.index),
-				label: rn(e)
+				label: on(e)
 			})),
-			onChange: (e) => Rt(Number(e))
-		}), L.list.length && e.push({
+			onChange: (e) => zt(Number(e))
+		}), F.list.length && e.push({
 			key: "subtitles",
-			label: O("player.subtitles"),
-			value: String(L.selected),
+			label: E("player.subtitles"),
+			value: String(F.selected),
 			options: [{
 				value: "-1",
-				label: O("player.subtitlesOff")
-			}, ...L.list.map((e) => ({
+				label: E("player.subtitlesOff")
+			}, ...F.list.map((e) => ({
 				value: String(e.index),
-				label: rn(e)
+				label: on(e)
 			}))],
-			onChange: (e) => Bt(Number(e))
-		}), R.levels.length > 1) {
-			let t = R.levels.find((e) => e.index === R.current);
+			onChange: (e) => Vt(Number(e))
+		}), I.levels.length > 1) {
+			let t = I.levels.find((e) => e.index === I.current);
 			e.push({
 				key: "quality",
-				label: O("player.quality"),
-				value: String(R.selected),
-				options: [...[...R.levels].reverse().map((e) => ({
+				label: E("player.quality"),
+				value: String(I.selected),
+				options: [...[...I.levels].reverse().map((e) => ({
 					value: String(e.index),
 					label: x(e.height)
 				})), {
 					value: "-1",
-					label: t && R.selected === -1 ? O("player.autoCurrent", { quality: x(t.height).split(" ")[0] }) : O("player.auto")
+					label: t && I.selected === -1 ? E("player.autoCurrent", { quality: x(t.height).split(" ")[0] }) : E("player.auto")
 				}],
-				onChange: (e) => Ht(Number(e))
+				onChange: (e) => Ut(Number(e))
 			});
 		}
 		return e.push({
 			key: "speed",
-			label: O("player.speed"),
-			value: String(V.rate),
+			label: E("player.speed"),
+			value: String(z.rate),
 			options: ne.map((e) => ({
 				value: String(e),
-				label: e === 1 ? O("player.normal") : `${e}×`
+				label: e === 1 ? E("player.normal") : `${e}×`
 			})),
 			onChange: (e) => {
-				B && (B.playbackRate = Number(e));
+				R && (R.playbackRate = Number(e));
 			}
-		}), tt?.forEach((t, n) => {
+		}), it?.forEach((t, n) => {
 			"options" in t && e.push({
 				key: `host-${n}`,
 				label: t.label,
@@ -366,31 +370,31 @@ function b({ base: o, poster: h, width: _, height: v, duration: y, pending: b, p
 			});
 		}), e;
 	}
-	let on = tt?.filter((e) => "onSelect" in e);
+	let cn = it?.filter((e) => "onSelect" in e);
 	return /* @__PURE__ */ f(a, {
-		appearance: ot,
-		className: m("@container relative w-full touch-manipulation overflow-hidden bg-black text-white outline-none", qe === "fill" ? "size-full" : !H.active && "rounded-lg", P && !q && "cursor-none", it),
+		appearance: lt,
+		className: m("@container relative w-full touch-manipulation overflow-hidden bg-black text-white outline-none", Je === "fill" ? "size-full" : !B.active && "rounded-lg", M && !J && "cursor-none", st),
 		style: {
-			...$t,
-			...at
+			...tn,
+			...ct
 		},
 		"data-ckui": "video-player",
-		"data-status": S ? "failed" : b ? "pending" : M,
-		"data-previewing": F ? "" : void 0,
-		"data-fullscreen": H.active ? "" : void 0,
-		"data-controls": q ? "" : void 0,
-		ref: ut,
+		"data-status": qe ? "failed" : b ? "pending" : A,
+		"data-previewing": N ? "" : void 0,
+		"data-fullscreen": B.active ? "" : void 0,
+		"data-controls": J ? "" : void 0,
+		ref: pt,
 		role: "group",
-		"aria-label": rt ?? O("player.label"),
-		tabIndex: k ? -1 : void 0,
-		onPointerDown: (e) => Jt.current = e.pointerType || "mouse",
-		onPointerMove: (e) => e.pointerType === "mouse" && P && K(),
-		onPointerLeave: (e) => e.pointerType === "mouse" && !Et && !wt && Ct(),
-		onFocus: (e) => kt(He(e.target)),
-		onBlur: () => kt(!1),
-		children: S ? /* @__PURE__ */ f(Ge, {
+		"aria-label": ot ?? E("player.label"),
+		tabIndex: D ? -1 : void 0,
+		onPointerDown: (e) => Yt.current = e.pointerType || "mouse",
+		onPointerMove: (e) => e.pointerType === "mouse" && M && q(),
+		onPointerLeave: (e) => e.pointerType === "mouse" && !Dt && !Tt && wt(),
+		onFocus: (e) => At(He(e.target)),
+		onBlur: () => At(!1),
+		children: qe ? /* @__PURE__ */ f(Ge, {
 			icon: !0,
-			children: O("player.failed")
+			children: E("player.failed")
 		}) : b || !o ? /* @__PURE__ */ f("div", {
 			className: "absolute inset-0 flex items-center justify-center bg-muted p-6 text-foreground",
 			children: /* @__PURE__ */ f(ee, {
@@ -399,36 +403,36 @@ function b({ base: o, poster: h, width: _, height: v, duration: y, pending: b, p
 			})
 		}) : /* @__PURE__ */ p(Se, { children: [
 			/* @__PURE__ */ f("video", {
-				ref: pt,
+				ref: gt,
 				className: "absolute inset-0 size-full object-contain",
 				playsInline: !0,
 				preload: "none",
-				crossOrigin: nt,
-				"aria-label": rt
+				crossOrigin: at,
+				"aria-label": ot
 			}),
-			P && !N && /* @__PURE__ */ f("div", {
+			M && !j && /* @__PURE__ */ f("div", {
 				"data-ckui": "surface",
 				className: "absolute inset-0",
-				onClick: Xt,
-				onDoubleClick: Zt
+				onClick: Qt,
+				onDoubleClick: $t
 			}),
-			!P && !N && /* @__PURE__ */ p(Se, { children: [
+			!M && !j && /* @__PURE__ */ p(Se, { children: [
 				typeof h == "string" ? /* @__PURE__ */ f("img", {
 					alt: "",
 					src: h,
 					decoding: "async",
 					className: m("pointer-events-none absolute inset-0 size-full object-contain", $)
-				}) : en.length ? /* @__PURE__ */ f(t, {
-					outputs: en,
+				}) : nn.length ? /* @__PURE__ */ f(t, {
+					outputs: nn,
 					className: m("pointer-events-none absolute inset-0 size-full object-contain", $)
 				}) : /* @__PURE__ */ f(Pe, {
 					vtt: `${o}sprite.vtt`,
-					loader: D.loader,
+					loader: T.loader,
 					className: $
 				}),
 				/* @__PURE__ */ f(Ue, {
-					label: O("player.play"),
-					onClick: j.play,
+					label: E("player.play"),
+					onClick: k.play,
 					disabled: Q,
 					className: $,
 					children: Q ? /* @__PURE__ */ f(ye, {}) : /* @__PURE__ */ f(g, {
@@ -442,9 +446,9 @@ function b({ base: o, poster: h, width: _, height: v, duration: y, pending: b, p
 					children: te(y)
 				}) : null
 			] }),
-			P && !N && V.ended && /* @__PURE__ */ f(Ue, {
-				label: O("player.replay"),
-				onClick: X,
+			M && !j && z.ended && /* @__PURE__ */ f(Ue, {
+				label: E("player.replay"),
+				onClick: Z,
 				children: /* @__PURE__ */ f(g, {
 					icon: Me,
 					className: "size-7",
@@ -452,103 +456,103 @@ function b({ base: o, poster: h, width: _, height: v, duration: y, pending: b, p
 				})
 			}),
 			/* @__PURE__ */ f(he, {
-				cues: gt ? mt : [],
-				bottom: q ? "4.75rem" : "1.25rem"
+				cues: H ? _t : [],
+				bottom: J ? "4.75rem" : "1.25rem"
 			}),
-			P && Q && /* @__PURE__ */ f("div", {
+			M && Q && /* @__PURE__ */ f("div", {
 				className: "pointer-events-none absolute inset-0 flex items-center justify-center",
 				children: /* @__PURE__ */ f("span", {
 					className: "flex size-14 items-center justify-center rounded-full bg-black/45",
 					children: /* @__PURE__ */ f(ye, {})
 				})
 			}),
-			/* @__PURE__ */ f(_e, { flash: At }),
-			P && !N && /* @__PURE__ */ p("div", {
+			/* @__PURE__ */ f(_e, { flash: jt }),
+			M && !j && /* @__PURE__ */ p("div", {
 				"data-ckui": "controls",
 				"data-ckui-noswipe": "",
-				className: m("pointer-events-none absolute inset-x-0 bottom-0 z-10 flex flex-col bg-linear-to-t from-black/75 via-black/35 to-transparent px-2 pt-12 pb-1 transition-opacity duration-200 motion-reduce:transition-none", q ? "opacity-100 *:pointer-events-auto" : "opacity-0"),
+				className: m("pointer-events-none absolute inset-x-0 bottom-0 z-10 flex flex-col bg-linear-to-t from-black/75 via-black/35 to-transparent px-2 pt-12 pb-1 transition-opacity duration-200 motion-reduce:transition-none", J ? "opacity-100 *:pointer-events-auto" : "opacity-0"),
 				children: [/* @__PURE__ */ f(ge, {
-					time: V.time,
-					duration: Y,
-					buffered: V.buffered,
-					onSeek: Pt,
-					onScrub: (e) => Dt(e !== null),
-					sprite: ht
+					time: z.time,
+					duration: X,
+					buffered: z.buffered,
+					onSeek: Ft,
+					onScrub: (e) => Ot(e !== null),
+					sprite: vt
 				}), /* @__PURE__ */ p("div", {
 					className: "flex items-center gap-0.5",
 					children: [
 						/* @__PURE__ */ f(s, {
-							label: V.ended ? O("player.replay") : V.paused ? O("player.resume") : O("player.pause"),
+							label: z.ended ? E("player.replay") : z.paused ? E("player.resume") : E("player.pause"),
 							shortcut: "k",
-							icon: V.ended ? Me : V.paused ? Ae : Ee,
-							onClick: X,
+							icon: z.ended ? Me : z.paused ? Ae : Ee,
+							onClick: Z,
 							"data-ckui": "play"
 						}),
 						/* @__PURE__ */ f(be, {
-							volume: V.volume,
-							muted: V.muted,
-							onVolume: It,
-							onMute: Lt
+							volume: z.volume,
+							muted: z.muted,
+							onVolume: Lt,
+							onMute: Rt
 						}),
 						/* @__PURE__ */ p("span", {
 							className: "ml-1 shrink-0 text-xs font-medium whitespace-nowrap text-white/90 tabular-nums",
 							"data-ckui": "time",
 							children: [
-								xe(V.time),
+								xe(z.time),
 								" / ",
-								xe(Y)
+								xe(X)
 							]
 						}),
 						/* @__PURE__ */ f("div", { className: "min-w-0 flex-1" }),
-						L.list.length > 0 && /* @__PURE__ */ f(s, {
-							label: O("player.subtitles"),
+						F.list.length > 0 && /* @__PURE__ */ f(s, {
+							label: E("player.subtitles"),
 							shortcut: "c",
 							icon: we,
-							"aria-pressed": L.selected >= 0,
-							onClick: Vt,
+							"aria-pressed": F.selected >= 0,
+							onClick: Ht,
 							"data-ckui": "captions-toggle"
 						}),
-						et?.({
-							container: tn,
+						rt?.({
+							container: rn,
 							className: "inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full text-white outline-none transition-colors hover:bg-white/15 focus-visible:ring-2 focus-visible:ring-white/80 motion-reduce:transition-none data-popup-open:bg-white/15 [&_svg]:size-5 relative aria-pressed:after:absolute aria-pressed:after:bottom-1 aria-pressed:after:h-0.5 aria-pressed:after:w-4 aria-pressed:after:rounded-full aria-pressed:after:bg-player-accent"
 						}),
 						/* @__PURE__ */ f(ve, {
 							icon: Ne,
-							label: O("player.settings"),
-							sections: nn,
-							actions: on,
-							container: tn,
-							onOpenChange: Tt
+							label: E("player.settings"),
+							sections: an,
+							actions: cn,
+							container: rn,
+							onOpenChange: Et
 						}),
-						E && /* @__PURE__ */ f(s, {
+						w && /* @__PURE__ */ f(s, {
 							className: "@max-sm:hidden",
-							label: O("player.miniPlayer"),
+							label: E("player.miniPlayer"),
 							shortcut: "i",
 							icon: ke,
-							onClick: Wt,
+							onClick: Gt,
 							"data-ckui": "mini-player-open"
 						}),
-						U.supported && /* @__PURE__ */ f(s, {
+						V.supported && /* @__PURE__ */ f(s, {
 							className: "@max-md:hidden",
-							label: U.active ? O("player.exitPip") : O("player.pip"),
-							icon: U.active ? Oe : De,
-							onClick: U.toggle,
+							label: V.active ? E("player.exitPip") : E("player.pip"),
+							icon: V.active ? Oe : De,
+							onClick: V.toggle,
 							"data-ckui": "pip"
 						}),
-						T && /* @__PURE__ */ f(s, {
+						C && /* @__PURE__ */ f(s, {
 							className: "max-lg:hidden",
-							label: O("player.theater"),
+							label: E("player.theater"),
 							shortcut: "t",
 							icon: je,
-							"aria-pressed": !!w,
-							onClick: Ut,
+							"aria-pressed": !!S,
+							onClick: Wt,
 							"data-ckui": "theater"
 						}),
-						H.supported && /* @__PURE__ */ f(s, {
-							label: H.active ? O("player.exitFullscreen") : O("player.fullscreen"),
+						B.supported && /* @__PURE__ */ f(s, {
+							label: B.active ? E("player.exitFullscreen") : E("player.fullscreen"),
 							shortcut: "f",
-							icon: H.active ? Ce : Te,
-							onClick: H.toggle,
+							icon: B.active ? Ce : Te,
+							onClick: B.toggle,
 							"data-ckui": "fullscreen"
 						})
 					]
@@ -557,13 +561,13 @@ function b({ base: o, poster: h, width: _, height: v, duration: y, pending: b, p
 			/* @__PURE__ */ f("span", {
 				className: "sr-only",
 				"aria-live": "polite",
-				children: Q ? O("player.loading") : ""
+				children: Q ? E("player.loading") : ""
 			}),
-			N && /* @__PURE__ */ f(Ge, {
+			j && /* @__PURE__ */ f(Ge, {
 				icon: !0,
-				code: N.code,
-				onRetry: j.retry,
-				children: O(`player.errors.${N.kind}`)
+				code: j.code,
+				onRetry: k.retry,
+				children: E(`player.errors.${j.kind}`)
 			})
 		] })
 	});