@openrails/contentkit-ui 0.0.0-stage → 0.68.0

package/dist/components/video-player.js

@@ -0,0 +1,630 @@
+import { useInlinePreview as e } from "../react/inline-preview.js";
+import { RenditionImg as t } from "./rendition-img.js";
+import { publicRenditions as n } from "../client/public.js";
+import { useMessages as r } from "../i18n/context.js";
+import { ContentKitUiRoot as i } from "../scope.js";
+import { EncodeProgress as a } from "./encode-progress.js";
+import { Button as o } from "../ui/button.js";
+import { formatDuration as ee } from "../client/gallery.js";
+import { PLAYBACK_SPEEDS as te, PLAYER_VOLUME_KEY as ne, nextSpeed as re, playerKeyAction as ie, resumeAt as ae, writeVolume as oe } from "../client/player.js";
+import { useHlsPlayer as se } from "../react/gallery.js";
+import { useActiveCues as ce, useFullscreen as le, useMediaState as ue, usePictureInPicture as de, useProgressReports as fe, useSprite as pe } from "../react/player.js";
+import { Captions as me, ControlButton as s, SeekBar as he, SeekFlash as ge, SettingsMenu as _e, Spinner as ve, VolumeControl as ye, clock as be } from "./player-controls.js";
+import { useCallback as c, useEffect as l, useRef as u, useState as d } from "react";
+import { Fragment as xe, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { cn as m } from "cn";
+import { AlertCircleIcon as h, ArrowShrink02Icon as Se, ClosedCaptionIcon as Ce, FullScreenIcon as we, PauseIcon as Te, PictureInPicture01Icon as Ee, PictureInPictureExitIcon as De, PictureInPictureOnIcon as Oe, PlayIcon as ke, RectangularIcon as Ae, Refresh01Icon as g, Settings01Icon as je } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as _ } from "@hugeicons/react";
+//#region src/components/video-player.tsx
+function Me({ vtt: e, xhrSetup: t, fit: n = "contain", className: r }) {
+	let i = pe(e, t), a = i?.cues[0];
+	return !i || !a ? null : /* @__PURE__ */ f("svg", {
+		"aria-hidden": !0,
+		className: m("pointer-events-none absolute inset-0 size-full", r),
+		viewBox: `${a.x} ${a.y} ${a.w} ${a.h}`,
+		preserveAspectRatio: n === "cover" ? "xMidYMid slice" : "xMidYMid meet",
+		"data-ckui": "sprite-frame",
+		children: /* @__PURE__ */ f("image", {
+			href: a.url,
+			width: i.width,
+			height: i.height
+		})
+	});
+}
+var Ne = 2500, Pe = 300, Fe = 700, Ie = 650, v = "textarea, select, [contenteditable]:not([contenteditable=\"false\"]), [role=textbox], [role=combobox], [role=searchbox], input:not([type=range]):not([type=button]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=reset])", y = "[role=menu], [role=menuitem], [role=menuitemradio], [role=menuitemcheckbox], [role=listbox], [role=option]", b = "a, button, input, [role=button], [role=dialog], [role=alertdialog]";
+function Le(e, t, n) {
+	return e instanceof Element ? e.closest(v) || e.closest(y) || e.closest("input[type=range], [role=slider]") && /^(Arrow|Page|Home$|End$)/.test(t) ? !1 : n.contains(e) || !e.closest(b) : !0;
+}
+var Re = (e, t) => e instanceof Element && t.contains(e) && !!e.closest("button") && !e.closest(y);
+function x({ base: o, poster: h, width: v, height: y, duration: b, pending: x, progress: We, failed: S, layout: Ge = "frame", maxHeight: Ke = "80svh", inlinePreview: qe, previewStart: Je, keyboard: C = "focus", onProgress: Ye, progressInterval: Xe = 1e4, onEvent: Ze, theater: w, onTheaterChange: Qe, onMiniPlayer: T, renderDownloads: $e, menuItems: et, crossOrigin: tt, label: nt, className: rt, style: it, appearance: at, startAt: ot, ...E }) {
+	let { t: D } = r(), st = !!o && !x && !S, ct = st ? `${o}master.m3u8` : null, O = ae(ot, b), k = se({
+		...E,
+		src: ct,
+		startAt: O
+	}), { status: A, error: j, started: M, previewing: N, audio: P, subtitles: F, quality: I } = k, [L, lt] = d(null), [R, ut] = d(null), dt = k.ref, ft = c((e) => {
+		dt(e), ut(e);
+	}, [dt]);
+	e({
+		setting: qe,
+		available: st && !M && !j && E.active !== !1 && !E.autoPlay,
+		target: L,
+		playing: M && A === "playing",
+		start: () => k.preview(Ve(Je, b)),
+		stop: k.unload
+	});
+	let z = ue(R), B = le(L, R), V = de(R), pt = ce(R), mt = pe(M && o ? `${o}sprite.vtt` : null, E.xhrSetup), H = !N && M;
+	fe(R, {
+		enabled: H,
+		source: H ? ct : null,
+		interval: Xe,
+		onProgress: Ye
+	});
+	let ht = u(Ze);
+	ht.current = Ze;
+	let gt = u(!1);
+	gt.current = !N && A !== "idle";
+	let U = c((e, t = !1) => {
+		(t || gt.current) && ht.current && ht.current({
+			...e,
+			time: R?.currentTime ?? 0
+		});
+	}, [R]);
+	l(() => {
+		if (!R) return;
+		let e = 0, t = {
+			play: () => U({ type: "play" }),
+			playing: () => U({ type: "playing" }),
+			pause: () => !R.ended && U({ type: "pause" }),
+			waiting: () => U({ type: "waiting" }),
+			ended: () => U({ type: "ended" }),
+			timeupdate: () => {
+				R.seeking || (e = R.currentTime);
+			},
+			seeked: () => {
+				U({
+					type: "seek",
+					from: e
+				}), e = R.currentTime;
+			},
+			ratechange: () => U({
+				type: "rate",
+				rate: R.playbackRate
+			})
+		};
+		for (let [e, n] of Object.entries(t)) R.addEventListener(e, n);
+		return () => {
+			for (let [e, n] of Object.entries(t)) R.removeEventListener(e, n);
+		};
+	}, [R, U]), l(() => {
+		j && !N && U({
+			type: "error",
+			error: j
+		}, !0);
+	}, [
+		j,
+		N,
+		U
+	]);
+	let _t = u({
+		fs: !1,
+		pip: !1
+	});
+	l(() => {
+		_t.current.fs !== B.active && U({
+			type: "fullscreen",
+			on: B.active
+		}), _t.current.pip !== V.active && U({
+			type: "pip",
+			on: V.active
+		}), _t.current = {
+			fs: B.active,
+			pip: V.active
+		};
+	}, [
+		B.active,
+		V.active,
+		U
+	]);
+	let vt = u(O);
+	l(() => {
+		vt.current !== O && (vt.current = O, R && M && (R.currentTime = O));
+	}, [
+		O,
+		R,
+		M
+	]);
+	let [yt, W] = d(!1), G = u(void 0), K = c(() => {
+		W(!0), clearTimeout(G.current), G.current = setTimeout(() => W(!1), Ne);
+	}, []), bt = c(() => {
+		clearTimeout(G.current), W(!1);
+	}, []);
+	l(() => () => clearTimeout(G.current), []), l(() => {
+		M && K();
+	}, [M, K]);
+	let [xt, St] = d(!1), [Ct, wt] = d(!1), [Tt, Et] = d(!1), q = M && !j && (yt || z.paused || z.ended || xt || Ct || Tt), [Dt, Ot] = d(null), J = u(void 0), kt = c((e, t) => {
+		let n = J.current !== void 0;
+		clearTimeout(J.current), Ot((r) => ({
+			direction: e,
+			seconds: n && r?.direction === e ? r.seconds + t : t
+		})), J.current = setTimeout(() => {
+			Ot(null), J.current = void 0;
+		}, Ie);
+	}, []);
+	l(() => () => clearTimeout(J.current), []);
+	let At = E.volumeKey === void 0 ? ne : E.volumeKey, Y = z.duration || b || 0, jt = (e) => {
+		R && (R.currentTime = Math.min(Y || e, Math.max(0, e)));
+	}, Mt = (e) => {
+		R && (jt(R.currentTime + e), kt(e < 0 ? -1 : 1, Math.abs(e)));
+	}, X = () => {
+		R && (!M || R.ended ? (R.ended && (R.currentTime = 0), k.play()) : R.paused ? k.play() : R.pause());
+	}, Nt = (e) => {
+		R && (R.volume = Math.min(1, Math.max(0, e)), R.volume > 0 && R.muted && (R.muted = !1), oe(At, {
+			volume: R.volume,
+			muted: R.muted
+		}), U({
+			type: "volume",
+			volume: R.volume,
+			muted: R.muted
+		}));
+	}, Pt = () => {
+		R && (R.muted = !R.muted, !R.muted && R.volume === 0 && (R.volume = 1), oe(At, {
+			volume: R.volume,
+			muted: R.muted
+		}), U({
+			type: "volume",
+			volume: R.volume,
+			muted: R.muted
+		}));
+	}, Ft = (e) => {
+		P.select(e);
+		let t = P.list[e];
+		t && U({
+			type: "audio",
+			track: t
+		});
+	}, It = u(-1);
+	F.selected >= 0 && (It.current = F.selected);
+	let Lt = (e) => {
+		F.select(e), U({
+			type: "subtitles",
+			track: F.list[e] ?? null
+		});
+	}, Rt = () => Lt(F.selected >= 0 ? -1 : It.current >= 0 ? It.current : 0), zt = (e) => {
+		I.select(e), U({
+			type: "quality",
+			height: I.levels.find((t) => t.index === e)?.height ?? null
+		});
+	}, Bt = () => {
+		Qe?.(!w), U({
+			type: "theater",
+			on: !w
+		});
+	}, Vt = () => {
+		if (!T || !o || !R) return;
+		let e = P.list[P.selected], t = F.list[F.selected], n = {
+			base: o,
+			time: R.currentTime,
+			playing: !R.paused && !R.ended,
+			width: v ?? (R.videoWidth || void 0),
+			height: y ?? (R.videoHeight || void 0),
+			duration: Y || void 0,
+			poster: h,
+			audioLanguage: e?.lang,
+			subtitleLanguage: t?.lang ?? null
+		};
+		R.pause(), B.active && B.toggle(), T(n);
+	}, Ht = (e) => {
+		if (!R || !M && e.type !== "toggle") return !1;
+		switch (e.type) {
+			case "toggle":
+				X();
+				break;
+			case "seekBy":
+				Mt(e.seconds);
+				break;
+			case "seekTo":
+				if (!Y) return !1;
+				jt(Y * e.fraction);
+				break;
+			case "volumeBy":
+				Nt((R.muted ? 0 : R.volume) + e.delta);
+				break;
+			case "mute":
+				Pt();
+				break;
+			case "captions":
+				if (!F.list.length) return !1;
+				Rt();
+				break;
+			case "fullscreen":
+				if (!B.supported) return !1;
+				B.toggle();
+				break;
+			case "theater":
+				if (!Qe) return !1;
+				Bt();
+				break;
+			case "miniPlayer":
+				if (!T) return !1;
+				Vt();
+				break;
+			case "speed": R.playbackRate = re(R.playbackRate, e.step);
+		}
+		return M && K(), !0;
+	}, Ut = u(Ht);
+	Ut.current = Ht;
+	let Wt = E.active !== !1;
+	l(() => {
+		if (!C || !L || !Wt) return;
+		let e = C === "global" ? document : L, t = (e) => {
+			let t = e;
+			if (t.defaultPrevented) return;
+			let n = ie(t);
+			n && Le(t.target, t.key, L) && Ut.current(n) && t.preventDefault();
+		}, n = (e) => {
+			let t = e;
+			t.key === " " && Re(t.target, L) && t.preventDefault();
+		};
+		return e.addEventListener("keydown", t), e.addEventListener("keyup", n), () => {
+			e.removeEventListener("keydown", t), e.removeEventListener("keyup", n);
+		};
+	}, [
+		C,
+		L,
+		Wt
+	]);
+	let Gt = u("mouse"), Kt = u(null), Z = u(0), qt = (e) => {
+		if (Gt.current === "mouse") {
+			X(), K();
+			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 = Kt.current;
+		if (Kt.current = r ? {
+			at: i,
+			side: r
+		} : null, r && a?.side === r && (i < Z.current || i - a.at <= Pe)) {
+			Z.current = i + Fe, Mt(r * 10);
+			return;
+		}
+		q && !z.paused ? bt() : K();
+	}, Jt = () => {
+		Date.now() >= Z.current && B.supported && B.toggle();
+	}, Yt = v && y ? v / y : z.aspect ?? 16 / 9, Xt = B.active ? {
+		width: "100%",
+		height: "100%",
+		borderRadius: 0
+	} : Ge === "frame" ? {
+		aspectRatio: String(Yt),
+		width: `min(100%, calc(${Ke} * ${Yt}))`,
+		marginInline: "auto"
+	} : {}, Zt = 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"), Qt = B.active && L ? L : void 0, $t = tn();
+	function en(e) {
+		let t = e.label || D("player.track", { number: e.index + 1 });
+		return e.forced ? D("player.forced", { label: t }) : t;
+	}
+	function tn() {
+		let e = [];
+		if (P.list.length > 1 && e.push({
+			key: "audio",
+			label: D("player.audio"),
+			value: String(P.selected),
+			options: P.list.map((e) => ({
+				value: String(e.index),
+				label: en(e)
+			})),
+			onChange: (e) => Ft(Number(e))
+		}), F.list.length && e.push({
+			key: "subtitles",
+			label: D("player.subtitles"),
+			value: String(F.selected),
+			options: [{
+				value: "-1",
+				label: D("player.subtitlesOff")
+			}, ...F.list.map((e) => ({
+				value: String(e.index),
+				label: en(e)
+			}))],
+			onChange: (e) => Lt(Number(e))
+		}), I.levels.length > 1) {
+			let t = I.levels.find((e) => e.index === I.current);
+			e.push({
+				key: "quality",
+				label: D("player.quality"),
+				value: String(I.selected),
+				options: [...[...I.levels].reverse().map((e) => ({
+					value: String(e.index),
+					label: He(e.height)
+				})), {
+					value: "-1",
+					label: t && I.selected === -1 ? D("player.autoCurrent", { quality: He(t.height).split(" ")[0] }) : D("player.auto")
+				}],
+				onChange: (e) => zt(Number(e))
+			});
+		}
+		return e.push({
+			key: "speed",
+			label: D("player.speed"),
+			value: String(z.rate),
+			options: te.map((e) => ({
+				value: String(e),
+				label: e === 1 ? D("player.normal") : `${e}×`
+			})),
+			onChange: (e) => {
+				R && (R.playbackRate = Number(e));
+			}
+		}), et?.forEach((t, n) => {
+			"options" in t && e.push({
+				key: `host-${n}`,
+				label: t.label,
+				value: t.value,
+				options: t.options,
+				onChange: t.onChange
+			});
+		}), e;
+	}
+	let nn = et?.filter((e) => "onSelect" in e);
+	return /* @__PURE__ */ f(i, {
+		appearance: at,
+		className: m("@container relative w-full touch-manipulation overflow-hidden bg-black text-white outline-none", Ge === "fill" ? "size-full" : !B.active && "rounded-lg", M && !q && "cursor-none", rt),
+		style: {
+			...Xt,
+			...it
+		},
+		"data-ckui": "video-player",
+		"data-status": S ? "failed" : x ? "pending" : A,
+		"data-previewing": N ? "" : void 0,
+		"data-fullscreen": B.active ? "" : void 0,
+		"data-controls": q ? "" : void 0,
+		ref: lt,
+		role: "group",
+		"aria-label": nt ?? D("player.label"),
+		tabIndex: st ? -1 : void 0,
+		onPointerDown: (e) => Gt.current = e.pointerType || "mouse",
+		onPointerMove: (e) => e.pointerType === "mouse" && M && K(),
+		onPointerLeave: (e) => e.pointerType === "mouse" && !Ct && !xt && bt(),
+		onFocus: (e) => Et(ze(e.target)),
+		onBlur: () => Et(!1),
+		children: S ? /* @__PURE__ */ f(Ue, {
+			icon: !0,
+			children: D("player.failed")
+		}) : x || !o ? /* @__PURE__ */ f("div", {
+			className: "absolute inset-0 flex items-center justify-center bg-muted p-6 text-foreground",
+			children: /* @__PURE__ */ f(a, {
+				progress: We,
+				className: "max-w-xs"
+			})
+		}) : /* @__PURE__ */ p(xe, { children: [
+			/* @__PURE__ */ f("video", {
+				ref: ft,
+				className: "absolute inset-0 size-full object-contain",
+				playsInline: !0,
+				preload: "none",
+				crossOrigin: tt,
+				"aria-label": nt
+			}),
+			M && !j && /* @__PURE__ */ f("div", {
+				"data-ckui": "surface",
+				className: "absolute inset-0",
+				onClick: qt,
+				onDoubleClick: Jt
+			}),
+			!M && !j && /* @__PURE__ */ p(xe, { children: [
+				typeof h == "string" ? /* @__PURE__ */ f("img", {
+					alt: "",
+					src: h,
+					decoding: "async",
+					className: m("pointer-events-none absolute inset-0 size-full object-contain", $)
+				}) : Zt.length ? /* @__PURE__ */ f(t, {
+					outputs: Zt,
+					className: m("pointer-events-none absolute inset-0 size-full object-contain", $)
+				}) : /* @__PURE__ */ f(Me, {
+					vtt: `${o}sprite.vtt`,
+					xhrSetup: E.xhrSetup,
+					className: $
+				}),
+				/* @__PURE__ */ f(Be, {
+					label: D("player.play"),
+					onClick: k.play,
+					disabled: Q,
+					className: $,
+					children: Q ? /* @__PURE__ */ f(ve, {}) : /* @__PURE__ */ f(_, {
+						icon: ke,
+						className: "ml-1 size-7 fill-current",
+						strokeWidth: 1.5
+					})
+				}),
+				b ? /* @__PURE__ */ f("span", {
+					className: "pointer-events-none absolute right-2 bottom-2 rounded bg-black/65 px-1.5 py-0.5 text-xs font-medium tabular-nums",
+					children: ee(b)
+				}) : null
+			] }),
+			M && !j && z.ended && /* @__PURE__ */ f(Be, {
+				label: D("player.replay"),
+				onClick: X,
+				children: /* @__PURE__ */ f(_, {
+					icon: g,
+					className: "size-7",
+					strokeWidth: 1.75
+				})
+			}),
+			/* @__PURE__ */ f(me, {
+				cues: H ? pt : [],
+				bottom: q ? "4.75rem" : "1.25rem"
+			}),
+			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(ve, {})
+				})
+			}),
+			/* @__PURE__ */ f(ge, { flash: Dt }),
+			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"),
+				children: [/* @__PURE__ */ f(he, {
+					time: z.time,
+					duration: Y,
+					buffered: z.buffered,
+					onSeek: jt,
+					onScrub: (e) => wt(e !== null),
+					sprite: mt
+				}), /* @__PURE__ */ p("div", {
+					className: "flex items-center gap-0.5",
+					children: [
+						/* @__PURE__ */ f(s, {
+							label: z.ended ? D("player.replay") : z.paused ? D("player.resume") : D("player.pause"),
+							shortcut: "k",
+							icon: z.ended ? g : z.paused ? ke : Te,
+							onClick: X,
+							"data-ckui": "play"
+						}),
+						/* @__PURE__ */ f(ye, {
+							volume: z.volume,
+							muted: z.muted,
+							onVolume: Nt,
+							onMute: Pt
+						}),
+						/* @__PURE__ */ p("span", {
+							className: "ml-1 shrink-0 text-xs font-medium whitespace-nowrap text-white/90 tabular-nums",
+							"data-ckui": "time",
+							children: [
+								be(z.time),
+								" / ",
+								be(Y)
+							]
+						}),
+						/* @__PURE__ */ f("div", { className: "min-w-0 flex-1" }),
+						F.list.length > 0 && /* @__PURE__ */ f(s, {
+							label: D("player.subtitles"),
+							shortcut: "c",
+							icon: Ce,
+							"aria-pressed": F.selected >= 0,
+							onClick: Rt,
+							"data-ckui": "captions-toggle"
+						}),
+						$e?.({
+							container: Qt,
+							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(_e, {
+							icon: je,
+							label: D("player.settings"),
+							sections: $t,
+							actions: nn,
+							container: Qt,
+							onOpenChange: St
+						}),
+						T && /* @__PURE__ */ f(s, {
+							className: "@max-sm:hidden",
+							label: D("player.miniPlayer"),
+							shortcut: "i",
+							icon: Oe,
+							onClick: Vt,
+							"data-ckui": "mini-player-open"
+						}),
+						V.supported && /* @__PURE__ */ f(s, {
+							className: "@max-md:hidden",
+							label: V.active ? D("player.exitPip") : D("player.pip"),
+							icon: V.active ? De : Ee,
+							onClick: V.toggle,
+							"data-ckui": "pip"
+						}),
+						Qe && /* @__PURE__ */ f(s, {
+							className: "max-lg:hidden",
+							label: D("player.theater"),
+							shortcut: "t",
+							icon: Ae,
+							"aria-pressed": !!w,
+							onClick: Bt,
+							"data-ckui": "theater"
+						}),
+						B.supported && /* @__PURE__ */ f(s, {
+							label: B.active ? D("player.exitFullscreen") : D("player.fullscreen"),
+							shortcut: "f",
+							icon: B.active ? Se : we,
+							onClick: B.toggle,
+							"data-ckui": "fullscreen"
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ f("span", {
+				className: "sr-only",
+				"aria-live": "polite",
+				children: Q ? D("player.loading") : ""
+			}),
+			j && /* @__PURE__ */ f(Ue, {
+				icon: !0,
+				code: j.code,
+				onRetry: k.retry,
+				children: D(`player.errors.${j.kind}`)
+			})
+		] })
+	});
+}
+function ze(e) {
+	try {
+		return e instanceof Element && e.matches(":focus-visible") && !!e.closest("[data-ckui=controls]");
+	} catch {
+		return !1;
+	}
+}
+function Be({ label: e, onClick: t, disabled: n, className: r, children: i }) {
+	return /* @__PURE__ */ f("button", {
+		type: "button",
+		className: "absolute inset-0 z-[7] flex items-center justify-center outline-none focus-visible:[&>span]:ring-4 focus-visible:[&>span]:ring-white/60",
+		onClick: t,
+		"aria-label": e,
+		disabled: n,
+		children: /* @__PURE__ */ f("span", {
+			className: m("flex size-16 items-center justify-center rounded-full bg-black/55 shadow-lg backdrop-blur-sm transition motion-safe:hover:scale-105", r),
+			children: i
+		})
+	});
+}
+function Ve(e, t) {
+	let n = t ?? 0, r = e ?? n * .1;
+	return Math.max(0, n > 1 ? Math.min(r, n - 1) : 0);
+}
+function He(e) {
+	return `${e}p${e >= 2160 ? " 4K" : e === 1080 ? " HD" : ""}`;
+}
+function Ue({ children: e, icon: t, code: n, onRetry: i }) {
+	let { t: a } = r();
+	return /* @__PURE__ */ p("div", {
+		role: "alert",
+		"data-ckui": "player-error",
+		"data-ckui-noswipe": "",
+		className: "absolute inset-0 z-20 flex flex-col items-center justify-center gap-3 bg-black/80 p-6 text-center",
+		children: [
+			t && /* @__PURE__ */ f(_, {
+				icon: h,
+				className: "size-7 text-white/80",
+				strokeWidth: 1.75
+			}),
+			/* @__PURE__ */ f("p", {
+				className: "max-w-sm text-sm font-medium text-balance",
+				children: e
+			}),
+			i && /* @__PURE__ */ p(o, {
+				size: "sm",
+				variant: "secondary",
+				onClick: i,
+				children: [/* @__PURE__ */ f(_, {
+					icon: g,
+					"data-icon": "inline-start"
+				}), a("player.retry")]
+			}),
+			n && /* @__PURE__ */ f("p", {
+				className: "font-mono text-[11px] text-white/55",
+				children: a("player.code", { code: n })
+			})
+		]
+	});
+}
+//#endregion
+export { Me as SpriteFrame, x as VideoPlayer, Le as keyAllowed, Ve as previewStartAt, He as qualityLabel };
+
+//# sourceMappingURL=video-player.js.map