fix(download): persist download state across views

- Add downloadStateVersion prop to trigger reactivity in child components
- Use version in each block keys to force re-evaluation when state changes
- Ensures download status persists whether track was downloaded from
  album view or playlist view
This commit is contained in:
vicrodh committed 2026-01-09 20:11:39 -06:00
1 parent 6de37c296b
commit 5a07408acf
3 files changed
+10 -4

No files matched your search

@@ -52,6 +52,7 @@
onTrackRemoveDownload?: (trackId: number) => void; onTrackRemoveDownload?: (trackId: number) => void;
getTrackDownloadStatus?: (trackId: number) => { status: DownloadStatus; progress: number }; getTrackDownloadStatus?: (trackId: number) => { status: DownloadStatus; progress: number };
onDownloadAlbum?: () => void; onDownloadAlbum?: () => void;
downloadStateVersion?: number;
} }
let { let {
@@ -73,7 +74,8 @@
onTrackDownload, onTrackDownload,
onTrackRemoveDownload, onTrackRemoveDownload,
getTrackDownloadStatus, getTrackDownloadStatus,
onDownloadAlbum onDownloadAlbum,
downloadStateVersion
}: Props = $props(); }: Props = $props();
let currentTrack = $state<number | null>(null); let currentTrack = $state<number | null>(null);
@@ -215,7 +217,7 @@
<!-- Track Rows --> <!-- Track Rows -->
<div class="tracks"> <div class="tracks">
{#each album.tracks as track} {#each album.tracks as track (`${track.id}-${downloadStateVersion}`)}
{@const downloadInfo = getTrackDownloadStatus?.(track.id) ?? { status: 'none' as const, progress: 0 }} {@const downloadInfo = getTrackDownloadStatus?.(track.id) ?? { status: 'none' as const, progress: 0 }}
<TrackRow <TrackRow
number={track.number} number={track.number}
@@ -75,6 +75,7 @@
onTrackDownload?: (track: DisplayTrack) => void; onTrackDownload?: (track: DisplayTrack) => void;
onTrackRemoveDownload?: (trackId: number) => void; onTrackRemoveDownload?: (trackId: number) => void;
getTrackDownloadStatus?: (trackId: number) => { status: DownloadStatus; progress: number }; getTrackDownloadStatus?: (trackId: number) => { status: DownloadStatus; progress: number };
downloadStateVersion?: number;
} }
let { let {
@@ -91,7 +92,8 @@
onTrackGoToArtist, onTrackGoToArtist,
onTrackDownload, onTrackDownload,
onTrackRemoveDownload, onTrackRemoveDownload,
getTrackDownloadStatus getTrackDownloadStatus,
downloadStateVersion
}: Props = $props(); }: Props = $props();
let playlist = $state<Playlist | null>(null); let playlist = $state<Playlist | null>(null);
@@ -500,7 +502,7 @@
<span class="col-duration">Duration</span> <span class="col-duration">Duration</span>
</div> </div>
{#each displayTracks as track, idx (track.id)} {#each displayTracks as track, idx (`${track.id}-${downloadStateVersion}`)}
{@const downloadInfo = getTrackDownloadStatus?.(track.id) ?? { status: 'none' as const, progress: 0 }} {@const downloadInfo = getTrackDownloadStatus?.(track.id) ?? { status: 'none' as const, progress: 0 }}
<TrackRow <TrackRow
number={idx + 1} number={idx + 1}
+2
View File
@@ -1590,6 +1590,7 @@
onTrackRemoveDownload={handleTrackRemoveDownload} onTrackRemoveDownload={handleTrackRemoveDownload}
getTrackDownloadStatus={getTrackDownloadStatus} getTrackDownloadStatus={getTrackDownloadStatus}
onDownloadAlbum={handleDownloadAlbum} onDownloadAlbum={handleDownloadAlbum}
{downloadStateVersion}
/> />
{:else if activeView === 'artist' && selectedArtist} {:else if activeView === 'artist' && selectedArtist}
<ArtistDetailView <ArtistDetailView
@@ -1629,6 +1630,7 @@
onTrackDownload={handleDisplayTrackDownload} onTrackDownload={handleDisplayTrackDownload}
onTrackRemoveDownload={handleTrackRemoveDownload} onTrackRemoveDownload={handleTrackRemoveDownload}
getTrackDownloadStatus={getTrackDownloadStatus} getTrackDownloadStatus={getTrackDownloadStatus}
{downloadStateVersion}
/> />
{:else if activeView === 'favorites'} {:else if activeView === 'favorites'}
<FavoritesView <FavoritesView