fix(web): compact PlayerBar — 3-column top row, full-width seek bottom (#358)
Replaces the kebab-with-popover PlayerOverflowMenu approach with all player controls visible inline. Operator's stated intent was "two-row layout with all controls visible," not "kebab hides shuffle/repeat/ queue/volume" — restructured to match. ### Compact view (below md) ┌─────────┬───────────┬───────────────────┐ │ art │ ♥ ⋮ │ 🔀 🔁 ☰ │ ← short sub-row │ title │ │ │ │ artist │ ⏮ ⏯ ⏭ │ volume slider │ ← play row at full size ├─────────┴───────────┴───────────────────┤ │ 0:42 ━━━━━●━━━━━━━━━━━━━━━━━━━━━━ 3:21 │ └─────────────────────────────────────────┘ - Column 1: cover + title/artist - Column 2: like+kebab on top sub-row, play controls (40/48/40) below - Column 3: shuffle/repeat/queue on top, volume slider below - Bottom: full-width seek slider with time labels ### Desktop view (md+) Existing 3-column layout preserved; only change is the redundant PlayerOverflowMenu kebab (which had been mounting at all widths) is no longer there. Volume + shuffle + repeat + queue stay inline in the right cluster as before. ### Cleanup - Deleted PlayerOverflowMenu.svelte + its test (no callers remain) - The TrackMenu kebab (per-track actions) stays — it's a varying list of actions that doesn't fit inline Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -15,7 +15,6 @@
|
||||
import { FALLBACK_COVER, coverUrl } from '$lib/media/covers';
|
||||
import LikeButton from './LikeButton.svelte';
|
||||
import TrackMenu from './TrackMenu.svelte';
|
||||
import PlayerOverflowMenu from './PlayerOverflowMenu.svelte';
|
||||
|
||||
const current = $derived(player.current);
|
||||
|
||||
@@ -29,7 +28,6 @@
|
||||
player.repeat === 'all' ? 'Repeat all' : 'Repeat one'
|
||||
);
|
||||
|
||||
// Volume icon tracks level so the right-edge anchor reads at a glance.
|
||||
const VolumeIcon = $derived(
|
||||
player.volume === 0 ? VolumeX :
|
||||
player.volume < 0.5 ? Volume1 : Volume2
|
||||
@@ -49,9 +47,181 @@
|
||||
</script>
|
||||
|
||||
{#if current}
|
||||
<div class="flex flex-col md:flex-row md:min-h-[108px] min-h-[88px] md:items-center gap-2 md:gap-4 border-t border-border bg-surface px-3 md:px-4 py-2 md:py-1.5">
|
||||
<!--
|
||||
COMPACT view (below md). Layout per operator design:
|
||||
┌─────────┬───────────┬───────────────────┐
|
||||
│ art │ ♥ ⋮ │ 🔀 🔁 ☰ │ ← short sub-row
|
||||
│ title │ │ │
|
||||
│ artist │ ⏮ ⏯ ⏭ │ volume slider │ ← play row at full size
|
||||
├─────────┴───────────┴───────────────────┤
|
||||
│ 0:42 ━━━━━●━━━━━━━━━━━━━━━━━━━━━━ 3:21 │
|
||||
└─────────────────────────────────────────┘
|
||||
Play controls maintain 40/48/40 size; like+kebab and column-3 sub-rows
|
||||
are shorter so column 2's bottom edge aligns with column 3's bottom.
|
||||
-->
|
||||
<div class="md:hidden flex flex-col gap-1.5 border-t border-border bg-surface px-3 py-2">
|
||||
{#if player.state === 'error'}
|
||||
<div role="alert" class="flex items-center justify-center gap-3 text-sm text-text-primary">
|
||||
<span>{player.error ?? 'Playback failed.'}</span>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded bg-accent px-3 py-1.5 text-sm text-text-primary"
|
||||
onclick={() => playQueue(player.queue, player.index)}
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Top row: 3 columns -->
|
||||
<div class="flex items-stretch gap-3">
|
||||
<!-- Column 1: art + title + artist -->
|
||||
<a
|
||||
href={`/albums/${current.album_id}`}
|
||||
aria-label="Open album"
|
||||
class="flex min-w-0 items-center gap-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
|
||||
style="flex: 1 1 35%;"
|
||||
>
|
||||
<img
|
||||
src={coverUrl(current.album_id)}
|
||||
alt=""
|
||||
class="h-12 w-12 shrink-0 rounded-md object-cover"
|
||||
onerror={onCoverError}
|
||||
/>
|
||||
<div class="min-w-0">
|
||||
<div class="truncate text-sm font-medium text-text-primary">{current.title}</div>
|
||||
<div class="truncate text-xs text-text-secondary">{current.artist_name}</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Column 2: like+kebab (top), play controls (bottom) -->
|
||||
<div class="flex flex-col items-center justify-between gap-1 shrink-0">
|
||||
<div class="flex items-center gap-0.5">
|
||||
<LikeButton entityType="track" entityId={current.id} />
|
||||
<TrackMenu track={current} direction="up" hideQueueActions />
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Previous"
|
||||
disabled={skipPrevDisabled}
|
||||
onclick={skipPrev}
|
||||
class="flex h-10 w-10 items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary disabled:opacity-40 disabled:hover:bg-transparent"
|
||||
>
|
||||
<SkipBack size={18} strokeWidth={1.5} fill="currentColor" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={player.isPlaying ? 'Pause' : 'Play'}
|
||||
onclick={togglePlay}
|
||||
class="flex h-12 w-12 items-center justify-center rounded-full bg-accent text-text-primary shadow transition-transform hover:scale-105 focus-visible:ring-2 focus-visible:ring-accent"
|
||||
>
|
||||
{#if player.state === 'loading' || player.state === 'idle'}
|
||||
<Loader2 data-testid="play-spinner" size={22} strokeWidth={1.5} class="animate-spin" />
|
||||
{:else if player.isPlaying}
|
||||
<Pause size={22} strokeWidth={1.5} fill="currentColor" />
|
||||
{:else}
|
||||
<Play size={22} strokeWidth={1.5} fill="currentColor" class="ml-0.5" />
|
||||
{/if}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Next"
|
||||
disabled={skipNextDisabled}
|
||||
onclick={skipNext}
|
||||
class="flex h-10 w-10 items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary disabled:opacity-40 disabled:hover:bg-transparent"
|
||||
>
|
||||
<SkipForward size={18} strokeWidth={1.5} fill="currentColor" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Column 3: shuffle/repeat/queue (top), volume slider (bottom) -->
|
||||
<div class="flex min-w-0 flex-col items-stretch justify-between gap-1" style="flex: 1 1 30%;">
|
||||
<div class="flex items-center justify-end gap-0.5">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Shuffle"
|
||||
aria-pressed={player.shuffle}
|
||||
onclick={toggleShuffle}
|
||||
class="flex h-8 w-8 items-center justify-center rounded-full transition-colors {player.shuffle
|
||||
? 'bg-accent-tint text-accent'
|
||||
: 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}"
|
||||
>
|
||||
<Shuffle size={16} strokeWidth={1.5} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={repeatLabel}
|
||||
onclick={cycleRepeat}
|
||||
class="flex h-8 w-8 items-center justify-center rounded-full transition-colors {player.repeat !== 'off'
|
||||
? 'bg-accent-tint text-accent'
|
||||
: 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}"
|
||||
>
|
||||
{#if player.repeat === 'one'}
|
||||
<Repeat1 size={16} strokeWidth={1.5} />
|
||||
{:else}
|
||||
<Repeat size={16} strokeWidth={1.5} />
|
||||
{/if}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => toggleQueueDrawer()}
|
||||
aria-label={player.queueDrawerOpen ? 'Close queue' : 'Open queue'}
|
||||
aria-pressed={player.queueDrawerOpen}
|
||||
class="flex h-8 w-8 items-center justify-center rounded-full transition-colors {player.queueDrawerOpen
|
||||
? 'bg-accent-tint text-accent'
|
||||
: 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}"
|
||||
>
|
||||
<ListMusic size={16} strokeWidth={1.5} />
|
||||
</button>
|
||||
</div>
|
||||
<label class="flex items-center gap-1">
|
||||
<span class="sr-only">Volume</span>
|
||||
<VolumeIcon size={14} strokeWidth={1.5} class="shrink-0 text-text-secondary" />
|
||||
<input
|
||||
type="range"
|
||||
aria-label="Volume"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
value={player.volume}
|
||||
oninput={onVolumeInput}
|
||||
class="min-w-0 flex-1 accent-accent"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom row: full-width seek slider + time labels -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-9 shrink-0 text-right text-[10px] tabular-nums text-text-secondary">
|
||||
{formatDuration(player.position)}
|
||||
</span>
|
||||
<input
|
||||
type="range"
|
||||
aria-label="Seek"
|
||||
min="0"
|
||||
max={player.duration || 0}
|
||||
step="0.1"
|
||||
value={player.position}
|
||||
oninput={onSeekInput}
|
||||
class="flex-1 accent-accent"
|
||||
/>
|
||||
<span class="w-9 shrink-0 text-[10px] tabular-nums text-text-secondary">
|
||||
{formatDuration(player.duration)}
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!--
|
||||
DESKTOP view (md+). Original 3-column layout — unchanged except that
|
||||
the redundant PlayerOverflowMenu kebab is no longer mounted (volume,
|
||||
shuffle, repeat, queue all live inline in the right cluster).
|
||||
-->
|
||||
<div class="hidden md:flex md:flex-row md:min-h-[108px] md:items-center md:gap-4 border-t border-border bg-surface md:px-4 md:py-1.5">
|
||||
<!-- Left: cover + title + artist + like + menu -->
|
||||
<div class="flex w-full md:w-72 min-w-0 items-center gap-3">
|
||||
<div class="flex w-72 min-w-0 items-center gap-3">
|
||||
<a
|
||||
href={`/albums/${current.album_id}`}
|
||||
aria-label="Open album"
|
||||
@@ -60,7 +230,7 @@
|
||||
<img
|
||||
src={coverUrl(current.album_id)}
|
||||
alt=""
|
||||
class="h-10 w-10 md:h-24 md:w-24 rounded-md object-cover"
|
||||
class="h-24 w-24 rounded-md object-cover"
|
||||
onerror={onCoverError}
|
||||
/>
|
||||
</a>
|
||||
@@ -74,14 +244,13 @@
|
||||
</a>
|
||||
{#if player.queue.length > player.index + 1}
|
||||
{@const nextTrack = player.queue[player.index + 1]}
|
||||
<span class="text-text-secondary text-xs truncate hidden md:block">
|
||||
<span class="block truncate text-xs text-text-secondary">
|
||||
Next · {nextTrack.title} — {nextTrack.artist_name}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<LikeButton entityType="track" entityId={current.id} />
|
||||
<TrackMenu track={current} direction="up" hideQueueActions />
|
||||
<PlayerOverflowMenu direction="up" />
|
||||
</div>
|
||||
|
||||
<!-- Center: seek row + transport row -->
|
||||
@@ -98,7 +267,7 @@
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-1 flex-col items-stretch gap-2">
|
||||
<!-- Transport row: prev / play / next, play is the accent focal point -->
|
||||
<!-- Transport row -->
|
||||
<div class="flex items-center justify-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
@@ -116,12 +285,7 @@
|
||||
class="flex h-12 w-12 items-center justify-center rounded-full bg-accent text-text-primary shadow transition-transform hover:scale-105 focus-visible:ring-2 focus-visible:ring-accent"
|
||||
>
|
||||
{#if player.state === 'loading' || player.state === 'idle'}
|
||||
<Loader2
|
||||
data-testid="play-spinner"
|
||||
size={24}
|
||||
strokeWidth={1.5}
|
||||
class="animate-spin"
|
||||
/>
|
||||
<Loader2 size={24} strokeWidth={1.5} class="animate-spin" />
|
||||
{:else if player.isPlaying}
|
||||
<Pause size={24} strokeWidth={1.5} fill="currentColor" />
|
||||
{:else}
|
||||
@@ -140,7 +304,7 @@
|
||||
</div>
|
||||
<!-- Seek row -->
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-10 md:w-12 shrink-0 text-right text-[10px] md:text-xs tabular-nums text-text-secondary">
|
||||
<span class="w-12 shrink-0 text-right text-xs tabular-nums text-text-secondary">
|
||||
{formatDuration(player.position)}
|
||||
</span>
|
||||
<input
|
||||
@@ -153,15 +317,15 @@
|
||||
oninput={onSeekInput}
|
||||
class="flex-1 accent-accent"
|
||||
/>
|
||||
<span class="w-10 md:w-12 shrink-0 text-[10px] md:text-xs tabular-nums text-text-secondary">
|
||||
<span class="w-12 shrink-0 text-xs tabular-nums text-text-secondary">
|
||||
{formatDuration(player.duration)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Right: shuffle + repeat + volume -->
|
||||
<div class="hidden md:flex w-60 items-center justify-end gap-2">
|
||||
<!-- Right: shuffle + repeat + queue + volume -->
|
||||
<div class="flex w-60 items-center justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Shuffle"
|
||||
|
||||
@@ -1,97 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { MoreVertical, Shuffle, Repeat, Repeat1, ListMusic, Volume2 } from 'lucide-svelte';
|
||||
import {
|
||||
player, toggleShuffle, cycleRepeat, toggleQueueDrawer, setVolume
|
||||
} from '$lib/player/store.svelte';
|
||||
import TrackMenuItem from './TrackMenuItem.svelte';
|
||||
import TrackMenuDivider from './TrackMenuDivider.svelte';
|
||||
|
||||
let { direction = 'up' }: { direction?: 'up' | 'down' } = $props();
|
||||
|
||||
let menuOpen = $state(false);
|
||||
|
||||
function toggleMenu(e: MouseEvent) {
|
||||
e.stopPropagation();
|
||||
menuOpen = !menuOpen;
|
||||
}
|
||||
|
||||
const repeatLabel = $derived(
|
||||
player.repeat === 'off' ? 'Repeat off' :
|
||||
player.repeat === 'all' ? 'Repeat all' : 'Repeat one'
|
||||
);
|
||||
|
||||
const repeatIcon = $derived(player.repeat === 'one' ? Repeat1 : Repeat);
|
||||
|
||||
function onShuffle() {
|
||||
toggleShuffle();
|
||||
}
|
||||
function onRepeat() {
|
||||
cycleRepeat();
|
||||
}
|
||||
function onQueue() {
|
||||
toggleQueueDrawer();
|
||||
menuOpen = false;
|
||||
}
|
||||
function onVolume(e: Event) {
|
||||
setVolume(Number((e.currentTarget as HTMLInputElement).value));
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onclick={() => { menuOpen = false; }} onkeydown={(e) => e.key === 'Escape' && (menuOpen = false)} />
|
||||
|
||||
<div class="relative inline-block">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Player options"
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={menuOpen}
|
||||
onclick={toggleMenu}
|
||||
class="rounded p-1 text-text-muted hover:text-text-primary min-h-[44px] min-w-[44px]
|
||||
flex items-center justify-center"
|
||||
>
|
||||
<MoreVertical size={18} strokeWidth={1} />
|
||||
</button>
|
||||
|
||||
{#if menuOpen}
|
||||
<div
|
||||
role="menu"
|
||||
tabindex="-1"
|
||||
class="absolute right-0 z-20 w-56 rounded-md border border-border bg-surface p-1 shadow-lg
|
||||
{direction === 'up' ? 'bottom-full mb-1' : 'top-full mt-1'}"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
onkeydown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<TrackMenuItem
|
||||
icon={Shuffle}
|
||||
label={player.shuffle ? 'Shuffle on' : 'Shuffle off'}
|
||||
onclick={onShuffle}
|
||||
/>
|
||||
<TrackMenuItem
|
||||
icon={repeatIcon}
|
||||
label={repeatLabel}
|
||||
onclick={onRepeat}
|
||||
/>
|
||||
<TrackMenuItem
|
||||
icon={ListMusic}
|
||||
label={player.queueDrawerOpen ? 'Hide queue' : 'Show queue'}
|
||||
onclick={onQueue}
|
||||
/>
|
||||
|
||||
<TrackMenuDivider />
|
||||
|
||||
<div class="flex items-center gap-2 px-2 py-1.5">
|
||||
<Volume2 size={14} strokeWidth={1} class="shrink-0 text-text-secondary" />
|
||||
<input
|
||||
type="range"
|
||||
aria-label="Volume"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
value={player.volume}
|
||||
oninput={onVolume}
|
||||
class="flex-1 accent-accent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -1,31 +0,0 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/svelte';
|
||||
import PlayerOverflowMenu from './PlayerOverflowMenu.svelte';
|
||||
|
||||
describe('PlayerOverflowMenu', () => {
|
||||
it('renders the trigger button closed by default', () => {
|
||||
render(PlayerOverflowMenu);
|
||||
const trigger = screen.getByLabelText('Player options');
|
||||
expect(trigger.getAttribute('aria-expanded')).toBe('false');
|
||||
});
|
||||
|
||||
it('opens the menu on click and shows shuffle/repeat/queue/volume', async () => {
|
||||
render(PlayerOverflowMenu);
|
||||
const trigger = screen.getByLabelText('Player options');
|
||||
await fireEvent.click(trigger);
|
||||
expect(trigger.getAttribute('aria-expanded')).toBe('true');
|
||||
expect(screen.getByText(/shuffle/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/repeat/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/queue/i)).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('Volume')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('Escape key closes the menu', async () => {
|
||||
render(PlayerOverflowMenu);
|
||||
await fireEvent.click(screen.getByLabelText('Player options'));
|
||||
expect(screen.getByLabelText('Player options').getAttribute('aria-expanded')).toBe('true');
|
||||
window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
|
||||
await Promise.resolve();
|
||||
expect(screen.getByLabelText('Player options').getAttribute('aria-expanded')).toBe('false');
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user