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>
72 lines
2.2 KiB
Svelte
72 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import type { AlbumRef, AlbumDetail } from '$lib/api/types';
|
|
import { api } from '$lib/api/client';
|
|
import { enqueueTracks, playQueue } from '$lib/player/store.svelte';
|
|
import { Play } from 'lucide-svelte';
|
|
import AlbumMenu from './AlbumMenu.svelte';
|
|
import CardActionCluster from './CardActionCluster.svelte';
|
|
import Cover from './Cover.svelte';
|
|
|
|
let { album }: { album: AlbumRef } = $props();
|
|
|
|
async function onAddClick(e: MouseEvent) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const detail = await api.get<AlbumDetail>(`/api/albums/${album.id}`);
|
|
enqueueTracks(detail.tracks);
|
|
}
|
|
|
|
async function onPlayClick(e: MouseEvent) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const detail = await api.get<AlbumDetail>(`/api/albums/${album.id}`);
|
|
playQueue(detail.tracks, 0);
|
|
}
|
|
</script>
|
|
|
|
<div class="card group relative">
|
|
<a
|
|
href={`/albums/${album.id}`}
|
|
class="block rounded focus-visible:ring-2 focus-visible:ring-accent"
|
|
>
|
|
<div
|
|
class="art-wrap relative aspect-square w-full overflow-hidden rounded-md
|
|
shadow-sm transition-all duration-150
|
|
group-hover:shadow-lg group-hover:ring-1 group-hover:ring-accent/40"
|
|
>
|
|
<Cover
|
|
src={album.cover_url}
|
|
class="transition-transform group-hover:scale-[1.03]"
|
|
/>
|
|
<button
|
|
type="button"
|
|
aria-label={`Play ${album.title}`}
|
|
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-sm font-medium text-text-primary">{album.title}</div>
|
|
{#if album.artist_name}
|
|
<div class="truncate text-xs text-text-secondary">{album.artist_name}</div>
|
|
{/if}
|
|
</a>
|
|
<CardActionCluster
|
|
likeEntityType="album"
|
|
likeEntityId={album.id}
|
|
onAdd={onAddClick}
|
|
addLabel="Add to queue"
|
|
>
|
|
{#snippet menu()}
|
|
<AlbumMenu
|
|
albumId={album.id}
|
|
albumTitle={album.title}
|
|
artistId={album.artist_id}
|
|
artistName={album.artist_name}
|
|
/>
|
|
{/snippet}
|
|
</CardActionCluster>
|
|
</div>
|
|
|