feat(web): add PlayerBar component

Bottom-bar UI with left: cover+title+linked artist, center: stacked seek row (elapsed / slider / duration) + transport (prev/play/next), right: shuffle/repeat/volume. Loading shows spinner; error replaces transport with retry card.
2026-04-24 21:41:24 -04:00
parent 4bff8cc99a
commit ed082226a0
2 changed files with 318 additions and 0 deletions
@@ -0,0 +1,157 @@
+<script lang="ts">
+  import {
+    player,
+    togglePlay, skipNext, skipPrev, seekTo, setVolume,
+    toggleShuffle, cycleRepeat, playQueue
+  } from '$lib/player/store.svelte';
+  import { formatDuration } from '$lib/media/duration';
+  import { FALLBACK_COVER } from '$lib/media/covers';
+
+  const current = $derived(player.current);
+
+  const skipPrevDisabled = $derived(player.index === 0 && player.position < 3);
+  const skipNextDisabled = $derived(
+    player.index === player.queue.length - 1 && player.repeat === 'off'
+  );
+
+  const repeatLabel = $derived(
+    player.repeat === 'off' ? 'Repeat off' :
+    player.repeat === 'all' ? 'Repeat all' : 'Repeat one'
+  );
+
+  function onSeekInput(e: Event) {
+    const v = Number((e.currentTarget as HTMLInputElement).value);
+    seekTo(v);
+  }
+  function onVolumeInput(e: Event) {
+    const v = Number((e.currentTarget as HTMLInputElement).value);
+    setVolume(v);
+  }
+  function onCoverError(e: Event) {
+    (e.currentTarget as HTMLImageElement).src = FALLBACK_COVER;
+  }
+</script>
+
+{#if current}
+  <div class="flex items-center gap-4 border-t border-border bg-surface px-4 py-3">
+    <!-- Left: cover + title + artist -->
+    <div class="flex w-60 min-w-0 items-center gap-3">
+      <a
+        href={`/albums/${current.album_id}`}
+        aria-label="Open album"
+        class="shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
+      >
+        <img
+          src={`/api/albums/${current.album_id}/cover`}
+          alt=""
+          class="h-12 w-12 rounded object-cover"
+          onerror={onCoverError}
+        />
+      </a>
+      <div class="min-w-0">
+        <div class="truncate text-sm font-medium">{current.title}</div>
+        <a
+          href={`/artists/${current.artist_id}`}
+          class="truncate text-xs text-text-secondary hover:text-text-primary"
+        >
+          {current.artist_name}
+        </a>
+      </div>
+    </div>
+
+    <!-- Center: seek row + transport row -->
+    {#if player.state === 'error'}
+      <div role="alert" class="flex flex-1 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 text-background"
+          onclick={() => playQueue(player.queue, player.index)}
+        >
+          Try again
+        </button>
+      </div>
+    {:else}
+      <div class="flex flex-1 flex-col items-stretch gap-2">
+        <div class="flex items-center gap-3">
+          <span class="w-12 shrink-0 text-right text-xs 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-12 shrink-0 text-xs tabular-nums text-text-secondary">
+            {formatDuration(player.duration)}
+          </span>
+        </div>
+        <div class="flex items-center justify-center gap-4">
+          <button
+            type="button"
+            aria-label="Previous"
+            disabled={skipPrevDisabled}
+            onclick={skipPrev}
+            class="rounded p-1 disabled:opacity-40"
+          >⏮</button>
+          <button
+            type="button"
+            aria-label={player.isPlaying ? 'Pause' : 'Play'}
+            onclick={togglePlay}
+            class="rounded px-3 py-1 bg-surface-hover"
+          >
+            {#if player.state === 'loading' || player.state === 'idle'}
+              <span data-testid="play-spinner" class="inline-block animate-spin">◌</span>
+            {:else if player.isPlaying}
+              ⏸
+            {:else}
+              ▶
+            {/if}
+          </button>
+          <button
+            type="button"
+            aria-label="Next"
+            disabled={skipNextDisabled}
+            onclick={skipNext}
+            class="rounded p-1 disabled:opacity-40"
+          >⏭</button>
+        </div>
+      </div>
+    {/if}
+
+    <!-- Right: shuffle + repeat + volume -->
+    <div class="flex w-56 items-center justify-end gap-3">
+      <button
+        type="button"
+        aria-label="Shuffle"
+        aria-pressed={player.shuffle}
+        onclick={toggleShuffle}
+        class="rounded p-1 {player.shuffle ? 'text-accent' : 'text-text-secondary'}"
+      >🔀</button>
+      <button
+        type="button"
+        aria-label={repeatLabel}
+        onclick={cycleRepeat}
+        class="rounded p-1 {player.repeat !== 'off' ? 'text-accent' : 'text-text-secondary'}"
+      >🔁{player.repeat === 'one' ? '¹' : ''}</button>
+      <label class="flex items-center gap-2">
+        <span class="sr-only">Volume</span>
+        <input
+          type="range"
+          aria-label="Volume"
+          min="0"
+          max="1"
+          step="0.01"
+          value={player.volume}
+          oninput={onVolumeInput}
+          class="w-28 accent-accent"
+        />
+      </label>
+    </div>
+  </div>
+{/if}
@@ -0,0 +1,161 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import type { TrackRef } from '$lib/api/types';
+
+// Mutable state the mocked store reads from.
+const state = vi.hoisted(() => ({
+  current: undefined as TrackRef | undefined,
+  queue: [] as TrackRef[],
+  index: 0,
+  state: 'idle' as 'idle' | 'loading' | 'playing' | 'paused' | 'error',
+  position: 0,
+  duration: 0,
+  volume: 1,
+  shuffle: false,
+  repeat: 'off' as 'off' | 'all' | 'one',
+  error: null as string | null
+}));
+
+vi.mock('$lib/player/store.svelte', () => ({
+  player: {
+    get queue()     { return state.queue; },
+    get index()     { return state.index; },
+    get current()   { return state.current; },
+    get state()     { return state.state; },
+    get isPlaying() { return state.state === 'playing'; },
+    get position()  { return state.position; },
+    get duration()  { return state.duration; },
+    get volume()    { return state.volume; },
+    get shuffle()   { return state.shuffle; },
+    get repeat()    { return state.repeat; },
+    get error()     { return state.error; }
+  },
+  togglePlay:    vi.fn(),
+  skipNext:      vi.fn(),
+  skipPrev:      vi.fn(),
+  seekTo:        vi.fn(),
+  setVolume:     vi.fn(),
+  toggleShuffle: vi.fn(),
+  cycleRepeat:   vi.fn(),
+  playQueue:     vi.fn()
+}));
+
+import PlayerBar from './PlayerBar.svelte';
+import {
+  togglePlay, skipNext, skipPrev, seekTo, setVolume,
+  toggleShuffle, cycleRepeat, playQueue
+} from '$lib/player/store.svelte';
+
+function track(): TrackRef {
+  return {
+    id: 't1', title: 'So What',
+    album_id: 'xyz', album_title: 'Kind of Blue',
+    artist_id: 'md', artist_name: 'Miles Davis',
+    track_number: 1, disc_number: 1,
+    duration_sec: 545, stream_url: '/api/tracks/t1/stream'
+  };
+}
+
+beforeEach(() => {
+  state.queue = [track()];
+  state.current = state.queue[0];
+  state.index = 0;
+  state.state = 'paused';
+  state.position = 42;
+  state.duration = 545;
+  state.volume = 0.8;
+  state.shuffle = false;
+  state.repeat = 'off';
+  state.error = null;
+});
+
+afterEach(() => vi.clearAllMocks());
+
+describe('PlayerBar', () => {
+  test('renders title, linked artist, linked cover', () => {
+    render(PlayerBar);
+    expect(screen.getByText('So What')).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /Miles Davis/ })).toHaveAttribute('href', '/artists/md');
+    const cover = screen.getByRole('link', { name: /open album/i });
+    expect(cover).toHaveAttribute('href', '/albums/xyz');
+  });
+
+  test('play button click calls togglePlay', async () => {
+    render(PlayerBar);
+    await fireEvent.click(screen.getByRole('button', { name: /play|pause/i }));
+    expect(togglePlay).toHaveBeenCalledTimes(1);
+  });
+
+  test('skip-next click calls skipNext; skip-prev click calls skipPrev', async () => {
+    render(PlayerBar);
+    await fireEvent.click(screen.getByRole('button', { name: /next/i }));
+    await fireEvent.click(screen.getByRole('button', { name: /previous/i }));
+    expect(skipNext).toHaveBeenCalledTimes(1);
+    expect(skipPrev).toHaveBeenCalledTimes(1);
+  });
+
+  test('skip-prev disabled when index=0 AND position<3', () => {
+    state.index = 0;
+    state.position = 1;
+    render(PlayerBar);
+    expect(screen.getByRole('button', { name: /previous/i })).toBeDisabled();
+  });
+
+  test('skip-next disabled at end with repeat=off', () => {
+    state.queue = [track()];
+    state.index = 0;
+    state.repeat = 'off';
+    render(PlayerBar);
+    expect(screen.getByRole('button', { name: /next/i })).toBeDisabled();
+  });
+
+  test('seek slider input calls seekTo(value)', async () => {
+    render(PlayerBar);
+    const slider = screen.getByLabelText(/seek/i) as HTMLInputElement;
+    await fireEvent.input(slider, { target: { value: '120' } });
+    expect(seekTo).toHaveBeenCalledWith(120);
+  });
+
+  test('volume slider input calls setVolume(value)', async () => {
+    render(PlayerBar);
+    const slider = screen.getByLabelText(/volume/i) as HTMLInputElement;
+    await fireEvent.input(slider, { target: { value: '0.3' } });
+    expect(setVolume).toHaveBeenCalledWith(0.3);
+  });
+
+  test('shuffle button click calls toggleShuffle; active class reflects shuffle', () => {
+    state.shuffle = true;
+    render(PlayerBar);
+    const btn = screen.getByRole('button', { name: /shuffle/i });
+    expect(btn.getAttribute('aria-pressed')).toBe('true');
+  });
+
+  test('repeat button aria-label reflects current mode', () => {
+    state.repeat = 'one';
+    render(PlayerBar);
+    expect(screen.getByRole('button', { name: /repeat one/i })).toBeInTheDocument();
+  });
+
+  test('loading state shows spinner in place of play icon', () => {
+    state.state = 'loading';
+    render(PlayerBar);
+    expect(screen.getByTestId('play-spinner')).toBeInTheDocument();
+  });
+
+  test('error state renders retry card; retry click calls playQueue(queue, index)', async () => {
+    state.state = 'error';
+    state.error = 'Playback failed.';
+    render(PlayerBar);
+    expect(screen.getByText(/playback failed/i)).toBeInTheDocument();
+    await fireEvent.click(screen.getByRole('button', { name: /try again/i }));
+    expect(playQueue).toHaveBeenCalledWith(state.queue, state.index);
+  });
+
+  test('elapsed and total render formatted duration', () => {
+    state.position = 65;
+    state.duration = 245;
+    render(PlayerBar);
+    expect(screen.getByText('1:05')).toBeInTheDocument();
+    expect(screen.getByText('4:05')).toBeInTheDocument();
+  });
+});