106 lines
3.2 KiB
Svelte
106 lines
3.2 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 { Disc3, Play, Plus } from 'lucide-svelte';
|
|
import LikeButton from './LikeButton.svelte';
|
|
import ArtistMenu from './ArtistMenu.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 relative">
|
|
<a
|
|
href={`/artists/${artist.id}`}
|
|
class="group 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">
|
|
{#if artist.cover_url}
|
|
<img
|
|
src={artist.cover_url}
|
|
alt=""
|
|
class="h-full w-full object-cover transition-transform group-hover:scale-[1.03]"
|
|
loading="lazy"
|
|
/>
|
|
{:else}
|
|
<div class="flex h-full w-full items-center justify-center">
|
|
<Disc3 strokeWidth={1} class="h-4/5 w-4/5 text-text-muted" />
|
|
</div>
|
|
{/if}
|
|
<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>
|
|
<div class="absolute right-2 top-2 z-10 flex gap-1">
|
|
<LikeButton entityType="artist" entityId={artist.id} />
|
|
<button
|
|
type="button"
|
|
aria-label={`Add ${artist.name} to queue`}
|
|
onclick={onAddToQueue}
|
|
disabled={queueing}
|
|
class="rounded-full bg-surface px-2 py-1 text-sm text-text-secondary hover:text-text-primary focus-visible:ring-2 focus-visible:ring-accent disabled:opacity-50"
|
|
>
|
|
<Plus size={16} strokeWidth={1} />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="absolute right-2 bottom-2 z-10">
|
|
<ArtistMenu artistId={artist.id} artistName={artist.name} />
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.play-overlay {
|
|
background: var(--fs-accent);
|
|
color: var(--fs-parchment);
|
|
opacity: 0;
|
|
transition: opacity 150ms ease;
|
|
}
|
|
@media (hover: hover) {
|
|
.card:hover .play-overlay { opacity: 1; }
|
|
}
|
|
@media (hover: none) {
|
|
.play-overlay { opacity: 1; }
|
|
}
|
|
</style>
|