bookhoard/templates/audio_reader.templ

package templates

// AudioReader is the reader surface for audiobooks (media_items with
// format_group = "audiobook"): cover, chapter, scrubber, skip/speed
// controls and the chapter list. Standalone page — the foliate document
// engine is deliberately not involved (handoff item 3 Batch A); the
// <audio> element streams the m4b through the existing cookie-authed
// Range-serving /uploads path.

import "fmt"

templ AudioReader(user User, metadata ReaderMetadata) {
	<!DOCTYPE html/>
	<html lang="en">
		<head>
			<title>{ "Listening · " + metadata.Title } · Bookhoard</title>
			<meta charset="utf-8"/>
			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
			<link href="/static/style.css" rel="stylesheet"/>
			<script type="module" src="/static/main.js"></script>
		</head>
		<body
			x-data="audioReader"
			x-init="init()"
			class="theme-{ user.Theme } h-screen overflow-hidden"
			style="background-color: var(--bg-primary);"
			data-media-item-id={ metadata.MediaItemID }
			data-title={ metadata.Title }
			data-cover={ metadata.CoverImagePath }
			data-file-url={ metadata.FileURL }
			data-json={ fmt.Sprintf(`{"chapterEndpoint":"%s","progressEndpoint":"%s"}`,
				"/api/media-items/"+metadata.MediaItemID+"/chapters",
				"/api/media-items/"+metadata.MediaItemID+"/progress") }
		>
			<div class="h-full flex flex-col items-center justify-center px-4 gap-6 select-none">
				<!-- Cover + title -->
				<div class="flex flex-col items-center gap-3 text-center">
					<div class="w-48 h-72 md:w-56 md:h-80 rounded-2xl overflow-hidden shadow-lg shrink-0 bg-cover bg-center" style="background-color: var(--surface-hover);">
						if metadata.CoverImagePath != "" {
							<img
								src={ metadata.CoverImagePath }
								alt={ metadata.Title }
								class="w-full h-full object-cover"
								onerror="this.style.display='none'"
							/>
						} else {
							<span class="material-symbols-rounded text-5xl flex items-center justify-center h-full" style="color: var(--text-secondary);">headphones</span>
						}
					</div>
					<div>
						<h1 class="font-semibold text-lg leading-snug" style="color: var(--text-primary);">{ metadata.Title }</h1>
						<p class="text-sm mt-0.5" style="color: var(--text-secondary);" x-text="chapterTitle()">—</p>
					</div>
				</div>

				<!-- Scrubber + transports -->
				<div class="w-full max-w-xl flex flex-col gap-2">
					<div class="flex items-center gap-2 text-xs tabular-nums" style="color: var(--text-secondary);">
						<span x-text="fmtTime(currentTime)">0:00</span>
						<input
							id="audio-scrub"
							type="range"
							min="0"
							step="0.1"
							:value="chaptersDuration() || 1"
							class="flex-1 accent-current"
							@input.debounce.300ms="seekTo($event.target.value)"
						/>
						<span x-text="fmtTime(chaptersDuration() || 1)">0:00</span>
					</div>
					<div class="flex items-center justify-center gap-6">
						<button
							type="button"
							@click="skip(-1)"
							class="rounded-full p-3 hover:bg-surface-hover transition-colors"
							:aria-label="'Skip back ' + skipSeconds + 's'"
							style="color: var(--text-primary);"
						>
							<span class="text-lg font-semibold">-<span x-text="skipSeconds">10</span>s</span>
						</button>
						<button
							id="audio-play"
							type="button"
							@click="togglePlay()"
							class="rounded-full h-16 w-16 grid place-items-center"
							style="background-color: var(--accent); color: var(--bg-primary);"
							aria-label="Play or pause"
						>
							<span x-show="!playing" class="text-3xl leading-none">▶</span>
							<span x-show="playing" class="text-3xl leading-none" x-cloak>❚❚</span>
						</button>
						<button
							type="button"
							@click="skip(1)"
							class="rounded-full p-3 hover:bg-surface-hover transition-colors"
							:aria-label="'Skip forward ' + skipSeconds + 's'"
							style="color: var(--text-primary);"
						>
							<span class="text-lg font-semibold">+<span x-text="skipSeconds">10</span>s</span>
						</button>
					</div>
				</div>

				<!-- Chapter list + speed -->
				<div class="w-full max-w-xl">
					<div class="flex items-center justify-between">
						<button
							type="button"
							@click="chaptersOpen = !chaptersOpen"
							class="text-sm px-3 py-2 rounded-lg hover:bg-surface-hover transition-colors"
							style="color: var(--text-secondary);"
						>
							Chapters <span x-text="'(' + chapters.length + ')'"></span>
						</button>
						<div class="flex items-center gap-1.5">
							<span class="text-xs" style="color: var(--text-secondary);">Skip</span>
							<template x-for="secs in [1, 5, 10, 15, 30]" :key="'skip' + secs">
								<button
									type="button"
									@click="setSkip(secs)"
									class="text-xs px-2 py-1 rounded-md transition-colors"
									:class="Number(skipSeconds) === secs ? 'opacity-100 underline' : 'opacity-50 hover:opacity-80'"
									style="color: var(--text-secondary);"
									x-text="secs + 's'"
								></button>
							</template>
						</div>
					</div>
					<div class="flex items-center justify-between mt-1">
						<span class="text-xs" style="color: var(--text-secondary);">Speed</span>
						<div class="flex items-center gap-1.5">
							<template x-for="rate in [0.75, 1, 1.25, 1.5, 2]" :key="rate">
								<button
									type="button"
									@click="setSpeed(rate)"
									class="text-xs px-2 py-1 rounded-md transition-colors"
									:class="Number(speed) === rate ? 'opacity-100 underline' : 'opacity-50 hover:opacity-80'"
									style="color: var(--text-secondary);"
									x-text="rate + '×'"
								></button>
							</template>
						</div>
					</div>
					<div x-show="chaptersOpen" x-cloak class="mt-2 max-h-64 overflow-y-auto rounded-xl border p-2" style="border-color: var(--border); background-color: var(--bg-secondary);">
						<template x-for="ch in chapters" :key="ch.index">
							<button
								type="button"
								@click="jumpToChapter(ch.index)"
								class="w-full text-left px-3 py-2 rounded-lg text-sm flex justify-between gap-3 hover:bg-surface-hover transition-colors"
								:class="chapters.length && currentChapter() === ch.index ? 'font-semibold' : ''"
								style="color: var(--text-secondary);"
							>
								<span class="truncate" x-text="ch.title || ('Chapter ' + (ch.index + 1))"></span>
								<span class="shrink-0 text-xs tabular-nums" x-text="fmtTime(ch.start)"></span>
							</button>
						</template>
						<p x-show="!chapters.length" class="text-sm text-center py-4" style="color: var(--text-secondary);">
							No chapters detected for this audiobook.
						</p>
					</div>
				</div>

				<audio id="audio-element" preload="auto" class="hidden"></audio>
			</div>
		</body>
	</html>
}