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
This commit is contained in:
Admin
60
ui/src/lib/audio.svelte.ts
Normal file
60
ui/src/lib/audio.svelte.ts
Normal file
@@ -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();
|
||||
@@ -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,117 +130,118 @@
|
||||
});
|
||||
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'}
|
||||
{#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}
|
||||
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"
|
||||
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"
|
||||
>
|
||||
{#if status === 'loading'}
|
||||
<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
|
||||
Loading…
|
||||
</button>
|
||||
|
||||
{:else if status === 'generating'}
|
||||
<!-- Pseudo progress bar while Kokoro generates audio -->
|
||||
{: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: {progress}%"
|
||||
style="width: {audioStore.progress}%"
|
||||
></div>
|
||||
</div>
|
||||
<p class="text-xs text-zinc-500 tabular-nums">{Math.round(progress)} %</p>
|
||||
<p class="text-xs text-zinc-500 tabular-nums">{Math.round(audioStore.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
|
||||
</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 -->
|
||||
{: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={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={togglePlay}
|
||||
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={isPlaying ? 'Pause' : 'Play'}
|
||||
aria-label={audioStore.isPlaying ? 'Pause' : 'Play'}
|
||||
>
|
||||
{#if isPlaying}
|
||||
{#if audioStore.isPlaying}
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
|
||||
</svg>
|
||||
@@ -258,20 +252,37 @@
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<span class="text-xs text-zinc-400 w-20 flex-shrink-0">
|
||||
{formatTime(currentTime)} / {formatTime(duration || 0)}
|
||||
<span class="text-xs text-zinc-400 tabular-nums">
|
||||
{formatTime(audioStore.currentTime)} / {formatTime(audioStore.duration)}
|
||||
</span>
|
||||
|
||||
<!-- Seek bar -->
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max={duration || 0}
|
||||
value={currentTime}
|
||||
oninput={seek}
|
||||
class="flex-1 accent-amber-400 h-1.5 rounded"
|
||||
/>
|
||||
</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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user