feat(web-player): label each explore result with its kind
This commit is contained in:
@@ -8,6 +8,7 @@
|
||||
id: string | number;
|
||||
title: string;
|
||||
artist?: string | null;
|
||||
typeLabel?: string;
|
||||
coverSrc?: string | null;
|
||||
coverSize?: 'small' | 'medium' | 'large';
|
||||
hue: number;
|
||||
@@ -24,6 +25,7 @@
|
||||
id,
|
||||
title,
|
||||
artist,
|
||||
typeLabel,
|
||||
coverSrc,
|
||||
coverSize = 'large',
|
||||
hue,
|
||||
@@ -35,6 +37,8 @@
|
||||
onContextMenu,
|
||||
badge
|
||||
}: Props = $props();
|
||||
|
||||
const meta = $derived([typeLabel, artist].filter((part) => !!part).join(' · '));
|
||||
</script>
|
||||
|
||||
<li
|
||||
@@ -64,11 +68,11 @@
|
||||
{/if}
|
||||
<span class="truncate text-fg" {title}>{title}</span>
|
||||
</div>
|
||||
{#if badge || artist}
|
||||
{#if badge || meta}
|
||||
<div class="mt-0.5 flex min-w-0 items-center gap-1.5">
|
||||
{@render badge?.()}
|
||||
{#if artist}
|
||||
<span class="truncate text-sm text-fg-3" title={artist}>{artist}</span>
|
||||
{#if meta}
|
||||
<span class="truncate text-sm text-fg-3" title={meta}>{meta}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
title: string;
|
||||
href?: string;
|
||||
subtitle?: string;
|
||||
typeLabel?: string;
|
||||
releaseYear?: number;
|
||||
trackCount?: number;
|
||||
trackIds?: (string | number)[];
|
||||
@@ -20,6 +21,7 @@
|
||||
title,
|
||||
href,
|
||||
subtitle,
|
||||
typeLabel,
|
||||
releaseYear,
|
||||
trackCount,
|
||||
trackIds = [],
|
||||
@@ -29,6 +31,7 @@
|
||||
|
||||
const meta = $derived(
|
||||
[
|
||||
typeLabel,
|
||||
subtitle,
|
||||
releaseYear ? String(releaseYear) : undefined,
|
||||
trackCount === undefined
|
||||
|
||||
@@ -275,6 +275,7 @@
|
||||
<AlbumCard
|
||||
id={album.id}
|
||||
title={album.title}
|
||||
typeLabel="Álbum"
|
||||
releaseYear={album.releaseYear === null ? undefined : Number(album.releaseYear)}
|
||||
trackCount={Number(album.trackCount)}
|
||||
trackIds={album.coverTrackIds}
|
||||
@@ -286,6 +287,7 @@
|
||||
id={album.albumId}
|
||||
href="/albums/youtube/{album.albumId}"
|
||||
title={album.title}
|
||||
typeLabel="Álbum"
|
||||
subtitle={album.artist}
|
||||
releaseYear={album.releaseYear === null ? undefined : Number(album.releaseYear)}
|
||||
coverSrc={album.thumbnailUrl}
|
||||
@@ -314,6 +316,7 @@
|
||||
id={targetId(item)}
|
||||
title={targetTitle(item)}
|
||||
artist={targetArtist(item)}
|
||||
typeLabel="Canción"
|
||||
coverSrc={targetCoverSrc(item)}
|
||||
hue={hueFor(targetId(item))}
|
||||
explicit={targetExplicit(item)}
|
||||
|
||||
Reference in New Issue
Block a user