@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/media-player.js

@@ -0,0 +1,919 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { Captions, CaptionsOff, Maximize, Minimize, Pause, PictureInPicture2, Play, RefreshCcw, Repeat2, RotateCcw, RotateCw, Settings, TriangleAlert, Volume1, Volume2, VolumeX } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slider } from "@base-ui/react/slider";
+import { MediaActionTypes, MediaProvider, useMediaDispatch, useMediaFullscreenRef, useMediaRef, useMediaSelector, useMediaStore } from "media-chrome/react/media-store";
+import * as ReactDOM from "react-dom";
+//#region src/media-player.tsx
+const DEFAULT_PLAYBACK_RATES = [
+	.5,
+	.75,
+	1,
+	1.25,
+	1.5,
+	1.75,
+	2
+];
+const CONTROLS_HIDE_DELAY = 2500;
+const SEEK_PREVIEW_WIDTH = 160;
+const MediaPlayerContext = React.createContext({
+	onMenuOpenChange: () => {},
+	portalContainer: null,
+	rootNode: null
+});
+function setRef(ref, value) {
+	if (typeof ref === "function") {
+		ref(value);
+		return;
+	}
+	if (ref) ref.current = value;
+}
+function formatTime(value) {
+	if (!Number.isFinite(value)) return "0:00";
+	const safeValue = Math.max(0, Math.floor(value ?? 0));
+	const hours = Math.floor(safeValue / 3600);
+	const minutes = Math.floor(safeValue % 3600 / 60);
+	const seconds = safeValue % 60;
+	if (hours > 0) return `${hours}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
+	return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+function formatRate(value) {
+	if (!value || value === 1) return "1x";
+	return `${Number.parseFloat(value.toFixed(2))}x`;
+}
+function subtitleTrackId(track) {
+	return `${track.kind}:${track.language}:${track.label}`;
+}
+function subtitleTrackLabel(track) {
+	return track.label || track.language || "Captions";
+}
+function hasAudioChild(children) {
+	return React.Children.toArray(children).some((child) => {
+		if (!React.isValidElement(child)) return false;
+		if (child.type === MediaPlayerAudio) return true;
+		const props = child.props;
+		return hasAudioChild(props.children);
+	});
+}
+function getSeekBounds(seekable, duration) {
+	const min = seekable?.[0] ?? 0;
+	const fallbackMax = Number.isFinite(duration) ? duration ?? 0 : 0;
+	const max = seekable?.[1] ?? fallbackMax;
+	return {
+		min,
+		max: Number.isFinite(max) ? Math.max(min, max) : min
+	};
+}
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function getSeekValueFromPointer(event, min, max) {
+	const rect = event.currentTarget.getBoundingClientRect();
+	const percent = clamp((event.clientX - rect.left) / rect.width, 0, 1);
+	return {
+		percent: percent * 100,
+		value: min + percent * (max - min)
+	};
+}
+function MediaPlayer({ mediaStore, ...props }) {
+	const audio = props.audio ?? (hasAudioChild(props.children) ? true : void 0);
+	return /* @__PURE__ */ jsx(MediaProvider, {
+		mediaStore,
+		children: /* @__PURE__ */ jsx(MediaPlayerRoot, {
+			...props,
+			audio
+		})
+	});
+}
+function MediaPlayerRoot({ audio, children, className, onBlurCapture, onFocusCapture, onKeyDown, onPointerDown, onPointerLeave, onPointerMove, ref, ...props }) {
+	const dispatch = useMediaDispatch();
+	const store = useMediaStore();
+	const fullscreenRef = useMediaFullscreenRef();
+	const paused = useMediaSelector((state) => state.mediaPaused !== false);
+	const muted = useMediaSelector((state) => state.mediaMuted === true);
+	const isFullscreen = useMediaSelector((state) => state.mediaIsFullscreen === true);
+	const [rootNode, setRootNode] = React.useState(null);
+	const [controlsVisible, setControlsVisible] = React.useState(true);
+	const [menuOpenCount, setMenuOpenCount] = React.useState(0);
+	const [hoveringControls, setHoveringControls] = React.useState(false);
+	const [focusPinned, setFocusPinned] = React.useState(false);
+	const hideTimerRef = React.useRef(void 0);
+	const lastActivityRef = React.useRef(0);
+	const alwaysVisible = Boolean(audio) || paused || menuOpenCount > 0 || hoveringControls || focusPinned;
+	const alwaysVisibleRef = React.useRef(alwaysVisible);
+	alwaysVisibleRef.current = alwaysVisible;
+	const scheduleHide = React.useCallback(function schedule(delay = CONTROLS_HIDE_DELAY) {
+		window.clearTimeout(hideTimerRef.current);
+		hideTimerRef.current = window.setTimeout(() => {
+			if (alwaysVisibleRef.current) return;
+			const idleFor = Date.now() - lastActivityRef.current;
+			if (idleFor < CONTROLS_HIDE_DELAY) {
+				schedule(CONTROLS_HIDE_DELAY - idleFor);
+				return;
+			}
+			setControlsVisible(false);
+		}, delay);
+	}, []);
+	const wake = React.useCallback(() => {
+		lastActivityRef.current = Date.now();
+		setControlsVisible(true);
+		scheduleHide();
+	}, [scheduleHide]);
+	React.useEffect(() => {
+		if (alwaysVisible) {
+			window.clearTimeout(hideTimerRef.current);
+			setControlsVisible(true);
+			return;
+		}
+		scheduleHide();
+	}, [alwaysVisible, scheduleHide]);
+	React.useEffect(() => {
+		return () => window.clearTimeout(hideTimerRef.current);
+	}, []);
+	React.useEffect(() => {
+		if (!rootNode) return;
+		const loadChapters = () => {
+			const media = rootNode.querySelector("video, audio");
+			for (const track of media?.textTracks ?? []) if (track.kind === "chapters" && track.mode === "disabled") track.mode = "hidden";
+		};
+		loadChapters();
+		const textTracks = rootNode.querySelector("video, audio")?.textTracks;
+		textTracks?.addEventListener("addtrack", loadChapters);
+		return () => textTracks?.removeEventListener("addtrack", loadChapters);
+	}, [rootNode]);
+	const onMenuOpenChange = React.useCallback((open) => {
+		setMenuOpenCount((count) => open ? count + 1 : Math.max(0, count - 1));
+	}, []);
+	const contextValue = React.useMemo(() => ({
+		onMenuOpenChange,
+		portalContainer: isFullscreen ? rootNode : null,
+		rootNode
+	}), [
+		isFullscreen,
+		onMenuOpenChange,
+		rootNode
+	]);
+	const fullscreenRefRef = React.useRef(fullscreenRef);
+	fullscreenRefRef.current = fullscreenRef;
+	const rootRef = React.useCallback((node) => {
+		fullscreenRefRef.current(node);
+		setRootNode(node);
+		setRef(ref, node);
+	}, [ref]);
+	return /* @__PURE__ */ jsx(MediaPlayerContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: rootRef,
+			"aria-label": audio ? "Audio player" : "Video player",
+			"data-audio": audio ? "" : void 0,
+			"data-controls": controlsVisible ? "visible" : "hidden",
+			"data-fullscreen": isFullscreen ? "" : void 0,
+			"data-slot": "media-player",
+			role: "region",
+			tabIndex: 0,
+			className: cn("group/media-player relative isolate block w-full overflow-hidden rounded-2xl bg-fg-primary text-fg-on-brand shadow-2 outline-none", "data-[controls=hidden]:cursor-none", "data-[audio]:bg-[image:var(--gradient-accent-forest-to-brass)]", "data-[fullscreen]:rounded-none data-[fullscreen]:shadow-none", className),
+			...props,
+			onBlurCapture: (event) => {
+				onBlurCapture?.(event);
+				if (!event.currentTarget.contains(event.relatedTarget)) setFocusPinned(false);
+			},
+			onFocusCapture: (event) => {
+				onFocusCapture?.(event);
+				const keyboardFocus = event.target.matches?.(":focus-visible") ?? false;
+				setFocusPinned(keyboardFocus);
+				if (keyboardFocus) setControlsVisible(true);
+			},
+			onKeyDown: (event) => {
+				onKeyDown?.(event);
+				if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return;
+				const target = event.target;
+				if (target.closest("input, textarea, select, [contenteditable], [role='slider'], [role='menu'], [role='menuitem'], [role='menuitemradio']")) return;
+				const state = store.getState();
+				const currentTime = state.mediaCurrentTime ?? 0;
+				const { min, max } = getSeekBounds(state.mediaSeekable, state.mediaDuration);
+				switch (event.key) {
+					case " ":
+						if (target.closest("button")) return;
+						event.preventDefault();
+						dispatch({ type: paused ? MediaActionTypes.MEDIA_PLAY_REQUEST : MediaActionTypes.MEDIA_PAUSE_REQUEST });
+						break;
+					case "k":
+					case "K":
+						dispatch({ type: paused ? MediaActionTypes.MEDIA_PLAY_REQUEST : MediaActionTypes.MEDIA_PAUSE_REQUEST });
+						break;
+					case "m":
+					case "M":
+						dispatch({ type: muted ? MediaActionTypes.MEDIA_UNMUTE_REQUEST : MediaActionTypes.MEDIA_MUTE_REQUEST });
+						break;
+					case "f":
+					case "F":
+						if (audio) return;
+						dispatch({ type: isFullscreen ? MediaActionTypes.MEDIA_EXIT_FULLSCREEN_REQUEST : MediaActionTypes.MEDIA_ENTER_FULLSCREEN_REQUEST });
+						break;
+					case "c":
+					case "C":
+						dispatch({ type: MediaActionTypes.MEDIA_TOGGLE_SUBTITLES_REQUEST });
+						break;
+					case "ArrowLeft":
+						event.preventDefault();
+						dispatch({
+							type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+							detail: clamp(currentTime - 5, min, max)
+						});
+						break;
+					case "ArrowRight":
+						event.preventDefault();
+						dispatch({
+							type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+							detail: clamp(currentTime + 5, min, max)
+						});
+						break;
+					default: return;
+				}
+				wake();
+			},
+			onPointerDown: (event) => {
+				onPointerDown?.(event);
+				wake();
+			},
+			onPointerLeave: (event) => {
+				onPointerLeave?.(event);
+				setHoveringControls(false);
+				if (!alwaysVisibleRef.current) {
+					window.clearTimeout(hideTimerRef.current);
+					setControlsVisible(false);
+				}
+			},
+			onPointerMove: (event) => {
+				onPointerMove?.(event);
+				wake();
+				const rect = event.currentTarget.querySelector("[data-slot='media-player-controls']")?.getBoundingClientRect();
+				setHoveringControls(!!rect && event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom);
+			},
+			children
+		})
+	});
+}
+function MediaPlayerVideo({ className, ref, ...props }) {
+	const mediaRef = useMediaRef();
+	const mediaRefRef = React.useRef(mediaRef);
+	mediaRefRef.current = mediaRef;
+	return /* @__PURE__ */ jsx("video", {
+		ref: React.useCallback((node) => {
+			mediaRefRef.current(node);
+			setRef(ref, node);
+		}, [ref]),
+		"data-slot": "media-player-video",
+		className: cn("block aspect-video size-full object-cover", "group-data-[fullscreen]/media-player:aspect-auto group-data-[fullscreen]/media-player:object-contain", className),
+		playsInline: true,
+		...props
+	});
+}
+function MediaPlayerAudio({ className, ref, ...props }) {
+	const mediaRef = useMediaRef();
+	const mediaRefRef = React.useRef(mediaRef);
+	mediaRefRef.current = mediaRef;
+	return /* @__PURE__ */ jsx("audio", {
+		ref: React.useCallback((node) => {
+			mediaRefRef.current(node);
+			setRef(ref, node);
+		}, [ref]),
+		"data-slot": "media-player-audio",
+		className: cn("sr-only", className),
+		...props
+	});
+}
+function MediaPlayerControls({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "media-player-controls",
+		className: cn("absolute inset-x-0 bottom-0 z-10 flex w-full items-center gap-2 p-3 text-fg-on-brand md:p-4", "transition-opacity duration-300 ease-out group-data-[controls=hidden]/media-player:pointer-events-none group-data-[controls=hidden]/media-player:opacity-0", className),
+		...props
+	});
+}
+function MediaPlayerControlsOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		"data-slot": "media-player-controls-overlay",
+		className: cn("pointer-events-none absolute inset-x-0 bottom-0 -z-10 h-36 bg-[image:var(--gradient-overlay-photo-bottom)]", className),
+		...props
+	});
+}
+function MediaControlButton({ className, shortcut, tooltip, ...props }) {
+	const { portalContainer } = React.useContext(MediaPlayerContext);
+	const button = /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cn("inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-surface-glass-overlay-button text-fg-on-brand shadow-1 backdrop-blur-sm transition-[background-color,color,box-shadow,transform] outline-none select-none hover:bg-surface-brand hover:text-fg-on-brand focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:scale-95 aria-pressed:bg-surface-brand disabled:pointer-events-none disabled:opacity-45 [&_svg]:size-4.5", className),
+		...props
+	});
+	if (!tooltip) return button;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		delay: 300,
+		render: button
+	}), /* @__PURE__ */ jsxs(TooltipContent, {
+		className: "border-line-subtle px-2.5 py-1.5 text-gdt-xs font-bold",
+		container: portalContainer ?? void 0,
+		side: "top",
+		sideOffset: 8,
+		children: [tooltip, shortcut ? /* @__PURE__ */ jsx("kbd", {
+			"data-slot": "kbd",
+			className: "rounded-sm border border-line bg-surface px-1.5 py-0.5 font-sans text-gdt-xs font-bold text-fg-primary",
+			children: shortcut
+		}) : null]
+	})] });
+}
+function MediaPlayerPlay({ className, onClick, ...props }) {
+	const dispatch = useMediaDispatch();
+	const paused = useMediaSelector((state) => state.mediaPaused !== false);
+	return /* @__PURE__ */ jsx(MediaControlButton, {
+		"aria-label": paused ? "Play media" : "Pause media",
+		"aria-pressed": !paused,
+		"data-slot": "media-player-play",
+		className,
+		shortcut: "Space",
+		tooltip: paused ? "Play" : "Pause",
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			dispatch({ type: paused ? MediaActionTypes.MEDIA_PLAY_REQUEST : MediaActionTypes.MEDIA_PAUSE_REQUEST });
+		},
+		...props,
+		children: paused ? /* @__PURE__ */ jsx(Play, { fill: "currentColor" }) : /* @__PURE__ */ jsx(Pause, { fill: "currentColor" })
+	});
+}
+function MediaPlayerSeekBackward({ className, onClick, seekOffset = 10, ...props }) {
+	const dispatch = useMediaDispatch();
+	const currentTime = useMediaSelector((state) => state.mediaCurrentTime ?? 0);
+	return /* @__PURE__ */ jsx(MediaControlButton, {
+		"aria-label": `Seek back ${seekOffset} seconds`,
+		"data-slot": "media-player-seek-backward",
+		className,
+		tooltip: `Back ${seekOffset}s`,
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			dispatch({
+				type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+				detail: Math.max(0, currentTime - seekOffset)
+			});
+		},
+		...props,
+		children: /* @__PURE__ */ jsx(RotateCcw, {})
+	});
+}
+function MediaPlayerSeekForward({ className, onClick, seekOffset = 10, ...props }) {
+	const dispatch = useMediaDispatch();
+	const currentTime = useMediaSelector((state) => state.mediaCurrentTime ?? 0);
+	const duration = useMediaSelector((state) => state.mediaDuration);
+	const { max } = getSeekBounds(useMediaSelector((state) => state.mediaSeekable), duration);
+	return /* @__PURE__ */ jsx(MediaControlButton, {
+		"aria-label": `Seek forward ${seekOffset} seconds`,
+		"data-slot": "media-player-seek-forward",
+		className,
+		tooltip: `Forward ${seekOffset}s`,
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			dispatch({
+				type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+				detail: max > 0 ? Math.min(max, currentTime + seekOffset) : currentTime + seekOffset
+			});
+		},
+		...props,
+		children: /* @__PURE__ */ jsx(RotateCw, {})
+	});
+}
+function MediaPlayerVolume({ className, disabled, expandable = false, onClick, rangeClassName, ...props }) {
+	const dispatch = useMediaDispatch();
+	const muted = useMediaSelector((state) => state.mediaMuted === true);
+	const volume = useMediaSelector((state) => state.mediaVolume ?? 1);
+	const unavailable = useMediaSelector((state) => !!state.mediaVolumeUnavailable);
+	const resolvedDisabled = disabled || unavailable;
+	const Icon = muted || volume === 0 ? VolumeX : volume < .5 ? Volume1 : Volume2;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "media-player-volume",
+		className: cn("group/volume flex items-center gap-2 rounded-full", expandable && "w-9 overflow-visible transition-[width] hover:w-32 focus-within:w-32"),
+		children: [/* @__PURE__ */ jsx(MediaControlButton, {
+			"aria-label": muted ? "Unmute media" : "Mute media",
+			"aria-pressed": muted,
+			className,
+			disabled: resolvedDisabled,
+			shortcut: "M",
+			tooltip: "Volume",
+			onClick: (event) => {
+				onClick?.(event);
+				if (event.defaultPrevented) return;
+				dispatch({ type: muted ? MediaActionTypes.MEDIA_UNMUTE_REQUEST : MediaActionTypes.MEDIA_MUTE_REQUEST });
+			},
+			...props,
+			children: /* @__PURE__ */ jsx(Icon, {})
+		}), /* @__PURE__ */ jsx(Slider.Root, {
+			"data-slot": "media-player-volume-slider",
+			className: cn("flex h-8 w-20 min-w-20 touch-none items-center", resolvedDisabled && "pointer-events-none opacity-45", expandable && "pointer-events-none opacity-0 transition-opacity group-hover/volume:pointer-events-auto group-hover/volume:opacity-100 group-focus-within/volume:pointer-events-auto group-focus-within/volume:opacity-100", rangeClassName),
+			disabled: resolvedDisabled,
+			max: 1,
+			min: 0,
+			onValueChange: (value) => {
+				const nextValue = Array.isArray(value) ? value[0] ?? 0 : value;
+				dispatch({
+					type: MediaActionTypes.MEDIA_VOLUME_REQUEST,
+					detail: nextValue
+				});
+				if (muted && nextValue > 0) dispatch({ type: MediaActionTypes.MEDIA_UNMUTE_REQUEST });
+			},
+			step: .02,
+			value: muted ? 0 : volume,
+			children: /* @__PURE__ */ jsx(Slider.Control, {
+				className: "flex h-8 w-full items-center",
+				children: /* @__PURE__ */ jsxs(Slider.Track, {
+					className: "h-1.5 w-full rounded-full bg-fg-on-brand/30",
+					children: [/* @__PURE__ */ jsx(Slider.Indicator, { className: "rounded-full bg-fg-on-brand" }), /* @__PURE__ */ jsx(Slider.Thumb, {
+						getAriaLabel: () => "Media volume",
+						className: "size-3 rounded-full bg-fg-on-brand shadow-1 outline-none focus-visible:[filter:drop-shadow(0_0_0.25rem_var(--color-line-focus))]"
+					})]
+				})
+			})
+		})]
+	});
+}
+function MediaPlayerPlaybackSpeed({ className, rates = DEFAULT_PLAYBACK_RATES, ...props }) {
+	const dispatch = useMediaDispatch();
+	const { onMenuOpenChange, portalContainer } = React.useContext(MediaPlayerContext);
+	const playbackRate = useMediaSelector((state) => state.mediaPlaybackRate ?? 1);
+	const rateLabel = formatRate(playbackRate);
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		size: "sm",
+		onOpenChange: onMenuOpenChange,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(MediaControlButton, {
+			"aria-label": `Playback speed ${rateLabel}`,
+			"data-slot": "media-player-playback-speed",
+			className: cn("w-auto px-3 text-gdt-xs font-bold tabular-nums", className),
+			tooltip: "Playback speed",
+			...props,
+			children: rateLabel
+		}) }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align: "end",
+			className: "min-w-24",
+			container: portalContainer ?? void 0,
+			side: "top",
+			sideOffset: 8,
+			children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+				value: String(playbackRate),
+				onValueChange: (value) => {
+					dispatch({
+						type: MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST,
+						detail: Number(value)
+					});
+				},
+				children: rates.map((rate) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+					closeOnClick: true,
+					value: String(rate),
+					children: formatRate(rate)
+				}, rate))
+			})
+		})]
+	});
+}
+function MediaPlayerCaptions({ className, disabled, onClick, ...props }) {
+	const dispatch = useMediaDispatch();
+	const subtitlesList = useMediaSelector((state) => state.mediaSubtitlesList);
+	const subtitlesShowing = useMediaSelector((state) => state.mediaSubtitlesShowing);
+	const hasSubtitles = (subtitlesList?.length ?? 0) > 0;
+	const showing = (subtitlesShowing?.length ?? 0) > 0;
+	const Icon = showing ? Captions : CaptionsOff;
+	return /* @__PURE__ */ jsx(MediaControlButton, {
+		"aria-label": showing ? "Disable captions" : "Enable captions",
+		"aria-pressed": showing,
+		"data-slot": "media-player-captions",
+		className,
+		disabled: disabled || !hasSubtitles,
+		shortcut: "C",
+		tooltip: "Captions",
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			dispatch({ type: MediaActionTypes.MEDIA_TOGGLE_SUBTITLES_REQUEST });
+		},
+		...props,
+		children: /* @__PURE__ */ jsx(Icon, {})
+	});
+}
+function MediaPlayerSettings({ className, rates = DEFAULT_PLAYBACK_RATES, ...props }) {
+	const dispatch = useMediaDispatch();
+	const { onMenuOpenChange, portalContainer } = React.useContext(MediaPlayerContext);
+	const playbackRate = useMediaSelector((state) => state.mediaPlaybackRate ?? 1);
+	const subtitlesList = useMediaSelector((state) => state.mediaSubtitlesList);
+	const subtitlesShowing = useMediaSelector((state) => state.mediaSubtitlesShowing);
+	const subtitles = subtitlesList ?? [];
+	const showingTrack = subtitlesShowing?.[0];
+	const captionsValue = showingTrack ? subtitleTrackId(showingTrack) : "off";
+	const captionsLabel = showingTrack ? subtitleTrackLabel(showingTrack) : "Off";
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		size: "sm",
+		onOpenChange: onMenuOpenChange,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(MediaControlButton, {
+			"aria-label": "Player settings",
+			"data-slot": "media-player-settings",
+			className,
+			tooltip: "Settings",
+			...props,
+			children: /* @__PURE__ */ jsx(Settings, {})
+		}) }), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			align: "end",
+			className: "min-w-48",
+			container: portalContainer ?? void 0,
+			side: "top",
+			sideOffset: 8,
+			children: [/* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: ["Speed", /* @__PURE__ */ jsx("span", {
+				className: "ml-auto rounded-md bg-surface px-1.5 py-0.5 text-gdt-xs font-bold tabular-nums",
+				children: formatRate(playbackRate)
+			})] }), /* @__PURE__ */ jsx(DropdownMenuSubContent, {
+				container: portalContainer ?? void 0,
+				children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+					value: String(playbackRate),
+					onValueChange: (value) => {
+						dispatch({
+							type: MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST,
+							detail: Number(value)
+						});
+					},
+					children: rates.map((rate) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+						closeOnClick: true,
+						value: String(rate),
+						children: formatRate(rate)
+					}, rate))
+				})
+			})] }), subtitles.length > 0 ? /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: ["Captions", /* @__PURE__ */ jsx("span", {
+				className: "ml-auto rounded-md bg-surface px-1.5 py-0.5 text-gdt-xs font-bold",
+				children: captionsLabel
+			})] }), /* @__PURE__ */ jsx(DropdownMenuSubContent, {
+				container: portalContainer ?? void 0,
+				children: /* @__PURE__ */ jsxs(DropdownMenuRadioGroup, {
+					value: captionsValue,
+					onValueChange: (value) => {
+						if (subtitlesShowing?.length) dispatch({
+							type: MediaActionTypes.MEDIA_DISABLE_SUBTITLES_REQUEST,
+							detail: subtitlesShowing
+						});
+						const track = subtitles.find((candidate) => subtitleTrackId(candidate) === value);
+						if (track) dispatch({
+							type: MediaActionTypes.MEDIA_SHOW_SUBTITLES_REQUEST,
+							detail: [track]
+						});
+					},
+					children: [/* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+						closeOnClick: true,
+						value: "off",
+						children: "Off"
+					}), subtitles.map((track) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+						closeOnClick: true,
+						value: subtitleTrackId(track),
+						children: subtitleTrackLabel(track)
+					}, subtitleTrackId(track)))]
+				})
+			})] }) : null]
+		})]
+	});
+}
+function MediaPlayerTime({ className, showDuration = true, ...props }) {
+	const currentTime = useMediaSelector((state) => state.mediaCurrentTime ?? 0);
+	const duration = useMediaSelector((state) => state.mediaDuration);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "media-player-time",
+		className: cn("inline-flex shrink-0 items-center px-1 text-gdt-sm font-medium tabular-nums text-fg-on-brand/80", className),
+		...props,
+		children: showDuration ? `${formatTime(currentTime)} / ${formatTime(duration)}` : formatTime(currentTime)
+	});
+}
+function MediaPlayerSeek({ className, disabled, onValueChange, "aria-label": ariaLabel, step = 5, withTime = true, ...props }) {
+	const dispatch = useMediaDispatch();
+	const { portalContainer } = React.useContext(MediaPlayerContext);
+	const controlRef = React.useRef(null);
+	const [dragValue, setDragValue] = React.useState(null);
+	const [hoverValue, setHoverValue] = React.useState(null);
+	const [pendingSeek, setPendingSeek] = React.useState(null);
+	const currentTime = useMediaSelector((state) => state.mediaCurrentTime ?? 0);
+	const duration = useMediaSelector((state) => state.mediaDuration);
+	const seekable = useMediaSelector((state) => state.mediaSeekable);
+	const buffered = useMediaSelector((state) => state.mediaBuffered);
+	const previewImage = useMediaSelector((state) => state.mediaPreviewImage);
+	const previewCoords = useMediaSelector((state) => state.mediaPreviewCoords);
+	const chapterCues = useMediaSelector((state) => state.mediaChaptersCues);
+	const { min, max } = getSeekBounds(seekable, duration);
+	const canSeek = max > min;
+	const resolvedDisabled = disabled || !canSeek;
+	const seekRafRef = React.useRef(null);
+	const latestSeekValueRef = React.useRef(0);
+	const displayTime = clamp(dragValue ?? pendingSeek ?? currentTime, min, max);
+	const sliderStep = canSeek ? clamp((max - min) / 500, .05, 1) : 1;
+	React.useEffect(() => {
+		if (pendingSeek !== null && Math.abs(currentTime - pendingSeek) < .5) setPendingSeek(null);
+	}, [currentTime, pendingSeek]);
+	React.useEffect(() => {
+		return () => {
+			if (seekRafRef.current !== null) cancelAnimationFrame(seekRafRef.current);
+		};
+	}, []);
+	const queueSeek = (value) => {
+		latestSeekValueRef.current = value;
+		if (seekRafRef.current !== null) return;
+		seekRafRef.current = requestAnimationFrame(() => {
+			seekRafRef.current = null;
+			dispatch({
+				type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+				detail: latestSeekValueRef.current
+			});
+		});
+	};
+	const previewAt = (value) => {
+		dispatch({
+			type: MediaActionTypes.MEDIA_PREVIEW_REQUEST,
+			detail: clamp(value, min, max)
+		});
+	};
+	const clearPreview = () => {
+		setHoverValue(null);
+		dispatch({
+			type: MediaActionTypes.MEDIA_PREVIEW_REQUEST,
+			detail: void 0
+		});
+	};
+	const previewValue = dragValue ?? hoverValue;
+	const previewPercent = previewValue !== null && canSeek ? (clamp(previewValue, min, max) - min) / (max - min) * 100 : 0;
+	const previewChapter = previewValue !== null ? chapterCues?.find((cue) => previewValue >= cue.startTime && previewValue < cue.endTime) : void 0;
+	const previewCoordValues = previewCoords?.map(Number);
+	const hasSpriteCoords = previewCoordValues?.length === 4 && (previewCoordValues[2] ?? 0) > 0;
+	const previewScale = hasSpriteCoords ? SEEK_PREVIEW_WIDTH / (previewCoordValues?.[2] ?? 1) : 1;
+	const previewClampPx = previewImage ? 84 : 32;
+	const controlRect = withTime && previewValue !== null ? controlRef.current?.getBoundingClientRect() : void 0;
+	const previewLeft = controlRect ? clamp(controlRect.left + previewPercent / 100 * controlRect.width, controlRect.left + previewClampPx, controlRect.right - previewClampPx) : 0;
+	const segmentBounds = canSeek ? [
+		min,
+		...(chapterCues ?? []).map((cue) => cue.startTime).filter((time) => time > min && time < max).sort((a, b) => a - b),
+		max
+	] : [0, 1];
+	const segments = segmentBounds.slice(0, -1).map((start, index) => ({
+		start,
+		end: segmentBounds[index + 1] ?? start
+	}));
+	return /* @__PURE__ */ jsxs(Slider.Root, {
+		"data-slot": "media-player-seek",
+		className: cn("relative flex h-8 w-full min-w-0 touch-none items-center", resolvedDisabled && "pointer-events-none opacity-45", className),
+		disabled: resolvedDisabled,
+		largeStep: step,
+		max: canSeek ? max : 100,
+		min,
+		onValueChange: (value) => {
+			const nextValue = Array.isArray(value) ? value[0] ?? 0 : value;
+			setDragValue(nextValue);
+			previewAt(nextValue);
+			queueSeek(nextValue);
+			onValueChange?.(nextValue);
+		},
+		onValueCommitted: (value) => {
+			const nextValue = clamp(Array.isArray(value) ? value[0] ?? 0 : value, min, max);
+			if (seekRafRef.current !== null) {
+				cancelAnimationFrame(seekRafRef.current);
+				seekRafRef.current = null;
+			}
+			dispatch({
+				type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+				detail: nextValue
+			});
+			setPendingSeek(nextValue);
+			setDragValue(null);
+			clearPreview();
+		},
+		step: sliderStep,
+		value: displayTime,
+		...props,
+		children: [withTime && previewValue !== null && controlRect && ReactDOM.createPortal(/* @__PURE__ */ jsxs("div", {
+			className: "pointer-events-none fixed z-50 flex -translate-x-1/2 -translate-y-full flex-col items-center overflow-hidden rounded-lg bg-surface-overlay text-fg-primary shadow-2",
+			"data-slot": "media-player-seek-preview",
+			style: {
+				left: previewLeft,
+				top: controlRect.top - 6
+			},
+			children: [
+				previewImage ? hasSpriteCoords ? /* @__PURE__ */ jsx("span", {
+					className: "relative block overflow-hidden bg-line-subtle/50",
+					style: {
+						width: SEEK_PREVIEW_WIDTH,
+						height: (previewCoordValues?.[3] ?? 0) * previewScale
+					},
+					children: /* @__PURE__ */ jsx("img", {
+						src: previewImage,
+						alt: "",
+						draggable: false,
+						className: "absolute top-0 left-0 max-w-none origin-top-left",
+						style: { transform: `scale(${previewScale}) translate(${-(previewCoordValues?.[0] ?? 0)}px, ${-(previewCoordValues?.[1] ?? 0)}px)` }
+					})
+				}) : /* @__PURE__ */ jsx("img", {
+					src: previewImage,
+					alt: "",
+					draggable: false,
+					className: "block aspect-video bg-line-subtle/50 object-cover",
+					style: { width: SEEK_PREVIEW_WIDTH }
+				}) : null,
+				previewChapter?.text ? /* @__PURE__ */ jsx("span", {
+					className: "max-w-40 truncate px-2.5 pt-1 text-gdt-xs font-bold",
+					children: previewChapter.text
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: cn("px-2.5 py-1 text-gdt-xs font-bold tabular-nums", (previewImage || previewChapter?.text) && "pt-0.5 pb-1.5"),
+					children: formatTime(previewValue)
+				})
+			]
+		}), portalContainer ?? document.body), /* @__PURE__ */ jsxs(Slider.Control, {
+			ref: controlRef,
+			className: "flex h-8 w-full items-center",
+			onPointerLeave: () => {
+				if (dragValue === null) clearPreview();
+			},
+			onPointerMove: (event) => {
+				if (resolvedDisabled || dragValue !== null) return;
+				const next = getSeekValueFromPointer(event, min, max);
+				setHoverValue(next.value);
+				previewAt(next.value);
+			},
+			children: [/* @__PURE__ */ jsx(Slider.Track, {
+				className: "relative flex h-2 w-full items-center gap-[3px]",
+				children: segments.map(({ start, end }) => {
+					const span = end - start || 1;
+					const fraction = (value) => clamp((clamp(value, start, end) - start) / span, 0, 1);
+					const playedWidth = fraction(displayTime) * 100;
+					return /* @__PURE__ */ jsxs("span", {
+						"data-slot": "media-player-seek-segment",
+						className: "relative h-full overflow-hidden rounded-full bg-line-subtle/65",
+						style: { width: `${span / (max - min || 1) * 100}%` },
+						children: [canSeek && buffered?.map(([bufferStart, bufferEnd]) => bufferEnd > start && bufferStart < end ? /* @__PURE__ */ jsx("span", {
+							"data-slot": "media-player-seek-buffered",
+							className: "absolute inset-y-0 bg-fg-on-brand/25",
+							style: {
+								left: `${fraction(bufferStart) * 100}%`,
+								width: `${(fraction(bufferEnd) - fraction(bufferStart)) * 100}%`
+							}
+						}, `${bufferStart}-${bufferEnd}`) : null), /* @__PURE__ */ jsx("span", {
+							"data-slot": "media-player-seek-progress",
+							className: cn("absolute inset-y-0 left-0 bg-surface-brand", dragValue === null && "transition-[width] duration-200 ease-linear"),
+							style: { width: `${playedWidth}%` }
+						})]
+					}, start);
+				})
+			}), /* @__PURE__ */ jsx(Slider.Thumb, {
+				getAriaLabel: () => ariaLabel ?? "Media timeline",
+				getAriaValueText: (_formatted, value) => `${formatTime(value)} of ${formatTime(max)}`,
+				className: cn("size-3.5 -translate-x-1/2 rounded-full bg-surface-overlay shadow-2 ring-2 ring-surface-brand outline-none", "transition-[inset-inline-start,transform] duration-200 ease-linear data-[dragging]:scale-125 data-[dragging]:transition-transform", "focus-visible:[filter:drop-shadow(0_0_0.25rem_var(--color-line-focus))]")
+			})]
+		})]
+	});
+}
+function MediaPlayerLoop({ className, onClick, ...props }) {
+	const dispatch = useMediaDispatch();
+	const loop = useMediaSelector((state) => state.mediaLoop === true);
+	return /* @__PURE__ */ jsx(MediaControlButton, {
+		"aria-label": loop ? "Disable loop" : "Enable loop",
+		"aria-pressed": loop,
+		"data-slot": "media-player-loop",
+		className,
+		tooltip: loop ? "Disable loop" : "Enable loop",
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			dispatch({
+				type: MediaActionTypes.MEDIA_LOOP_REQUEST,
+				detail: !loop
+			});
+		},
+		...props,
+		children: /* @__PURE__ */ jsx(Repeat2, {})
+	});
+}
+function MediaPlayerPiP({ className, disabled, onClick, ...props }) {
+	const dispatch = useMediaDispatch();
+	const isPip = useMediaSelector((state) => state.mediaIsPip === true);
+	const unavailable = useMediaSelector((state) => !!state.mediaPipUnavailable);
+	return /* @__PURE__ */ jsx(MediaControlButton, {
+		"aria-label": isPip ? "Exit picture in picture" : "Enter picture in picture",
+		"aria-pressed": isPip,
+		"data-slot": "media-player-pip",
+		className,
+		disabled: disabled || unavailable,
+		tooltip: isPip ? "Exit picture in picture" : "Picture in picture",
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			dispatch({ type: isPip ? MediaActionTypes.MEDIA_EXIT_PIP_REQUEST : MediaActionTypes.MEDIA_ENTER_PIP_REQUEST });
+		},
+		...props,
+		children: /* @__PURE__ */ jsx(PictureInPicture2, {})
+	});
+}
+function MediaPlayerFullscreen({ className, disabled, onClick, ...props }) {
+	const dispatch = useMediaDispatch();
+	const isFullscreen = useMediaSelector((state) => state.mediaIsFullscreen === true);
+	const unavailable = useMediaSelector((state) => !!state.mediaFullscreenUnavailable);
+	const Icon = isFullscreen ? Minimize : Maximize;
+	return /* @__PURE__ */ jsx(MediaControlButton, {
+		"aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+		"aria-pressed": isFullscreen,
+		"data-slot": "media-player-fullscreen",
+		className,
+		disabled: disabled || unavailable,
+		shortcut: "F",
+		tooltip: isFullscreen ? "Exit fullscreen" : "Fullscreen",
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			dispatch({ type: isFullscreen ? MediaActionTypes.MEDIA_EXIT_FULLSCREEN_REQUEST : MediaActionTypes.MEDIA_ENTER_FULLSCREEN_REQUEST });
+		},
+		...props,
+		children: /* @__PURE__ */ jsx(Icon, {})
+	});
+}
+const MEDIA_ERROR_CONTENT = {
+	1: {
+		title: "Playback interrupted",
+		description: "Loading the media was interrupted."
+	},
+	2: {
+		title: "Connection error",
+		description: "A network error kept the media from loading."
+	},
+	3: {
+		title: "Playback error",
+		description: "The media could not be decoded."
+	},
+	4: {
+		title: "Unsupported format",
+		description: "The media format is not supported."
+	}
+};
+function MediaPlayerError({ children, className, ...props }) {
+	const { rootNode } = React.useContext(MediaPlayerContext);
+	const mediaError = useMediaSelector((state) => state.mediaError);
+	const [sourceFailed, setSourceFailed] = React.useState(false);
+	React.useEffect(() => {
+		if (!rootNode) return;
+		const update = () => {
+			const media = rootNode.querySelector("video, audio");
+			setSourceFailed(!!media && media.networkState === HTMLMediaElement.NETWORK_NO_SOURCE && media.readyState === HTMLMediaElement.HAVE_NOTHING);
+		};
+		update();
+		rootNode.addEventListener("error", update, true);
+		rootNode.addEventListener("loadstart", update, true);
+		rootNode.addEventListener("loadedmetadata", update, true);
+		return () => {
+			rootNode.removeEventListener("error", update, true);
+			rootNode.removeEventListener("loadstart", update, true);
+			rootNode.removeEventListener("loadedmetadata", update, true);
+		};
+	}, [rootNode]);
+	const error = mediaError ?? (sourceFailed ? { code: 4 } : null);
+	if (!error) return null;
+	const content = MEDIA_ERROR_CONTENT[error.code ?? 0] ?? {
+		title: "Something went wrong",
+		description: "The media could not be played."
+	};
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "media-player-error",
+		role: "alert",
+		className: cn("absolute inset-0 z-20 flex flex-col items-center justify-center gap-1 bg-canvas/85 px-6 text-center text-fg-primary backdrop-blur-sm rounded-2xl", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(TriangleAlert, {
+				"aria-hidden": "true",
+				className: "mb-2 size-9 text-fg-danger"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-gdt-lg font-bold",
+				children: content.title
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-gdt-sm text-fg-secondary",
+				children: content.description
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-4 flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs(MediaControlButton, {
+					className: "w-auto gap-1.5 px-4 text-gdt-xs font-bold [&_svg]:size-3.5",
+					onClick: () => {
+						rootNode?.querySelector("video, audio")?.load();
+					},
+					children: [/* @__PURE__ */ jsx(RefreshCcw, {}), "Try again"]
+				}), /* @__PURE__ */ jsxs(MediaControlButton, {
+					className: "w-auto gap-1.5 px-4 text-gdt-xs font-bold [&_svg]:size-3.5",
+					onClick: () => {
+						window.location.reload();
+					},
+					children: [/* @__PURE__ */ jsx(RotateCcw, {}), "Reload page"]
+				})]
+			})
+		] })
+	});
+}
+//#endregion
+export { MediaPlayer, MediaPlayerAudio, MediaPlayerCaptions, MediaPlayerControls, MediaPlayerControlsOverlay, MediaPlayerError, MediaPlayerFullscreen, MediaPlayerLoop, MediaPlayerPiP, MediaPlayerPlay, MediaPlayerPlaybackSpeed, MediaPlayerSeek, MediaPlayerSeekBackward, MediaPlayerSeekForward, MediaPlayerSettings, MediaPlayerTime, MediaPlayerVideo, MediaPlayerVolume };