fix(downloads): ensure album download status is reactive in grid overlays

Add downloadStateVersion prop to AlbumCard component to make download
status reactive in all grid views. This fixes the issue where the
download menu submenu would not appear in Home, Search, and Artist
Detail views even when albums were fully downloaded.

cp
This commit is contained in:
vicrodh committed 2026-01-15 01:00:55 -06:00
1 parent f15316533f
commit a1df7095fb
5 files changed
+23 -2

No files matched your search

+9 -2
View File
@@ -28,6 +28,7 @@
isAlbumFullyDownloaded?: boolean; isAlbumFullyDownloaded?: boolean;
onOpenContainingFolder?: () => void; onOpenContainingFolder?: () => void;
onReDownloadAlbum?: () => void; onReDownloadAlbum?: () => void;
downloadStateVersion?: number;
} }
let { let {
@@ -48,8 +49,14 @@
favoriteEnabled, favoriteEnabled,
isAlbumFullyDownloaded = false, isAlbumFullyDownloaded = false,
onOpenContainingFolder, onOpenContainingFolder,
onReDownloadAlbum onReDownloadAlbum,
downloadStateVersion
}: Props = $props(); }: Props = $props();
const isDownloaded = $derived.by(() => {
void downloadStateVersion;
return isAlbumFullyDownloaded;
});
let imageError = $state(false); let imageError = $state(false);
const cardSize = $derived(size === 'large' ? 180 : 162); const cardSize = $derived(size === 'large' ? 180 : 162);
@@ -195,7 +202,7 @@
onShareQobuz={onShareQobuz} onShareQobuz={onShareQobuz}
onShareSonglink={onShareSonglink} onShareSonglink={onShareSonglink}
onDownload={onDownload} onDownload={onDownload}
isAlbumFullyDownloaded={isAlbumFullyDownloaded} isAlbumFullyDownloaded={isDownloaded}
onOpenContainingFolder={onOpenContainingFolder} onOpenContainingFolder={onOpenContainingFolder}
onReDownloadAlbum={onReDownloadAlbum} onReDownloadAlbum={onReDownloadAlbum}
onOpenChange={(open) => (menuOpen = open)} onOpenChange={(open) => (menuOpen = open)}
@@ -637,6 +637,7 @@
isAlbumFullyDownloaded={isAlbumDownloaded(album.id)} isAlbumFullyDownloaded={isAlbumDownloaded(album.id)}
onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined} onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined}
onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined} onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined}
{downloadStateVersion}
onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }} onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }}
/> />
{/each} {/each}
@@ -678,6 +679,7 @@
isAlbumFullyDownloaded={isAlbumDownloaded(album.id)} isAlbumFullyDownloaded={isAlbumDownloaded(album.id)}
onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined} onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined}
onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined} onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined}
{downloadStateVersion}
onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }} onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }}
/> />
{/each} {/each}
@@ -707,6 +709,7 @@
isAlbumFullyDownloaded={isAlbumDownloaded(album.id)} isAlbumFullyDownloaded={isAlbumDownloaded(album.id)}
onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined} onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined}
onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined} onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined}
{downloadStateVersion}
onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }} onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }}
/> />
{/each} {/each}
@@ -736,6 +739,7 @@
isAlbumFullyDownloaded={isAlbumDownloaded(album.id)} isAlbumFullyDownloaded={isAlbumDownloaded(album.id)}
onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined} onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined}
onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined} onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined}
{downloadStateVersion}
onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }} onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }}
/> />
{/each} {/each}
@@ -975,6 +975,7 @@
isAlbumFullyDownloaded={isAlbumDownloaded(album.id)} isAlbumFullyDownloaded={isAlbumDownloaded(album.id)}
onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined} onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined}
onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined} onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined}
{downloadStateVersion}
onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }} onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }}
/> />
{/each} {/each}
@@ -1045,6 +1046,7 @@
isAlbumFullyDownloaded={isAlbumDownloaded(album.id)} isAlbumFullyDownloaded={isAlbumDownloaded(album.id)}
onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined} onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined}
onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined} onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined}
{downloadStateVersion}
onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }} onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }}
/> />
{/each} {/each}
+7
View File
@@ -568,6 +568,7 @@
isAlbumFullyDownloaded={isAlbumDownloaded(album.id)} isAlbumFullyDownloaded={isAlbumDownloaded(album.id)}
onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined} onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined}
onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined} onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined}
{downloadStateVersion}
onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }} onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }}
/> />
{/each} {/each}
@@ -595,6 +596,7 @@
isAlbumFullyDownloaded={isAlbumDownloaded(album.id)} isAlbumFullyDownloaded={isAlbumDownloaded(album.id)}
onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined} onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined}
onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined} onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined}
{downloadStateVersion}
onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }} onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }}
/> />
{/each} {/each}
@@ -622,6 +624,7 @@
isAlbumFullyDownloaded={isAlbumDownloaded(album.id)} isAlbumFullyDownloaded={isAlbumDownloaded(album.id)}
onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined} onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined}
onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined} onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined}
{downloadStateVersion}
onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }} onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }}
/> />
{/each} {/each}
@@ -649,6 +652,7 @@
isAlbumFullyDownloaded={isAlbumDownloaded(album.id)} isAlbumFullyDownloaded={isAlbumDownloaded(album.id)}
onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined} onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined}
onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined} onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined}
{downloadStateVersion}
onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }} onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }}
/> />
{/each} {/each}
@@ -676,6 +680,7 @@
isAlbumFullyDownloaded={isAlbumDownloaded(album.id)} isAlbumFullyDownloaded={isAlbumDownloaded(album.id)}
onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined} onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined}
onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined} onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined}
{downloadStateVersion}
onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }} onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }}
/> />
{/each} {/each}
@@ -703,6 +708,7 @@
isAlbumFullyDownloaded={isAlbumDownloaded(album.id)} isAlbumFullyDownloaded={isAlbumDownloaded(album.id)}
onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined} onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined}
onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined} onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined}
{downloadStateVersion}
onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }} onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }}
/> />
{/each} {/each}
@@ -787,6 +793,7 @@
isAlbumFullyDownloaded={isAlbumDownloaded(album.id)} isAlbumFullyDownloaded={isAlbumDownloaded(album.id)}
onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined} onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined}
onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined} onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined}
{downloadStateVersion}
onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }} onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }}
/> />
{/each} {/each}
@@ -416,6 +416,7 @@
isAlbumFullyDownloaded={isAlbumDownloaded(album.id)} isAlbumFullyDownloaded={isAlbumDownloaded(album.id)}
onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined} onOpenContainingFolder={onOpenAlbumFolder ? () => onOpenAlbumFolder(album.id) : undefined}
onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined} onReDownloadAlbum={onReDownloadAlbum ? () => onReDownloadAlbum(album.id) : undefined}
{downloadStateVersion}
onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }} onclick={() => { onAlbumClick?.(album.id); loadAlbumDownloadStatus(album.id); }}
/> />
{/each} {/each}