kamil/libnovel
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 162 Wiki Activity

feat(ui): persistent cross-navigation audio player with expanded controls

Browse Source 
- 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
2026-03-04 15:34:56 +05:00
parent 0d7b985469
commit 034e670795
4 changed files with 486 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
ui/src/routes/+layout.svelte
View File

@@ -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}

7
ui/src/routes/books/[slug]/chapters/[n]/+page.svelte
View File

@@ -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}