bvandeusen
a4a5a20308
Wraps the existing link in a relative container; adds an absolutely positioned + button. On click stops propagation, fetches /api/albums/:id once, and feeds tracks into enqueueTracks.
45 lines
1.4 KiB
Svelte
45 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import type { AlbumRef, AlbumDetail } from '$lib/api/types';
|
|
import { FALLBACK_COVER } from '$lib/media/covers';
|
|
import { api } from '$lib/api/client';
|
|
import { enqueueTracks } from '$lib/player/store.svelte';
|
|
|
|
let { album }: { album: AlbumRef } = $props();
|
|
|
|
function onImgError(e: Event) {
|
|
(e.currentTarget as HTMLImageElement).src = FALLBACK_COVER;
|
|
}
|
|
|
|
async function onAddClick(e: MouseEvent) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const detail = await api.get<AlbumDetail>(`/api/albums/${album.id}`);
|
|
enqueueTracks(detail.tracks);
|
|
}
|
|
</script>
|
|
|
|
<div class="relative">
|
|
<a
|
|
href={`/albums/${album.id}`}
|
|
class="group block rounded focus-visible:ring-2 focus-visible:ring-accent"
|
|
>
|
|
<img
|
|
src={album.cover_url}
|
|
alt=""
|
|
class="aspect-square w-full rounded object-cover transition-transform group-hover:scale-[1.03]"
|
|
loading="lazy"
|
|
onerror={onImgError}
|
|
/>
|
|
<div class="mt-2 truncate text-sm font-medium">{album.title}</div>
|
|
{#if album.year}
|
|
<div class="text-xs text-text-secondary">{album.year}</div>
|
|
{/if}
|
|
</a>
|
|
<button
|
|
type="button"
|
|
aria-label="Add to queue"
|
|
onclick={onAddClick}
|
|
class="absolute right-2 top-2 rounded-full bg-surface/80 px-2 py-1 text-sm text-text-secondary hover:text-text-primary focus-visible:ring-2 focus-visible:ring-accent"
|
|
>+</button>
|
|
</div>
|