Joren/qbz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge PR #22: Add genre display on album hover

Browse Source 
Resolved merge conflicts with size="large" changes from pre-release.
Both genre and size="large" props now included in AlbumCard components.
This commit is contained in:
vicrodh committed 2026-01-25 12:35:27 -06:00
2 parents 0b40b59e75 22f0aa5a0e
commit 2a89b025a6
8 files changed
+60 -2
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/lib/adapters/qobuzAdapters.ts
+2 -1
View File
@@ -260,7 +260,8 @@ function toArtistAlbumSummary(album: QobuzAlbum): ArtistAlbumSummary {
title: album.title,
artwork,
year: album.release_date_original?.split('-')[0],
quality
quality,
genre: album.genre?.name || "Unknown genre"
};
}
src/lib/components/AlbumCard.svelte
+21 -1
View File
@@ -14,6 +14,7 @@
artwork: string;
title: string;
artist: string;
genre: string;
quality?: string;
size?: 'standard' | 'large';
searchId?: string;
@@ -38,6 +39,7 @@
artwork,
title,
artist,
genre,
quality,
size = 'standard',
searchId,
@@ -182,6 +184,7 @@
<!-- Action Overlay -->
{#if hasOverlay}
<div class="action-overlay" class:menu-open={menuOpen}>
<div class="overlay-genre">{genre}</div>
<div class="action-buttons">
{#if showFavoriteButton}
<button
@@ -322,7 +325,7 @@
justify-content: center;
opacity: 0;
transition: opacity 150ms ease;
background: rgba(10, 10, 10, 0.25);
background: rgba(10, 10, 10, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
pointer-events: auto;
@@ -390,6 +393,23 @@
height: 30px;
}
.overlay-genre {
align-self: flex-start;
width: 100%;
text-align: left;
padding-left: 1em;
color: white;
text-shadow:
0.06em 0 black,
0 0.06em black,
-0.06em 0 black,
0 -0.06em black,
-0.06em -0.06em black,
-0.06em 0.06em black,
0.06em -0.06em black,
0.06em 0.06em black;
}
:global(.album-card .album-menu) {
display: flex;
align-items: center;
src/lib/components/VirtualizedAlbumList.svelte
+1
View File
@@ -312,6 +312,7 @@
artwork={getArtworkUrl(album.artwork_path)}
title={album.title}
artist={album.artist}
genre={"Unknown genre"}
quality={getQualityBadge(album)}
size="large"
showFavorite={true}
src/lib/components/views/ArtistDetailView.svelte
+6
View File
@@ -1443,6 +1443,7 @@
artwork={album.artwork}
title={album.title}
artist={album.year || ''}
genre={album.genre}
size="large"
quality={album.quality}
searchId={`album-${album.id}`}
@@ -1504,6 +1505,7 @@
artwork={album.artwork}
title={album.title}
artist={album.year || ''}
genre={album.genre}
size="large"
quality={album.quality}
searchId={`album-${album.id}`}
@@ -1564,6 +1566,7 @@
artwork={album.artwork}
title={album.title}
artist={album.year || ''}
genre={album.genre}
size="large"
quality={album.quality}
searchId={`album-${album.id}`}
@@ -1624,6 +1627,7 @@
artwork={album.artwork}
title={album.title}
artist={album.year || ''}
genre={album.genre}
size="large"
quality={album.quality}
searchId={`album-${album.id}`}
@@ -1684,6 +1688,7 @@
artwork={album.artwork}
title={album.title}
artist={album.year || ''}
genre={album.genre}
size="large"
quality={album.quality}
searchId={`album-${album.id}`}
@@ -1807,6 +1812,7 @@
artwork={album.artwork}
title={album.title}
artist={album.year || ''}
genre={album.genre}
size="large"
quality={album.quality}
searchId={`album-${album.id}`}
src/lib/components/views/FavoritesView.svelte
+7
View File
@@ -16,6 +16,7 @@
id: string;
title: string;
artist: { id: number; name: string };
genre?: { name: string };
image: { small?: string; thumbnail?: string; large?: string };
release_date_original?: string;
hires: boolean;
@@ -558,6 +559,10 @@
return `${mins}:${secs.toString().padStart(2, '0')}`;
}
function getGenreLabel(album: FavoriteAlbum): string {
return album.genre?.name || 'Unknown genre'
}
function getQualityLabel(item: { hires?: boolean; maximum_bit_depth?: number; maximum_sampling_rate?: number }): string {
if (item.hires && item.maximum_bit_depth && item.maximum_sampling_rate) {
return `${item.maximum_bit_depth}bit/${item.maximum_sampling_rate}kHz`;
@@ -1295,6 +1300,7 @@
artwork={album.image?.large || album.image?.thumbnail || ''}
title={album.title}
artist={album.artist.name}
genre={getGenreLabel(album)}
size="large"
quality={getQualityLabel(album)}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -1367,6 +1373,7 @@
artwork={album.image?.large || album.image?.thumbnail || ''}
title={album.title}
artist={album.artist.name}
genre={getGenreLabel(album)}
size="large"
quality={getQualityLabel(album)}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
src/lib/components/views/HomeView.svelte
+9
View File
@@ -36,6 +36,7 @@
artwork: string;
title: string;
artist: string;
genre: string;
quality?: string;
}
@@ -332,6 +333,7 @@
artwork: getQobuzImage(album.image),
title: album.title,
artist: album.artist?.name || 'Unknown Artist',
genre: album.genre?.name || 'Unknown genre',
quality: formatQuality(album.hires_streamable, album.maximum_bit_depth, album.maximum_sampling_rate)
};
}
@@ -644,6 +646,7 @@
artwork={album.artwork}
title={album.title}
artist={album.artist}
genre={album.genre}
size="large"
quality={album.quality}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -674,6 +677,7 @@
artwork={album.artwork}
title={album.title}
artist={album.artist}
genre={album.genre}
size="large"
quality={album.quality}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -704,6 +708,7 @@
artwork={album.artwork}
title={album.title}
artist={album.artist}
genre={album.genre}
size="large"
quality={album.quality}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -734,6 +739,7 @@
artwork={album.artwork}
title={album.title}
artist={album.artist}
genre={album.genre}
size="large"
quality={album.quality}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -764,6 +770,7 @@
artwork={album.artwork}
title={album.title}
artist={album.artist}
genre={album.genre}
size="large"
quality={album.quality}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -794,6 +801,7 @@
artwork={album.artwork}
title={album.title}
artist={album.artist}
genre={album.genre}
size="large"
quality={album.quality}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -895,6 +903,7 @@
artwork={album.artwork}
title={album.title}
artist={album.artist}
genre={album.genre}
size="large"
quality={album.quality}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
src/lib/components/views/SearchView.svelte
+8
View File
@@ -140,6 +140,7 @@
id: string;
title: string;
artist: { name: string };
genre?: { name: string; };
image: { small?: string; thumbnail?: string; large?: string };
release_date_original?: string;
hires_streamable?: boolean;
@@ -417,6 +418,10 @@
return `${mins}:${secs.toString().padStart(2, '0')}`;
}
function getGenreLabel(album: Album): string {
return album.genre?.name || 'Unknown genre'
}
function getQualityLabel(track: Track | Album): string {
if (track.hires_streamable && track.maximum_bit_depth && track.maximum_sampling_rate) {
return `${track.maximum_bit_depth}bit/${track.maximum_sampling_rate}kHz`;
@@ -720,6 +725,7 @@
artwork={getAlbumArtwork(allResults.albums.items[0])}
title={allResults.albums.items[0].title}
artist={allResults.albums.items[0].artist?.name || 'Unknown Artist'}
genre={getGenreLabel(allResults.albums.items[0])}
size="large"
quality={getQualityLabel(allResults.albums.items[0])}
onPlay={onAlbumPlay ? () => onAlbumPlay(allResults.albums.items[0].id) : undefined}
@@ -856,6 +862,7 @@
artwork={getAlbumArtwork(album)}
title={album.title}
artist={album.artist?.name || 'Unknown Artist'}
genre={getGenreLabel(album)}
size="large"
quality={getQualityLabel(album)}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -995,6 +1002,7 @@
artwork={getAlbumArtwork(album)}
title={album.title}
artist={album.artist?.name || 'Unknown Artist'}
genre={getGenreLabel(album)}
size="large"
quality={getQualityLabel(album)}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
src/lib/types/index.ts
+6
View File
@@ -188,6 +188,7 @@ export interface ArtistDetail {
artwork: string;
year?: string;
quality: string;
genre: string;
}[];
epsSingles: {
id: string;
@@ -195,6 +196,7 @@ export interface ArtistDetail {
artwork: string;
year?: string;
quality: string;
genre: string;
}[];
liveAlbums: {
id: string;
@@ -202,6 +204,7 @@ export interface ArtistDetail {
artwork: string;
year?: string;
quality: string;
genre: string;
}[];
compilations: {
id: string;
@@ -209,6 +212,7 @@ export interface ArtistDetail {
artwork: string;
year?: string;
quality: string;
genre: string;
}[];
tributes: {
id: string;
@@ -216,6 +220,7 @@ export interface ArtistDetail {
artwork: string;
year?: string;
quality: string;
genre: string;
}[];
others: {
id: string;
@@ -223,6 +228,7 @@ export interface ArtistDetail {
artwork: string;
year?: string;
quality: string;
genre: string;
}[];
playlists: {
id: number;