From 8bd2f66416d7e4e23bfa7ba2dd354ab485049657 Mon Sep 17 00:00:00 2001 From: Bryan Van Deusen Date: Thu, 8 Oct 2026 17:28:36 -0400 Subject: [PATCH] fix(web): missing files show greyed in track lists and never enter the queue (#5418) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit TrackRef gains the unavailable flag the server already sends on album detail and search. TrackRow greys such a row with '· File missing' and hides like, radio, add and the menu, as playlist rows already do. Every player-store entry point (playQueue, enqueue, play next, and a refetched mix) drops missing files; playQueue keeps the chosen track as the start. Co-Authored-By: Claude Opus 5.5 --- web/src/lib/api/types.ts | 4 +++ web/src/lib/components/TrackRow.svelte | 15 +++++++++- web/src/lib/components/TrackRow.test.ts | 14 ++++++++++ web/src/lib/player/store.svelte.ts | 20 ++++++++++++- web/src/lib/player/store.test.ts | 37 +++++++++++++++++++++++++ 5 files changed, 88 insertions(+), 2 deletions(-) diff --git a/web/src/lib/api/types.ts b/web/src/lib/api/types.ts index 5db26e8a..10887d41 100644 --- a/web/src/lib/api/types.ts +++ b/web/src/lib/api/types.ts @@ -41,6 +41,10 @@ export type TrackRef = { disc_number?: number; duration_sec: number; stream_url: string; + // #5418: the file is gone from the library (missing_since is set). Sent on + // direct lookups such as album detail and search; lists that pick tracks + // for playback leave missing files out instead. + unavailable?: boolean; }; export type ArtistDetail = ArtistRef & { diff --git a/web/src/lib/components/TrackRow.svelte b/web/src/lib/components/TrackRow.svelte index 1caccb62..8629a3cb 100644 --- a/web/src/lib/components/TrackRow.svelte +++ b/web/src/lib/components/TrackRow.svelte @@ -25,6 +25,9 @@ } = $props(); const track = $derived(tracks[index]); + // #5418: the file is gone. The row stays, greyed, so an album still reads + // in order, but there is nothing to play, like or queue. + const missing = $derived(!!track.unavailable); const isSelected = $derived(selection.isSelected(track.id)); const selectMode = $derived(selection.active); @@ -61,9 +64,13 @@ title={track.title} {subtitle} durationSec={track.duration_sec} - {track} + track={missing ? null : track} ariaLabel={track.title} + rowTitle={missing + ? 'This track’s file is missing from the library, so it can’t be played. It returns automatically if the file comes back.' + : undefined} {isSelected} + disabled={missing} onActivate={activate} > {#snippet lead()} @@ -88,4 +95,10 @@ {/snippet} + + {#snippet note()} + {#if missing} + · File missing + {/if} + {/snippet} diff --git a/web/src/lib/components/TrackRow.test.ts b/web/src/lib/components/TrackRow.test.ts index f0049c72..14f60079 100644 --- a/web/src/lib/components/TrackRow.test.ts +++ b/web/src/lib/components/TrackRow.test.ts @@ -89,6 +89,20 @@ describe('TrackRow', () => { ).toBeInTheDocument(); }); + // #5418: a missing file stays in the list, greyed, with nothing to act on. + test('a missing file is marked, does not play, and offers no actions', async () => { + const withMissing = [{ ...tracks[0], unavailable: true }, tracks[1]]; + render(TrackRow, { props: { tracks: withMissing, index: 0 } }); + const row = screen.getByRole('button', { name: 'So What' }); + expect(row).toHaveAttribute('aria-disabled', 'true'); + expect(screen.getByText(/file missing/i)).toBeInTheDocument(); + await fireEvent.click(row); + expect(playQueue).not.toHaveBeenCalled(); + expect(screen.queryByRole('button', { name: /add .* to queue/i })).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: /play radio/i })).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: /track actions for/i })).not.toBeInTheDocument(); + }); + describe('selection mode', () => { test('clicking the checkbox toggles selection without playing', async () => { render(TrackRow, { props: { tracks, index: 0 } }); diff --git a/web/src/lib/player/store.svelte.ts b/web/src/lib/player/store.svelte.ts index a2bfb8a0..01e12442 100644 --- a/web/src/lib/player/store.svelte.ts +++ b/web/src/lib/player/store.svelte.ts @@ -123,6 +123,12 @@ export function registerAudioEl(el: HTMLAudioElement | null): void { _audioEl = el; } +// #5418: a missing file can't stream, so it never enters the queue. Returns +// the same array when nothing is missing. +function playable(tracks: TrackRef[]): TrackRef[] { + return tracks.some((t) => t.unavailable) ? tracks.filter((t) => !t.unavailable) : tracks; +} + export function playQueue( tracks: TrackRef[], startIndex = 0, @@ -138,8 +144,16 @@ export function playQueue( // rotation-aware order, so no client shuffle in that path). _queueSource = opts.source ?? null; // #968: a fresh play replaces the self-heal closure + resets its budget. - _queueRefetch = opts.refetch ?? null; + const refetch = opts.refetch; + _queueRefetch = refetch ? () => refetch().then(playable) : null; _selfHealAttempts = 0; + // Start on the chosen track's place in the playable list; if the chosen + // one is missing, that place holds the next playable track after it. + const all = tracks; + tracks = playable(all); + if (tracks !== all) { + startIndex = all.slice(0, startIndex).filter((t) => !t.unavailable).length; + } if (opts.shuffle && tracks.length > 1) { // Fisher-Yates over the whole list. startIndex is ignored — the // caller is asking for "random play from this pool," so the first @@ -391,6 +405,7 @@ function trySelfHeal(): boolean { export function enqueueTrack(t: TrackRef): void { _radioSeedId = null; // M4c + if (t.unavailable) return; _queue = [..._queue, t]; if (_state === 'idle') _index = 0; } @@ -402,6 +417,7 @@ export function enqueueTrack(t: TrackRef): void { */ export function playNext(t: TrackRef): void { _radioSeedId = null; // M4c: any user-driven enqueue clears the radio refresh state + if (t.unavailable) return; if (_queue.length === 0) { _queue = [t]; _index = 0; @@ -413,6 +429,7 @@ export function playNext(t: TrackRef): void { export function enqueueTracks(ts: TrackRef[]): void { _radioSeedId = null; // M4c + ts = playable(ts); if (ts.length === 0) return; _queue = [..._queue, ...ts]; if (_state === 'idle') _index = 0; @@ -423,6 +440,7 @@ export function enqueueTracks(ts: TrackRef[]): void { // with the batch at index 0 (mirrors playNext's single-track shape). export function playNextMany(ts: TrackRef[]): void { _radioSeedId = null; + ts = playable(ts); if (ts.length === 0) return; if (_queue.length === 0) { _queue = [...ts]; diff --git a/web/src/lib/player/store.test.ts b/web/src/lib/player/store.test.ts index 51edbbcb..4a89aa71 100644 --- a/web/src/lib/player/store.test.ts +++ b/web/src/lib/player/store.test.ts @@ -338,6 +338,7 @@ import { enqueueTrack, enqueueTracks, playNext, + playNextMany, playRadio, moveQueueItem, removeFromQueue, @@ -398,6 +399,42 @@ describe('player store — enqueue + playRadio', () => { }); }); +// #5418: a missing file can't stream, so no entry point lets one into the queue. +describe('missing files stay out of the queue', () => { + const gone = (id: string) => ({ ...track(id), unavailable: true }); + + test('playQueue drops them and starts on the chosen track', () => { + playQueue([track('1'), gone('2'), track('3'), track('4')], 2); + expect(player.queue.map((t) => t.id)).toEqual(['1', '3', '4']); + expect(player.current?.id).toBe('3'); + }); + + test('playQueue on a missing track starts on the next playable one', () => { + playQueue([track('1'), gone('2'), track('3')], 1); + expect(player.current?.id).toBe('3'); + }); + + test('playQueue with a missing tail starts on the last playable one', () => { + playQueue([track('1'), gone('2')], 1); + expect(player.current?.id).toBe('1'); + }); + + test('playQueue of only missing files leaves the player idle', () => { + playQueue([gone('1'), gone('2')], 0); + expect(player.queue).toEqual([]); + expect(player.state).toBe('idle'); + }); + + test('enqueue and play-next skip them', () => { + playQueue([track('a')], 0); + enqueueTrack(gone('b')); + playNext(gone('c')); + enqueueTracks([gone('d'), track('e')]); + playNextMany([track('f'), gone('g')]); + expect(player.queue.map((t) => t.id)).toEqual(['a', 'f', 'e']); + }); +}); + describe('playNext', () => { test('splices at _index + 1, leaving _index unchanged', () => { playQueue([track('a'), track('b')], 0);