feat(web): make TrackRow click-to-play; pass tracks+index from album page
TrackRow becomes a <button> that dispatches playQueue(tracks, index). Album page supplies the full track list + each index so the rest of the album enqueues automatically when the user clicks a track. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -1,14 +1,25 @@
|
||||
<script lang="ts">
|
||||
import type { TrackRef } from '$lib/api/types';
|
||||
import { formatDuration } from '$lib/media/duration';
|
||||
import { playQueue } from '$lib/player/store.svelte';
|
||||
|
||||
let { track }: { track: TrackRef } = $props();
|
||||
let { tracks, index }: { tracks: TrackRef[]; index: number } = $props();
|
||||
|
||||
const track = $derived(tracks[index]);
|
||||
|
||||
function onClick() {
|
||||
playQueue(tracks, index);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="grid grid-cols-[32px_1fr_auto] items-center gap-4 px-3 py-2 text-sm odd:bg-surface/50">
|
||||
<button
|
||||
type="button"
|
||||
onclick={onClick}
|
||||
class="grid w-full grid-cols-[32px_1fr_auto] items-center gap-4 px-3 py-2 text-left text-sm odd:bg-surface/50 hover:bg-surface focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
|
||||
>
|
||||
<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>
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user