feat(web): add album detail page at /albums/:id
Hero with cover + title + linked artist + metadata; TrackRow list below. Back link targets the artist page (not Library) so drilling up feels correct. 404 renders a distinct non-retryable state.
This commit is contained in:
@@ -0,0 +1,71 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { createAlbumQuery } from '$lib/api/queries';
|
||||
import TrackRow from '$lib/components/TrackRow.svelte';
|
||||
import LibrarySkeleton from '$lib/components/LibrarySkeleton.svelte';
|
||||
import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
|
||||
import { useDelayed } from '$lib/utils/useDelayed.svelte';
|
||||
import { formatDuration } from '$lib/media/duration';
|
||||
import { FALLBACK_COVER } from '$lib/media/covers';
|
||||
import type { ApiError } from '$lib/api/client';
|
||||
|
||||
const id = $derived(page.params.id ?? '');
|
||||
const queryStore = $derived(createAlbumQuery(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'
|
||||
);
|
||||
|
||||
function onCoverError(e: Event) {
|
||||
(e.currentTarget as HTMLImageElement).src = FALLBACK_COVER;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="space-y-6">
|
||||
{#if notFound}
|
||||
<div role="alert" class="rounded border border-border bg-surface p-4">
|
||||
<p>Album 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="album" />
|
||||
{:else if query.data}
|
||||
{@const album = query.data}
|
||||
<header class="flex flex-col gap-4 md:flex-row md:items-end">
|
||||
<img
|
||||
src={album.cover_url}
|
||||
alt={album.title}
|
||||
class="h-60 w-60 rounded object-cover"
|
||||
loading="lazy"
|
||||
onerror={onCoverError}
|
||||
/>
|
||||
<div class="flex-1 space-y-1">
|
||||
<h1 class="text-3xl font-semibold">{album.title}</h1>
|
||||
<p>
|
||||
<a href={`/artists/${album.artist_id}`} class="hover:underline">{album.artist_name}</a>
|
||||
</p>
|
||||
{#if album.year}
|
||||
<p class="text-sm text-text-secondary">{album.year}</p>
|
||||
{/if}
|
||||
<p class="text-sm text-text-secondary">
|
||||
{album.track_count} {album.track_count === 1 ? 'track' : 'tracks'}
|
||||
· {formatDuration(album.duration_sec)}
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{#if album.tracks.length === 0}
|
||||
<p class="text-text-secondary">This album has no tracks.</p>
|
||||
{:else}
|
||||
<div class="overflow-hidden rounded border border-border">
|
||||
{#each album.tracks as track (track.id)}
|
||||
<TrackRow {track} />
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,110 @@
|
||||
import { afterEach, describe, expect, test, vi } from 'vitest';
|
||||
import { render, screen } from '@testing-library/svelte';
|
||||
import { flushSync } from 'svelte';
|
||||
import { mockQuery } from '../../../test-utils/query';
|
||||
import type { AlbumDetail, TrackRef } from '$lib/api/types';
|
||||
|
||||
const state = vi.hoisted(() => ({ pageParams: { id: 'xyz' } as Record<string, string> }));
|
||||
|
||||
vi.mock('$app/state', () => ({
|
||||
page: {
|
||||
get params() { return state.pageParams; },
|
||||
get url() { return new URL('http://localhost/albums/' + state.pageParams.id); }
|
||||
}
|
||||
}));
|
||||
|
||||
vi.mock('$lib/api/queries', () => ({
|
||||
qk: { album: (id: string) => ['album', id] },
|
||||
createAlbumQuery: vi.fn()
|
||||
}));
|
||||
|
||||
import AlbumPage from './+page.svelte';
|
||||
import { createAlbumQuery } from '$lib/api/queries';
|
||||
|
||||
function track(id: string, title: string, number: number, dur: number): TrackRef {
|
||||
return {
|
||||
id, title,
|
||||
album_id: 'xyz', album_title: 'Kind of Blue',
|
||||
artist_id: 'md', artist_name: 'Miles Davis',
|
||||
track_number: number, disc_number: 1,
|
||||
duration_sec: dur,
|
||||
stream_url: `/api/tracks/${id}/stream`
|
||||
};
|
||||
}
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks();
|
||||
state.pageParams = { id: 'xyz' };
|
||||
});
|
||||
|
||||
describe('album detail page', () => {
|
||||
test('renders hero metadata + one TrackRow per track', () => {
|
||||
const detail: AlbumDetail = {
|
||||
id: 'xyz', title: 'Kind of Blue',
|
||||
artist_id: 'md', artist_name: 'Miles Davis',
|
||||
year: 1959, track_count: 2, duration_sec: 544 + 565,
|
||||
cover_url: '/api/albums/xyz/cover',
|
||||
tracks: [track('t1', 'So What', 1, 544), track('t2', 'Freddie Freeloader', 2, 565)]
|
||||
};
|
||||
(createAlbumQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: detail }));
|
||||
render(AlbumPage);
|
||||
|
||||
expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Kind of Blue');
|
||||
expect(screen.getByRole('link', { name: /Miles Davis/ })).toHaveAttribute('href', '/artists/md');
|
||||
expect(screen.getByText(/1959/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/2 tracks/i)).toBeInTheDocument();
|
||||
|
||||
expect(screen.getByText('So What')).toBeInTheDocument();
|
||||
expect(screen.getByText('Freddie Freeloader')).toBeInTheDocument();
|
||||
|
||||
const img = screen.getByRole('img') as HTMLImageElement;
|
||||
expect(img.src).toContain('/api/albums/xyz/cover');
|
||||
});
|
||||
|
||||
test('back link points to /artists/:artistId with the artist name', () => {
|
||||
const detail: AlbumDetail = {
|
||||
id: 'xyz', title: 'T',
|
||||
artist_id: 'md', artist_name: 'Miles Davis',
|
||||
track_count: 0, duration_sec: 0,
|
||||
cover_url: '/api/albums/xyz/cover',
|
||||
tracks: []
|
||||
};
|
||||
(createAlbumQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: detail }));
|
||||
render(AlbumPage);
|
||||
const back = screen.getByRole('link', { name: /Miles Davis/ });
|
||||
expect(back).toHaveAttribute('href', '/artists/md');
|
||||
});
|
||||
|
||||
test('404 renders non-retryable "Album not found" with back link', () => {
|
||||
(createAlbumQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({
|
||||
isError: true,
|
||||
error: { code: 'not_found', message: 'nope', status: 404 }
|
||||
}));
|
||||
render(AlbumPage);
|
||||
expect(screen.getByText(/album not found/i)).toBeInTheDocument();
|
||||
expect(screen.queryByRole('button', { name: /try again/i })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('non-404 error renders the retry banner', () => {
|
||||
(createAlbumQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({
|
||||
isError: true,
|
||||
error: { code: 'server_error', message: 'boom', status: 500 }
|
||||
}));
|
||||
render(AlbumPage);
|
||||
expect(screen.getByRole('alert')).toHaveTextContent('boom');
|
||||
expect(screen.getByRole('button', { name: /try again/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('pending (after delay) renders the album skeleton', () => {
|
||||
(createAlbumQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ isPending: true }));
|
||||
vi.useFakeTimers();
|
||||
try {
|
||||
render(AlbumPage);
|
||||
vi.advanceTimersByTime(200);
|
||||
flushSync();
|
||||
expect(screen.getByTestId('skeleton-album')).toBeInTheDocument();
|
||||
} finally {
|
||||
vi.useRealTimers();
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user