feat(web): add TrackRow component
Non-interactive album track row with number, title, duration. Player plan will add click-to-play.
This commit is contained in:
@@ -0,0 +1,14 @@
|
||||
<script lang="ts">
|
||||
import type { TrackRef } from '$lib/api/types';
|
||||
import { formatDuration } from '$lib/media/duration';
|
||||
|
||||
let { track }: { track: TrackRef } = $props();
|
||||
</script>
|
||||
|
||||
<div class="grid grid-cols-[32px_1fr_auto] items-center gap-4 px-3 py-2 text-sm odd:bg-surface/50">
|
||||
<span class="text-right tabular-nums text-text-secondary">
|
||||
{track.track_number ?? '—'}
|
||||
</span>
|
||||
<span class="truncate">{track.title}</span>
|
||||
<span class="tabular-nums text-text-secondary">{formatDuration(track.duration_sec)}</span>
|
||||
</div>
|
||||
@@ -0,0 +1,31 @@
|
||||
import { describe, expect, test } from 'vitest';
|
||||
import { render, screen } from '@testing-library/svelte';
|
||||
import TrackRow from './TrackRow.svelte';
|
||||
import type { TrackRef } from '$lib/api/types';
|
||||
|
||||
const track: TrackRef = {
|
||||
id: 't1',
|
||||
title: 'So What',
|
||||
album_id: 'xyz',
|
||||
album_title: 'Kind of Blue',
|
||||
artist_id: 'm-davis',
|
||||
artist_name: 'Miles Davis',
|
||||
track_number: 1,
|
||||
disc_number: 1,
|
||||
duration_sec: 545,
|
||||
stream_url: '/api/tracks/t1/stream',
|
||||
};
|
||||
|
||||
describe('TrackRow', () => {
|
||||
test('renders track number, title, formatted duration', () => {
|
||||
render(TrackRow, { props: { track } });
|
||||
expect(screen.getByText('1')).toBeInTheDocument();
|
||||
expect(screen.getByText('So What')).toBeInTheDocument();
|
||||
expect(screen.getByText('9:05')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('track number falls back to dash when missing', () => {
|
||||
render(TrackRow, { props: { track: { ...track, track_number: undefined } } });
|
||||
expect(screen.getByText('—')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user