@joewinke/jatui 0.34.2 → 0.35.0

package/dist/components/ListenControl.svelte

@@ -0,0 +1,1064 @@
+<script module lang="ts">
+	// Public type surface — re-exported so `import type … from 'jatui'` works
+	// without knowing the internals path (the VideoPlayer pattern).
+	export type {
+		ListenSegment,
+		ListenChapter,
+		ListenVoice,
+		ListenSegmentPage,
+		ListenSegmentSource,
+		ListenStatus,
+		ListenApi
+	} from '../listen/types';
+</script>
+
+<script lang="ts">
+	/**
+	 * ListenControl — "listen to this page" as one compact control.
+	 *
+	 * A small pill that expands into a playback bar: play/pause, −15s/+15s and
+	 * previous/next sentence, speed (0.75–2×), a voice picker, a document-wide
+	 * progress bar with chapter/section ticks, time, close. Built for hosts
+	 * that synthesize audio per sentence (TTS): the host supplies an async
+	 * SEGMENT SOURCE — sentences/paragraphs with ids → audio URLs — and the
+	 * player starts on the first chunk while the rest synthesizes, hatching
+	 * the not-yet-real tail of the progress bar. Every segment boundary fires
+	 * `onSegmentChange(id)` so the host can highlight + scroll-follow.
+	 *
+	 * ── One timeline across per-sentence files ──────────────────────────────
+	 * A "listen" player is a playlist, not one media element. Each segment has
+	 * its own URL, so the engine walks segments sequentially through ONE
+	 * hidden `<audio>` element and reports ONE document-wide time: the
+	 * elapsed clock, the progress fill, the ticks, a ±15s skip that crosses a
+	 * boundary and a seek from the slider all map through `buildTimeline`'s
+	 * offsets (listen/segments.ts) — the same one-axis discipline as the
+	 * VideoPlayer band. Durations the host knows (`durationSec`, TTS usually
+	 * reports them) lay the timeline out immediately; unknown ones are
+	 * measured on load and ESTIMATED until then, self-correcting as they land.
+	 *
+	 * The transport row borrows VideoPlayer's `kind="audio"` / `transport=
+	 * "band"` shape (round primary play, ghost transport buttons, tabular
+	 * clock) and reuses its pure time formatting (`video/time.ts`); the
+	 * per-segment playlist engine is what doesn't fit inside VideoPlayer and
+	 * lives here instead.
+	 *
+	 * ── Media Session ───────────────────────────────────────────────────────
+	 * Lock-screen/headset/OS controls are wired while open: metadata (the
+	 * `title` prop + current voice), play/pause, previous/next track (the
+	 * sentence skip), seekbackward/seekforward/seekto, and ONE document-wide
+	 * position state. Feature-detected end to end — nothing runs where the
+	 * API is missing (listen/mediaSession.ts).
+	 *
+	 * ── Scope honesty ───────────────────────────────────────────────────────
+	 * The keyboard map (Space/K, ←/→ sentences, Shift+←/→ ±15s, [ / ] speed,
+	 * Escape) fires only while focus is inside the player — a library
+	 * component must not hijack the host page's keys. Hosts wanting global
+	 * keys bind `api` and wire their own handler with the same actions.
+	 *
+	 * Theming is token-only (DaisyUI semantic vars); motion is reduced-motion
+	 * aware; everything is labelled; on narrow screens the expanded bar
+	 * becomes a fixed sticky mini-bar at the bottom.
+	 */
+
+	import { onMount, tick, untrack, type Snippet } from 'svelte';
+	import { formatTime } from '../video/time';
+	import {
+		buildTimeline,
+		chapterTicks,
+		activeChapter,
+		isPlayable,
+		iterateSource,
+		jumpSentence,
+		mergePages,
+		pendingTailStart,
+		seekTo
+	} from '../listen/segments';
+	import { LISTEN_KEYS, isNativeControlTarget, resolveListenKey } from '../listen/keys';
+	import {
+		clampSpeed,
+		formatListenSpeed,
+		LISTEN_SPEEDS,
+		loadListenPrefs,
+		localListenStore,
+		saveListenPrefs,
+		stepSpeed
+	} from '../listen/prefs';
+	import {
+		clearListenSession,
+		getMediaSession,
+		setListenActions,
+		setListenMetadata,
+		updateListenPosition
+	} from '../listen/mediaSession';
+	import type {
+		ListenApi,
+		ListenChapter,
+		ListenSegment,
+		ListenSegmentSource,
+		ListenStatus,
+		ListenVoice
+	} from '../listen/types';
+
+	interface Props {
+		/**
+		 * Host-supplied async segment source (sentences/paragraphs with ids →
+		 * audio). Called per voice; pages arrive as chunks synthesize and are
+		 * merged by id, so a later page can fill a segment's `url` in late.
+		 * Pass a STABLE reference — a fresh inline arrow re-runs the source.
+		 */
+		source: ListenSegmentSource;
+		/** The voices the host offers. Empty ⇒ no picker (one implicit voice, ''). */
+		voices?: ListenVoice[];
+		/** The picked voice (bindable). Default: the first voice, persisted to storage. */
+		voiceId?: string;
+		/** Sections for the progress ticks + the caption's chapter label. */
+		chapters?: ListenChapter[];
+		/** Document title — lock-screen metadata + the bar's aria-label. */
+		title?: string;
+		/** The pill's label. Default `Listen`. */
+		triggerLabel?: string;
+		/** Expanded state (bindable). */
+		open?: boolean;
+		/** Load the source on mount instead of waiting for the first open (TTS cost is the host's call). */
+		preload?: boolean;
+		/** Estimate for a segment whose duration isn't known yet. Default 3s. */
+		estimateSec?: number;
+		/** localStorage key prefix for speed/voice. Default `jatui.listen` (→ `jatui.listen:prefs`). */
+		storageKey?: string;
+		/** Segment-boundary hook — host-side highlight + scroll-follow. */
+		onSegmentChange?: (id: string | null, segment: ListenSegment | null) => void;
+		onOpenChange?: (open: boolean) => void;
+		/** Instance API for hosts wiring their own global keys / external controls. */
+		api?: ListenApi;
+		class?: string;
+		/** Custom trigger content (replaces the headphones+label default). */
+		children?: Snippet;
+	}
+
+	let {
+		source,
+		voices = [],
+		voiceId = $bindable(''),
+		chapters = [],
+		title = '',
+		triggerLabel = 'Listen',
+		open = $bindable(false),
+		preload = false,
+		estimateSec = 3,
+		storageKey = 'jatui.listen',
+		onSegmentChange,
+		onOpenChange,
+		api = $bindable(),
+		class: className = '',
+		children
+	}: Props = $props();
+
+	const instanceId = $props.id();
+	const uid = `listen-${instanceId}`;
+
+	// ── Engine state ─────────────────────────────────────────────────────────
+	let audioEl: HTMLAudioElement | null = $state(null);
+	let playBtnEl: HTMLButtonElement | null = $state(null);
+	let triggerEl: HTMLButtonElement | null = $state(null);
+	let segments = $state<ListenSegment[]>([]);
+	let sourceError = $state('');
+	let currentIdx = $state(0);
+	let curTime = $state(0); // position inside the current segment
+	let loadedId = $state<string | null>(null); // segment id the audio element holds
+	let wantPlay = $state(false); // the user's play intent — survives a wait for audio
+	let status = $state<ListenStatus>('idle');
+	let endedFlag = $state(false); // playback reached the end of the document
+	let speed = $state(1);
+	let prefsHydrated = false;
+
+	// Plain (non-reactive) engine bookkeeping.
+	let loadedSource: ListenSegmentSource | null = null;
+	let loadedVoice: string | null = null;
+	let sourceToken = 0;
+	let pendingSeekInto = 0;
+	let pendingResumeId: string | null = null;
+	let lastEmittedId: string | null = null;
+	let msBound = false;
+	let lastPosWrite = 0;
+
+	// ── Derived ──────────────────────────────────────────────────────────────
+	const activeVoiceId = $derived(voiceId || voices[0]?.id || '');
+	const activeVoiceLabel = $derived(voices.find((v) => v.id === activeVoiceId)?.label ?? '');
+	const timeline = $derived(buildTimeline(segments, estimateSec));
+	const total = $derived(timeline.total);
+	const useHours = $derived(total >= 3600);
+	const currentSegment = $derived(segments[currentIdx] ?? null);
+	const elapsed = $derived((timeline.offsets[currentIdx] ?? 0) + curTime);
+	const currentPlayable = $derived(isPlayable(currentSegment));
+	const ticks = $derived(chapterTicks(chapters, segments, timeline));
+	const activeCh = $derived(activeChapter(chapters, segments, timeline, elapsed));
+	const fillPct = $derived(total > 0 ? Math.min(100, Math.max(0, (elapsed / total) * 100)) : 0);
+	const pendingStartIdx = $derived(pendingTailStart(segments));
+	const pendingStartPct = $derived(
+		pendingStartIdx >= 0 && total > 0 ? Math.min(100, (timeline.offsets[pendingStartIdx] / total) * 100) : -1
+	);
+	const caption = $derived(typeof currentSegment?.text === 'string' ? currentSegment.text : '');
+
+	function speedLabel(): string {
+		return formatListenSpeed(speed);
+	}
+
+	// ── Segment emission (the highlight/scroll-follow hook) ─────────────────
+	$effect(() => {
+		if (!open) return;
+		const seg = endedFlag ? null : (segments[currentIdx] ?? null);
+		const id = seg?.id ?? null;
+		if (id === lastEmittedId) return;
+		lastEmittedId = id;
+		const cb = onSegmentChange;
+		untrack(() => cb?.(id, seg ?? null));
+	});
+
+	// ── Source loading: one voice at a time, pages merged by id ─────────────
+	$effect(() => {
+		const src = source;
+		const vid = activeVoiceId;
+		if (!src || (!open && !preload)) return;
+		if (loadedSource === src && loadedVoice === vid) return; // already loading/loaded
+		// A voice CHANGE keeps the listener's place: remember the current id
+		// and re-find it in the fresh list as pages arrive.
+		const keepId = loadedVoice != null && loadedVoice !== vid ? (segments[currentIdx]?.id ?? null) : null;
+		loadedSource = src;
+		loadedVoice = vid;
+		const token = ++sourceToken;
+		segments = [];
+		sourceError = '';
+		loadedId = null;
+		currentIdx = 0;
+		curTime = 0;
+		pendingResumeId = keepId;
+		void runSource(src, vid, token);
+	});
+
+	async function runSource(src: ListenSegmentSource, vid: string, token: number): Promise<void> {
+		try {
+			for await (const page of iterateSource(src, vid)) {
+				if (token !== sourceToken) return; // superseded (voice change / new source)
+				segments = mergePages(segments, page);
+				if (pendingResumeId != null) {
+					const i = segments.findIndex((s) => s.id === pendingResumeId);
+					if (i >= 0) {
+						currentIdx = i;
+						pendingResumeId = null;
+					}
+				}
+			}
+		} catch (err) {
+			if (token === sourceToken) sourceError = err instanceof Error ? err.message : String(err);
+		}
+	}
+
+	// ── The one audio element ────────────────────────────────────────────────
+	// Loader: keep the element's src in step with the current segment. Fires
+	// again whenever segments mutate (a late url arrives) or the index moves.
+	$effect(() => {
+		const a = audioEl;
+		if (!a || !open) return;
+		const seg = segments[currentIdx];
+		if (!seg || !isPlayable(seg)) {
+			if (wantPlay) status = 'buffering';
+			return;
+		}
+		if (loadedId === seg.id) return;
+		loadedId = seg.id;
+		curTime = 0;
+		a.src = seg.url as string;
+		a.playbackRate = speed;
+		if (wantPlay) {
+			status = 'buffering';
+			void tryPlay();
+		}
+	});
+
+	// Play intent: when the user wants playback but the current segment's
+	// audio is still synthesizing, start the moment it lands.
+	$effect(() => {
+		const a = audioEl;
+		if (!a || !wantPlay || !open) return;
+		const seg = segments[currentIdx];
+		if (!seg || !isPlayable(seg)) {
+			status = 'buffering';
+			return;
+		}
+		if (loadedId === seg.id && a.paused) void tryPlay();
+	});
+
+	// Speed follows the human's knob on every (re)load.
+	$effect(() => {
+		const a = audioEl;
+		const s = speed;
+		if (a && loadedId != null) a.playbackRate = s;
+	});
+
+	async function tryPlay(): Promise<void> {
+		const a = audioEl;
+		if (!a) return;
+		try {
+			await a.play();
+			// onplay sets status; keep it honest if the promise raced ahead.
+			if (!a.paused) status = 'playing';
+		} catch (err) {
+			// AbortError: a newer load superseded this play — ignore.
+			if ((err as DOMException)?.name === 'AbortError') return;
+			// NotAllowedError etc: autoplay refused — stand down, keep the bar.
+			wantPlay = false;
+			status = 'paused';
+		}
+	}
+
+	function onAudioPlay(): void {
+		status = 'playing';
+		endedFlag = false;
+	}
+	function onAudioPause(): void {
+		// A natural end also pauses; onended (right after) says 'ended'.
+		status = endedFlag ? 'ended' : 'paused';
+	}
+	function onAudioWaiting(): void {
+		if (wantPlay) status = 'buffering';
+	}
+	function onAudioEnded(): void {
+		if (currentIdx < segments.length - 1) {
+			goTo(currentIdx + 1, 0);
+		} else {
+			wantPlay = false;
+			endedFlag = true;
+			status = 'ended';
+		}
+	}
+	function onAudioTimeUpdate(): void {
+		const a = audioEl;
+		if (!a) return;
+		curTime = a.currentTime;
+		// One document-wide position for the lock screen, throttled to 1 Hz.
+		const now = Date.now();
+		if (open && now - lastPosWrite > 1000) {
+			lastPosWrite = now;
+			updateListenPosition(getMediaSession(), { duration: total, position: elapsed, playbackRate: speed });
+		}
+	}
+	function onAudioLoadedMetadata(): void {
+		const a = audioEl;
+		if (!a) return;
+		const seg = segments[currentIdx];
+		// Measure an unknown duration — the timeline self-corrects.
+		if (seg && seg.durationSec == null && Number.isFinite(a.duration) && a.duration > 0) {
+			segments[currentIdx] = { ...seg, durationSec: a.duration };
+		}
+		if (pendingSeekInto > 0 && Number.isFinite(a.duration) && a.duration > 0) {
+			a.currentTime = Math.min(pendingSeekInto, a.duration);
+			curTime = a.currentTime;
+		}
+		pendingSeekInto = 0;
+	}
+	function onAudioError(): void {
+		// A broken segment must not strand the listener: skip onward.
+		if (wantPlay && currentIdx < segments.length - 1) {
+			goTo(currentIdx + 1, 0);
+		} else if (wantPlay) {
+			wantPlay = false;
+			status = 'paused';
+		}
+	}
+
+	// ── Transport ────────────────────────────────────────────────────────────
+	function playIntent(): void {
+		if (endedFlag) {
+			endedFlag = false;
+			goTo(0, 0);
+		}
+		wantPlay = true;
+	}
+	function doPause(): void {
+		wantPlay = false;
+		audioEl?.pause();
+	}
+	function toggle(): void {
+		if (wantPlay) doPause();
+		else playIntent();
+	}
+	function next(): void {
+		if (currentIdx < segments.length - 1) goTo(currentIdx + 1, 0);
+	}
+	function prev(): void {
+		const target = jumpSentence(currentIdx, curTime, segments.length, -1);
+		if (target == null) return;
+		goTo(target, 0);
+	}
+	/** ±delta seconds on the ONE timeline — crosses segment boundaries. */
+	function skip(deltaSec: number): void {
+		if (!Number.isFinite(deltaSec) || deltaSec === 0) return;
+		const at = seekTo(elapsed + deltaSec, timeline);
+		if (at) goTo(at.index, at.into);
+	}
+	function seekToSec(t: number): void {
+		if (!Number.isFinite(t)) return;
+		const at = seekTo(t, timeline);
+		if (at) goTo(at.index, at.into);
+	}
+	function goTo(idx: number, into: number): void {
+		if (idx !== currentIdx) {
+			currentIdx = idx;
+			pendingSeekInto = into;
+			curTime = 0;
+			seekCurrentNow(into); // usually a no-op (fresh load); cheap to try
+		} else {
+			pendingSeekInto = into;
+			seekCurrentNow(into);
+		}
+	}
+	function seekCurrentNow(into: number): void {
+		const a = audioEl;
+		const seg = segments[currentIdx];
+		if (!a || !seg || loadedId !== seg.id) return; // fresh load — loadedmetadata applies it
+		if (Number.isFinite(a.duration) && a.duration > 0) {
+			a.currentTime = Math.min(into, a.duration);
+			curTime = a.currentTime;
+		}
+	}
+	function onSeekInput(e: Event): void {
+		const v = Number((e.currentTarget as HTMLInputElement).value);
+		if (!Number.isFinite(v)) return;
+		seekToSec(v);
+	}
+	function setSpeed(next: number): void {
+		speed = clampSpeed(next);
+	}
+	function cycleSpeed(): void {
+		const i = LISTEN_SPEEDS.indexOf(clampSpeed(speed));
+		setSpeed(i === -1 ? 1 : LISTEN_SPEEDS[(i + 1) % LISTEN_SPEEDS.length]);
+	}
+
+	// ── Open / close + focus ─────────────────────────────────────────────────
+	async function openUp(): Promise<void> {
+		if (open) return;
+		open = true;
+		onOpenChange?.(true);
+		await tick();
+		playBtnEl?.focus();
+	}
+	function close(): void {
+		if (!open) return;
+		doPause();
+		open = false;
+		onOpenChange?.(false);
+		clearListenSession(getMediaSession());
+		msBound = false;
+		untrack(() => triggerEl?.focus());
+	}
+
+	// ── Media Session ────────────────────────────────────────────────────────
+	$effect(() => {
+		if (!open) return;
+		const session = getMediaSession();
+		if (!session || msBound) return;
+		msBound = true;
+		setListenActions(session, {
+			play: () => playIntent(),
+			pause: () => doPause(),
+			previoustrack: () => prev(),
+			nexttrack: () => next(),
+			seekbackward: (d) => skip(-(d?.seekOffset ?? 15)),
+			seekforward: (d) => skip(d?.seekOffset ?? 15),
+			seekto: (d) => {
+				if (d?.seekTime != null) seekToSec(d.seekTime);
+			}
+		});
+	});
+	$effect(() => {
+		if (!open) return;
+		const session = getMediaSession();
+		const meta = { title: title || triggerLabel, artist: activeVoiceLabel, album: 'Listen' };
+		untrack(() => setListenMetadata(session, meta));
+	});
+	// A rate change rewrites position state immediately (the throttle in
+	// ontimeupdate would otherwise let the lock screen drift).
+	$effect(() => {
+		const s = speed;
+		if (!open) return;
+		updateListenPosition(getMediaSession(), { duration: total, position: elapsed, playbackRate: s });
+	});
+
+	// ── Keyboard — scoped to the player, never the host page ────────────────
+	function onBarKeydown(e: KeyboardEvent): void {
+		if (e.key === 'Escape') {
+			e.stopPropagation();
+			close();
+			return;
+		}
+		if (isNativeControlTarget(e.target)) return; // buttons/range/select own their keys
+		const action = resolveListenKey(e);
+		if (!action) return;
+		e.preventDefault();
+		applyAction(action);
+	}
+	function applyAction(action: ReturnType<typeof resolveListenKey>): void {
+		switch (action) {
+			case 'toggle':
+				toggle();
+				break;
+			case 'prev':
+				prev();
+				break;
+			case 'next':
+				next();
+				break;
+			case 'back':
+				skip(-15);
+				break;
+			case 'forward':
+				skip(15);
+				break;
+			case 'slower':
+				setSpeed(stepSpeed(speed, -1));
+				break;
+			case 'faster':
+				setSpeed(stepSpeed(speed, 1));
+				break;
+			default:
+				break;
+		}
+	}
+
+	// ── Prefs: speed + voice in THIS browser's localStorage ─────────────────
+	onMount(() => {
+		const stored = loadListenPrefs(localListenStore(), `${storageKey}:prefs`);
+		if (stored) {
+			speed = clampSpeed(stored.speed);
+			if (stored.voiceId && voices.some((v) => v.id === stored.voiceId)) voiceId = stored.voiceId;
+		}
+		prefsHydrated = true;
+	});
+	$effect(() => {
+		const s = speed;
+		const v = activeVoiceId;
+		if (!prefsHydrated) return;
+		saveListenPrefs(localListenStore(), `${storageKey}:prefs`, { speed: s, voiceId: v || null });
+	});
+
+	// ── Instance API ─────────────────────────────────────────────────────────
+	const apiImpl: ListenApi = {
+		play: () => playIntent(),
+		pause: () => doPause(),
+		toggle: () => toggle(),
+		next: () => next(),
+		prev: () => prev(),
+		skip: (d) => skip(d),
+		seekTo: (t) => seekToSec(t),
+		open: () => void openUp(),
+		close: () => close(),
+		get status() {
+			return status;
+		},
+		get currentId() {
+			return endedFlag ? null : (segments[currentIdx]?.id ?? null);
+		}
+	};
+	$effect(() => {
+		api = apiImpl;
+	});
+</script>
+
+<div class="listen {className}">
+	{#if !open}
+		<button
+			id="{uid}-trigger"
+			type="button"
+			class="lc-trigger"
+			aria-expanded="false"
+			title="Listen to this page"
+			onclick={openUp}
+			bind:this={triggerEl}
+		>
+			{#if status === 'playing'}
+				<span class="lc-eq" aria-hidden="true"><span></span><span></span><span></span></span>
+			{/if}
+			{#if children}
+				{@render children()}
+			{:else}
+				<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+					<path d="M4 15v-2a8 8 0 0 1 16 0v2" />
+					<rect x="2.5" y="14" width="4.5" height="7" rx="1.8" />
+					<rect x="17" y="14" width="4.5" height="7" rx="1.8" />
+				</svg>
+				<span class="lc-trigger-label">{triggerLabel}</span>
+			{/if}
+		</button>
+	{:else}
+		<section
+			class="lc-bar"
+			role="region"
+			aria-label="Listen to this page"
+			onkeydown={onBarKeydown}
+		>
+			<button
+				type="button"
+				class="lc-play"
+				aria-label={wantPlay && !endedFlag ? 'Pause' : 'Play'}
+				title="{wantPlay && !endedFlag ? 'Pause' : 'Play'} · Space"
+				onclick={toggle}
+				bind:this={playBtnEl}
+			>
+				{#if wantPlay && !endedFlag}
+					<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+						<path d="M7 5h3.5v14H7zM13.5 5H17v14h-3.5z" fill="currentColor" />
+					</svg>
+				{:else}
+					<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+						<path d="M8 5.5v13l10.5-6.5z" fill="currentColor" />
+					</svg>
+				{/if}
+			</button>
+
+			<button type="button" class="lc-tbtn" aria-label="Previous sentence" title="Previous sentence · ←" onclick={prev}>
+				<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">
+					<path d="M19 5.5v13L9.5 12z" fill="currentColor" />
+					<path d="M6 5.5v13" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+				</svg>
+			</button>
+			<button type="button" class="lc-tbtn lc-skip" aria-label="Back 15 seconds" title="Back 15s · Shift+←" onclick={() => skip(-15)}>
+				<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+					<path d="M11.5 4.5V2L7 5.5l4.5 3.5V6.5a6.5 6.5 0 1 1-6.5 6.5" />
+					<text x="12.7" y="17.8" font-size="7" font-weight="700" text-anchor="middle" fill="currentColor" stroke="none">15</text>
+				</svg>
+			</button>
+			<button type="button" class="lc-tbtn lc-skip" aria-label="Forward 15 seconds" title="Forward 15s · Shift+→" onclick={() => skip(15)}>
+				<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+					<path d="M12.5 4.5V2l4.5 3.5-4.5 3.5V6.5a6.5 6.5 0 1 0 6.5 6.5" />
+					<text x="11.3" y="17.8" font-size="7" font-weight="700" text-anchor="middle" fill="currentColor" stroke="none">15</text>
+				</svg>
+			</button>
+			<button type="button" class="lc-tbtn" aria-label="Next sentence" title="Next sentence · →" onclick={next}>
+				<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">
+					<path d="M5 5.5v13L14.5 12z" fill="currentColor" />
+					<path d="M18 5.5v13" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+				</svg>
+			</button>
+
+			<div class="lc-body">
+				{#if caption || activeCh || sourceError}
+					<div class="lc-caption">
+						{#if sourceError}
+							<span class="lc-caption-text lc-error" role="status">Couldn't load audio — {sourceError}</span>
+						{:else}
+							{#if activeCh}<span class="lc-chapter">{activeCh.label}</span>{/if}
+							{#if caption}<span class="lc-caption-text">{caption}</span>{/if}
+						{/if}
+					</div>
+				{/if}
+				<div class="lc-timerow">
+					<div class="lc-progress">
+						<div class="lc-track" aria-hidden="true">
+							<div class="lc-fill" style:left="0" style:width="{fillPct}%"></div>
+							{#if pendingStartPct >= 0}
+								<div class="lc-pending" style:left="{pendingStartPct}%"></div>
+							{/if}
+							{#each ticks as t (t.id)}
+								<span class="lc-tick" style:left="{t.frac}%" title={t.label}></span>
+							{/each}
+							<span class="lc-head" style:left="{fillPct}%"></span>
+						</div>
+						<input
+							type="range"
+							class="lc-range"
+							min="0"
+							max={total > 0 ? total : 1}
+							step="0.05"
+							value={elapsed}
+							disabled={total <= 0}
+							aria-label="Playback position"
+							aria-valuetext="{formatTime(elapsed, useHours)} of {formatTime(total, useHours)}"
+							oninput={onSeekInput}
+						/>
+					</div>
+					<span class="lc-clock">
+						<span class="lc-clock-now">{formatTime(elapsed, useHours)}</span>
+						{#if total > 0}
+							<span class="lc-clock-sep" aria-hidden="true">/</span>
+							<span>{formatTime(total, useHours)}</span>
+						{/if}
+					</span>
+				</div>
+			</div>
+
+			<div class="lc-side">
+				{#if voices.length > 1}
+					<label class="lc-voice">
+						<span class="lc-sr">Voice</span>
+						<select class="select select-sm select-bordered lc-voice-select" bind:value={voiceId} aria-label="Voice">
+							{#each voices as v (v.id)}
+								<option value={v.id}>{v.label}</option>
+							{/each}
+						</select>
+					</label>
+				{/if}
+				<button
+					type="button"
+					class="lc-tbtn lc-speed"
+					aria-label="Playback speed {speedLabel()}"
+					title="Speed · click to change, [ and ] step"
+					onclick={cycleSpeed}
+				>
+					{speedLabel()}
+				</button>
+				<button type="button" class="lc-tbtn lc-close" aria-label="Close player" title="Close · Esc" onclick={close}>
+					<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+						<path d="M6 6l12 12M18 6L6 18" />
+					</svg>
+				</button>
+			</div>
+
+			<span class="lc-sr" role="status" aria-live="polite">
+				{status === 'buffering' ? 'Loading audio…' : status === 'ended' ? 'Finished' : ''}
+			</span>
+		</section>
+	{/if}
+
+	<!-- The engine's one media element — lives outside the open/close markup
+	     so closing the bar never unmounts (and thus never reloads) it. -->
+	<audio
+		class="lc-audio"
+		preload="auto"
+		bind:this={audioEl}
+		onplay={onAudioPlay}
+		onpause={onAudioPause}
+		onended={onAudioEnded}
+		ontimeupdate={onAudioTimeUpdate}
+		onloadedmetadata={onAudioLoadedMetadata}
+		onwaiting={onAudioWaiting}
+		onerror={onAudioError}
+	></audio>
+</div>
+
+<style>
+	.listen {
+		--lc-chrome: color-mix(in oklch, var(--color-base-content) 72%, transparent);
+	}
+
+	/* ── Trigger pill ──────────────────────────────────────────────────────── */
+	.lc-trigger {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		padding: 0.3rem 0.7rem;
+		border: 1px solid color-mix(in oklch, var(--color-base-content) 15%, transparent);
+		border-radius: 999px;
+		background: var(--color-base-100);
+		color: var(--lc-chrome);
+		font-size: 0.8rem;
+		font-weight: 500;
+		line-height: 1;
+		cursor: pointer;
+		transition: color var(--motion-fast, 150ms) var(--motion-glide, ease-out),
+			border-color var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+	.lc-trigger:hover {
+		color: var(--color-base-content);
+		border-color: color-mix(in oklch, var(--color-primary) 45%, transparent);
+	}
+	.lc-trigger:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 2px;
+	}
+
+	/* Playing indicator — three tiny bars, reduced-motion stays static. */
+	.lc-eq {
+		display: inline-flex;
+		align-items: flex-end;
+		gap: 1.5px;
+		height: 0.7rem;
+	}
+	.lc-eq span {
+		width: 2.5px;
+		background: var(--color-primary);
+		border-radius: 1px;
+		animation: lc-eq 900ms ease-in-out infinite;
+	}
+	.lc-eq span:nth-child(1) {
+		height: 60%;
+		animation-delay: -300ms;
+	}
+	.lc-eq span:nth-child(2) {
+		height: 100%;
+		animation-delay: -600ms;
+	}
+	.lc-eq span:nth-child(3) {
+		height: 75%;
+	}
+	@keyframes lc-eq {
+		0%,
+		100% {
+			transform: scaleY(0.45);
+		}
+		50% {
+			transform: scaleY(1);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.lc-eq span {
+			animation: none;
+			transform: none;
+		}
+	}
+
+	/* ── The playback bar ──────────────────────────────────────────────────── */
+	.lc-bar {
+		position: sticky;
+		top: 0;
+		z-index: 40;
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+		padding: 0.4rem 0.55rem;
+		background: var(--color-base-100);
+		border: 1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent);
+		border-radius: var(--jatui-radius-box, 0.75rem);
+		box-shadow: 0 4px 16px color-mix(in oklch, var(--color-base-content) 10%, transparent);
+		font-size: 0.78rem;
+	}
+
+	.lc-play {
+		display: inline-grid;
+		place-items: center;
+		width: 2rem;
+		height: 2rem;
+		flex: none;
+		border: none;
+		border-radius: 999px;
+		background: var(--color-primary);
+		color: var(--color-primary-content);
+		cursor: pointer;
+		transition: transform var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+	.lc-play:hover {
+		transform: scale(1.06);
+	}
+	.lc-play:active {
+		transform: scale(0.96);
+	}
+
+	.lc-tbtn {
+		display: inline-grid;
+		place-items: center;
+		min-width: 1.75rem;
+		height: 1.75rem;
+		padding: 0 0.15rem;
+		border: none;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		background: none;
+		color: var(--lc-chrome);
+		font-size: inherit;
+		font-variant-numeric: tabular-nums;
+		cursor: pointer;
+	}
+	.lc-tbtn:hover {
+		color: var(--color-base-content);
+		background: color-mix(in oklch, var(--color-base-content) 8%, transparent);
+	}
+	.lc-play:focus-visible,
+	.lc-tbtn:focus-visible,
+	.lc-voice-select:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 2px;
+	}
+
+	.lc-body {
+		display: flex;
+		flex-direction: column;
+		gap: 0.15rem;
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+
+	.lc-caption {
+		display: flex;
+		align-items: baseline;
+		gap: 0.5rem;
+		min-width: 0;
+		font-size: 0.72rem;
+		line-height: 1.35;
+	}
+	.lc-chapter {
+		flex: none;
+		padding: 0.05rem 0.4rem;
+		border-radius: 999px;
+		background: color-mix(in oklch, var(--color-primary) 14%, transparent);
+		color: var(--color-primary);
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		font-size: 0.62rem;
+	}
+	.lc-caption-text {
+		color: var(--lc-chrome);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		min-width: 0;
+	}
+	.lc-error {
+		color: var(--color-error);
+	}
+
+	.lc-timerow {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		min-width: 0;
+	}
+
+	/* ── Progress: a native range for keyboard + AT, painted track behind ──── */
+	.lc-progress {
+		position: relative;
+		flex: 1 1 auto;
+		height: 1rem;
+		min-width: 4rem;
+	}
+	.lc-progress:has(.lc-range:focus-visible) {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 2px;
+		border-radius: 4px;
+	}
+	.lc-track {
+		position: absolute;
+		inset: 0.4rem 0;
+		border-radius: 999px;
+		background: color-mix(in oklch, var(--color-base-content) 14%, transparent);
+		overflow: hidden;
+	}
+	.lc-fill {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		background: var(--color-primary);
+	}
+	.lc-pending {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		background: repeating-linear-gradient(
+			-45deg,
+			transparent 0 4px,
+			color-mix(in oklch, var(--color-base-content) 10%, transparent) 4px 8px
+		);
+	}
+	.lc-tick {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: 2px;
+		background: color-mix(in oklch, var(--color-base-100) 75%, var(--color-base-content));
+	}
+	.lc-head {
+		position: absolute;
+		top: 50%;
+		width: 0.65rem;
+		height: 0.65rem;
+		border-radius: 999px;
+		background: var(--color-primary);
+		border: 2px solid var(--color-base-100);
+		transform: translate(-50%, -50%);
+	}
+	.lc-range {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		margin: 0;
+		appearance: none;
+		-webkit-appearance: none;
+		background: transparent;
+		opacity: 0;
+		cursor: pointer;
+	}
+	.lc-range::-webkit-slider-thumb {
+		appearance: none;
+		width: 1rem;
+		height: 1rem;
+	}
+
+	.lc-clock {
+		display: inline-flex;
+		gap: 0.3em;
+		flex: none;
+		white-space: nowrap;
+		font-variant-numeric: tabular-nums;
+	}
+	.lc-clock-now {
+		color: var(--color-base-content);
+		font-weight: 600;
+	}
+	.lc-clock-sep {
+		opacity: 0.5;
+	}
+
+	.lc-side {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		flex: none;
+	}
+	.lc-voice-select {
+		max-width: 9rem;
+		height: 1.75rem;
+		min-height: 1.75rem;
+		font-size: 0.72rem;
+	}
+	.lc-speed {
+		min-width: 2.4rem;
+		justify-items: center;
+	}
+	.lc-close {
+		color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
+	}
+
+	.lc-sr {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0 0 0 0);
+		white-space: nowrap;
+		border: 0;
+	}
+	.lc-voice .lc-sr {
+		position: absolute;
+	}
+
+	.lc-audio {
+		display: none;
+	}
+
+	/* ── Mobile: the bar becomes a fixed sticky mini-bar ───────────────────── */
+	@media (max-width: 639px) {
+		.lc-bar {
+			position: fixed;
+			top: auto;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			z-index: 50;
+			border-radius: var(--jatui-radius-box, 0.75rem) var(--jatui-radius-box, 0.75rem) 0 0;
+			border-bottom: none;
+			padding-bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px));
+			gap: 0.3rem;
+		}
+		.lc-skip,
+		.lc-voice,
+		.lc-caption {
+			display: none;
+		}
+		.lc-play {
+			width: 2.4rem;
+			height: 2.4rem;
+		}
+	}
+</style>