@karnstack/kino 0.1.0

package/dist/control-bar-DWzMIb23.js

@@ -0,0 +1,1513 @@
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/util/format-time.ts
+function formatTime(seconds) {
+	const s = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;
+	const h = Math.floor(s / 3600);
+	const m = Math.floor(s % 3600 / 60);
+	const sec = s % 60;
+	const pad = (n) => String(n).padStart(2, "0");
+	return h > 0 ? `${h}:${pad(m)}:${pad(sec)}` : `${m}:${pad(sec)}`;
+}
+//#endregion
+//#region src/core/store.tsx
+const PlayerContext = createContext(null);
+function useProvider() {
+	const p = useContext(PlayerContext);
+	if (!p) throw new Error("kino: components must render inside <Player>");
+	return p;
+}
+function useMediaSelector(selector, isEqual = Object.is) {
+	const provider = useProvider();
+	const cache = useRef({
+		has: false,
+		value: void 0
+	});
+	const getSnapshot = () => {
+		const next = selector(provider.getState());
+		if (cache.current.has && isEqual(cache.current.value, next)) return cache.current.value;
+		cache.current = {
+			has: true,
+			value: next
+		};
+		return next;
+	};
+	return useSyncExternalStore(provider.subscribe, getSnapshot, getSnapshot);
+}
+function usePlayer() {
+	const provider = useProvider();
+	return {
+		state: useMediaSelector((s) => s),
+		actions: provider.actions
+	};
+}
+function usePlayerActions() {
+	return useProvider().actions;
+}
+//#endregion
+//#region src/util/keymap.ts
+function isTypingTarget(el) {
+	if (!(el instanceof HTMLElement)) return false;
+	const tag = el.tagName;
+	return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || el.isContentEditable === true;
+}
+function resolveKey(e) {
+	if (e.ctrlKey || e.metaKey || e.altKey) return null;
+	switch (e.key) {
+		case " ":
+		case "k":
+		case "MediaPlayPause":
+		case "MediaPlay":
+		case "MediaPause": return { type: "toggle-play" };
+		case "ArrowRight": return {
+			type: "seek-by",
+			delta: 5
+		};
+		case "ArrowLeft": return {
+			type: "seek-by",
+			delta: -5
+		};
+		case "ArrowUp": return {
+			type: "volume-by",
+			delta: .1
+		};
+		case "ArrowDown": return {
+			type: "volume-by",
+			delta: -.1
+		};
+		case "f": return { type: "toggle-fullscreen" };
+		case "m": return { type: "toggle-mute" };
+		case "c": return { type: "toggle-captions" };
+		case "s": return { type: "open-speed" };
+		case "<": return {
+			type: "rate-by",
+			delta: -.25
+		};
+		case ">": return {
+			type: "rate-by",
+			delta: .25
+		};
+	}
+	if (/^[0-9]$/.test(e.key)) return {
+		type: "seek-percent",
+		percent: Number(e.key) * 10
+	};
+	return null;
+}
+//#endregion
+//#region src/ui/icons.tsx
+function Icon({ children, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "24",
+		height: "24",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		"aria-hidden": "true",
+		focusable: "false",
+		...props,
+		children
+	});
+}
+function PlayIcon(props) {
+	return /* @__PURE__ */ jsx(Icon, {
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z",
+			fill: "currentColor"
+		})
+	});
+}
+function PauseIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: "14",
+			y: "4",
+			width: "4",
+			height: "16",
+			rx: "1.5",
+			fill: "currentColor"
+		}), /* @__PURE__ */ jsx("rect", {
+			x: "6",
+			y: "4",
+			width: "4",
+			height: "16",
+			rx: "1.5",
+			fill: "currentColor"
+		})]
+	});
+}
+function VolumeIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M11 5 6 9H3v6h3l5 4z",
+			fill: "currentColor",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinejoin: "round"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M16 9a4 4 0 0 1 0 6M19 6.5a8 8 0 0 1 0 11",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round"
+		})]
+	});
+}
+function VolumeMutedIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M11 5 6 9H3v6h3l5 4z",
+			fill: "currentColor",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinejoin: "round"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M16 9.5 21 15M21 9.5 16 15",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round"
+		})]
+	});
+}
+function CcIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: "3",
+			y: "5",
+			width: "18",
+			height: "14",
+			rx: "2",
+			ry: "2",
+			stroke: "currentColor",
+			strokeWidth: "2"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M7 15h4M15 15h2M7 11h2M13 11h4",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})]
+	});
+}
+function CcOffIcon(props) {
+	return /* @__PURE__ */ jsx(Icon, {
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M10.5 5H19a2 2 0 0 1 2 2v8.5M17 11h-.5M19 19H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2M7 11h4M7 15h2.5M2 2l20 20",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function SettingsIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "3",
+			stroke: "currentColor",
+			strokeWidth: "2"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})]
+	});
+}
+function PipIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: "3",
+			y: "5",
+			width: "18",
+			height: "14",
+			rx: "2",
+			stroke: "currentColor",
+			strokeWidth: "2"
+		}), /* @__PURE__ */ jsx("rect", {
+			x: "12",
+			y: "11",
+			width: "7",
+			height: "6",
+			rx: "1",
+			fill: "currentColor"
+		})]
+	});
+}
+function FullscreenIcon(props) {
+	return /* @__PURE__ */ jsx(Icon, {
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M15 3h6v6M21 3l-7 7M3 21l7-7M9 21H3v-6",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function FullscreenExitIcon(props) {
+	return /* @__PURE__ */ jsx(Icon, {
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function SkipBackIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M9 14 4 9l5-5",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5 5.5 5.5 0 0 1-5.5 5.5H11",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})]
+	});
+}
+function SkipForwardIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "m15 14 5-5-5-5",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M20 9H9.5A5.5 5.5 0 0 0 4 14.5 5.5 5.5 0 0 0 9.5 20H13",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})]
+	});
+}
+function SkipBack5Icon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M3 3v5h5",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x: "12",
+				y: "13",
+				textAnchor: "middle",
+				dominantBaseline: "central",
+				fontSize: "9",
+				fontWeight: "700",
+				fill: "currentColor",
+				stroke: "none",
+				children: "5"
+			})
+		]
+	});
+}
+function SkipForward5Icon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M21 12a9 9 0 1 1-9-9 9.75 9.75 0 0 1 6.74 2.74L21 8",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M21 3v5h-5",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x: "12",
+				y: "13",
+				textAnchor: "middle",
+				dominantBaseline: "central",
+				fontSize: "9",
+				fontWeight: "700",
+				fill: "currentColor",
+				stroke: "none",
+				children: "5"
+			})
+		]
+	});
+}
+function ChevronLeftIcon(props) {
+	return /* @__PURE__ */ jsx(Icon, {
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "m15 6-6 6 6 6",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function ChevronRightIcon(props) {
+	return /* @__PURE__ */ jsx(Icon, {
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "m9 6 6 6-6 6",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+//#endregion
+//#region src/ui/player.tsx
+const COMPACT_MAX = 560;
+const WrapperContext = createContext(null);
+function useWrapperRef() {
+	return useContext(WrapperContext);
+}
+const CompactContext = createContext(false);
+function useIsCompact() {
+	return useContext(CompactContext);
+}
+const ControlsVisibilityContext = createContext(null);
+function Player({ provider, accentColor, theme, className, children }) {
+	const wrapperRef = useRef(null);
+	const videoHostRef = useRef(null);
+	const hoveredRef = useRef(false);
+	const [compact, setCompact] = useState(false);
+	useEffect(() => {
+		const host = videoHostRef.current;
+		if (!host) return;
+		provider.mount(host);
+		return () => provider.destroy();
+	}, [provider]);
+	useEffect(() => {
+		const el = wrapperRef.current;
+		if (!el) return;
+		const update = () => setCompact(el.clientWidth > 0 && el.clientWidth <= COMPACT_MAX);
+		update();
+		if (typeof ResizeObserver === "undefined") return;
+		const ro = new ResizeObserver(update);
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, []);
+	useEffect(() => {
+		const root = wrapperRef.current;
+		if (!root) return;
+		const enter = () => hoveredRef.current = true;
+		const leave = () => hoveredRef.current = false;
+		root.addEventListener("pointerenter", enter);
+		root.addEventListener("pointerleave", leave);
+		return () => {
+			root.removeEventListener("pointerenter", enter);
+			root.removeEventListener("pointerleave", leave);
+		};
+	}, []);
+	useEffect(() => {
+		function onKeyDown(e) {
+			const root = wrapperRef.current;
+			if (!root) return;
+			const target = e.target;
+			if (!(target != null && root.contains(target) || hoveredRef.current || root.contains(document.activeElement))) return;
+			if (isTypingTarget(e.target)) return;
+			const action = resolveKey(e);
+			if (!action) return;
+			e.preventDefault();
+			const s = provider.getState();
+			const a = provider.actions;
+			switch (action.type) {
+				case "toggle-play":
+					if (s.paused) a.play();
+					else a.pause();
+					break;
+				case "seek-by":
+					a.seek(Math.max(0, s.currentTime + action.delta));
+					break;
+				case "volume-by":
+					a.setVolume(s.volume + action.delta);
+					break;
+				case "toggle-mute":
+					a.setMuted(!s.muted);
+					break;
+				case "toggle-fullscreen":
+					if (s.fullscreen) a.exitFullscreen();
+					else if (wrapperRef.current) a.enterFullscreen(wrapperRef.current);
+					break;
+				case "seek-percent":
+					if (s.duration) a.seek(action.percent / 100 * s.duration);
+					break;
+				case "rate-by":
+					a.setRate(Math.max(.25, s.rate + action.delta));
+					break;
+				case "toggle-captions": {
+					const next = s.activeTextTrackId ? null : s.textTracks[0]?.id ?? null;
+					a.setTextTrack(next);
+					break;
+				}
+				case "open-speed":
+					wrapperRef.current?.dispatchEvent(new Event("kino:open-speed"));
+					break;
+			}
+		}
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [provider]);
+	const style = { ...theme };
+	if (accentColor) style["--kino-accent"] = accentColor;
+	return /* @__PURE__ */ jsx(PlayerContext.Provider, {
+		value: provider,
+		children: /* @__PURE__ */ jsx(WrapperContext.Provider, {
+			value: wrapperRef,
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: wrapperRef,
+				className: ["kino", className].filter(Boolean).join(" "),
+				style,
+				tabIndex: 0,
+				children: [/* @__PURE__ */ jsx("div", {
+					ref: videoHostRef,
+					className: "kino-video-host"
+				}), /* @__PURE__ */ jsx(PlayerChrome, {
+					compact,
+					children
+				})]
+			})
+		})
+	});
+}
+function PlayerChrome({ compact, children }) {
+	const paused = useMediaSelector((s) => s.paused);
+	const visibility = useVisibilityManager(useWrapperRef(), compact, paused);
+	return /* @__PURE__ */ jsx(CompactContext.Provider, {
+		value: compact,
+		children: /* @__PURE__ */ jsxs(ControlsVisibilityContext.Provider, {
+			value: visibility,
+			children: [/* @__PURE__ */ jsx(GestureLayer, {
+				compact,
+				onToggleControls: visibility.toggle
+			}), children]
+		})
+	});
+}
+function useVisibilityManager(wrapperRef, compact, paused) {
+	const [visible, setVisible] = useState(true);
+	const timerRef = useRef(void 0);
+	const pausedRef = useRef(paused);
+	pausedRef.current = paused;
+	const arm = useCallback(() => {
+		clearTimeout(timerRef.current);
+		if (!pausedRef.current) timerRef.current = setTimeout(() => setVisible(false), compact ? 3200 : 2500);
+	}, [compact]);
+	const show = useCallback(() => {
+		setVisible(true);
+		arm();
+	}, [arm]);
+	const toggle = useCallback(() => {
+		if (visible) {
+			clearTimeout(timerRef.current);
+			setVisible(false);
+		} else {
+			setVisible(true);
+			arm();
+		}
+	}, [visible, arm]);
+	useEffect(() => {
+		const root = wrapperRef?.current;
+		if (!root || compact) return;
+		const onShow = () => show();
+		const onHide = () => {
+			clearTimeout(timerRef.current);
+			if (!pausedRef.current) setVisible(false);
+		};
+		root.addEventListener("pointermove", onShow);
+		root.addEventListener("pointerenter", onShow);
+		root.addEventListener("pointerleave", onHide);
+		root.addEventListener("focusin", onShow);
+		show();
+		return () => {
+			clearTimeout(timerRef.current);
+			root.removeEventListener("pointermove", onShow);
+			root.removeEventListener("pointerenter", onShow);
+			root.removeEventListener("pointerleave", onHide);
+			root.removeEventListener("focusin", onShow);
+		};
+	}, [
+		wrapperRef,
+		compact,
+		show
+	]);
+	useEffect(() => {
+		if (compact && !paused) arm();
+	}, [
+		compact,
+		paused,
+		arm
+	]);
+	useEffect(() => () => clearTimeout(timerRef.current), []);
+	return {
+		visible: visible || paused,
+		show,
+		toggle
+	};
+}
+function GestureLayer({ compact, onToggleControls }) {
+	const actions = usePlayerActions();
+	const paused = useMediaSelector((s) => s.paused);
+	const fullscreen = useMediaSelector((s) => s.fullscreen);
+	const wrapperRef = useWrapperRef();
+	const clickTimer = useRef(void 0);
+	useEffect(() => () => clearTimeout(clickTimer.current), []);
+	if (compact) return /* @__PURE__ */ jsx("div", {
+		className: "kino-gesture",
+		onClick: onToggleControls,
+		children: /* @__PURE__ */ jsx(CenterFlash, {})
+	});
+	const togglePlay = () => paused ? actions.play() : actions.pause();
+	const toggleFullscreen = () => {
+		if (fullscreen) actions.exitFullscreen();
+		else if (wrapperRef?.current) actions.enterFullscreen(wrapperRef.current);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "kino-gesture",
+		onClick: () => {
+			clearTimeout(clickTimer.current);
+			clickTimer.current = setTimeout(togglePlay, 220);
+		},
+		onDoubleClick: () => {
+			clearTimeout(clickTimer.current);
+			toggleFullscreen();
+		},
+		children: /* @__PURE__ */ jsx(CenterFlash, {})
+	});
+}
+function CenterFlash() {
+	const paused = useMediaSelector((s) => s.paused);
+	const [pulse, setPulse] = useState(null);
+	const firstRun = useRef(true);
+	const seq = useRef(0);
+	useEffect(() => {
+		if (firstRun.current) {
+			firstRun.current = false;
+			return;
+		}
+		seq.current += 1;
+		setPulse({
+			id: seq.current,
+			paused
+		});
+	}, [paused]);
+	if (!pulse) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "kino-flash",
+		"aria-hidden": "true",
+		children: pulse.paused ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
+	}, pulse.id);
+}
+function Overlay({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "kino-overlay",
+		children
+	});
+}
+Player.Overlay = Overlay;
+function useControlsVisible() {
+	return useContext(ControlsVisibilityContext)?.visible ?? true;
+}
+//#endregion
+//#region src/util/storyboard.ts
+function toSeconds(stamp) {
+	const parts = stamp.trim().split(":").map(Number);
+	let s = 0;
+	for (const p of parts) s = s * 60 + p;
+	return s;
+}
+function parseStoryboard(vttText, baseUrl) {
+	const lines = vttText.split(/\r?\n/);
+	const tiles = [];
+	for (let i = 0; i < lines.length; i++) {
+		const line = lines[i];
+		if (!line || !line.includes("-->")) continue;
+		const [from, to] = line.split("-->");
+		if (from === void 0 || to === void 0) continue;
+		const start = toSeconds(from);
+		const end = toSeconds(to);
+		const m = (lines[i + 1] ?? "").trim().match(/^(.*?)#xywh=(\d+),(\d+),(\d+),(\d+)/);
+		if (!m) continue;
+		const [, file, x, y, w, h] = m;
+		if (file === void 0 || x === void 0 || y === void 0 || w === void 0 || h === void 0) continue;
+		tiles.push({
+			url: new URL(file, baseUrl).href,
+			x: +x,
+			y: +y,
+			w: +w,
+			h: +h,
+			start,
+			end
+		});
+	}
+	return {
+		tiles,
+		thumbnailAt(time) {
+			if (tiles.length === 0) return null;
+			for (const t of tiles) if (time >= t.start && time < t.end) return t;
+			return tiles[tiles.length - 1] ?? null;
+		}
+	};
+}
+//#endregion
+//#region src/ui/rolling-time.tsx
+const DIGITS = [
+	0,
+	1,
+	2,
+	3,
+	4,
+	5,
+	6,
+	7,
+	8,
+	9
+];
+function RollingDigit({ value }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "kino-roll-digit",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "kino-roll-col",
+			style: { transform: `translateY(${-value * 10}%)` },
+			children: DIGITS.map((d) => /* @__PURE__ */ jsx("span", {
+				className: "kino-roll-cell",
+				children: d
+			}, d))
+		})
+	});
+}
+function RollingTime({ value }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "kino-roll",
+		"aria-label": value,
+		children: value.split("").map((ch, i) => ch >= "0" && ch <= "9" ? /* @__PURE__ */ jsx(RollingDigit, { value: Number(ch) }, i) : /* @__PURE__ */ jsx("span", {
+			className: "kino-roll-sep",
+			"aria-hidden": "true",
+			children: ch
+		}, i))
+	});
+}
+//#endregion
+//#region src/ui/scrubber.tsx
+function Scrubber() {
+	const actions = usePlayerActions();
+	const duration = useMediaSelector((s) => s.duration);
+	const currentTime = useMediaSelector((s) => s.currentTime);
+	const buffered = useMediaSelector((s) => s.buffered);
+	const storyboardUrl = useMediaSelector((s) => s.storyboard?.vttUrl ?? null);
+	const hasStoryboard = useMediaSelector((s) => s.capabilities.hasStoryboard);
+	const trackRef = useRef(null);
+	const previewRef = useRef(null);
+	const dragCleanup = useRef(null);
+	useEffect(() => () => dragCleanup.current?.(), []);
+	const [hover, setHover] = useState(null);
+	const [sb, setSb] = useState(null);
+	const [dims, setDims] = useState({
+		pw: 0,
+		tw: 0
+	});
+	useEffect(() => {
+		if (!hasStoryboard || !storyboardUrl) return;
+		let alive = true;
+		fetch(storyboardUrl).then((r) => r.text()).then((txt) => {
+			if (alive) setSb(parseStoryboard(txt, storyboardUrl));
+		}).catch(() => {});
+		return () => {
+			alive = false;
+		};
+	}, [hasStoryboard, storyboardUrl]);
+	const pct = duration > 0 ? currentTime / duration * 100 : 0;
+	const timeFromClientX = (clientX) => {
+		const rect = trackRef.current?.getBoundingClientRect();
+		if (!rect || rect.width === 0) return 0;
+		return Math.min(1, Math.max(0, (clientX - rect.left) / rect.width)) * duration;
+	};
+	const onPointerDown = (e) => {
+		actions.seek(timeFromClientX(e.clientX));
+		const move = (ev) => actions.seek(timeFromClientX(ev.clientX));
+		const up = () => {
+			window.removeEventListener("pointermove", move);
+			window.removeEventListener("pointerup", up);
+			window.removeEventListener("pointercancel", up);
+			dragCleanup.current = null;
+		};
+		dragCleanup.current = up;
+		window.addEventListener("pointermove", move);
+		window.addEventListener("pointerup", up);
+		window.addEventListener("pointercancel", up);
+	};
+	const onPointerMove = (e) => {
+		const rect = trackRef.current?.getBoundingClientRect();
+		if (!rect) return;
+		setHover({
+			x: e.clientX - rect.left,
+			time: timeFromClientX(e.clientX)
+		});
+	};
+	const tile = sb && hover ? sb.thumbnailAt(hover.time) : null;
+	useLayoutEffect(() => {
+		setDims({
+			pw: previewRef.current?.getBoundingClientRect().width ?? 0,
+			tw: trackRef.current?.getBoundingClientRect().width ?? 0
+		});
+	}, [hover, tile?.url]);
+	let previewLeft = hover?.x ?? 0;
+	if (hover && dims.pw > 0 && dims.tw > 0) {
+		const half = dims.pw / 2 + 4;
+		previewLeft = Math.min(Math.max(hover.x, half), dims.tw - half);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "kino-scrubber",
+		onPointerMove,
+		onPointerLeave: () => setHover(null),
+		children: [hover && /* @__PURE__ */ jsxs("div", {
+			ref: previewRef,
+			className: "kino-preview kino-glass",
+			style: { left: previewLeft },
+			children: [tile && /* @__PURE__ */ jsx("div", {
+				className: "kino-preview-img",
+				style: {
+					width: tile.w,
+					height: tile.h,
+					backgroundImage: `url(${tile.url})`,
+					backgroundPosition: `-${tile.x}px -${tile.y}px`
+				}
+			}), /* @__PURE__ */ jsx("span", {
+				className: "kino-preview-time",
+				children: /* @__PURE__ */ jsx(RollingTime, { value: formatTime(hover.time) })
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: trackRef,
+			"data-testid": "kino-track",
+			className: "kino-track",
+			role: "slider",
+			tabIndex: 0,
+			"aria-label": "Seek",
+			"aria-valuemin": 0,
+			"aria-valuemax": Math.floor(duration) || 0,
+			"aria-valuenow": Math.floor(currentTime),
+			"aria-valuetext": formatTime(currentTime),
+			onPointerDown,
+			children: [
+				buffered.map(([s, e], i) => /* @__PURE__ */ jsx("div", {
+					className: "kino-buffered",
+					style: {
+						left: `${duration > 0 ? s / duration * 100 : 0}%`,
+						width: `${duration > 0 ? (e - s) / duration * 100 : 0}%`
+					}
+				}, i)),
+				/* @__PURE__ */ jsx("div", {
+					"data-testid": "kino-progress",
+					className: "kino-progress",
+					style: { width: `${pct}%` }
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "kino-thumb",
+					style: { left: `${pct}%` }
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/ui/idle-overlay.tsx
+const SPEEDS = [
+	.8,
+	1,
+	1.2,
+	1.5,
+	1.7,
+	2,
+	2.5
+];
+const MAX_RATE = 2.5;
+function IdleOverlay() {
+	const actions = usePlayerActions();
+	const compact = useIsCompact();
+	const paused = useMediaSelector((s) => s.paused);
+	const currentTime = useMediaSelector((s) => s.currentTime);
+	const ended = useMediaSelector((s) => s.ended);
+	const rate = useMediaSelector((s) => s.rate);
+	if (!paused || currentTime > 0 || ended) return null;
+	const startAt = (r) => {
+		actions.setRate(r);
+		actions.play();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "kino-idle",
+		onClick: () => actions.play(),
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "kino-idle-play",
+			"aria-label": "Play",
+			onClick: () => actions.play(),
+			children: /* @__PURE__ */ jsx(PlayIcon, {})
+		}), !compact && /* @__PURE__ */ jsx("div", {
+			className: "kino-idle-speeds",
+			children: SPEEDS.map((r, i) => {
+				const isMax = r === MAX_RATE;
+				return /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "kino-speed-chip",
+					style: { "--i": i },
+					"aria-label": isMax ? "Max" : `${r}x`,
+					"aria-pressed": r === rate,
+					"data-active": r === rate,
+					"data-max": isMax,
+					onClick: () => startAt(r),
+					children: isMax ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "kino-bolt",
+						"aria-hidden": "true",
+						children: "⚡"
+					}), "Max"] }) : `${r}×`
+				}, r);
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/ui/captions.tsx
+function Captions() {
+	const text = useMediaSelector((s) => s.activeCueText);
+	const controlsVisible = useControlsVisible();
+	if (!text) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: `kino-captions ${controlsVisible ? "is-raised" : ""}`,
+		"aria-live": "polite",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "kino-caption-text",
+			children: text
+		})
+	});
+}
+//#endregion
+//#region src/ui/tooltip.tsx
+function renderShortcut(shortcut) {
+	if (shortcut == null) return null;
+	return typeof shortcut === "string" ? /* @__PURE__ */ jsx("kbd", { children: shortcut }) : shortcut;
+}
+function SpaceKey() {
+	return /* @__PURE__ */ jsx("span", {
+		className: "kino-key kino-key-space",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("span", { className: "kino-key-space-bar" })
+	});
+}
+function ArrowKey({ dir }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "kino-key kino-key-arrow",
+		"aria-hidden": "true",
+		children: dir === "left" ? /* @__PURE__ */ jsx(ChevronLeftIcon, {}) : /* @__PURE__ */ jsx(ChevronRightIcon, {})
+	});
+}
+function Tooltip({ label, shortcut, align = "center", children }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "kino-popover-root",
+		children: [children, /* @__PURE__ */ jsxs("span", {
+			className: `kino-tip kino-glass kino-tip-${align}`,
+			"aria-hidden": "true",
+			children: [label, renderShortcut(shortcut)]
+		})]
+	});
+}
+//#endregion
+//#region src/ui/buttons.tsx
+const SKIP_SECONDS$1 = 5;
+function PlayPauseButton() {
+	const actions = usePlayerActions();
+	const paused = useMediaSelector((s) => s.paused);
+	return /* @__PURE__ */ jsx(Tooltip, {
+		label: paused ? "Play" : "Pause",
+		shortcut: /* @__PURE__ */ jsx(SpaceKey, {}),
+		align: "start",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "kino-ctrl",
+			"aria-label": paused ? "Play" : "Pause",
+			onClick: () => paused ? actions.play() : actions.pause(),
+			children: paused ? /* @__PURE__ */ jsx(PlayIcon, {}) : /* @__PURE__ */ jsx(PauseIcon, {})
+		})
+	});
+}
+function SkipBackButton() {
+	const actions = usePlayerActions();
+	const currentTime = useMediaSelector((s) => s.currentTime);
+	return /* @__PURE__ */ jsx(Tooltip, {
+		label: "Back",
+		shortcut: /* @__PURE__ */ jsx(ArrowKey, { dir: "left" }),
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "kino-ctrl kino-ctrl-skip",
+			"aria-label": `Back ${SKIP_SECONDS$1} seconds`,
+			onClick: () => actions.seek(Math.max(0, currentTime - SKIP_SECONDS$1)),
+			children: [/* @__PURE__ */ jsx(SkipBackIcon, {}), /* @__PURE__ */ jsx("span", {
+				className: "kino-ctrl-skip-num",
+				children: SKIP_SECONDS$1
+			})]
+		})
+	});
+}
+function SkipForwardButton() {
+	const actions = usePlayerActions();
+	const currentTime = useMediaSelector((s) => s.currentTime);
+	const duration = useMediaSelector((s) => s.duration);
+	return /* @__PURE__ */ jsx(Tooltip, {
+		label: "Forward",
+		shortcut: /* @__PURE__ */ jsx(ArrowKey, { dir: "right" }),
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "kino-ctrl kino-ctrl-skip",
+			"aria-label": `Forward ${SKIP_SECONDS$1} seconds`,
+			onClick: () => actions.seek(duration ? Math.min(duration, currentTime + SKIP_SECONDS$1) : currentTime + SKIP_SECONDS$1),
+			children: [/* @__PURE__ */ jsx(SkipForwardIcon, {}), /* @__PURE__ */ jsx("span", {
+				className: "kino-ctrl-skip-num",
+				children: SKIP_SECONDS$1
+			})]
+		})
+	});
+}
+function VolumeControl() {
+	const actions = usePlayerActions();
+	const volume = useMediaSelector((s) => s.volume);
+	const muted = useMediaSelector((s) => s.muted);
+	const onChange = (e) => {
+		const v = Number(e.target.value);
+		actions.setVolume(v);
+		if (muted && v > 0) actions.setMuted(false);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "kino-volume",
+		children: [/* @__PURE__ */ jsx(Tooltip, {
+			label: muted ? "Unmute" : "Mute",
+			shortcut: "M",
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "kino-ctrl",
+				"aria-label": muted ? "Unmute" : "Mute",
+				onClick: () => actions.setMuted(!muted),
+				children: muted ? /* @__PURE__ */ jsx(VolumeMutedIcon, {}) : /* @__PURE__ */ jsx(VolumeIcon, {})
+			})
+		}), /* @__PURE__ */ jsx("input", {
+			type: "range",
+			min: 0,
+			max: 1,
+			step: .05,
+			"aria-label": "Volume",
+			value: muted ? 0 : volume,
+			onChange
+		})]
+	});
+}
+function PipButton() {
+	const actions = usePlayerActions();
+	const pip = useMediaSelector((s) => s.pip);
+	if (!useMediaSelector((s) => s.capabilities.canPiP)) return null;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		label: pip ? "Exit picture in picture" : "Picture in picture",
+		align: "end",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "kino-ctrl",
+			"aria-label": pip ? "Exit picture in picture" : "Picture in picture",
+			onClick: () => pip ? actions.exitPiP() : actions.enterPiP(),
+			children: /* @__PURE__ */ jsx(PipIcon, {})
+		})
+	});
+}
+function FullscreenButton() {
+	const actions = usePlayerActions();
+	const wrapperRef = useWrapperRef();
+	const fullscreen = useMediaSelector((s) => s.fullscreen);
+	if (!useMediaSelector((s) => s.capabilities.canFullscreen)) return null;
+	const toggle = () => {
+		if (fullscreen) {
+			actions.exitFullscreen();
+			return;
+		}
+		const wrapper = wrapperRef?.current;
+		if (wrapper) actions.enterFullscreen(wrapper);
+	};
+	return /* @__PURE__ */ jsx(Tooltip, {
+		label: fullscreen ? "Exit fullscreen" : "Fullscreen",
+		shortcut: "F",
+		align: "end",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "kino-ctrl",
+			"aria-label": fullscreen ? "Exit fullscreen" : "Fullscreen",
+			onClick: toggle,
+			children: fullscreen ? /* @__PURE__ */ jsx(FullscreenExitIcon, {}) : /* @__PURE__ */ jsx(FullscreenIcon, {})
+		})
+	});
+}
+//#endregion
+//#region src/ui/popover.tsx
+function Popover({ trigger, shortcut, label, openOn, align = "center", children }) {
+	const [open, setOpen] = useState(false);
+	const [justClosed, setJustClosed] = useState(false);
+	const rootRef = useRef(null);
+	const wrapperRef = useWrapperRef();
+	useEffect(() => {
+		if (!openOn) return;
+		const wrapper = wrapperRef?.current;
+		if (!wrapper) return;
+		const handler = () => setOpen(true);
+		wrapper.addEventListener(openOn, handler);
+		return () => wrapper.removeEventListener(openOn, handler);
+	}, [openOn, wrapperRef]);
+	useEffect(() => {
+		if (!open) return;
+		const onKey = (e) => {
+			if (e.key === "Escape") setOpen(false);
+		};
+		const onPointerDown = (e) => {
+			if (!rootRef.current?.contains(e.target)) setOpen(false);
+		};
+		document.addEventListener("keydown", onKey);
+		document.addEventListener("pointerdown", onPointerDown);
+		return () => {
+			document.removeEventListener("keydown", onKey);
+			document.removeEventListener("pointerdown", onPointerDown);
+		};
+	}, [open]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "kino-popover-root",
+		ref: rootRef,
+		onPointerLeave: () => setJustClosed(false),
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				className: "kino-ctrl",
+				"aria-label": label,
+				"aria-haspopup": "menu",
+				"aria-expanded": open,
+				onClick: () => setOpen((o) => !o),
+				children: trigger
+			}),
+			!open && !justClosed && /* @__PURE__ */ jsxs("span", {
+				className: `kino-tip kino-glass kino-tip-${align}`,
+				"aria-hidden": "true",
+				children: [label, renderShortcut(shortcut)]
+			}),
+			open && /* @__PURE__ */ jsx("div", {
+				className: `kino-menu kino-glass kino-menu-${align}`,
+				role: "menu",
+				onClick: () => {
+					setOpen(false);
+					setJustClosed(true);
+				},
+				children
+			})
+		]
+	});
+}
+//#endregion
+//#region src/ui/menus.tsx
+const RATES$1 = [
+	.8,
+	1,
+	1.2,
+	1.5,
+	1.7,
+	2,
+	2.5
+];
+const QUALITY_TIERS$1 = [
+	[2160, "4K"],
+	[1440, "2K"],
+	[1080, "FHD"],
+	[720, "HD"],
+	[480, "SD"]
+];
+const heightKeyword$1 = (h) => {
+	for (const [min, kw] of QUALITY_TIERS$1) if (h >= min) return kw;
+	return `${h}p`;
+};
+function SpeedMenu() {
+	const actions = usePlayerActions();
+	const rate = useMediaSelector((s) => s.rate);
+	if (!useMediaSelector((s) => s.capabilities.canSetRate)) return null;
+	return /* @__PURE__ */ jsx(Popover, {
+		label: "Speed",
+		shortcut: "S",
+		openOn: "kino:open-speed",
+		trigger: /* @__PURE__ */ jsx("span", {
+			className: "kino-ctrl-label kino-speed-label",
+			children: rate === 2.5 ? "Max" : `${rate} ×`
+		}),
+		children: RATES$1.map((r) => /* @__PURE__ */ jsx("button", {
+			role: "menuitemradio",
+			"aria-checked": r === rate,
+			className: "kino-menu-item",
+			onClick: () => actions.setRate(r),
+			children: r === 2.5 ? "Max" : `${r}x`
+		}, r))
+	});
+}
+function QualityMenu() {
+	const actions = usePlayerActions();
+	const qualities = useMediaSelector((s) => s.qualities);
+	const active = useMediaSelector((s) => s.activeQualityId);
+	const videoHeight = useMediaSelector((s) => s.videoHeight);
+	if (!useMediaSelector((s) => s.capabilities.canSetQuality) || qualities.length === 0) return null;
+	const topHeight = Math.max(...qualities.map((q) => q.height));
+	const badgeHeight = active === "auto" ? videoHeight || topHeight : qualities.find((q) => q.id === active)?.height ?? topHeight;
+	const autoHint = videoHeight ? heightKeyword$1(videoHeight) : "";
+	const sorted = [...qualities].sort((a, b) => b.height - a.height);
+	return /* @__PURE__ */ jsxs(Popover, {
+		label: "Quality",
+		align: "end",
+		trigger: /* @__PURE__ */ jsx("span", {
+			className: "kino-quality-badge",
+			children: heightKeyword$1(badgeHeight)
+		}),
+		children: [/* @__PURE__ */ jsx("button", {
+			role: "menuitemradio",
+			"aria-checked": active === "auto",
+			className: "kino-menu-item kino-menu-q",
+			onClick: () => actions.setQuality("auto"),
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "kino-q-label",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "kino-q-key",
+					children: "Auto"
+				}), autoHint && /* @__PURE__ */ jsxs("span", {
+					className: "kino-q-px",
+					children: [
+						"(",
+						autoHint,
+						")"
+					]
+				})]
+			})
+		}), sorted.map((q) => /* @__PURE__ */ jsx("button", {
+			role: "menuitemradio",
+			"aria-checked": active === q.id,
+			className: "kino-menu-item kino-menu-q",
+			onClick: () => actions.setQuality(q.id),
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "kino-q-label",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "kino-q-key",
+					children: heightKeyword$1(q.height)
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "kino-q-px",
+					children: [q.height, "p"]
+				})]
+			})
+		}, q.id))]
+	});
+}
+function CaptionsMenu() {
+	const actions = usePlayerActions();
+	const tracks = useMediaSelector((s) => s.textTracks);
+	const active = useMediaSelector((s) => s.activeTextTrackId);
+	if (!useMediaSelector((s) => s.capabilities.hasTextTracks) || tracks.length === 0) return null;
+	return /* @__PURE__ */ jsxs(Popover, {
+		label: "Captions",
+		shortcut: "C",
+		align: "end",
+		trigger: active ? /* @__PURE__ */ jsx(CcIcon, {}) : /* @__PURE__ */ jsx(CcOffIcon, {}),
+		children: [/* @__PURE__ */ jsx("button", {
+			role: "menuitemradio",
+			"aria-checked": active === null,
+			className: "kino-menu-item",
+			onClick: () => actions.setTextTrack(null),
+			children: "Off"
+		}), tracks.map((t) => /* @__PURE__ */ jsx("button", {
+			role: "menuitemradio",
+			"aria-checked": active === t.id,
+			className: "kino-menu-item",
+			onClick: () => actions.setTextTrack(t.id),
+			children: t.label || t.lang
+		}, t.id))]
+	});
+}
+//#endregion
+//#region src/ui/settings-sheet.tsx
+const RATES = [
+	.8,
+	1,
+	1.2,
+	1.5,
+	1.7,
+	2,
+	2.5
+];
+const QUALITY_TIERS = [
+	[2160, "4K"],
+	[1440, "2K"],
+	[1080, "FHD"],
+	[720, "HD"],
+	[480, "SD"]
+];
+const heightKeyword = (h) => {
+	for (const [min, kw] of QUALITY_TIERS) if (h >= min) return kw;
+	return `${h}p`;
+};
+function SettingsSheet({ open, onClose }) {
+	const actions = usePlayerActions();
+	const rate = useMediaSelector((s) => s.rate);
+	const canSetRate = useMediaSelector((s) => s.capabilities.canSetRate);
+	const tracks = useMediaSelector((s) => s.textTracks);
+	const activeTrack = useMediaSelector((s) => s.activeTextTrackId);
+	const hasTextTracks = useMediaSelector((s) => s.capabilities.hasTextTracks);
+	const qualities = useMediaSelector((s) => s.qualities);
+	const activeQuality = useMediaSelector((s) => s.activeQualityId);
+	const canSetQuality = useMediaSelector((s) => s.capabilities.canSetQuality);
+	const sortedQualities = [...qualities].sort((a, b) => b.height - a.height);
+	return /* @__PURE__ */ jsx("div", {
+		className: `kino-sheet-backdrop ${open ? "is-open" : ""}`,
+		onClick: onClose,
+		"aria-hidden": !open,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "kino-sheet kino-glass",
+			role: "dialog",
+			"aria-label": "Settings",
+			"aria-modal": "true",
+			onClick: (e) => e.stopPropagation(),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "kino-sheet-grip",
+					"aria-hidden": "true"
+				}),
+				canSetRate && /* @__PURE__ */ jsxs("section", {
+					className: "kino-sheet-section",
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "kino-sheet-title",
+						children: "Speed"
+					}), /* @__PURE__ */ jsx("div", {
+						className: "kino-sheet-chips",
+						children: RATES.map((r) => /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "kino-sheet-chip",
+							"data-active": r === rate,
+							"aria-pressed": r === rate,
+							onClick: () => actions.setRate(r),
+							children: r === 2.5 ? "Max" : `${r}×`
+						}, r))
+					})]
+				}),
+				hasTextTracks && tracks.length > 0 && /* @__PURE__ */ jsxs("section", {
+					className: "kino-sheet-section",
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "kino-sheet-title",
+						children: "Captions"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "kino-sheet-chips",
+						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "kino-sheet-chip",
+							"data-active": activeTrack === null,
+							"aria-pressed": activeTrack === null,
+							onClick: () => actions.setTextTrack(null),
+							children: "Off"
+						}), tracks.map((t) => /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "kino-sheet-chip",
+							"data-active": activeTrack === t.id,
+							"aria-pressed": activeTrack === t.id,
+							onClick: () => actions.setTextTrack(t.id),
+							children: t.label || t.lang
+						}, t.id))]
+					})]
+				}),
+				canSetQuality && qualities.length > 0 && /* @__PURE__ */ jsxs("section", {
+					className: "kino-sheet-section",
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "kino-sheet-title",
+						children: "Quality"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "kino-sheet-chips",
+						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "kino-sheet-chip",
+							"data-active": activeQuality === "auto",
+							"aria-pressed": activeQuality === "auto",
+							onClick: () => actions.setQuality("auto"),
+							children: "Auto"
+						}), sortedQualities.map((q) => /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "kino-sheet-chip",
+							"data-active": activeQuality === q.id,
+							"aria-pressed": activeQuality === q.id,
+							onClick: () => actions.setQuality(q.id),
+							children: heightKeyword(q.height)
+						}, q.id))]
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/ui/mobile-controls.tsx
+const SKIP_SECONDS = 5;
+function MobileControls() {
+	const visible = useControlsVisible();
+	const actions = usePlayerActions();
+	const paused = useMediaSelector((s) => s.paused);
+	const currentTime = useMediaSelector((s) => s.currentTime);
+	const duration = useMediaSelector((s) => s.duration);
+	const ended = useMediaSelector((s) => s.ended);
+	const fullscreen = useMediaSelector((s) => s.fullscreen);
+	const canFullscreen = useMediaSelector((s) => s.capabilities.canFullscreen);
+	const wrapperRef = useWrapperRef();
+	const [sheetOpen, setSheetOpen] = useState(false);
+	if (paused && currentTime === 0 && !ended) return null;
+	const back = () => actions.seek(Math.max(0, currentTime - SKIP_SECONDS));
+	const forward = () => actions.seek(duration ? Math.min(duration, currentTime + SKIP_SECONDS) : currentTime + SKIP_SECONDS);
+	const toggleFullscreen = () => {
+		if (fullscreen) actions.exitFullscreen();
+		else if (wrapperRef?.current) actions.enterFullscreen(wrapperRef.current);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: `kino-mcontrols ${visible ? "is-visible" : ""}`,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "kino-mtop",
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "kino-mbtn",
+					"aria-label": "Settings",
+					onClick: () => setSheetOpen(true),
+					children: /* @__PURE__ */ jsx(SettingsIcon, {})
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "kino-mcluster",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "kino-mtransport",
+						"aria-label": `Back ${SKIP_SECONDS} seconds`,
+						onClick: back,
+						children: /* @__PURE__ */ jsx(SkipBack5Icon, {})
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "kino-mctrl-play",
+						"aria-label": paused ? "Play" : "Pause",
+						onClick: () => paused ? actions.play() : actions.pause(),
+						children: paused ? /* @__PURE__ */ jsx(PlayIcon, {}) : /* @__PURE__ */ jsx(PauseIcon, {})
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "kino-mtransport",
+						"aria-label": `Forward ${SKIP_SECONDS} seconds`,
+						onClick: forward,
+						children: /* @__PURE__ */ jsx(SkipForward5Icon, {})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "kino-mbottom",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "kino-time kino-mtime",
+						children: formatTime(currentTime)
+					}),
+					/* @__PURE__ */ jsx(Scrubber, {}),
+					/* @__PURE__ */ jsx("span", {
+						className: "kino-time kino-mtime kino-time-dur",
+						children: formatTime(duration)
+					}),
+					canFullscreen && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "kino-mbtn",
+						"aria-label": fullscreen ? "Exit fullscreen" : "Fullscreen",
+						onClick: toggleFullscreen,
+						children: fullscreen ? /* @__PURE__ */ jsx(FullscreenExitIcon, {}) : /* @__PURE__ */ jsx(FullscreenIcon, {})
+					})
+				]
+			})
+		]
+	}), /* @__PURE__ */ jsx(SettingsSheet, {
+		open: sheetOpen,
+		onClose: () => setSheetOpen(false)
+	})] });
+}
+//#endregion
+//#region src/ui/control-bar.tsx
+function ControlBar() {
+	return useIsCompact() ? /* @__PURE__ */ jsx(MobileControls, {}) : /* @__PURE__ */ jsx(DesktopControls, {});
+}
+function DesktopControls() {
+	const visible = useControlsVisible();
+	const currentTime = useMediaSelector((s) => s.currentTime);
+	const duration = useMediaSelector((s) => s.duration);
+	const ended = useMediaSelector((s) => s.ended);
+	if (useMediaSelector((s) => s.paused) && currentTime === 0 && !ended) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `kino-controls ${visible ? "is-visible" : ""}`,
+		children: [/* @__PURE__ */ jsx(Scrubber, {}), /* @__PURE__ */ jsxs("div", {
+			className: "kino-controls-row",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "kino-controls-group",
+					children: [
+						/* @__PURE__ */ jsx(PlayPauseButton, {}),
+						/* @__PURE__ */ jsx(SkipBackButton, {}),
+						/* @__PURE__ */ jsx(SkipForwardButton, {}),
+						/* @__PURE__ */ jsx(VolumeControl, {})
+					]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "kino-time",
+					children: [formatTime(currentTime), /* @__PURE__ */ jsxs("span", {
+						className: "kino-time-dur",
+						children: [" / ", formatTime(duration)]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "kino-controls-group kino-controls-group-end",
+					children: [
+						/* @__PURE__ */ jsx(SpeedMenu, {}),
+						/* @__PURE__ */ jsx(QualityMenu, {}),
+						/* @__PURE__ */ jsx(CaptionsMenu, {}),
+						/* @__PURE__ */ jsx(PipButton, {}),
+						/* @__PURE__ */ jsx(FullscreenButton, {})
+					]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { usePlayer as _, SkipBackButton as a, Captions as c, Player as d, useControlsVisible as f, useMediaSelector as g, PlayerContext as h, PlayPauseButton as i, IdleOverlay as l, useWrapperRef as m, FullscreenButton as n, SkipForwardButton as o, useIsCompact as p, PipButton as r, VolumeControl as s, ControlBar as t, Scrubber as u, usePlayerActions as v, formatTime as y };