feat: add booklet button and viewer to AlbumDetailView

Show a BookOpen icon button in album header when the album has
PDF goodies from Qobuz. Opens the BookletViewer modal to display
the booklet inline.
This commit is contained in:
vicrodh committed 2026-02-26 14:42:22 -06:00
1 parent ef42bb2ae2
commit 2135791439
1 file changed
+28 -1
@@ -10,7 +10,7 @@
setCustomAlbumCover,
removeCustomAlbumCover as removeCustomCoverFromStore
} from '$lib/stores/customAlbumCoverStore';
import { ArrowLeft, Play, Shuffle, Heart, Radio, CloudDownload, ChevronLeft, ChevronRight, Loader2, CheckSquare } from 'lucide-svelte';
import { ArrowLeft, Play, Shuffle, Heart, Radio, CloudDownload, ChevronLeft, ChevronRight, Loader2, CheckSquare, BookOpen } from 'lucide-svelte';
import AlbumCard from '../AlbumCard.svelte';
import TrackRow from '../TrackRow.svelte';
import AlbumMenu from '../AlbumMenu.svelte';
@@ -27,6 +27,8 @@
} from '$lib/stores/albumFavoritesStore';
import { isBlacklisted as isArtistBlacklisted } from '$lib/stores/artistBlacklistStore';
import ImageLightbox from '../ImageLightbox.svelte';
import BookletViewer from '../BookletViewer.svelte';
import type { QobuzGoody } from '$lib/types';
interface Track {
id: number;
@@ -68,6 +70,7 @@
trackCount: number;
duration: string;
tracks: Track[];
goodies?: QobuzGoody[];
};
onBack: () => void;
onArtistClick?: () => void;
@@ -165,6 +168,12 @@
let isFavorite = $state(false);
let isFavoriteLoading = $state(false);
let lightboxOpen = $state(false);
let bookletOpen = $state(false);
// Booklet: find first PDF goody
const bookletGoody = $derived(
album.goodies?.find((goody: QobuzGoody) => goody.url && goody.url.endsWith('.pdf')) ?? null
);
// Cover context menu
let showCoverMenu = $state(false);
@@ -562,6 +571,15 @@
</svg>
</button>
{/if}
{#if bookletGoody}
<button
class="action-btn-circle"
onclick={() => bookletOpen = true}
title={$t('album.viewBooklet')}
>
<BookOpen size={18} />
</button>
{/if}
<AlbumMenu
onPlayNext={onPlayAllNext}
onPlayLater={onPlayAllLater}
@@ -750,6 +768,15 @@
alt={album.title}
/>
{#if bookletGoody}
<BookletViewer
isOpen={bookletOpen}
onClose={() => bookletOpen = false}
url={bookletGoody.original_url || bookletGoody.url}
title={bookletGoody.name || $t('album.booklet')}
/>
{/if}
{#if showCoverMenu}
<div
class="cover-context-backdrop"