fix(search): use 4-quadrant collage for playlist cards
This commit is contained in:
1 parent
de0b820230
commit
b6c723d3df
1 file changed
+6
-10
@@ -46,12 +46,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function getPlaylistImage(): string {
|
function getPlaylistImages(): string[] {
|
||||||
// Prefer images300 for better quality, fallback to images150, then images
|
// Prefer images300 for better quality, fallback to images150, then images
|
||||||
if (playlist.images300?.length) return playlist.images300[0];
|
if (playlist.images300?.length) return playlist.images300;
|
||||||
if (playlist.images150?.length) return playlist.images150[0];
|
if (playlist.images150?.length) return playlist.images150;
|
||||||
if (playlist.images?.length) return playlist.images[0];
|
if (playlist.images?.length) return playlist.images;
|
||||||
return '';
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
function getGenreLabel(): string {
|
function getGenreLabel(): string {
|
||||||
@@ -133,11 +133,7 @@
|
|||||||
onkeydown={(e) => e.key === 'Enter' && onclick?.()}
|
onkeydown={(e) => e.key === 'Enter' && onclick?.()}
|
||||||
>
|
>
|
||||||
<div class="artwork-container">
|
<div class="artwork-container">
|
||||||
{#if getPlaylistImage()}
|
<PlaylistCollage artworks={getPlaylistImages()} size={162} />
|
||||||
<img src={getPlaylistImage()} alt={playlist.name} loading="lazy" />
|
|
||||||
{:else}
|
|
||||||
<PlaylistCollage artworks={playlist.images || []} size={162} />
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="action-overlay">
|
<div class="action-overlay">
|
||||||
{#if getGenreLabel()}
|
{#if getGenreLabel()}
|
||||||
|
|||||||
Reference in new issue
Block a user