Display genre on AlbumCard when mouse over it
This commit is contained in:
Joel C committed
1 parent
49914af083
commit
22f0aa5a0e
8 files changed
+60
-2
No files matched your search
@@ -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"
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -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,
|
||||
@@ -180,6 +182,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
|
||||
@@ -315,7 +318,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;
|
||||
@@ -379,6 +382,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;
|
||||
|
||||
@@ -310,6 +310,7 @@
|
||||
artwork={getArtworkUrl(album.artwork_path)}
|
||||
title={album.title}
|
||||
artist={album.artist}
|
||||
genre={"Unknown genre"}
|
||||
quality={getQualityBadge(album)}
|
||||
showFavorite={true}
|
||||
favoriteEnabled={false}
|
||||
|
||||
@@ -1016,6 +1016,7 @@
|
||||
artwork={album.artwork}
|
||||
title={album.title}
|
||||
artist={album.year || ''}
|
||||
genre={album.genre}
|
||||
quality={album.quality}
|
||||
searchId={`album-${album.id}`}
|
||||
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
|
||||
@@ -1060,6 +1061,7 @@
|
||||
artwork={album.artwork}
|
||||
title={album.title}
|
||||
artist={album.year || ''}
|
||||
genre={album.genre}
|
||||
quality={album.quality}
|
||||
searchId={`album-${album.id}`}
|
||||
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
|
||||
@@ -1092,6 +1094,7 @@
|
||||
artwork={album.artwork}
|
||||
title={album.title}
|
||||
artist={album.year || ''}
|
||||
genre={album.genre}
|
||||
quality={album.quality}
|
||||
searchId={`album-${album.id}`}
|
||||
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
|
||||
@@ -1124,6 +1127,7 @@
|
||||
artwork={album.artwork}
|
||||
title={album.title}
|
||||
artist={album.year || ''}
|
||||
genre={album.genre}
|
||||
quality={album.quality}
|
||||
searchId={`album-${album.id}`}
|
||||
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
|
||||
@@ -1156,6 +1160,7 @@
|
||||
artwork={album.artwork}
|
||||
title={album.title}
|
||||
artist={album.year || ''}
|
||||
genre={album.genre}
|
||||
quality={album.quality}
|
||||
searchId={`album-${album.id}`}
|
||||
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
|
||||
@@ -1188,6 +1193,7 @@
|
||||
artwork={album.artwork}
|
||||
title={album.title}
|
||||
artist={album.year || ''}
|
||||
genre={album.genre}
|
||||
quality={album.quality}
|
||||
searchId={`album-${album.id}`}
|
||||
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
|
||||
|
||||
@@ -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;
|
||||
@@ -517,6 +518,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`;
|
||||
@@ -1190,6 +1195,7 @@
|
||||
artwork={album.image?.large || album.image?.thumbnail || ''}
|
||||
title={album.title}
|
||||
artist={album.artist.name}
|
||||
genre={getGenreLabel(album)}
|
||||
quality={getQualityLabel(album)}
|
||||
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
|
||||
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
|
||||
@@ -1261,6 +1267,7 @@
|
||||
artwork={album.image?.large || album.image?.thumbnail || ''}
|
||||
title={album.title}
|
||||
artist={album.artist.name}
|
||||
genre={getGenreLabel(album)}
|
||||
quality={getQualityLabel(album)}
|
||||
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
|
||||
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
|
||||
|
||||
@@ -36,6 +36,7 @@
|
||||
artwork: string;
|
||||
title: string;
|
||||
artist: string;
|
||||
genre: string;
|
||||
quality?: string;
|
||||
}
|
||||
|
||||
@@ -328,6 +329,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)
|
||||
};
|
||||
}
|
||||
@@ -637,6 +639,7 @@
|
||||
artwork={album.artwork}
|
||||
title={album.title}
|
||||
artist={album.artist}
|
||||
genre={album.genre}
|
||||
quality={album.quality}
|
||||
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
|
||||
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
|
||||
@@ -666,6 +669,7 @@
|
||||
artwork={album.artwork}
|
||||
title={album.title}
|
||||
artist={album.artist}
|
||||
genre={album.genre}
|
||||
quality={album.quality}
|
||||
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
|
||||
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
|
||||
@@ -695,6 +699,7 @@
|
||||
artwork={album.artwork}
|
||||
title={album.title}
|
||||
artist={album.artist}
|
||||
genre={album.genre}
|
||||
quality={album.quality}
|
||||
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
|
||||
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
|
||||
@@ -724,6 +729,7 @@
|
||||
artwork={album.artwork}
|
||||
title={album.title}
|
||||
artist={album.artist}
|
||||
genre={album.genre}
|
||||
quality={album.quality}
|
||||
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
|
||||
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
|
||||
@@ -753,6 +759,7 @@
|
||||
artwork={album.artwork}
|
||||
title={album.title}
|
||||
artist={album.artist}
|
||||
genre={album.genre}
|
||||
quality={album.quality}
|
||||
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
|
||||
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
|
||||
@@ -782,6 +789,7 @@
|
||||
artwork={album.artwork}
|
||||
title={album.title}
|
||||
artist={album.artist}
|
||||
genre={album.genre}
|
||||
quality={album.quality}
|
||||
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
|
||||
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
|
||||
@@ -881,6 +889,7 @@
|
||||
artwork={album.artwork}
|
||||
title={album.title}
|
||||
artist={album.artist}
|
||||
genre={album.genre}
|
||||
quality={album.quality}
|
||||
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
|
||||
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
|
||||
|
||||
@@ -132,6 +132,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;
|
||||
@@ -376,6 +377,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`;
|
||||
@@ -624,6 +629,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])}
|
||||
quality={getQualityLabel(allResults.albums.items[0])}
|
||||
onPlay={onAlbumPlay ? () => onAlbumPlay(allResults.albums.items[0].id) : undefined}
|
||||
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(allResults.albums.items[0].id) : undefined}
|
||||
@@ -756,6 +762,7 @@
|
||||
artwork={getAlbumArtwork(album)}
|
||||
title={album.title}
|
||||
artist={album.artist?.name || 'Unknown Artist'}
|
||||
genre={getGenreLabel(album)}
|
||||
quality={getQualityLabel(album)}
|
||||
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
|
||||
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
|
||||
@@ -923,6 +930,7 @@
|
||||
artwork={getAlbumArtwork(album)}
|
||||
title={album.title}
|
||||
artist={album.artist?.name || 'Unknown Artist'}
|
||||
genre={getGenreLabel(album)}
|
||||
quality={getQualityLabel(album)}
|
||||
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
|
||||
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
|
||||
|
||||
@@ -130,6 +130,7 @@ export interface ArtistDetail {
|
||||
artwork: string;
|
||||
year?: string;
|
||||
quality: string;
|
||||
genre: string;
|
||||
}[];
|
||||
epsSingles: {
|
||||
id: string;
|
||||
@@ -137,6 +138,7 @@ export interface ArtistDetail {
|
||||
artwork: string;
|
||||
year?: string;
|
||||
quality: string;
|
||||
genre: string;
|
||||
}[];
|
||||
liveAlbums: {
|
||||
id: string;
|
||||
@@ -144,6 +146,7 @@ export interface ArtistDetail {
|
||||
artwork: string;
|
||||
year?: string;
|
||||
quality: string;
|
||||
genre: string;
|
||||
}[];
|
||||
compilations: {
|
||||
id: string;
|
||||
@@ -151,6 +154,7 @@ export interface ArtistDetail {
|
||||
artwork: string;
|
||||
year?: string;
|
||||
quality: string;
|
||||
genre: string;
|
||||
}[];
|
||||
tributes: {
|
||||
id: string;
|
||||
@@ -158,6 +162,7 @@ export interface ArtistDetail {
|
||||
artwork: string;
|
||||
year?: string;
|
||||
quality: string;
|
||||
genre: string;
|
||||
}[];
|
||||
others: {
|
||||
id: string;
|
||||
@@ -165,6 +170,7 @@ export interface ArtistDetail {
|
||||
artwork: string;
|
||||
year?: string;
|
||||
quality: string;
|
||||
genre: string;
|
||||
}[];
|
||||
playlists: {
|
||||
id: number;
|
||||
|
||||
Reference in new issue
Block a user