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:
1 parent
f15316533f
commit
a1df7095fb
5 files changed
+23
-2
No files matched your search
@@ -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}
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
Reference in new issue
Block a user