From 034e670795efeff2ab1a71a0bb58356d03028bdd Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Wed, 4 Mar 2026 15:34:56 +0500
Subject: [PATCH] feat(ui): persistent cross-navigation audio player with
 expanded controls

- Add audio.svelte.ts: module singleton AudioStore (Svelte 5 runes) with
  slug/chapter/title metadata, status, progress, playback state, and
  toggleRequest/seekRequest signals for layout<->audio element communication
- Rewrite AudioPlayer.svelte as a store controller: no <audio> element owned;
  drives audioStore for presign->generate->play flow; shows inline controls
  when current chapter is active, 'Now playing / Load this chapter' banner
  when a different chapter is playing
- Update +layout.svelte: single persistent <audio> outside {#key} block so
  it never unmounts on navigation; effects to load URL, sync speed, handle
  toggle/seek requests; fixed bottom mini-player bar with seek, skip 15s/30s,
  speed cycle, go-to-chapter link, dismiss; pb-24 padding when active
- Pass chapterTitle and bookTitle from chapter page to AudioPlayer
---
 ui/src/lib/audio.svelte.ts                    |  60 ++++
 ui/src/lib/components/AudioPlayer.svelte      | 331 +++++++++---------
 ui/src/routes/+layout.svelte                  | 250 ++++++++++++-
 .../books/[slug]/chapters/[n]/+page.svelte    |   7 +-
 4 files changed, 486 insertions(+), 162 deletions(-)
 create mode 100644 ui/src/lib/audio.svelte.ts

diff --git a/ui/src/lib/audio.svelte.ts b/ui/src/lib/audio.svelte.ts
new file mode 100644
index 0000000..2fce32e
--- /dev/null
+++ b/ui/src/lib/audio.svelte.ts
@@ -0,0 +1,60 @@
+/**
+ * Global audio player state for libnovel.
+ *
+ * A single shared instance (module singleton) keeps audio playing across
+ * SvelteKit navigations.  The layout mounts the <audio> element once and
+ * never unmounts it; the per-chapter AudioPlayer component is just a
+ * controller that reads/writes this state.
+ *
+ * Uses Svelte 5 runes ($state / $derived) — import only from .svelte files
+ * or other .svelte.ts files.
+ */
+
+export type AudioStatus = 'idle' | 'loading' | 'generating' | 'ready' | 'error';
+
+class AudioStore {
+	// ── What is loaded ──────────────────────────────────────────────────────
+	slug = $state('');
+	chapter = $state(0);
+	chapterTitle = $state('');
+	bookTitle = $state('');
+	voice = $state('af_bella');
+	speed = $state(1.0);
+
+	// ── Loading/generation state ────────────────────────────────────────────
+	status = $state<AudioStatus>('idle');
+	audioUrl = $state('');
+	errorMsg = $state('');
+	/** Pseudo-progress bar value 0–100 during generation */
+	progress = $state(0);
+
+	// ── Playback state (kept in sync with the <audio> element) ─────────────
+	currentTime = $state(0);
+	duration = $state(0);
+	isPlaying = $state(false);
+
+	/**
+	 * Increment to signal the layout to toggle play/pause.
+	 * The layout watches this with $effect and calls audioEl.play()/pause().
+	 */
+	toggleRequest = $state(0);
+
+	/**
+	 * Set to a number to seek the audio element to that time (seconds).
+	 * The layout watches this with $effect and sets audioEl.currentTime.
+	 * Reset to null after handling.
+	 */
+	seekRequest = $state<number | null>(null);
+
+	/** Whether the mini-bar at the bottom is visible */
+	get active(): boolean {
+		return this.status === 'ready' || this.status === 'generating' || this.status === 'loading';
+	}
+
+	/** True when the currently loaded track matches slug+chapter */
+	isCurrentChapter(slug: string, chapter: number): boolean {
+		return this.slug === slug && this.chapter === chapter;
+	}
+}
+
+export const audioStore = new AudioStore();
diff --git a/ui/src/lib/components/AudioPlayer.svelte b/ui/src/lib/components/AudioPlayer.svelte
index 3d8080a..22f38d5 100644
--- a/ui/src/lib/components/AudioPlayer.svelte
+++ b/ui/src/lib/components/AudioPlayer.svelte
@@ -1,70 +1,63 @@
 <script lang="ts">
 	/**
-	 * AudioPlayer — single-button audio player.
+	 * AudioPlayer — controller component.
 	 *
-	 * On click:
-	 *   1. Try GET /api/presign/audio — if 200, load and play.
-	 *   2. If 404, POST /api/audio/:slug/:n to generate. While generating, show
-	 *      a pseudo progress bar that starts slow, accelerates, then slows near
-	 *      80 %. When generation resolves, the bar jumps to 100 % and audio plays.
+	 * Does NOT own an <audio> element.  Instead it reads/writes `audioStore`,
+	 * which is shared with the layout's persistent <audio> element so audio
+	 * survives SvelteKit navigations.
+	 *
+	 * On "Play narration" click:
+	 *   1. Populate store metadata (slug, chapter, titles, voice, speed).
+	 *   2. Try GET /api/presign/audio — if 200, set audioUrl → layout plays.
+	 *   3. If 404, POST /api/audio/:slug/:n to generate. Drive pseudo progress bar
+	 *      via audioStore.progress. On success, presign again and set audioUrl.
+	 *
+	 * When the same chapter is already loaded/playing: show inline playback state.
+	 * When a different chapter is playing: show "Now playing Ch.X" with a
+	 * "Load this chapter" button.
 	 */
 
+	import { audioStore } from '$lib/audio.svelte';
+
 	interface Props {
 		slug: string;
 		chapter: number;
+		chapterTitle?: string;
+		bookTitle?: string;
 		voice?: string;
 		speed?: number;
 	}
 
-	let { slug, chapter, voice = 'af_bella', speed = 1.0 }: Props = $props();
+	let {
+		slug,
+		chapter,
+		chapterTitle = '',
+		bookTitle = '',
+		voice = 'af_bella',
+		speed = 1.0
+	}: Props = $props();
 
-	type Status = 'idle' | 'loading' | 'generating' | 'ready' | 'error';
-
-	let status = $state<Status>('idle');
-	let audioUrl = $state('');
-	let errorMsg = $state('');
-	let audioEl = $state<HTMLAudioElement | null>(null);
-	let currentTime = $state(0);
-	let duration = $state(0);
-	let isPlaying = $state(false);
-
-	// Pseudo progress bar — value 0-100.
-	let progress = $state(0);
+	// ── Pseudo progress helpers ────────────────────────────────────────────────
 	let progressRafId = 0;
 
-	// ── Pseudo progress animation ────────────────────────────────────────────
-	// Eases in to ~80 % slowly, stalls, then can be forced to 100 % externally.
 	function startProgress() {
-		progress = 0;
+		audioStore.progress = 0;
 		let last = performance.now();
 
 		function tick(now: number) {
-			const dt = (now - last) / 1000; // seconds
+			const dt = (now - last) / 1000;
 			last = now;
-
-			// Speed profile:
-			//   0 – 30 %  → 4 %/s (slow start)
-			//  30 – 60 %  → 12 %/s (ramp up)
-			//  60 – 80 %  → 4 %/s (slow down)
-			//  80 – 99 %  → 0.3 %/s (crawl, never quite reaches 100)
 			let rate: number;
-			if (progress < 30) {
-				rate = 4;
-			} else if (progress < 60) {
-				rate = 12;
-			} else if (progress < 80) {
-				rate = 4;
-			} else {
-				rate = 0.3;
-			}
+			if (audioStore.progress < 30) rate = 4;
+			else if (audioStore.progress < 60) rate = 12;
+			else if (audioStore.progress < 80) rate = 4;
+			else rate = 0.3;
 
-			progress = Math.min(progress + rate * dt, 99);
-
-			if (progress < 99) {
+			audioStore.progress = Math.min(audioStore.progress + rate * dt, 99);
+			if (audioStore.progress < 99) {
 				progressRafId = requestAnimationFrame(tick);
 			}
 		}
-
 		progressRafId = requestAnimationFrame(tick);
 	}
 
@@ -77,20 +70,18 @@
 
 	async function finishProgress() {
 		stopProgress();
-		// Animate quickly to 100 %.
 		const step = () => {
-			progress = Math.min(progress + 8, 100);
-			if (progress < 100) {
+			audioStore.progress = Math.min(audioStore.progress + 8, 100);
+			if (audioStore.progress < 100) {
 				progressRafId = requestAnimationFrame(step);
 			}
 		};
 		progressRafId = requestAnimationFrame(step);
-		// Wait for the short fill animation to look good.
 		await new Promise((r) => setTimeout(r, 200));
 		stopProgress();
 	}
 
-	// ── Core logic ────────────────────────────────────────────────────────────
+	// ── API helpers ────────────────────────────────────────────────────────────
 
 	async function tryPresign(): Promise<string | null> {
 		const params = new URLSearchParams({
@@ -106,28 +97,30 @@
 		return data.url;
 	}
 
-	async function handlePlay() {
-		if (status === 'ready' && audioUrl) {
-			togglePlay();
-			return;
-		}
+	// ── Core play flow ─────────────────────────────────────────────────────────
 
-		status = 'loading';
-		errorMsg = '';
+	async function startPlayback() {
+		// Populate store metadata so layout + mini-bar have track info.
+		audioStore.slug = slug;
+		audioStore.chapter = chapter;
+		audioStore.chapterTitle = chapterTitle;
+		audioStore.bookTitle = bookTitle;
+		audioStore.voice = voice;
+		audioStore.speed = speed;
+		audioStore.status = 'loading';
+		audioStore.errorMsg = '';
 
 		try {
-			// Fast path: audio already exists.
+			// Fast path: audio already in MinIO.
 			const url = await tryPresign();
 			if (url) {
-				audioUrl = url;
-				status = 'ready';
-				// Auto-play once metadata loads.
-				requestAnimationFrame(() => audioEl?.play());
+				audioStore.audioUrl = url;
+				audioStore.status = 'ready';
 				return;
 			}
 
-			// Slow path: trigger generation.
-			status = 'generating';
+			// Slow path: trigger Kokoro generation.
+			audioStore.status = 'generating';
 			startProgress();
 
 			const res = await fetch(`/api/audio/${slug}/${chapter}`, {
@@ -137,141 +130,159 @@
 			});
 			if (!res.ok) throw new Error(`Generation failed: HTTP ${res.status}`);
 
-			// Generation succeeded — fill the bar to 100 % then load.
 			await finishProgress();
 
 			const url2 = await tryPresign();
 			if (!url2) throw new Error('Audio generated but presign returned 404');
-			audioUrl = url2;
-			status = 'ready';
-			requestAnimationFrame(() => audioEl?.play());
+			audioStore.audioUrl = url2;
+			audioStore.status = 'ready';
 		} catch (e) {
 			stopProgress();
-			progress = 0;
-			status = 'error';
-			errorMsg = String(e);
+			audioStore.progress = 0;
+			audioStore.status = 'error';
+			audioStore.errorMsg = String(e);
 		}
 	}
 
+	async function handlePlay() {
+		const isCurrent = audioStore.isCurrentChapter(slug, chapter);
+
+		// Already loaded this chapter: toggle play/pause.
+		if (isCurrent && audioStore.status === 'ready') {
+			// The layout owns the audio element; we signal via a store flag.
+			// We don't have a direct reference here — the layout toggles on its own.
+			// Dispatch a custom event that the layout can listen to, or simply
+			// expose a toggle helper on the store (simplest: use a counter).
+			audioStore.toggleRequest = (audioStore.toggleRequest ?? 0) + 1;
+			return;
+		}
+
+		// Not yet loaded — start the full flow.
+		await startPlayback();
+	}
+
 	function formatTime(s: number): string {
+		if (!isFinite(s) || s < 0) return '0:00';
 		const m = Math.floor(s / 60);
 		const sec = Math.floor(s % 60);
 		return `${m}:${sec.toString().padStart(2, '0')}`;
 	}
-
-	function togglePlay() {
-		if (!audioEl) return;
-		if (isPlaying) {
-			audioEl.pause();
-		} else {
-			audioEl.play();
-		}
-	}
-
-	function seek(e: Event) {
-		if (!audioEl) return;
-		const input = e.target as HTMLInputElement;
-		audioEl.currentTime = parseFloat(input.value);
-	}
 </script>
 
 <div class="mt-6 p-4 rounded-lg bg-zinc-800 border border-zinc-700">
 	<div class="flex items-center gap-2 mb-3">
 		<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 24 24">
-			<path d="M11.536 3.464a5 5 0 010 7.072L8 14H5v3H2V7h3l3.536-3.536a5 5 0 017.072 0l-4.072 4.072zM19 8a1 1 0 011 1v6a1 1 0 01-2 0V9a1 1 0 011-1zm-4-2a1 1 0 011 1v10a1 1 0 01-2 0V7a1 1 0 011-1z"/>
+			<path d="M12 3v10.55A4 4 0 1014 17V7h4V3h-6z"/>
 		</svg>
 		<span class="text-sm text-zinc-300 font-medium">Audio Narration</span>
 	</div>
 
-	{#if status === 'idle' || status === 'loading'}
-		<button
-			onclick={handlePlay}
-			disabled={status === 'loading'}
-			class="px-4 py-1.5 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
-		>
-			{#if status === 'loading'}
+	{#if audioStore.isCurrentChapter(slug, chapter)}
+		<!-- ── This chapter is the active one ── -->
+
+		{#if audioStore.status === 'idle' || audioStore.status === 'error'}
+			<!-- Should not normally reach here while current, but handle gracefully -->
+			{#if audioStore.status === 'error'}
+				<p class="text-red-400 text-sm mb-2">{audioStore.errorMsg || 'Failed to load audio.'}</p>
+			{/if}
+			<button
+				onclick={handlePlay}
+				class="px-4 py-1.5 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors flex items-center gap-2"
+			>
+				<svg class="w-3.5 h-3.5 ml-0.5" fill="currentColor" viewBox="0 0 24 24">
+					<path d="M8 5v14l11-7z"/>
+				</svg>
+				Play narration
+			</button>
+
+		{:else if audioStore.status === 'loading'}
+			<button
+				disabled
+				class="px-4 py-1.5 rounded bg-amber-400 text-zinc-900 text-sm font-semibold opacity-50 cursor-not-allowed flex items-center gap-2"
+			>
 				<svg class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
 					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
 					<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
 				</svg>
-			{:else}
-				<svg class="w-3.5 h-3.5 ml-0.5" fill="currentColor" viewBox="0 0 24 24">
-					<path d="M8 5v14l11-7z"/>
-				</svg>
-			{/if}
-			Play narration
-		</button>
-
-	{:else if status === 'generating'}
-		<!-- Pseudo progress bar while Kokoro generates audio -->
-		<div class="space-y-2">
-			<p class="text-xs text-zinc-400">Generating narration…</p>
-			<div class="w-full h-1.5 bg-zinc-700 rounded-full overflow-hidden">
-				<div
-					class="h-full bg-amber-400 rounded-full transition-none"
-					style="width: {progress}%"
-				></div>
-			</div>
-			<p class="text-xs text-zinc-500 tabular-nums">{Math.round(progress)} %</p>
-		</div>
-
-	{:else if status === 'error'}
-		<div class="text-red-400 text-sm">
-			<p>{errorMsg || 'Failed to load audio.'}</p>
-			<button
-				onclick={() => { status = 'idle'; errorMsg = ''; }}
-				class="mt-1 text-xs underline text-zinc-400 hover:text-zinc-200"
-			>
-				Dismiss
+				Loading…
 			</button>
-		</div>
 
-	{:else if status === 'ready' && audioUrl}
-		<!-- Native audio element (hidden, controlled by custom UI) -->
-		<audio
-			bind:this={audioEl}
-			src={audioUrl}
-			bind:currentTime
-			bind:duration
-			onplay={() => (isPlaying = true)}
-			onpause={() => (isPlaying = false)}
-			onended={() => (isPlaying = false)}
-			preload="metadata"
-		></audio>
-
-		<!-- Custom controls -->
-		<div class="flex flex-col gap-2">
-			<div class="flex items-center gap-3">
-				<button
-					onclick={togglePlay}
-					class="w-9 h-9 rounded-full bg-amber-400 text-zinc-900 flex items-center justify-center hover:bg-amber-300 transition-colors flex-shrink-0"
-					aria-label={isPlaying ? 'Pause' : 'Play'}
-				>
-					{#if isPlaying}
-						<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-							<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
-						</svg>
-					{:else}
-						<svg class="w-4 h-4 ml-0.5" fill="currentColor" viewBox="0 0 24 24">
-							<path d="M8 5v14l11-7z"/>
-						</svg>
-					{/if}
-				</button>
-
-				<span class="text-xs text-zinc-400 w-20 flex-shrink-0">
-					{formatTime(currentTime)} / {formatTime(duration || 0)}
-				</span>
+		{:else if audioStore.status === 'generating'}
+			<div class="space-y-2">
+				<p class="text-xs text-zinc-400">Generating narration…</p>
+				<div class="w-full h-1.5 bg-zinc-700 rounded-full overflow-hidden">
+					<div
+						class="h-full bg-amber-400 rounded-full transition-none"
+						style="width: {audioStore.progress}%"
+					></div>
+				</div>
+				<p class="text-xs text-zinc-500 tabular-nums">{Math.round(audioStore.progress)}%</p>
+			</div>
 
+		{:else if audioStore.status === 'ready'}
+			<!-- Inline full-size controls (larger than the mini-bar) -->
+			<div class="flex flex-col gap-2">
 				<!-- Seek bar -->
 				<input
 					type="range"
 					min="0"
-					max={duration || 0}
-					value={currentTime}
-					oninput={seek}
-					class="flex-1 accent-amber-400 h-1.5 rounded"
+					max={audioStore.duration || 0}
+					value={audioStore.currentTime}
+					oninput={(e) => {
+						audioStore.seekRequest = parseFloat((e.target as HTMLInputElement).value);
+					}}
+					class="w-full accent-amber-400 h-1.5 rounded cursor-pointer"
 				/>
+
+				<div class="flex items-center gap-3">
+					<!-- Play/Pause -->
+					<button
+						onclick={handlePlay}
+						class="w-9 h-9 rounded-full bg-amber-400 text-zinc-900 flex items-center justify-center hover:bg-amber-300 transition-colors flex-shrink-0"
+						aria-label={audioStore.isPlaying ? 'Pause' : 'Play'}
+					>
+						{#if audioStore.isPlaying}
+							<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+								<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
+							</svg>
+						{:else}
+							<svg class="w-4 h-4 ml-0.5" fill="currentColor" viewBox="0 0 24 24">
+								<path d="M8 5v14l11-7z"/>
+							</svg>
+						{/if}
+					</button>
+
+					<span class="text-xs text-zinc-400 tabular-nums">
+						{formatTime(audioStore.currentTime)} / {formatTime(audioStore.duration)}
+					</span>
+				</div>
 			</div>
+		{/if}
+
+	{:else if audioStore.active}
+		<!-- ── A different chapter is currently playing ── -->
+		<div class="flex items-center justify-between gap-3">
+			<p class="text-xs text-zinc-400">
+				Now playing: {audioStore.chapterTitle || `Ch.${audioStore.chapter}`}
+			</p>
+			<button
+				onclick={startPlayback}
+				class="px-3 py-1 rounded bg-zinc-700 text-zinc-200 text-xs font-medium hover:bg-zinc-600 transition-colors flex-shrink-0"
+			>
+				Load this chapter
+			</button>
 		</div>
+
+	{:else}
+		<!-- ── Idle — nothing playing ── -->
+		<button
+			onclick={handlePlay}
+			class="px-4 py-1.5 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors flex items-center gap-2"
+		>
+			<svg class="w-3.5 h-3.5 ml-0.5" fill="currentColor" viewBox="0 0 24 24">
+				<path d="M8 5v14l11-7z"/>
+			</svg>
+			Play narration
+		</button>
 	{/if}
 </div>
diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index 8e306a4..29d5604 100644
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.svelte
@@ -3,8 +3,102 @@
 	import { page } from '$app/state';
 	import type { Snippet } from 'svelte';
 	import type { LayoutData } from './$types';
+	import { audioStore } from '$lib/audio.svelte';
 
 	let { children, data }: { children: Snippet; data: LayoutData } = $props();
+
+	// The single <audio> element that persists across navigations.
+	// AudioPlayer components in chapter pages control it via audioStore.
+	let audioEl = $state<HTMLAudioElement | null>(null);
+
+	// Keep the audio element's playback rate in sync with the store speed.
+	$effect(() => {
+		if (audioEl) audioEl.playbackRate = audioStore.speed;
+	});
+
+	// When audioUrl changes, load the new source.
+	$effect(() => {
+		if (!audioEl) return;
+		const url = audioStore.audioUrl;
+		if (url && audioEl.src !== url) {
+			audioEl.src = url;
+			audioEl.load();
+			audioEl.playbackRate = audioStore.speed;
+			audioEl.play().catch(() => {});
+		}
+	});
+
+	// Handle toggle requests from AudioPlayer controller.
+	$effect(() => {
+		// Read toggleRequest to subscribe; ignore value 0 (initial).
+		const _req = audioStore.toggleRequest;
+		if (!audioEl || _req === 0) return;
+		if (audioStore.isPlaying) {
+			audioEl.pause();
+		} else {
+			audioEl.play().catch(() => {});
+		}
+	});
+
+	// Handle seek requests from AudioPlayer controller.
+	$effect(() => {
+		const t = audioStore.seekRequest;
+		if (!audioEl || t === null) return;
+		audioEl.currentTime = t;
+		audioStore.seekRequest = null;
+	});
+
+	function formatTime(s: number): string {
+		if (!isFinite(s) || s < 0) return '0:00';
+		const m = Math.floor(s / 60);
+		const sec = Math.floor(s % 60);
+		return `${m}:${sec.toString().padStart(2, '0')}`;
+	}
+
+	function togglePlay() {
+		if (!audioEl) return;
+		if (audioStore.isPlaying) {
+			audioEl.pause();
+		} else {
+			audioEl.play().catch(() => {});
+		}
+	}
+
+	function seek(e: Event) {
+		if (!audioEl) return;
+		audioEl.currentTime = parseFloat((e.target as HTMLInputElement).value);
+	}
+
+	function skipBack() {
+		if (!audioEl) return;
+		audioEl.currentTime = Math.max(0, audioEl.currentTime - 15);
+	}
+
+	function skipForward() {
+		if (!audioEl) return;
+		audioEl.currentTime = Math.min(audioEl.duration || 0, audioEl.currentTime + 30);
+	}
+
+	const speedSteps = [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0];
+
+	function cycleSpeed() {
+		const idx = speedSteps.indexOf(audioStore.speed);
+		audioStore.speed = speedSteps[(idx + 1) % speedSteps.length];
+	}
+
+	function dismiss() {
+		if (audioEl) {
+			audioEl.pause();
+			audioEl.src = '';
+		}
+		audioStore.status = 'idle';
+		audioStore.audioUrl = '';
+		audioStore.slug = '';
+		audioStore.chapter = 0;
+		audioStore.isPlaying = false;
+		audioStore.currentTime = 0;
+		audioStore.duration = 0;
+	}
 </script>
 
 <svelte:head>
@@ -13,7 +107,21 @@
 	<title>libnovel</title>
 </svelte:head>
 
-<div class="min-h-screen flex flex-col">
+<!-- Hidden persistent audio element — lives outside {#key} so it never unmounts -->
+{#if audioStore.audioUrl}
+	<audio
+		bind:this={audioEl}
+		bind:currentTime={audioStore.currentTime}
+		bind:duration={audioStore.duration}
+		onplay={() => (audioStore.isPlaying = true)}
+		onpause={() => (audioStore.isPlaying = false)}
+		onended={() => (audioStore.isPlaying = false)}
+		preload="metadata"
+		style="display:none"
+	></audio>
+{/if}
+
+<div class="min-h-screen flex flex-col" class:pb-24={audioStore.active}>
 	<header class="border-b border-zinc-700 bg-zinc-900 sticky top-0 z-50">
 		<nav class="max-w-6xl mx-auto px-4 h-14 flex items-center gap-6">
 			<a href="/" class="text-amber-400 font-bold text-lg tracking-tight hover:text-amber-300">
@@ -60,3 +168,143 @@
 		libnovel
 	</footer>
 </div>
+
+<!-- ── Persistent mini-player bar ─────────────────────────────────────────── -->
+{#if audioStore.active}
+	<div class="fixed bottom-0 left-0 right-0 z-50 bg-zinc-900 border-t border-zinc-700 shadow-2xl">
+
+		<!-- Generation progress bar (sits at very top of the bar) -->
+		{#if audioStore.status === 'generating' || audioStore.status === 'loading'}
+			<div class="h-0.5 bg-zinc-800">
+				<div
+					class="h-full bg-amber-400 transition-none"
+					style="width: {audioStore.progress}%"
+				></div>
+			</div>
+		{:else if audioStore.status === 'ready'}
+			<!-- Seek bar flush at top — tappable on mobile -->
+			<div class="px-0">
+				<input
+					type="range"
+					min="0"
+					max={audioStore.duration || 0}
+					value={audioStore.currentTime}
+					oninput={seek}
+					class="w-full h-1 accent-amber-400 cursor-pointer block"
+					style="margin: 0; border-radius: 0;"
+				/>
+			</div>
+		{/if}
+
+		<div class="max-w-6xl mx-auto px-4 py-2 flex items-center gap-3">
+
+			<!-- Track info -->
+			<div class="flex-1 min-w-0">
+				{#if audioStore.chapterTitle}
+					<p class="text-xs text-zinc-100 truncate leading-tight">{audioStore.chapterTitle}</p>
+				{/if}
+				{#if audioStore.bookTitle}
+					<p class="text-xs text-zinc-500 truncate leading-tight">{audioStore.bookTitle}</p>
+				{/if}
+				{#if audioStore.status === 'generating'}
+					<p class="text-xs text-amber-400 leading-tight">
+						Generating… {Math.round(audioStore.progress)}%
+					</p>
+				{:else if audioStore.status === 'ready'}
+					<p class="text-xs text-zinc-500 tabular-nums leading-tight">
+						{formatTime(audioStore.currentTime)} / {formatTime(audioStore.duration)}
+					</p>
+				{:else if audioStore.status === 'loading'}
+					<p class="text-xs text-zinc-500 leading-tight">Loading…</p>
+				{/if}
+			</div>
+
+			{#if audioStore.status === 'ready'}
+				<!-- Skip back 15s -->
+				<button
+					onclick={skipBack}
+					class="text-zinc-400 hover:text-zinc-100 transition-colors p-1.5 rounded"
+					title="Back 15s"
+					aria-label="Rewind 15 seconds"
+				>
+					<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+						<path d="M11.99 5V1l-5 5 5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6h-2c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
+						<text x="8.5" y="14.5" font-size="5" font-family="sans-serif" font-weight="bold" fill="currentColor">15</text>
+					</svg>
+				</button>
+
+				<!-- Play / Pause -->
+				<button
+					onclick={togglePlay}
+					class="w-10 h-10 rounded-full bg-amber-400 text-zinc-900 flex items-center justify-center hover:bg-amber-300 transition-colors flex-shrink-0"
+					aria-label={audioStore.isPlaying ? 'Pause' : 'Play'}
+				>
+					{#if audioStore.isPlaying}
+						<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+							<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
+						</svg>
+					{:else}
+						<svg class="w-4 h-4 ml-0.5" fill="currentColor" viewBox="0 0 24 24">
+							<path d="M8 5v14l11-7z"/>
+						</svg>
+					{/if}
+				</button>
+
+				<!-- Skip forward 30s -->
+				<button
+					onclick={skipForward}
+					class="text-zinc-400 hover:text-zinc-100 transition-colors p-1.5 rounded"
+					title="Forward 30s"
+					aria-label="Skip 30 seconds"
+				>
+					<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+						<path d="M12 5V1l5 5-5 5V7c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6h2c0 4.42-3.58 8-8 8s-8-3.58-8-8 3.58-8 8-8z"/>
+						<text x="8.5" y="14.5" font-size="5" font-family="sans-serif" font-weight="bold" fill="currentColor">30</text>
+					</svg>
+				</button>
+
+				<!-- Speed control -->
+				<button
+					onclick={cycleSpeed}
+					class="text-xs font-semibold text-zinc-300 hover:text-amber-400 transition-colors px-2 py-1 rounded bg-zinc-800 hover:bg-zinc-700 flex-shrink-0 tabular-nums w-12 text-center"
+					title="Change playback speed"
+					aria-label="Playback speed {audioStore.speed}x"
+				>
+					{audioStore.speed}×
+				</button>
+			{:else if audioStore.status === 'generating'}
+				<!-- Spinner during generation -->
+				<svg class="w-6 h-6 text-amber-400 animate-spin flex-shrink-0" fill="none" viewBox="0 0 24 24">
+					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+					<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+				</svg>
+			{/if}
+
+			<!-- Go to chapter link (only when we know which chapter is playing) -->
+			{#if audioStore.slug && audioStore.chapter > 0}
+				<a
+					href="/books/{audioStore.slug}/chapters/{audioStore.chapter}"
+					class="text-zinc-400 hover:text-zinc-100 transition-colors p-1.5 rounded flex-shrink-0"
+					title="Go to chapter"
+					aria-label="Go to chapter"
+				>
+					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
+					</svg>
+				</a>
+			{/if}
+
+			<!-- Dismiss -->
+			<button
+				onclick={dismiss}
+				class="text-zinc-600 hover:text-zinc-400 transition-colors p-1.5 rounded flex-shrink-0"
+				title="Close player"
+				aria-label="Close player"
+			>
+				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+				</svg>
+			</button>
+		</div>
+	</div>
+{/if}
diff --git a/ui/src/routes/books/[slug]/chapters/[n]/+page.svelte b/ui/src/routes/books/[slug]/chapters/[n]/+page.svelte
index 9089b84..197a9b8 100644
--- a/ui/src/routes/books/[slug]/chapters/[n]/+page.svelte
+++ b/ui/src/routes/books/[slug]/chapters/[n]/+page.svelte
@@ -67,7 +67,12 @@
 </div>
 
 <!-- Audio player -->
-<AudioPlayer slug={data.book.slug} chapter={data.chapter.number} />
+<AudioPlayer
+	slug={data.book.slug}
+	chapter={data.chapter.number}
+	chapterTitle={data.chapter.title || `Chapter ${data.chapter.number}`}
+	bookTitle={data.book.title}
+/>
 
 <!-- Chapter content -->
 {#if !data.html}