@signal9/era-ui 1.1.2

package/dist/ui/video-player/video-player.svelte

@@ -0,0 +1,1377 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { untrack } from 'svelte';
+	import { browser } from '$app/environment';
+	import {
+		ContextMenu as BitsContextMenu,
+		DropdownMenu as BitsDropdownMenu,
+		Slider as BitsSlider
+	} from 'bits-ui';
+	import {
+		MediaRemoteControl,
+		type MediaPlayerElement,
+		type MediaFullscreenRequestTarget,
+		type MediaState
+	} from 'vidstack';
+	import { Bar } from '../bar';
+	import { Badge } from '../badge';
+	import { Button } from '../button';
+	import * as ContextMenu from '../context-menu';
+	import * as DropdownMenu from '../dropdown-menu';
+	import Play from '@lucide/svelte/icons/play';
+	import Pause from '@lucide/svelte/icons/pause';
+	import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
+	import Rewind from '@lucide/svelte/icons/rewind';
+	import FastForward from '@lucide/svelte/icons/fast-forward';
+	import Volume2 from '@lucide/svelte/icons/volume-2';
+	import Volume1 from '@lucide/svelte/icons/volume-1';
+	import VolumeX from '@lucide/svelte/icons/volume-x';
+	import Gauge from '@lucide/svelte/icons/gauge';
+	import Settings from '@lucide/svelte/icons/settings';
+	import PictureInPicture from '@lucide/svelte/icons/picture-in-picture';
+	import PictureInPicture2 from '@lucide/svelte/icons/picture-in-picture-2';
+	import Maximize from '@lucide/svelte/icons/maximize';
+	import Minimize from '@lucide/svelte/icons/minimize';
+	import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+	import Check from '@lucide/svelte/icons/check';
+	import Download from '@lucide/svelte/icons/download';
+	import { cn } from '../../utils/index.js';
+
+	// Only the engine + outlet are registered, so vidstack ships no UI chrome
+	// or default stylesheet — every control is built from this library.
+	// Wait for both custom elements to be defined before wiring remote control
+	// and subscriptions; otherwise, mount can race and leave controls inert.
+	let elementsDefined = $state(!browser);
+	if (browser) {
+		void Promise.all([
+			import('vidstack/define/media-player'),
+			import('vidstack/define/media-outlet'),
+			import('vidstack/define/media-gesture')
+		]).then(() => {
+			elementsDefined = true;
+		});
+	}
+
+	const FULLSCREEN_TARGET: MediaFullscreenRequestTarget = 'prefer-media';
+	const toScalar = (v: number | number[]) => (Array.isArray(v) ? (v[0] ?? 0) : v);
+
+	type MediaEventWithDetail<T> = CustomEvent<T> & { detail: T };
+	type ChapterTrack = {
+		src: string;
+		label?: string;
+		srclang?: string;
+		default?: boolean;
+	};
+	type ChapterCue = {
+		start: number;
+		end: number;
+		text: string;
+	};
+
+	let {
+		ref = $bindable(null),
+		src,
+		poster,
+		chapters,
+		preload = 'metadata',
+		load = 'visible',
+		muted = false,
+		autoplay = false,
+		loop = false,
+		playsinline = true,
+		crossorigin,
+		initialVolume,
+		initialPlaybackRate,
+		aspectRatio,
+		viewType,
+		streamType,
+		fullscreenOrientation,
+		controls = false,
+		play: showPlay = true,
+		time: showTime = true,
+		skip = false,
+		volume: showVolume = false,
+		volumeOrientation = 'horizontal',
+		speed: showSpeed = false,
+		quality: showQuality = false,
+		pip: showPip = false,
+		fullscreen: showFullscreen = false,
+		seekPreview: showSeekPreview = false,
+		contextMenu: showContextMenu = false,
+		autoHide = true,
+		idleDelay = 500,
+		idleWhilePaused = false,
+		mobileTimelineOnly = true,
+		keyDisabled = false,
+		keyTarget,
+		keyShortcuts,
+		onplay,
+		onpause,
+		onended,
+		onplaying,
+		onseeked,
+		onseeking,
+		oncanplay,
+		ontimeupdate,
+		onvolumechange,
+		onratechange,
+		ondurationchange,
+		onloadedmetadata,
+		onfullscreenchange,
+		onpipchange,
+		onerror,
+		children,
+		class: className
+	}: {
+		ref?: HTMLElement | null;
+		src: string;
+		poster?: string;
+		/** Optional WebVTT chapters track. Pass a URL or full track descriptor. */
+		chapters?: string | ChapterTrack;
+		preload?: 'none' | 'metadata' | 'auto';
+		load?: 'eager' | 'idle' | 'visible' | 'custom';
+		muted?: boolean;
+		autoplay?: boolean;
+		loop?: boolean;
+		playsinline?: boolean;
+		crossorigin?: 'anonymous' | 'use-credentials';
+		/** Initial volume (0–1). */
+		initialVolume?: number;
+		/** Initial playback rate (e.g. 1, 1.5, 2). */
+		initialPlaybackRate?: number;
+		/** Force a fixed aspect ratio as width/height, e.g. 16/9. */
+		aspectRatio?: number;
+		viewType?: 'unknown' | 'audio' | 'video';
+		streamType?: 'unknown' | 'on-demand' | 'live' | 'live:dvr' | 'll-live' | 'll-live:dvr';
+		fullscreenOrientation?:
+			| 'any'
+			| 'natural'
+			| 'landscape'
+			| 'portrait'
+			| 'portrait-primary'
+			| 'portrait-secondary'
+			| 'landscape-primary'
+			| 'landscape-secondary';
+		/** Fall back to the provider's native controls instead of the custom chrome. */
+		controls?: boolean;
+		/** Show the play / pause button in the custom chrome. */
+		play?: boolean;
+		/** Show the elapsed and duration time badges. */
+		time?: boolean;
+		/** Show ±N-second skip buttons. `true` defaults to 10s; pass a number to override. */
+		skip?: boolean | number;
+		/** Show the mute toggle and volume slider. */
+		volume?: boolean;
+		/** Layout direction for the volume slider. */
+		volumeOrientation?: 'horizontal' | 'vertical';
+		/** Show the playback-speed dropdown. */
+		speed?: boolean;
+		/** Show the quality dropdown. Auto-hidden when the source exposes no quality options (e.g. plain MP4). */
+		quality?: boolean;
+		/** Show the picture-in-picture toggle. */
+		pip?: boolean;
+		/** Show the fullscreen toggle. */
+		fullscreen?: boolean;
+		/** Show a hover preview above the seek bar with the cursor's time and (if available) the chapter at that point. */
+		seekPreview?: boolean;
+		/** Enable a right-click context menu mirroring the enabled chrome plus a download shortcut. */
+		contextMenu?: boolean;
+		/** Whether the controls bar fades when the user is idle during playback. Set `false` to keep it visible. */
+		autoHide?: boolean;
+		/**
+		 * Delay (ms) of inactivity during playback before vidstack flips `userIdle` to true.
+		 * Maps to the player's `user-idle-delay` attribute. Defaults to 500 ms (vidstack's
+		 * own default is 2000 ms).
+		 */
+		idleDelay?: number;
+		/**
+		 * Vidstack only fades the bar while playing (deliberately — its `MediaUserController`
+		 * bails out of idle tracking on `pause`). Set this to `true` to also hide the bar
+		 * while paused after `idleDelay` ms of pointer/keyboard inactivity.
+		 */
+		idleWhilePaused?: boolean;
+		/**
+		 * On narrow viewports / coarse-pointer devices, auto-collapse to a "timeline-only"
+		 * layout — every chrome control suppresses regardless of its individual prop, leaving
+		 * just the seek bar. Set `false` to honor the chrome props as-is on mobile too.
+		 */
+		mobileTimelineOnly?: boolean;
+		keyDisabled?: boolean;
+		keyTarget?: 'document' | 'player';
+		keyShortcuts?: Record<string, string>;
+		onplay?: (e: Event) => void;
+		onpause?: (e: Event) => void;
+		onended?: (e: Event) => void;
+		onplaying?: (e: Event) => void;
+		onseeked?: (e: MediaEventWithDetail<number>) => void;
+		onseeking?: (e: MediaEventWithDetail<number>) => void;
+		oncanplay?: (e: Event) => void;
+		ontimeupdate?: (e: MediaEventWithDetail<{ currentTime: number; played: TimeRanges }>) => void;
+		onvolumechange?: (e: MediaEventWithDetail<{ volume: number; muted: boolean }>) => void;
+		onratechange?: (e: MediaEventWithDetail<number>) => void;
+		ondurationchange?: (e: MediaEventWithDetail<number>) => void;
+		onloadedmetadata?: (e: Event) => void;
+		onfullscreenchange?: (e: MediaEventWithDetail<boolean>) => void;
+		onpipchange?: (e: MediaEventWithDetail<boolean>) => void;
+		onerror?: (e: Event) => void;
+		/** Optional override for the entire controls layer — replaces the default chrome. */
+		children?: Snippet;
+		class?: string;
+	} = $props();
+
+	let paused = $state(true);
+	let ended = $state(false);
+	let started = $state(false);
+	let currentTime = $state(0);
+	let duration = $state(0);
+	let volumeState = $state(1);
+	let mutedState = $state(false);
+	let rateState = $state(1);
+	let waiting = $state(false);
+	let fullscreenState = $state(false);
+	let pipState = $state(false);
+	let live = $state(false);
+	let canSeek = $state(true);
+	let qualities = $state<MediaState['qualities']>([]);
+	let currentQuality = $state<MediaState['quality']>(null);
+	let autoQuality = $state(false);
+	let canSetQuality = $state(false);
+	// Mirrored from vidstack's subscribe — container-relative breakpoint is
+	// what makes an embedded 400 px player collapse to mobile mode too,
+	// not just phone-width viewports.
+	let touchPointer = $state(false);
+	let breakpointX = $state<MediaState['breakpointX']>('lg');
+	// Vidstack reports whether the current provider/browser combo actually
+	// supports fullscreen and PiP — auto-hide those buttons rather than
+	// rendering ones that silently fail when clicked.
+	let canEnterFullscreen = $state(false);
+	let canEnterPip = $state(false);
+	const mobileMode = $derived(mobileTimelineOnly && (touchPointer || breakpointX === 'sm'));
+	// vidstack flips `userIdle` to true while the engine is playing and the
+	// pointer hasn't moved over the player for ~2.5s (and back to false on
+	// any interaction or while paused). We use it to fade the controls bar.
+	let userIdle = $state(false);
+	// Vidstack's userIdle never fires while paused (its MediaUserController
+	// bails out on `pause`). When `idleWhilePaused` is on, run our own timer
+	// and OR the result into the bar's fade.
+	let pausedIdle = $state(false);
+	// Mirror the end of vidstack's buffered / seekable ranges. Used for the
+	// seek bar's progress underlay and to clamp the slider max below
+	// `duration` when the engine reports a smaller seekable window
+	// (e.g. HLS live).
+	let bufferedEnd = $state(0);
+	let seekableEnd = $state(0);
+	let seekTimelineRef = $state<HTMLElement | null>(null);
+	let seekInteracted = $state(false);
+	let chapterCues = $state<ChapterCue[]>([]);
+
+	// While scrubbing, scrubTime overrides currentTime so the label and thumb
+	// track the pointer immediately instead of waiting for the media engine.
+	const SEEK_SETTLE_EPSILON = 0.08;
+	const SEEK_DRIFT_SNAP = 0.35;
+	const SEEK_DRIFT_CORRECTION = 0.14;
+	const SEEK_KEY_STEP = 5;
+	const SEEK_PAGE_STEP = 30;
+	let scrubbing = $state(false);
+	let scrubTime = $state(0);
+	// Hover preview: only the *whole-second* time and active flag drive
+	// re-renders. The exact pointer x position is written straight to a CSS
+	// variable on the timeline (no Svelte invalidation per pointermove tick).
+	let hoverActive = $state(false);
+	let hoverSeconds = $state(0);
+	let visualTime = 0;
+	let pendingSeekTime: number | null = null;
+	let resumeAfterScrub = false;
+	// fmt() ran on the time-text node every time-update (~60×/s). Deriving
+	// whole-second labels means it only re-runs when the visible string changes.
+	const shownTimeLabel = $derived(fmt(Math.floor(scrubbing ? scrubTime : currentTime)));
+	const durationLabel = $derived(fmt(Math.floor(duration)));
+	const seekAriaValue = $derived(Math.round((scrubbing ? scrubTime : currentTime) * 100) / 100);
+	const seekValueText = $derived(`${shownTimeLabel} of ${durationLabel}`);
+	const chapterTrack = $derived(
+		typeof chapters === 'string' ? { src: chapters, srclang: 'en-US', default: true } : chapters
+	);
+	const chapterMarkers = $derived(
+		chapterCues
+			.map((cue) => ({
+				...cue,
+				left: timeMax > 0 ? Math.max(0, Math.min(100, (cue.start / timeMax) * 100)) : 0
+			}))
+			.filter((cue) => cue.left > 0 && cue.left < 100)
+	);
+	const hoverTimeLabel = $derived(fmt(hoverSeconds));
+	const hoverChapter = $derived(
+		hoverActive
+			? chapterCues.find((c) => hoverSeconds >= c.start && hoverSeconds < c.end)
+			: undefined
+	);
+	const seekPreviewVisible = $derived(showSeekPreview && hoverActive && !mobileMode);
+
+	const playerEl = $derived(ref as (HTMLElement & MediaPlayerElement) | null);
+	// Construct only in the browser — Cloudflare worker SSR resolves vidstack's
+	// CJS build, where `MediaRemoteControl` lands as a non-constructor value
+	// and `new` throws. Templates only invoke `remote` from event handlers, so
+	// it never runs during server render.
+	let remote!: MediaRemoteControl;
+	if (browser) remote = new MediaRemoteControl();
+
+	$effect(() => {
+		if (!elementsDefined) return;
+		if (!playerEl) return;
+		remote.setPlayer(playerEl);
+		remote.setTarget(playerEl);
+		// initialVolume / initialPlaybackRate are documented as initial values.
+		// Untrack them so a parent updating those props after mount doesn't
+		// re-run this effect and tear down setPlayer / setTarget.
+		untrack(() => {
+			if (typeof initialVolume === 'number') remote.changeVolume(initialVolume);
+			if (typeof initialPlaybackRate === 'number') remote.changePlaybackRate(initialPlaybackRate);
+		});
+		return () => {
+			remote.setPlayer(null);
+			remote.setTarget(null);
+		};
+	});
+
+	const rateOptions = [0.5, 0.75, 1, 1.25, 1.5, 2];
+
+	const skipBy = $derived(typeof skip === 'number' ? skip : skip ? 10 : 0);
+	const showSkip = $derived(skipBy > 0);
+
+	// Sort highest-resolution first; bitrate breaks ties for same-height
+	// renditions. We keep the original array index because that's what
+	// `remote.changeQuality(index)` expects — sorting is purely visual.
+	const qualityOptions = $derived(
+		qualities
+			.map((q, index) => ({ q, index }))
+			.sort((a, b) =>
+				b.q.height !== a.q.height ? b.q.height - a.q.height : b.q.bitrate - a.q.bitrate
+			)
+	);
+	const showQualityMenu = $derived(showQuality && canSetQuality && qualities.length > 0);
+	const qualityValue = $derived(
+		autoQuality || !currentQuality ? 'auto' : String(qualities.indexOf(currentQuality))
+	);
+	const qualityHint = $derived(
+		autoQuality
+			? currentQuality
+				? `Auto (${currentQuality.height}p)`
+				: 'Auto'
+			: currentQuality
+				? `${currentQuality.height}p`
+				: '—'
+	);
+
+	function changeQuality(value: string, e?: Event) {
+		if (value === 'auto') remote.changeQuality(-1, e);
+		else {
+			const idx = Number(value);
+			if (Number.isFinite(idx)) remote.changeQuality(idx, e);
+		}
+	}
+
+	// When autoHide is false, force vidstack out of idle for the entire mount so
+	// the controls bar never fades. We can't just set a huge user-idle-delay —
+	// vidstack would still flip idle on `pause → play` if left long enough — so
+	// we tell the controller to pause idle tracking and resume on cleanup.
+	$effect(() => {
+		if (!browser || !elementsDefined || !playerEl) return;
+		if (autoHide) return;
+		remote.pauseUserIdle();
+		return () => remote.resumeUserIdle();
+	});
+
+	// Custom idle timer that fills vidstack's gap: track inactivity while
+	// PAUSED and fade the bar after `idleDelay`. Only runs when `paused` is
+	// true and the consumer has opted in via `idleWhilePaused`. Reset on any
+	// pointer or keyboard activity inside the player element.
+	$effect(() => {
+		if (!browser || !elementsDefined || !playerEl) return;
+		if (!autoHide || !idleWhilePaused || !paused) {
+			pausedIdle = false;
+			return;
+		}
+		const delay = typeof idleDelay === 'number' ? idleDelay : 500;
+		let timer = window.setTimeout(() => {
+			pausedIdle = true;
+		}, delay);
+		const reset = () => {
+			pausedIdle = false;
+			window.clearTimeout(timer);
+			timer = window.setTimeout(() => {
+				pausedIdle = true;
+			}, delay);
+		};
+		playerEl.addEventListener('pointermove', reset);
+		playerEl.addEventListener('pointerdown', reset);
+		playerEl.addEventListener('keydown', reset);
+		return () => {
+			window.clearTimeout(timer);
+			playerEl.removeEventListener('pointermove', reset);
+			playerEl.removeEventListener('pointerdown', reset);
+			playerEl.removeEventListener('keydown', reset);
+			pausedIdle = false;
+		};
+	});
+
+	function downloadVideo() {
+		if (!browser) return;
+		const link = document.createElement('a');
+		link.href = src;
+		// Same-origin sources honor the download attribute and save the file.
+		// Cross-origin servers without CORS download headers will navigate
+		// instead — opening in a new tab is the friendliest fallback.
+		link.download = '';
+		link.target = '_blank';
+		link.rel = 'noopener';
+		link.click();
+	}
+
+	// Vidstack's `_play()` already seeks to start when play is requested on
+	// an ended player, so we just delegate.
+	function togglePlay(e: Event) {
+		remote.togglePaused(e);
+	}
+	function seekBy(delta: number, e: Event) {
+		seekInteracted = true;
+		const next = (readMediaTime() ?? currentTime) + delta;
+		remote.seek(Math.max(0, duration ? Math.min(duration, next) : next), e);
+	}
+
+	function readMediaTime(el = playerEl) {
+		const time = (el as unknown as { currentTime?: number } | null)?.currentTime;
+		return typeof time === 'number' && Number.isFinite(time) ? time : null;
+	}
+
+	function clampTime(t: number) {
+		if (!Number.isFinite(t)) return 0;
+		return Math.max(0, timeMax > 0 ? Math.min(timeMax, t) : t);
+	}
+
+	function setSeekVisual(time: number) {
+		const el = seekTimelineRef;
+		if (!el) return;
+		visualTime = clampTime(started || seekInteracted ? time : 0);
+		const fraction = timeMax > 0 ? visualTime / timeMax : 0;
+		const clamped = Math.max(0, Math.min(1, fraction));
+		el.style.setProperty('--era-video-played-scale', String(clamped));
+	}
+
+	function setBufferedVisual() {
+		seekTimelineRef?.style.setProperty(
+			'--era-video-buffered-scale',
+			String(Math.max(0, Math.min(1, bufferedFraction)))
+		);
+	}
+
+	function pointerTime(e: PointerEvent) {
+		const rect = seekTimelineRef?.getBoundingClientRect();
+		if (!rect || rect.width <= 0) return currentTime;
+		const fraction = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+		return clampTime(fraction * timeMax);
+	}
+
+	function scrubTo(time: number) {
+		scrubTime = clampTime(time);
+		setSeekVisual(scrubTime);
+	}
+
+	function commitSeek(time: number, e?: Event) {
+		const next = clampTime(time);
+		const atLiveEdge = live && timeMax > 0 && next / timeMax >= 0.99;
+		if (atLiveEdge) remote.seekToLiveEdge();
+		else remote.seek(next, e);
+		pendingSeekTime = next;
+		currentTime = next;
+		setSeekVisual(next);
+		scrubbing = false;
+		if (resumeAfterScrub) {
+			resumeAfterScrub = false;
+			remote.play();
+		}
+	}
+
+	function handleSeekPointerDown(e: PointerEvent) {
+		if (seekDisabled) return;
+		e.preventDefault();
+		const target = e.currentTarget as HTMLElement;
+		target.setPointerCapture(e.pointerId);
+		seekInteracted = true;
+		scrubbing = true;
+		scrubTo(pointerTime(e));
+		if (!paused) {
+			resumeAfterScrub = true;
+			remote.pause(e);
+		}
+	}
+
+	function handleSeekPointerMove(e: PointerEvent) {
+		if (showSeekPreview) updateHover(e);
+		if (!scrubbing || seekDisabled) return;
+		scrubTo(pointerTime(e));
+	}
+
+	function updateHover(e: PointerEvent) {
+		const time = pointerTime(e);
+		const fraction = timeMax > 0 ? Math.max(0, Math.min(1, time / timeMax)) : 0;
+		seekTimelineRef?.style.setProperty('--era-video-hover-pct', `${fraction * 100}%`);
+		const sec = Math.floor(time);
+		if (sec !== hoverSeconds) hoverSeconds = sec;
+	}
+
+	function handleSeekPointerEnter(e: PointerEvent) {
+		if (!showSeekPreview) return;
+		hoverActive = true;
+		updateHover(e);
+	}
+
+	function handleSeekPointerLeave() {
+		if (hoverActive) hoverActive = false;
+	}
+
+	function handleSeekPointerUp(e: PointerEvent) {
+		if (!scrubbing) return;
+		const target = e.currentTarget as HTMLElement;
+		if (target.hasPointerCapture(e.pointerId)) target.releasePointerCapture(e.pointerId);
+		commitSeek(pointerTime(e), e);
+	}
+
+	function handleSeekPointerCancel(e: PointerEvent) {
+		if (!scrubbing) return;
+		const target = e.currentTarget as HTMLElement;
+		if (target.hasPointerCapture(e.pointerId)) target.releasePointerCapture(e.pointerId);
+		scrubbing = false;
+		resumeAfterScrub = false;
+		setSeekVisual(readMediaTime() ?? currentTime);
+	}
+
+	function handleSeekKeydown(e: KeyboardEvent) {
+		if (seekDisabled) return;
+		const base = readMediaTime() ?? currentTime;
+		let next: number | null = null;
+		switch (e.key) {
+			case 'ArrowLeft':
+			case 'ArrowDown':
+				next = base - SEEK_KEY_STEP;
+				break;
+			case 'ArrowRight':
+			case 'ArrowUp':
+				next = base + SEEK_KEY_STEP;
+				break;
+			case 'PageDown':
+				next = base - SEEK_PAGE_STEP;
+				break;
+			case 'PageUp':
+				next = base + SEEK_PAGE_STEP;
+				break;
+			case 'Home':
+				next = 0;
+				break;
+			case 'End':
+				next = timeMax;
+				break;
+			default:
+				return;
+		}
+		e.preventDefault();
+		seekInteracted = true;
+		commitSeek(next, e);
+	}
+
+	function fmt(t: number) {
+		if (!Number.isFinite(t) || t < 0) return '0:00';
+		const total = Math.floor(t);
+		const h = Math.floor(total / 3600);
+		const m = Math.floor((total % 3600) / 60);
+		const s = total % 60;
+		const pad = (n: number) => String(n).padStart(2, '0');
+		if (h > 0) return `${h}:${pad(m)}:${pad(s)}`;
+		return `${m}:${pad(s)}`;
+	}
+
+	function parseVttTime(time: string) {
+		const parts = time.trim().split(':');
+		const seconds = Number(parts.pop());
+		const minutes = Number(parts.pop() ?? 0);
+		const hours = Number(parts.pop() ?? 0);
+		if (![seconds, minutes, hours].every(Number.isFinite)) return null;
+		return hours * 3600 + minutes * 60 + seconds;
+	}
+
+	function parseChaptersVtt(vtt: string) {
+		return vtt
+			.replace(/\r/g, '')
+			.split(/\n{2,}/)
+			.map((block) => {
+				const lines = block
+					.split('\n')
+					.map((line) => line.trim())
+					.filter(Boolean);
+				const timingIndex = lines.findIndex((line) => line.includes('-->'));
+				if (timingIndex === -1) return null;
+				const [rawStart, rawEnd] = lines[timingIndex].split('-->');
+				const start = parseVttTime(rawStart);
+				const end = parseVttTime(rawEnd?.trim().split(/\s+/)[0] ?? '');
+				if (start === null || end === null) return null;
+				return {
+					start,
+					end,
+					text: lines.slice(timingIndex + 1).join(' ')
+				};
+			})
+			.filter((cue): cue is ChapterCue => cue !== null);
+	}
+
+	$effect(() => {
+		if (!browser) return;
+		const src = chapterTrack?.src;
+		if (!src) {
+			chapterCues = [];
+			return;
+		}
+		let cancelled = false;
+		fetch(src)
+			.then((res) => (res.ok ? res.text() : ''))
+			.then((text) => {
+				if (!cancelled) chapterCues = parseChaptersVtt(text);
+			})
+			.catch(() => {
+				if (!cancelled) chapterCues = [];
+			});
+		return () => {
+			cancelled = true;
+		};
+	});
+
+	$effect(() => {
+		if (!elementsDefined) return;
+		if (!playerEl) return;
+		const el = playerEl;
+
+		// vidstack drives every piece of media state. Subscribe once and let
+		// the engine's signals overwrite our local mirrors — source changes,
+		// buffering, seek throttling, and replay are all already handled
+		// inside vidstack, so there's nothing for us to track or invalidate.
+		// The cast works around a TS quirk: `MediaPlayerElement` is an
+		// interface that extends a type-alias intersection, and TS doesn't
+		// reliably surface the conditional `subscribe` member that way.
+		type PlayerWithStore = { subscribe: (cb: (s: Readonly<MediaState>) => void) => () => void };
+		const dispose = (el as unknown as PlayerWithStore).subscribe((state) => {
+			paused = state.paused;
+			ended = state.ended;
+			started = state.started;
+			// Mirror `<media-buffering-indicator>`: spinner shows while the
+			// resource isn't ready to play or while the engine is genuinely
+			// waiting for data — never during user-initiated seeks (the moving
+			// thumb is the feedback). Folding `state.seeking` in here was the
+			// source of "spinner stuck after paused-seek to a buffered region".
+			waiting = !state.canPlay || state.waiting;
+			// vidstack's `subscribe` is a maverick `effect()`, so this callback
+			// only re-runs for state fields it actually reads. We must read
+			// `state.currentTime` to keep `time-update` ticks driving the
+			// timeline — but `state.currentTime` itself mirrors that throttled
+			// (~4 Hz) event and lags the engine by up to ~250 ms, which is
+			// visible as a thumb jump on pause/resume edges. The element's
+			// `currentTime` getter (via the underlying provider) is precise
+			// and unthrottled, so use it for the actual value and keep the
+			// `state.currentTime` read solely for dependency tracking.
+			const tracked = state.currentTime;
+			const mediaTime = readMediaTime(el) ?? tracked;
+			if (
+				pendingSeekTime !== null &&
+				state.seeking &&
+				Math.abs(mediaTime - pendingSeekTime) > SEEK_SETTLE_EPSILON
+			) {
+				currentTime = pendingSeekTime;
+			} else {
+				pendingSeekTime = null;
+				currentTime = mediaTime;
+			}
+			duration = state.duration;
+			bufferedEnd = state.bufferedEnd;
+			seekableEnd = state.seekableEnd;
+			volumeState = state.volume;
+			mutedState = state.muted;
+			rateState = state.playbackRate;
+			fullscreenState = state.fullscreen;
+			pipState = state.pictureInPicture;
+			live = state.live;
+			canSeek = state.canSeek;
+			userIdle = state.userIdle;
+			// Copy the qualities array so Svelte's reactivity sees the change —
+			// vidstack mutates this list in place as the engine learns about
+			// renditions, and assigning the same reference would skip updates.
+			qualities = [...state.qualities];
+			currentQuality = state.quality;
+			autoQuality = state.autoQuality;
+			canSetQuality = state.canSetQuality;
+			touchPointer = state.touchPointer;
+			breakpointX = state.breakpointX;
+			canEnterFullscreen = state.canFullscreen;
+			canEnterPip = state.canPictureInPicture;
+		});
+
+		// Forward selected events to consumer callbacks. The thunks read
+		// each prop fresh at fire time so a parent updating a callback
+		// after mount is honored without re-attaching listeners.
+		const forward = <T extends Event>(name: string, get: () => ((e: T) => void) | undefined) => {
+			const fn = (e: Event) => get()?.(e as T);
+			el.addEventListener(name, fn);
+			return () => el.removeEventListener(name, fn);
+		};
+		const cleanups = [
+			forward('play', () => onplay),
+			forward('pause', () => onpause),
+			forward('ended', () => onended),
+			forward('playing', () => onplaying),
+			forward('seeked', () => onseeked),
+			forward('seeking', () => onseeking),
+			forward('can-play', () => oncanplay),
+			forward('time-update', () => ontimeupdate),
+			forward('volume-change', () => onvolumechange),
+			forward('rate-change', () => onratechange),
+			forward('duration-change', () => ondurationchange),
+			forward('loaded-metadata', () => onloadedmetadata),
+			forward('fullscreen-change', () => onfullscreenchange),
+			forward('picture-in-picture-change', () => onpipchange),
+			forward('error', () => onerror)
+		];
+
+		return () => {
+			dispose();
+			for (const fn of cleanups) fn();
+		};
+	});
+
+	// Keep the visible seek bar off Svelte's render path during playback. The
+	// timeline is a dedicated control instead of a generic form slider, so the
+	// fill and thumb can move with CSS variables without value reconciliation
+	// fighting rAF. On resume we start from the last visual time and ease small
+	// media-clock drift back toward the provider, masking the common one-frame
+	// jump without hiding real seeks or stalls.
+	$effect(() => {
+		const el = playerEl;
+		const timeline = seekTimelineRef;
+		const max = timeMax;
+		const rate = rateState;
+		if (!el || !timeline || max <= 0) return;
+
+		setBufferedVisual();
+
+		if (scrubbing) {
+			setSeekVisual(scrubTime);
+			return;
+		}
+
+		if (paused) {
+			const t = readMediaTime(el) ?? currentTime;
+			currentTime = t;
+			setSeekVisual(t);
+			return;
+		}
+
+		const mediaTime = readMediaTime(el) ?? currentTime;
+		if (Math.abs(visualTime - mediaTime) > SEEK_DRIFT_SNAP) setSeekVisual(mediaTime);
+
+		let originTime = visualTime;
+		let originNow = performance.now();
+		let raf = requestAnimationFrame(function tick(now) {
+			const predicted = originTime + ((now - originNow) / 1000) * rate;
+			const actual = readMediaTime(el) ?? predicted;
+			const drift = actual - predicted;
+			const next =
+				Math.abs(drift) > SEEK_DRIFT_SNAP ? actual : predicted + drift * SEEK_DRIFT_CORRECTION;
+			setSeekVisual(next);
+			originTime = visualTime;
+			originNow = now;
+			raf = requestAnimationFrame(tick);
+		});
+		return () => cancelAnimationFrame(raf);
+	});
+
+	const playLabel = $derived(ended ? 'Replay' : paused ? 'Play' : 'Pause');
+	const muteLabel = $derived(mutedState || volumeState === 0 ? 'Unmute' : 'Mute');
+	// Prefer seekable.end when smaller than duration (HLS live windows); fall
+	// back to duration for VOD where the engine may report seekable === duration.
+	const timeMax = $derived(
+		seekableEnd > 0 && seekableEnd < (duration || Infinity)
+			? seekableEnd
+			: duration > 0
+				? duration
+				: 1
+	);
+	const bufferedFraction = $derived(timeMax > 0 ? bufferedEnd / timeMax : 0);
+	// Snap volumeState to the slider's step before passing it as `value`, so
+	// bits-ui's snap-to-step watcher doesn't fire onValueChange (with a
+	// rounded value) on every mount and external volume update.
+	const VOLUME_STEP = 0.01;
+	const shownVolume = $derived(
+		mutedState ? 0 : Math.round(volumeState / VOLUME_STEP) * VOLUME_STEP
+	);
+	const resolvedVolumeOrientation = $derived(
+		volumeOrientation === 'vertical' ? 'vertical' : 'horizontal'
+	);
+	// In vertical mode the popup is anchored to the mute icon — same width
+	// (h-md), shared bg, rounded top + flat bottom — so it reads as the icon
+	// extending upward (vidstack has no native API for this). The sleeve's
+	// box runs all the way down to the button (`bottom-full`, no offset) so
+	// the cursor crossing the visual gap stays inside the cluster's hover
+	// region; the gap is recreated by the slider's inset within the sleeve.
+	const volumeClusterClass = $derived(
+		resolvedVolumeOrientation === 'vertical'
+			? 'group relative shrink-0'
+			: 'relative flex shrink-0 items-center'
+	);
+	// `--era-shadow` (inset only) — `--era-shadow-lg`'s drop shadow would seam
+	// against the mute button below. Visibility is in the scoped style block.
+	const volumeSleeveClass = $derived(
+		resolvedVolumeOrientation === 'vertical'
+			? 'absolute bottom-full left-1/2 z-20 h-[calc(var(--era-h-lg)*3)] w-(--era-h-md) -translate-x-1/2 rounded-t-(--era-rd-md) bg-hover shadow-(--era-shadow) glass-blur'
+			: 'relative h-(--era-h-sm) w-[calc(var(--era-h-md)*3)]'
+	);
+	// Slider IS the visible track. Range and Thumb (both bg-fg) live inside
+	// and blend into one filled column.
+	const volumeSliderClass = $derived(
+		`absolute touch-none select-none overflow-hidden rounded-(--era-rd-xs) bg-3 shadow-(--era-shadow) focus:outline-none ${
+			resolvedVolumeOrientation === 'vertical'
+				? 'top-(--era-gap) bottom-(--era-gap) left-1/2 w-(--era-h-xs) -translate-x-1/2'
+				: 'inset-x-(--era-xs-inset-sm) top-1/2 h-(--era-h-xs) -translate-y-1/2'
+		}`
+	);
+	// Bits-ui's slider needs a thumb element to handle pointer events, but
+	// the visible position indicator is the Range fill alone — no separate
+	// thumb to align. The thumb stays in the DOM at zero size, invisible.
+	const volumeThumbClass = 'block size-0 cursor-pointer focus:outline-none';
+	const volumeRangeClass = $derived(
+		resolvedVolumeOrientation === 'vertical' ? 'absolute w-full bg-fg' : 'absolute h-full bg-fg'
+	);
+	// vidstack's `canSeek` flips false during initial metadata load on VOD
+	// (because seekableWindow isn't finite yet) — disabling the slider then
+	// is just visual noise, the engine queues the seek as soon as metadata
+	// arrives. The genuine no-seek case is a live stream without a DVR
+	// window, which is what we actually want to gate on.
+	const seekDisabled = $derived(live && !canSeek);
+	// Don't fade while the cursor is hovering the bar itself — even when
+	// vidstack's userIdle (or our paused-idle) flips true because the user
+	// has held still over the bar for a while.
+	let barHovered = $state(false);
+	const barClass = $derived(
+		`absolute inset-x-(--era-gap) bottom-(--era-gap) z-10 bg-2 shadow-(--era-shadow) transition-opacity duration-(--era-duration) ${
+			(userIdle || pausedIdle) && !barHovered ? 'pointer-events-none opacity-0' : ''
+		}`
+	);
+</script>
+
+<!-- Snippet so the right-click branch can spread bits-ui's trigger props
+     onto the SAME `<media-player>` (a wrapper would break vidstack's
+     fullscreen target). -->
+{#snippet rootMediaPlayer(extraProps: Record<string, unknown>)}
+	<media-player
+		bind:this={ref}
+		class={cn(
+			'relative block w-full overflow-hidden [border-radius:calc(var(--era-rd-lg)+var(--era-gap))] bg-black',
+			className
+		)}
+		{src}
+		{poster}
+		{preload}
+		{load}
+		{crossorigin}
+		muted={muted ? '' : undefined}
+		autoplay={autoplay ? '' : undefined}
+		loop={loop ? '' : undefined}
+		view-type={viewType}
+		stream-type={streamType}
+		aspect-ratio={aspectRatio}
+		fullscreen-orientation={fullscreenOrientation}
+		controls={controls ? '' : undefined}
+		playsinline={playsinline ? '' : undefined}
+		user-idle-delay={typeof idleDelay === 'number' ? idleDelay : undefined}
+		key-disabled={keyDisabled ? '' : undefined}
+		key-target={keyTarget}
+		key-shortcuts={keyShortcuts ? JSON.stringify(keyShortcuts) : undefined}
+		{...extraProps}
+	>
+		<media-outlet>
+			{#if !controls && !children && mobileMode}
+				<!-- Mobile only: vidstack's gesture component carries an inherent
+			     250 ms delay on single-tap (waits to disambiguate from a
+			     double-tap), which is fine here because the dbl-tap-seek
+			     halves justify the wait. Desktop uses a plain <button>
+			     overlay below for instant click response. -->
+				<media-gesture
+					event="pointerup"
+					action="toggle:paused"
+					class="absolute inset-0"
+					aria-label={playLabel}
+				></media-gesture>
+				<media-gesture
+					event="dblpointerup"
+					action="seek:-10"
+					class="absolute top-0 bottom-0 left-0 w-1/2"
+					aria-label="Back 10 seconds"
+				></media-gesture>
+				<media-gesture
+					event="dblpointerup"
+					action="seek:10"
+					class="absolute top-0 right-0 bottom-0 w-1/2"
+					aria-label="Forward 10 seconds"
+				></media-gesture>
+			{/if}
+			{#if chapterTrack}
+				<track
+					src={chapterTrack.src}
+					label={chapterTrack.label}
+					srclang={chapterTrack.srclang ?? 'en-US'}
+					kind="chapters"
+					default={chapterTrack.default ?? true}
+				/>
+			{/if}
+		</media-outlet>
+
+		{#if children}
+			{@render children()}
+		{:else if !controls}
+			{#if poster && !started}
+				<img
+					src={poster}
+					alt=""
+					aria-hidden="true"
+					class="pointer-events-none absolute inset-0 z-0 size-full object-cover"
+				/>
+			{/if}
+
+			{#if !mobileMode}
+				<!-- Desktop: instant click-to-toggle. Mobile uses media-gesture
+			     elements inside the outlet (above) for dbl-tap-seek. -->
+				<button
+					type="button"
+					aria-label={playLabel}
+					class="absolute inset-0 z-0 cursor-pointer bg-transparent"
+					onclick={togglePlay}
+				></button>
+			{/if}
+
+			{#if waiting}
+				<span
+					aria-hidden="true"
+					class="pointer-events-none absolute inset-0 z-10 flex items-center justify-center"
+				>
+					<LoaderCircle class="size-(--era-h-lg) animate-spin text-fg" />
+				</span>
+			{/if}
+
+			<Bar
+				class={barClass}
+				onpointerenter={() => (barHovered = true)}
+				onpointerleave={() => (barHovered = false)}
+			>
+				{#if showSkip && !mobileMode}
+					<Button
+						icon
+						aria-label={`Back ${skipBy} seconds`}
+						onclick={(e: MouseEvent) => seekBy(-skipBy, e)}
+					>
+						<Rewind class="size-(--era-h-xs)" aria-hidden="true" />
+					</Button>
+				{/if}
+
+				{#if showPlay && !mobileMode}
+					<Button icon aria-label={playLabel} onclick={togglePlay}>
+						{#if ended}
+							<RotateCcw class="size-(--era-h-xs)" aria-hidden="true" />
+						{:else if paused}
+							<Play class="size-(--era-h-xs)" aria-hidden="true" />
+						{:else}
+							<Pause class="size-(--era-h-xs)" aria-hidden="true" />
+						{/if}
+					</Button>
+				{/if}
+
+				{#if showSkip && !mobileMode}
+					<Button
+						icon
+						aria-label={`Forward ${skipBy} seconds`}
+						onclick={(e: MouseEvent) => seekBy(skipBy, e)}
+					>
+						<FastForward class="size-(--era-h-xs)" aria-hidden="true" />
+					</Button>
+				{/if}
+
+				{#if showTime && !mobileMode}
+					<Badge class="shrink-0 bg-transparent tabular-nums">
+						{shownTimeLabel}
+					</Badge>
+				{/if}
+
+				<div
+					bind:this={seekTimelineRef}
+					role="slider"
+					tabindex={seekDisabled ? -1 : 0}
+					aria-label="Seek"
+					aria-valuemin={0}
+					aria-valuemax={Math.round(timeMax * 100) / 100}
+					aria-valuenow={seekAriaValue}
+					aria-valuetext={seekValueText}
+					aria-disabled={seekDisabled}
+					class="relative h-(--era-h-sm) min-w-0 flex-1 touch-none select-none focus:outline-none focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-fg data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"
+					style="--era-video-played-scale: 0; --era-video-buffered-scale: 0; --era-video-hover-pct: 0%;"
+					data-seek-root
+					data-disabled={seekDisabled}
+					onpointerdown={handleSeekPointerDown}
+					onpointermove={handleSeekPointerMove}
+					onpointerup={handleSeekPointerUp}
+					onpointercancel={handleSeekPointerCancel}
+					onpointerenter={handleSeekPointerEnter}
+					onpointerleave={handleSeekPointerLeave}
+					onkeydown={handleSeekKeydown}
+				>
+					<span
+						aria-hidden="true"
+						class="pointer-events-none absolute inset-0 rounded-(--era-rd-sm)"
+					>
+						<span
+							class="absolute inset-(--era-xs-inset-sm) overflow-hidden rounded-(--era-rd-xs) bg-3 shadow-(--era-shadow)"
+						>
+							<span
+								class="absolute inset-y-0 left-0 w-full origin-left scale-x-(--era-video-buffered-scale) bg-4"
+							></span>
+							<span
+								class="absolute inset-y-0 left-0 w-full origin-left scale-x-(--era-video-played-scale) bg-fg"
+							></span>
+							{#each chapterMarkers as chapter (chapter.start)}
+								<span
+									aria-hidden="true"
+									title={chapter.text}
+									class="absolute inset-y-0 w-px bg-2"
+									style="left: {chapter.left}%"
+								></span>
+							{/each}
+						</span>
+					</span>
+					{#if seekPreviewVisible}
+						<!--
+							Anchored to the seek-timeline div, but the timeline sits
+							centered inside the taller Bar (h-lg around h-sm). To
+							keep a `--era-gap`-sized clearance above the visible Bar
+							surface — not just above the timeline div's top — we
+							add half the bar/timeline height delta to the offset.
+						-->
+						<span
+							aria-hidden="true"
+							class="pointer-events-none absolute bottom-[calc(100%+(var(--era-h-lg)-var(--era-h-sm))/2+var(--era-gap))] left-(--era-video-hover-pct) inline-flex h-(--era-h-xxs) -translate-x-1/2 items-center gap-(--era-gap) rounded-(--era-rd-xxs) bg-(--era-surface-bg-elevated) px-(--era-inset-xxs) font-mono text-body leading-none whitespace-nowrap text-fg shadow-(--era-shadow-lg) glass-blur"
+						>
+							<span class="tabular-nums">{hoverTimeLabel}</span>
+							{#if hoverChapter}
+								<span class="text-muted">{hoverChapter.text}</span>
+							{/if}
+						</span>
+					{/if}
+				</div>
+
+				{#if showTime && !mobileMode}
+					<Badge class="shrink-0 bg-transparent tabular-nums">
+						{durationLabel}
+					</Badge>
+				{/if}
+
+				{#if showVolume && !mobileMode}
+					<div
+						class={volumeClusterClass}
+						data-volume-cluster={resolvedVolumeOrientation === 'vertical' ? '' : undefined}
+					>
+						<Button
+							icon
+							aria-label={muteLabel}
+							data-mute-button={resolvedVolumeOrientation === 'vertical' ? '' : undefined}
+							onclick={(e: MouseEvent) => remote.toggleMuted(e)}
+						>
+							{#if mutedState || volumeState === 0}
+								<VolumeX class="size-(--era-h-xs)" aria-hidden="true" />
+							{:else if volumeState < 0.5}
+								<Volume1 class="size-(--era-h-xs)" aria-hidden="true" />
+							{:else}
+								<Volume2 class="size-(--era-h-xs)" aria-hidden="true" />
+							{/if}
+						</Button>
+
+						<div
+							class={volumeSleeveClass}
+							data-volume-sleeve={resolvedVolumeOrientation === 'vertical' ? '' : undefined}
+						>
+							<BitsSlider.Root
+								type="single"
+								value={shownVolume}
+								min={0}
+								max={1}
+								step={VOLUME_STEP}
+								orientation={resolvedVolumeOrientation}
+								aria-label="Volume"
+								class={volumeSliderClass}
+								onValueChange={(v: number | number[]) => remote.changeVolume(toScalar(v))}
+							>
+								{#snippet children({ thumbs })}
+									<BitsSlider.Range class={volumeRangeClass} />
+									{#each thumbs as index (index)}
+										<BitsSlider.Thumb {index} class={volumeThumbClass} />
+									{/each}
+								{/snippet}
+							</BitsSlider.Root>
+						</div>
+					</div>
+				{/if}
+
+				{#if showSpeed && !mobileMode}
+					<DropdownMenu.Root
+						onOpenChange={(open: boolean) => {
+							if (open) remote.pauseUserIdle();
+							else remote.resumeUserIdle();
+						}}
+					>
+						<BitsDropdownMenu.Trigger>
+							{#snippet child({ props })}
+								<Button icon aria-label="Playback speed" {...props}>
+									<Gauge class="size-(--era-h-xs)" aria-hidden="true" />
+								</Button>
+							{/snippet}
+						</BitsDropdownMenu.Trigger>
+						<DropdownMenu.Content sideOffset={4}>
+							<DropdownMenu.RadioGroup
+								value={String(rateState)}
+								onValueChange={(v: string) => remote.changePlaybackRate(Number(v))}
+							>
+								{#each rateOptions as r (r)}
+									<DropdownMenu.RadioItem value={String(r)}>
+										{#snippet children({ checked })}
+											<span>{r === 1 ? 'Normal' : `${r}x`}</span>
+											{#if checked}
+												<Check class="ml-auto size-(--era-h-xs) text-muted" aria-hidden="true" />
+											{/if}
+										{/snippet}
+									</DropdownMenu.RadioItem>
+								{/each}
+							</DropdownMenu.RadioGroup>
+						</DropdownMenu.Content>
+					</DropdownMenu.Root>
+				{/if}
+
+				{#if showQualityMenu && !mobileMode}
+					<DropdownMenu.Root
+						onOpenChange={(open: boolean) => {
+							if (open) remote.pauseUserIdle();
+							else remote.resumeUserIdle();
+						}}
+					>
+						<BitsDropdownMenu.Trigger>
+							{#snippet child({ props })}
+								<Button icon aria-label="Quality" {...props}>
+									<Settings class="size-(--era-h-xs)" aria-hidden="true" />
+								</Button>
+							{/snippet}
+						</BitsDropdownMenu.Trigger>
+						<DropdownMenu.Content sideOffset={4}>
+							<DropdownMenu.RadioGroup
+								value={qualityValue}
+								onValueChange={(v: string) => changeQuality(v)}
+							>
+								<DropdownMenu.RadioItem value="auto">
+									{#snippet children({ checked })}
+										<span>Auto</span>
+										{#if checked}
+											<Check class="ml-auto size-(--era-h-xs) text-muted" aria-hidden="true" />
+										{/if}
+									{/snippet}
+								</DropdownMenu.RadioItem>
+								{#each qualityOptions as { q, index } (index)}
+									<DropdownMenu.RadioItem value={String(index)}>
+										{#snippet children({ checked })}
+											<span>{q.height}p</span>
+											{#if checked}
+												<Check class="ml-auto size-(--era-h-xs) text-muted" aria-hidden="true" />
+											{/if}
+										{/snippet}
+									</DropdownMenu.RadioItem>
+								{/each}
+							</DropdownMenu.RadioGroup>
+						</DropdownMenu.Content>
+					</DropdownMenu.Root>
+				{/if}
+
+				{#if showPip && canEnterPip && !mobileMode}
+					<Button
+						icon
+						aria-label="Picture-in-Picture"
+						onclick={(e: MouseEvent) => remote.togglePictureInPicture(e)}
+					>
+						{#if pipState}
+							<PictureInPicture2 class="size-(--era-h-xs)" aria-hidden="true" />
+						{:else}
+							<PictureInPicture class="size-(--era-h-xs)" aria-hidden="true" />
+						{/if}
+					</Button>
+				{/if}
+
+				{#if showFullscreen && canEnterFullscreen && !mobileMode}
+					<Button
+						icon
+						aria-label={fullscreenState ? 'Exit fullscreen' : 'Fullscreen'}
+						onclick={(e: MouseEvent) => remote.toggleFullscreen(FULLSCREEN_TARGET, e)}
+					>
+						{#if fullscreenState}
+							<Minimize class="size-(--era-h-xs)" aria-hidden="true" />
+						{:else}
+							<Maximize class="size-(--era-h-xs)" aria-hidden="true" />
+						{/if}
+					</Button>
+				{/if}
+			</Bar>
+		{/if}
+	</media-player>
+{/snippet}
+
+{#if showContextMenu && !mobileMode}
+	<ContextMenu.Root
+		onOpenChange={(open: boolean) => {
+			if (open) remote.pauseUserIdle();
+			else remote.resumeUserIdle();
+		}}
+	>
+		<BitsContextMenu.Trigger>
+			{#snippet child({ props: ctxProps }: { props: Record<string, unknown> })}
+				{@render rootMediaPlayer(ctxProps)}
+			{/snippet}
+		</BitsContextMenu.Trigger>
+		<ContextMenu.Content onOpenAutoFocus={(e: Event) => e.preventDefault()}>
+			<ContextMenu.Item onSelect={togglePlay}>
+				{#if ended}
+					<RotateCcw class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+				{:else if paused}
+					<Play class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+				{:else}
+					<Pause class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+				{/if}
+				<span>{playLabel}</span>
+			</ContextMenu.Item>
+
+			{#if showVolume && !mobileMode}
+				<ContextMenu.Item onSelect={(e: Event) => remote.toggleMuted(e)}>
+					{#if mutedState || volumeState === 0}
+						<VolumeX class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+					{:else if volumeState < 0.5}
+						<Volume1 class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+					{:else}
+						<Volume2 class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+					{/if}
+					<span>{muteLabel}</span>
+				</ContextMenu.Item>
+			{/if}
+
+			{#if showSpeed && !mobileMode}
+				<ContextMenu.Sub>
+					<ContextMenu.SubTrigger>
+						<Gauge class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+						<span class="flex-1">Speed</span>
+						<span class="ml-auto pl-(--era-gap) text-muted">
+							{rateState === 1 ? '1x' : `${rateState}x`}
+						</span>
+					</ContextMenu.SubTrigger>
+					<ContextMenu.SubContent>
+						<ContextMenu.RadioGroup
+							value={String(rateState)}
+							onValueChange={(v: string) => remote.changePlaybackRate(Number(v))}
+						>
+							{#each rateOptions as r (r)}
+								<ContextMenu.RadioItem value={String(r)}>
+									<span>{r === 1 ? 'Normal' : `${r}x`}</span>
+								</ContextMenu.RadioItem>
+							{/each}
+						</ContextMenu.RadioGroup>
+					</ContextMenu.SubContent>
+				</ContextMenu.Sub>
+			{/if}
+
+			{#if showQualityMenu && !mobileMode}
+				<ContextMenu.Sub>
+					<ContextMenu.SubTrigger>
+						<Settings class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+						<span class="flex-1">Quality</span>
+						<span class="ml-auto pl-(--era-gap) text-muted">{qualityHint}</span>
+					</ContextMenu.SubTrigger>
+					<ContextMenu.SubContent>
+						<ContextMenu.RadioGroup
+							value={qualityValue}
+							onValueChange={(v: string) => changeQuality(v)}
+						>
+							<ContextMenu.RadioItem value="auto">Auto</ContextMenu.RadioItem>
+							{#each qualityOptions as { q, index } (index)}
+								<ContextMenu.RadioItem value={String(index)}>{q.height}p</ContextMenu.RadioItem>
+							{/each}
+						</ContextMenu.RadioGroup>
+					</ContextMenu.SubContent>
+				</ContextMenu.Sub>
+			{/if}
+
+			{#if showPip && canEnterPip && !mobileMode}
+				<ContextMenu.Item onSelect={(e: Event) => remote.togglePictureInPicture(e)}>
+					{#if pipState}
+						<PictureInPicture2 class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+					{:else}
+						<PictureInPicture class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+					{/if}
+					<span>{pipState ? 'Exit picture-in-picture' : 'Picture-in-picture'}</span>
+				</ContextMenu.Item>
+			{/if}
+
+			{#if canEnterFullscreen}
+				<ContextMenu.Item onSelect={(e: Event) => remote.toggleFullscreen(FULLSCREEN_TARGET, e)}>
+					{#if fullscreenState}
+						<Minimize class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+					{:else}
+						<Maximize class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+					{/if}
+					<span>{fullscreenState ? 'Exit fullscreen' : 'Fullscreen'}</span>
+				</ContextMenu.Item>
+			{/if}
+
+			<ContextMenu.Separator />
+
+			<ContextMenu.Item onSelect={downloadVideo}>
+				<Download class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+				<span>Download video</span>
+			</ContextMenu.Item>
+		</ContextMenu.Content>
+	</ContextMenu.Root>
+{:else}
+	{@render rootMediaPlayer({})}
+{/if}
+
+<style>
+	media-player :global(media-outlet) {
+		display: block;
+		width: 100%;
+	}
+	media-player :global(media-outlet video) {
+		display: block;
+		width: 100%;
+		height: auto;
+	}
+	/* Hover keeps it open; `:has([data-active])` keeps it open while the
+	   bits-ui slider thumb is being dragged (its `data-active` is set on
+	   pointerdown and cleared on pointerup, even if the cursor strays
+	   outside the cluster). Plain CSS rather than Tailwind variants on the
+	   button sidesteps cascade ambiguity with `rounded-(--era-rd-md)`. */
+	:global([data-volume-cluster] [data-volume-sleeve]) {
+		visibility: hidden;
+	}
+	:global([data-volume-cluster]:hover [data-volume-sleeve]),
+	:global([data-volume-cluster]:has([data-active]) [data-volume-sleeve]) {
+		visibility: visible;
+	}
+	:global([data-volume-cluster]:hover [data-mute-button]),
+	:global([data-volume-cluster]:has([data-active]) [data-mute-button]) {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+		background-color: var(--color-hover);
+		color: var(--color-bright);
+	}
+</style>