fix(web/m7-364): TrackRef field shape + seek-on-restore + drawer inert

CI svelte-check failed on 5 type errors caused by the slice using
duration_ms/album_name fields that don't exist on TrackRef (the real
shape uses duration_sec + album_id/album_title). Fixed across
QueueDrawer, QueueDrawer.test, QueueTrackRow.test, persisted.test,
and the inline `state.current = null` in PlayerBar.test (TrackRef |
undefined, not | null).

Final whole-slice review concerns also rolled in:

- C1 (Critical): persisted position was restored to UI but never
  seeked into the audio element — first timeupdate snapped _position
  back to 0. Added a one-shot _pendingRestorePosition module ref +
  consumePendingRestorePosition() export; layout's loadedmetadata
  handler now seeks once on restore.

- I1 (Important): throttled-write effect now wraps _queue / _index
  reads in untrack so the dependency tracking matches the design
  intent. Position remains the only tracked dep.

- I4 (Important): drawer gets inert={!queueDrawerOpen} so its inner
  buttons drop out of tab order when closed (aria-hidden alone
  doesn't do that). Removed redundant role="complementary" from
  <aside> (implied by the element). New test asserts inert binding.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-03 22:14:59 -04:00
parent 49c8e5959e
commit d83b3eab25
7 changed files with 53 additions and 20 deletions
+1 -1
View File
@@ -234,7 +234,7 @@ describe('PlayerBar', () => {
test('omits the line when queue is empty', () => {
state.queue = [];
state.current = null;
state.current = undefined;
state.index = 0;
render(PlayerBar);
expect(screen.queryByText(/^Next ·/i)).not.toBeInTheDocument();
+3 -5
View File
@@ -3,10 +3,8 @@
import { player, closeQueueDrawer } from '$lib/player/store.svelte';
import QueueTrackRow from './QueueTrackRow.svelte';
function totalDurationLabel(tracks: { duration_ms: number }[]): string {
const totalSec = Math.floor(
tracks.reduce((s, tr) => s + (tr.duration_ms ?? 0), 0) / 1000
);
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`;
@@ -23,9 +21,9 @@
{/if}
<aside
role="complementary"
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 flex flex-col
{player.queueDrawerOpen ? 'translate-x-0' : 'translate-x-full'}"
+15 -4
View File
@@ -25,11 +25,13 @@ vi.mock('$lib/player/store.svelte', () => ({
const t = (id: string): TrackRef => ({
id,
title: `Song ${id}`,
album_id: `al-${id}`,
album_title: 'A',
artist_id: `ar-${id}`,
artist_name: `Artist ${id}`,
album_name: 'A',
duration_ms: 200000,
duration_sec: 200,
stream_url: `/stream/${id}`
} as TrackRef);
});
describe('QueueDrawer', () => {
beforeEach(() => {
@@ -77,7 +79,16 @@ describe('QueueDrawer', () => {
openValue = false;
queueValue = [t('a')];
render(QueueDrawer);
const aside = screen.getByRole('complementary', { hidden: true });
const aside = screen.getByLabelText(/playback queue/i, { hidden: true });
expect(aside).toHaveAttribute('aria-hidden', 'true');
});
it('drawer has inert attribute when closed', () => {
openValue = false;
queueValue = [t('a')];
render(QueueDrawer);
const aside = document.querySelector('aside[aria-label="Playback queue"]');
expect(aside).not.toBeNull();
expect(aside!.hasAttribute('inert')).toBe(true);
});
});
+5 -3
View File
@@ -16,11 +16,13 @@ vi.mock('$lib/player/store.svelte', () => ({
const sampleTrack: TrackRef = {
id: 't1',
title: 'Song Title',
album_id: 'al1',
album_title: 'Album',
artist_id: 'ar1',
artist_name: 'Artist Name',
album_name: 'Album',
duration_ms: 200000,
duration_sec: 200,
stream_url: '/stream/t1'
} as TrackRef;
};
describe('QueueTrackRow', () => {
beforeEach(() => {