feat(web-player): show YouTube Music albums in the explore search

The Albums chip now returns both your own albums and what YouTube Music has
for the term. A YouTube card opens a read-only album page with its cover,
tracklist and play button, and right-clicking a track still offers to add it
to a playlist through the existing menu.
This commit is contained in:
2026-07-20 20:39:21 +02:00
parent 0afb365427
commit 29c220a1cf
6 changed files with 408 additions and 18 deletions
@@ -101,12 +101,14 @@
const hasMore = $derived(showTracks && (localHasNext || ytContinuation !== ''));
const albums = $derived(data.albums);
const youtubeAlbums = $derived(data.youtubeAlbums);
const hasAlbums = $derived(albums.length > 0 || youtubeAlbums.length > 0);
const nothingFound = $derived(
!!data.query &&
!data.ytError &&
(showTracks ? items.length === 0 : true) &&
(showAlbums ? albums.length === 0 : true) &&
(showAlbums ? !hasAlbums : true) &&
filters.length > 0
);
@@ -230,7 +232,7 @@
/>
{/if}
{#if showAlbums && albums.length > 0}
{#if showAlbums && hasAlbums}
<div class="mt-8">
<SectionHeading title="Álbumes" />
<MediaGrid class="mt-4">
@@ -240,16 +242,26 @@
title={album.title}
releaseYear={album.releaseYear === null ? undefined : Number(album.releaseYear)}
trackCount={Number(album.trackCount)}
trackIds={[]}
index={i}
/>
{/each}
{#each youtubeAlbums as album, i (album.albumId)}
<AlbumCard
id={album.albumId}
href="/albums/youtube/{album.albumId}"
title={album.title}
subtitle={album.artist}
releaseYear={album.releaseYear === null ? undefined : Number(album.releaseYear)}
coverSrc={album.thumbnailUrl}
index={albums.length + i}
/>
{/each}
</MediaGrid>
</div>
{/if}
{#if showTracks && items.length > 0}
{#if showAlbums && albums.length > 0}
{#if showAlbums && hasAlbums}
<SectionHeading title="Canciones" class="mt-10" />
{/if}
<MediaGrid as="ul" class="mt-6">