bvandeusen
15a545a25c
test-web / test (push) Failing after 33s
The full player previously sat dead-center on wide viewports — cover + controls capped at max-w-md left the right two-thirds of the screen empty while the queue remained behind a drawer toggle. Split the layout at lg+: - Extract QueueList from QueueDrawer (header + count + scrollable list body + empty state); the drawer now wraps QueueList for its slide-in chrome, and the now-playing route embeds it directly. - now-playing: at lg+ render the player as a left section + a 384px (xl: 448px) aside with QueueList. Below lg the layout is unchanged single-column and the drawer toggle in the bottom row still opens it (lg:hidden on the toggle button keeps it out of the way once the panel is permanent). - QueueList owns the close X conditionally — drawer passes onClose and the bind:closeButtonRef for focus management; embedded panel omits both since it has no dismiss action. QueueTrackRow's drag-to-reorder, click-to-jump, and current-row highlight all carry over for free since they're owned by the row component.
58 lines
1.9 KiB
Svelte
58 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import { X } from 'lucide-svelte';
|
|
import { player } from '$lib/player/store.svelte';
|
|
import QueueTrackRow from './QueueTrackRow.svelte';
|
|
|
|
// onClose: when provided, renders an X button in the header so the
|
|
// slide-in drawer can dismiss itself. The embedded panel on the
|
|
// now-playing route (visible at lg+ widths) omits it.
|
|
// closeButtonRef: bind:this hook so the drawer can focus the X for
|
|
// keyboard users on open.
|
|
type Props = {
|
|
onClose?: () => void;
|
|
closeButtonRef?: HTMLButtonElement;
|
|
};
|
|
|
|
let { onClose, closeButtonRef = $bindable() }: Props = $props();
|
|
|
|
function totalDurationLabel(tracks: { duration_sec: number }[]): string {
|
|
const totalSec = tracks.reduce((s, tr) => s + (tr.duration_sec ?? 0), 0);
|
|
const m = Math.floor(totalSec / 60);
|
|
const h = Math.floor(m / 60);
|
|
return h > 0 ? `${h}h ${m % 60}m` : `${m} min`;
|
|
}
|
|
</script>
|
|
|
|
<div class="flex h-full flex-col">
|
|
<div class="flex items-center justify-between border-b border-border px-4 py-3">
|
|
<div>
|
|
<h2 class="text-lg font-semibold">Queue</h2>
|
|
<p class="text-xs text-text-secondary">
|
|
{player.queue.length} {player.queue.length === 1 ? 'track' : 'tracks'}
|
|
{#if player.queue.length > 0} · {totalDurationLabel(player.queue)}{/if}
|
|
</p>
|
|
</div>
|
|
{#if onClose}
|
|
<button
|
|
type="button"
|
|
bind:this={closeButtonRef}
|
|
aria-label="Close queue"
|
|
onclick={onClose}
|
|
class="text-text-secondary hover:text-text-primary"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto">
|
|
{#if player.queue.length === 0}
|
|
<p class="text-text-secondary text-center p-8">No tracks queued.</p>
|
|
{:else}
|
|
{#each player.queue as track, i (track.id)}
|
|
<QueueTrackRow {track} index={i} isCurrent={i === player.index} />
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
</div>
|