100 lines
3.7 KiB
Svelte
100 lines
3.7 KiB
Svelte
<script lang="ts">
|
|
import { Play } from 'lucide-svelte';
|
|
import { page } from '$app/state';
|
|
import { createArtistQuery } from '$lib/api/queries';
|
|
import { pageTitle } from '$lib/branding';
|
|
import AlbumCard from '$lib/components/AlbumCard.svelte';
|
|
import LikeButton from '$lib/components/LikeButton.svelte';
|
|
import LibrarySkeleton from '$lib/components/LibrarySkeleton.svelte';
|
|
import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
|
|
import { useDelayed } from '$lib/utils/useDelayed.svelte';
|
|
import { api } from '$lib/api/client';
|
|
import { playQueue } from '$lib/player/store.svelte';
|
|
import type { ApiError } from '$lib/api/client';
|
|
import type { TrackRef } from '$lib/api/types';
|
|
|
|
const id = $derived(page.params.id ?? '');
|
|
const queryStore = $derived(createArtistQuery(id));
|
|
const query = $derived($queryStore);
|
|
const showSkeleton = useDelayed(() => query.isPending);
|
|
|
|
const notFound = $derived(
|
|
query.isError && (query.error as unknown as ApiError | undefined)?.code === 'not_found'
|
|
);
|
|
|
|
// Mirrors ArtistCard's play overlay: fetch every track for the artist
|
|
// (server already honours per-user lidarr_quarantine), shuffle client-side,
|
|
// start the queue. Bypassed when the artist has nothing to play.
|
|
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;
|
|
}
|
|
|
|
let isStartingPlay = $state(false);
|
|
|
|
async function onPlay() {
|
|
if (isStartingPlay || !id) return;
|
|
isStartingPlay = true;
|
|
try {
|
|
const tracks = await api.get<TrackRef[]>(`/api/artists/${id}/tracks`);
|
|
if (tracks.length === 0) return;
|
|
playQueue(shuffle(tracks), 0);
|
|
} finally {
|
|
isStartingPlay = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{pageTitle(query.data?.name ? `Artist · ${query.data.name}` : 'Artist')}</title>
|
|
</svelte:head>
|
|
|
|
<div class="space-y-4">
|
|
<a href="/" class="text-sm text-text-secondary hover:text-text-primary">← Library</a>
|
|
|
|
{#if notFound}
|
|
<div role="alert" class="rounded border border-border bg-surface p-4">
|
|
<p>Artist not found.</p>
|
|
<a href="/" class="mt-2 inline-block text-sm text-accent">Back to Library</a>
|
|
</div>
|
|
{:else if query.isError}
|
|
<ApiErrorBanner error={query.error} onRetry={query.refetch} />
|
|
{:else if showSkeleton.value && !query.data}
|
|
<LibrarySkeleton variant="grid" count={12} />
|
|
{:else if query.data}
|
|
{@const detail = query.data}
|
|
<header class="flex items-center gap-4">
|
|
<div class="min-w-0 flex-1">
|
|
<h1 class="font-display text-2xl font-medium text-text-primary">{detail.name}</h1>
|
|
<p class="text-sm text-text-secondary">
|
|
{detail.album_count} {detail.album_count === 1 ? 'album' : 'albums'}
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
aria-label={`Play ${detail.name}`}
|
|
onclick={onPlay}
|
|
disabled={isStartingPlay || detail.album_count === 0}
|
|
class="flex h-12 w-12 items-center justify-center rounded-full bg-accent text-text-primary shadow transition-transform hover:scale-105 focus-visible:ring-2 focus-visible:ring-accent disabled:opacity-50 disabled:hover:scale-100"
|
|
>
|
|
<Play size={24} strokeWidth={1.5} fill="currentColor" class="ml-0.5" />
|
|
</button>
|
|
<LikeButton entityType="artist" entityId={detail.id} />
|
|
</header>
|
|
|
|
{#if detail.albums.length === 0}
|
|
<p class="text-text-secondary">This artist has no albums in the library.</p>
|
|
{:else}
|
|
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
|
|
{#each detail.albums as album (album.id)}
|
|
<AlbumCard {album} />
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
</div>
|