bvandeusen
096a3c0b15
Cover tiles (worst in the "You might like" home row, which surfaces unplayed items whose art is often not yet backfilled) sat empty while loading and stayed blank on a 404. The server returns a fast 404; the gap was missing client-side loading/fallback states. Web: new shared Cover.svelte owns the loading placeholder + onerror fallback (static cover, or Disc3 for artists). AlbumCard, ArtistCard and CompactTrackCard now reuse it instead of three hand-rolled <img> tags that disagreed on fallback handling — notably ArtistCard had no onerror. Android: ServerImage tracks Coil's load state so the per-caller fallback doubles as a placeholder (loading) and an error state (404 / unreachable), instead of only guarding the null-URL case. All five call sites pass an explicit size modifier, so the new Box wrapper is layout-safe. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
82 lines
2.4 KiB
Svelte
82 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import type { ArtistRef, TrackRef } from '$lib/api/types';
|
|
import { api } from '$lib/api/client';
|
|
import { playQueue, enqueueTracks } from '$lib/player/store.svelte';
|
|
import { Play } from 'lucide-svelte';
|
|
import ArtistMenu from './ArtistMenu.svelte';
|
|
import CardActionCluster from './CardActionCluster.svelte';
|
|
import Cover from './Cover.svelte';
|
|
import { listArtistTracks } from '$lib/api/artists';
|
|
|
|
let { artist }: { artist: ArtistRef } = $props();
|
|
|
|
let queueing = $state(false);
|
|
|
|
function shuffle<T>(items: T[]): T[] {
|
|
const arr = items.slice();
|
|
for (let i = arr.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
[arr[i], arr[j]] = [arr[j], arr[i]];
|
|
}
|
|
return arr;
|
|
}
|
|
|
|
async function onPlayClick(e: MouseEvent) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const tracks = await api.get<TrackRef[]>(`/api/artists/${artist.id}/tracks`);
|
|
if (tracks.length === 0) return;
|
|
playQueue(shuffle(tracks), 0);
|
|
}
|
|
|
|
async function onAddToQueue(e: MouseEvent) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (queueing) return;
|
|
queueing = true;
|
|
try {
|
|
const tracks = await listArtistTracks(artist.id);
|
|
if (tracks.length > 0) enqueueTracks(tracks);
|
|
} finally {
|
|
queueing = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="card group relative">
|
|
<a
|
|
href={`/artists/${artist.id}`}
|
|
class="block rounded focus-visible:ring-2 focus-visible:ring-accent"
|
|
>
|
|
<div class="art-wrap relative mx-auto aspect-square w-full overflow-hidden rounded-full bg-surface-hover">
|
|
<Cover
|
|
src={artist.cover_url}
|
|
shape="round"
|
|
fallback="artist"
|
|
class="transition-transform group-hover:scale-[1.03]"
|
|
/>
|
|
<button
|
|
type="button"
|
|
aria-label={`Play ${artist.name}`}
|
|
onclick={onPlayClick}
|
|
class="play-overlay absolute inset-0 m-auto flex h-12 w-12 items-center justify-center rounded-full"
|
|
>
|
|
<Play size={24} strokeWidth={1.5} fill="currentColor" />
|
|
</button>
|
|
</div>
|
|
<div class="mt-2 truncate text-center text-sm font-medium text-text-primary">{artist.name}</div>
|
|
</a>
|
|
<CardActionCluster
|
|
likeEntityType="artist"
|
|
likeEntityId={artist.id}
|
|
onAdd={onAddToQueue}
|
|
addLabel={`Add ${artist.name} to queue`}
|
|
addDisabled={queueing}
|
|
>
|
|
{#snippet menu()}
|
|
<ArtistMenu artistId={artist.id} artistName={artist.name} />
|
|
{/snippet}
|
|
</CardActionCluster>
|
|
</div>
|
|
|