@giddaa-housing/ui 1.0.0 → 1.2.0

package/dist/media-player.js

@@ -1,1394 +1,919 @@
 "use client";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger
-} from "./chunk-KDPYSOYZ.js";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger
-} from "./chunk-3T65TLJX.js";
-import "./chunk-HL3ZSYES.js";
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/media-player.tsx
-import { Slider as SliderPrimitive } from "@base-ui/react/slider";
-import {
-  Captions,
-  CaptionsOff,
-  Maximize,
-  Minimize,
-  Pause,
-  PictureInPicture2,
-  Play,
-  RefreshCcw,
-  Repeat2,
-  RotateCcw,
-  RotateCw,
-  Settings,
-  TriangleAlert,
-  Volume1,
-  Volume2,
-  VolumeX
-} from "lucide-react";
-import {
-  MediaActionTypes,
-  MediaProvider,
-  useMediaDispatch,
-  useMediaFullscreenRef,
-  useMediaRef,
-  useMediaSelector,
-  useMediaStore
-} from "media-chrome/react/media-store";
+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";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var DEFAULT_PLAYBACK_RATES = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
-var CONTROLS_HIDE_DELAY = 2500;
-var SEEK_PREVIEW_WIDTH = 160;
-var MediaPlayerContext = React.createContext({
-  onMenuOpenChange: () => {
-  },
-  portalContainer: null,
-  rootNode: null
+//#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;
-  }
+	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")}`;
+	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`;
+	if (!value || value === 1) return "1x";
+	return `${Number.parseFloat(value.toFixed(2))}x`;
 }
 function subtitleTrackId(track) {
-  return `${track.kind}:${track.language}:${track.label}`;
+	return `${track.kind}:${track.language}:${track.label}`;
 }
 function subtitleTrackLabel(track) {
-  return track.label || track.language || "Captions";
+	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);
-  });
+	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
-  };
+	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);
+	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)
-  };
+	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 }) });
+	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 controls = event.currentTarget.querySelector(
-          "[data-slot='media-player-controls']"
-        );
-        const rect = controls?.getBoundingClientRect();
-        setHoveringControls(
-          !!rect && event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom
-        );
-      },
-      children
-    }
-  ) });
+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;
-  const videoRef = React.useCallback(
-    (node) => {
-      mediaRefRef.current(node);
-      setRef(ref, node);
-    },
-    [ref]
-  );
-  return /* @__PURE__ */ jsx(
-    "video",
-    {
-      ref: videoRef,
-      "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
-    }
-  );
+	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;
-  const audioRef = React.useCallback(
-    (node) => {
-      mediaRefRef.current(node);
-      setRef(ref, node);
-    },
-    [ref]
-  );
-  return /* @__PURE__ */ jsx(
-    "audio",
-    {
-      ref: audioRef,
-      "data-slot": "media-player-audio",
-      className: cn("sr-only", className),
-      ...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 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 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 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 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 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 seekable = useMediaSelector((state) => state.mediaSeekable);
-  const { max } = getSeekBounds(seekable, 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 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 < 0.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(
-          SliderPrimitive.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: 0.02,
-            value: muted ? 0 : volume,
-            children: /* @__PURE__ */ jsx(SliderPrimitive.Control, { className: "flex h-8 w-full items-center", children: /* @__PURE__ */ jsxs(SliderPrimitive.Track, { className: "h-1.5 w-full rounded-full bg-fg-on-brand/30", children: [
-              /* @__PURE__ */ jsx(SliderPrimitive.Indicator, { className: "rounded-full bg-fg-on-brand" }),
-              /* @__PURE__ */ jsx(
-                SliderPrimitive.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 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 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 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 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 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, 0.05, 1) : 1;
-  React.useEffect(() => {
-    if (pendingSeek !== null && Math.abs(currentTime - pendingSeek) < 0.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 ? SEEK_PREVIEW_WIDTH / 2 + 4 : 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(
-    SliderPrimitive.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(
-          SliderPrimitive.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(SliderPrimitive.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(
-                SliderPrimitive.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 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 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 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, {})
-    }
-  );
+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, {})
+	});
 }
-var 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."
-  }
+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"
-              ]
-            }
-          )
-        ] })
-      ] })
-    }
-  );
+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"]
+				})]
+			})
+		] })
+	});
 }
-export {
-  MediaPlayer,
-  MediaPlayerAudio,
-  MediaPlayerCaptions,
-  MediaPlayerControls,
-  MediaPlayerControlsOverlay,
-  MediaPlayerError,
-  MediaPlayerFullscreen,
-  MediaPlayerLoop,
-  MediaPlayerPiP,
-  MediaPlayerPlay,
-  MediaPlayerPlaybackSpeed,
-  MediaPlayerSeek,
-  MediaPlayerSeekBackward,
-  MediaPlayerSeekForward,
-  MediaPlayerSettings,
-  MediaPlayerTime,
-  MediaPlayerVideo,
-  MediaPlayerVolume
-};
-//# sourceMappingURL=media-player.js.map
+//#endregion
+export { MediaPlayer, MediaPlayerAudio, MediaPlayerCaptions, MediaPlayerControls, MediaPlayerControlsOverlay, MediaPlayerError, MediaPlayerFullscreen, MediaPlayerLoop, MediaPlayerPiP, MediaPlayerPlay, MediaPlayerPlaybackSpeed, MediaPlayerSeek, MediaPlayerSeekBackward, MediaPlayerSeekForward, MediaPlayerSettings, MediaPlayerTime, MediaPlayerVideo, MediaPlayerVolume };