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.
40 lines
1.3 KiB
Svelte
40 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { player, closeQueueDrawer } from '$lib/player/store.svelte';
|
|
import QueueList from './QueueList.svelte';
|
|
|
|
let previouslyFocused: HTMLElement | null = null;
|
|
let closeButton: HTMLButtonElement | undefined = $state();
|
|
|
|
$effect(() => {
|
|
if (player.queueDrawerOpen) {
|
|
previouslyFocused = document.activeElement as HTMLElement | null;
|
|
// Defer to next microtask so the close button is rendered + visible
|
|
// before we focus (the drawer may still be transitioning in).
|
|
Promise.resolve().then(() => closeButton?.focus());
|
|
} else if (previouslyFocused) {
|
|
previouslyFocused.focus();
|
|
previouslyFocused = null;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{#if player.queueDrawerOpen}
|
|
<button
|
|
type="button"
|
|
aria-label="Close queue backdrop"
|
|
class="fixed inset-0 bg-obsidian/40 z-40"
|
|
onclick={() => closeQueueDrawer()}
|
|
></button>
|
|
{/if}
|
|
|
|
<aside
|
|
aria-label="Playback queue"
|
|
aria-hidden={!player.queueDrawerOpen}
|
|
inert={!player.queueDrawerOpen}
|
|
class="fixed top-0 right-0 h-full w-full sm:w-96 bg-surface z-50
|
|
transition-transform duration-200
|
|
{player.queueDrawerOpen ? 'translate-x-0' : 'translate-x-full'}"
|
|
>
|
|
<QueueList onClose={() => closeQueueDrawer()} bind:closeButtonRef={closeButton} />
|
|
</aside>
|