feat: fix UI freezes in ZIP and offline cache downloads

ZIP downloads (PlaylistDetail, Albums, NewReleases, RandomAlbums) now use invoke('download_zip') via Rust streaming instead of fetch+blob+arrayBuffer, eliminating JS heap saturation on large files. Progress shown in ZipDownloadOverlay. Offline cache downloads (600+ songs) no longer freeze the UI: transient job state moved to a separate non-persisted offlineJobStore, reducing localStorage writes from ~1200 down to 2 for an entire download. Also adds playlist offline toggle — clicking the cache button when already cached removes it from cache. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-22 06:25:41 +00:00 · 2026-04-08 22:33:23 +02:00
parent c1e57b4c06
commit ba670bd1e8
25 changed files with 771 additions and 252 deletions
@@ -6,8 +6,9 @@ import { usePlayerStore, songToTrack } from '../store/playerStore';
 import { useAuthStore } from '../store/authStore';
 import { useDownloadModalStore } from '../store/downloadModalStore';
 import { useOfflineStore } from '../store/offlineStore';
-import { writeFile } from '@tauri-apps/plugin-fs';
+import { useOfflineJobStore } from '../store/offlineJobStore';
 import { join } from '@tauri-apps/api/path';
+import { useZipDownloadStore } from '../store/zipDownloadStore';
 import AlbumCard from '../components/AlbumCard';
 import AlbumHeader from '../components/AlbumHeader';
 import AlbumTrackList from '../components/AlbumTrackList';
@@ -44,15 +45,12 @@ export default function AlbumDetail() {
  const [bio, setBio] = useState<string | null>(null);
  const [bioOpen, setBioOpen] = useState(false);
  const [loading, setLoading] = useState(true);
-  const [downloadProgress, setDownloadProgress] = useState<number | null>(null);
  const [isStarred, setIsStarred] = useState(false);
  const [starredSongs, setStarredSongs] = useState<Set<string>>(new Set());
  const [offlineStorageFull, setOfflineStorageFull] = useState(false);

-  const { downloadAlbum, deleteAlbum } = useOfflineStore();
-  const offlineTracks = useOfflineStore(s => s.tracks);
-  const offlineAlbums = useOfflineStore(s => s.albums);
-  const offlineJobs = useOfflineStore(s => s.jobs);
+  const downloadAlbum = useOfflineStore(s => s.downloadAlbum);
+  const deleteAlbum = useOfflineStore(s => s.deleteAlbum);
  const serverId = auth.activeServerId ?? '';
  const entityRatingSupportByServer = useAuthStore(s => s.entityRatingSupportByServer);
  const setEntityRatingSupport = useAuthStore(s => s.setEntityRatingSupport);
@@ -60,22 +58,32 @@ export default function AlbumDetail() {

  const [albumEntityRating, setAlbumEntityRating] = useState(0);

-  const offlineStatus: 'none' | 'downloading' | 'cached' = (() => {
-    if (!album) return 'none';
-    const meta = offlineAlbums[`${serverId}:${album.album.id}`];
-    const isDownloaded = meta && meta.trackIds.length > 0 && meta.trackIds.every(tid => !!offlineTracks[`${serverId}:${tid}`]);
-    if (isDownloaded) return 'cached';
-    const isDownloading = offlineJobs.some(j => j.albumId === album.album.id && (j.status === 'queued' || j.status === 'downloading'));
-    return isDownloading ? 'downloading' : 'none';
-  })();
+  // Derive a stable albumId for the selectors below (empty string when not yet loaded).
+  const albumId = album?.album.id ?? '';

-  const offlineProgress = (() => {
-    if (!album) return null;
-    const albumJobs = offlineJobs.filter(j => j.albumId === album.album.id);
-    if (albumJobs.length === 0) return null;
-    const done = albumJobs.filter(j => j.status === 'done' || j.status === 'error').length;
-    return { done, total: albumJobs.length };
-  })();
+  // Selectors return primitives so Zustand only triggers a re-render when the VALUE
+  // actually changes — not on every `jobs` array mutation during batch downloads.
+  const offlineStatus = useOfflineStore((s): 'none' | 'downloading' | 'cached' => {
+    if (!albumId) return 'none';
+    const meta = s.albums[`${serverId}:${albumId}`];
+    const isDownloaded = meta && meta.trackIds.length > 0 && meta.trackIds.every(tid => !!s.tracks[`${serverId}:${tid}`]);
+    return isDownloaded ? 'cached' : 'none';
+  });
+  const isOfflineDownloading = useOfflineJobStore(s =>
+    !!albumId && s.jobs.some(j => j.albumId === albumId && (j.status === 'queued' || j.status === 'downloading'))
+  );
+  const offlineProgressDone = useOfflineJobStore(s => {
+    if (!albumId) return 0;
+    return s.jobs.filter(j => j.albumId === albumId && (j.status === 'done' || j.status === 'error')).length;
+  });
+  const offlineProgressTotal = useOfflineJobStore(s => {
+    if (!albumId) return 0;
+    return s.jobs.filter(j => j.albumId === albumId).length;
+  });
+  const resolvedOfflineStatus = isOfflineDownloading ? 'downloading' : offlineStatus;
+  const offlineProgress = offlineProgressTotal > 0
+    ? { done: offlineProgressDone, total: offlineProgressTotal }
+    : null;

  useEffect(() => {
    if (!id) return;
@@ -181,45 +189,22 @@ const handleEnqueueAll = () => {
    if (!album) return;
    const { name, id: albumId } = album.album;

-    // Ask for folder before starting download if not already set
    const folder = auth.downloadFolder || await requestDownloadFolder();
    if (!folder) return;

-    setDownloadProgress(0);
+    const filename = `${sanitizeFilename(name)}.zip`;
+    const destPath = await join(folder, filename);
+    const url = buildDownloadUrl(albumId);
+    const downloadId = crypto.randomUUID();
+
+    const { start, complete, fail } = useZipDownloadStore.getState();
+    start(downloadId, filename);
    try {
-      const url = buildDownloadUrl(albumId);
-      const response = await fetch(url);
-      if (!response.ok) throw new Error(`HTTP ${response.status}`);
-
-      const contentLength = response.headers.get('Content-Length');
-      const total = contentLength ? parseInt(contentLength, 10) : 0;
-      const chunks: Uint8Array<ArrayBuffer>[] = [];
-
-      if (total && response.body) {
-        const reader = response.body.getReader();
-        let received = 0;
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) break;
-          chunks.push(value);
-          received += value.length;
-          setDownloadProgress(Math.round((received / total) * 100));
-        }
-      } else {
-        const buffer = await response.arrayBuffer() as ArrayBuffer;
-        chunks.push(new Uint8Array(buffer));
-        setDownloadProgress(100);
-      }
-
-      const blob = new Blob(chunks);
-      const buffer = await blob.arrayBuffer();
-      const path = await join(folder, `${sanitizeFilename(name)}.zip`);
-      await writeFile(path, new Uint8Array(buffer));
+      await invoke('download_zip', { id: downloadId, url, destPath });
+      complete(downloadId);
    } catch (e) {
-      console.error('Download failed:', e);
-      setDownloadProgress(null);
-    } finally {
-      setTimeout(() => setDownloadProgress(null), 60000);
+      fail(downloadId);
+      console.error('ZIP download failed:', e);
    }
  };

@@ -282,6 +267,12 @@ const handleEnqueueAll = () => {
  const coverKey = useMemo(() => album?.album.coverArt ? coverArtCacheKey(album.album.coverArt, 400) : '', [album?.album.coverArt]);
  const resolvedCoverUrl = useCachedUrl(coverUrl, coverKey);

+  // Must be before early returns — hooks must be called unconditionally.
+  const mergedStarredSongs = useMemo(() => new Set([
+    ...[...starredSongs].filter(id => starredOverrides[id] !== false),
+    ...Object.entries(starredOverrides).filter(([, v]) => v).map(([k]) => k),
+  ]), [starredSongs, starredOverrides]);
+
  if (loading) return <div className="loading-center"><div className="spinner" /></div>;
  if (!album) return <div className="empty-state">{t('albumDetail.notFound')}</div>;

@@ -297,7 +288,7 @@ const handleEnqueueAll = () => {
        coverKey={coverKey}
        resolvedCoverUrl={resolvedCoverUrl}
        isStarred={isStarred}
-        downloadProgress={downloadProgress}
+        downloadProgress={null}
        bio={bio}
        bioOpen={bioOpen}
        onToggleStar={toggleStar}
@@ -306,7 +297,7 @@ const handleEnqueueAll = () => {
        onEnqueueAll={handleEnqueueAll}
        onBio={handleBio}
        onCloseBio={() => setBioOpen(false)}
-        offlineStatus={offlineStatus}
+        offlineStatus={resolvedOfflineStatus}
        offlineProgress={offlineProgress}
        onCacheOffline={handleCacheOffline}
        onRemoveOffline={handleRemoveOffline}
@@ -334,10 +325,7 @@ const handleEnqueueAll = () => {
        isPlaying={isPlaying}
        ratings={ratings}
        userRatingOverrides={userRatingOverrides}
-        starredSongs={new Set([
-          ...[...starredSongs].filter(id => starredOverrides[id] !== false),
-          ...Object.entries(starredOverrides).filter(([, v]) => v).map(([k]) => k),
-        ])}
+        starredSongs={mergedStarredSongs}
        onPlaySong={handlePlaySong}
        onRate={handleRate}
        onToggleSongStar={toggleSongStar}
@@ -6,9 +6,10 @@ import { useTranslation } from 'react-i18next';
 import { useAuthStore } from '../store/authStore';
 import { useOfflineStore } from '../store/offlineStore';
 import { useDownloadModalStore } from '../store/downloadModalStore';
-import { writeFile } from '@tauri-apps/plugin-fs';
+import { invoke } from '@tauri-apps/api/core';
 import { join } from '@tauri-apps/api/path';
 import { showToast } from '../utils/toast';
+import { useZipDownloadStore } from '../store/zipDownloadStore';
 import { X, CheckSquare2, Download, HardDriveDownload } from 'lucide-react';

 type SortType = 'alphabeticalByName' | 'alphabeticalByArtist';
@@ -31,7 +32,7 @@ export default function Albums() {
  const musicLibraryFilterVersion = useAuthStore(s => s.musicLibraryFilterVersion);
  const auth = useAuthStore();
  const serverId = useAuthStore(s => s.activeServerId ?? '');
-  const { downloadAlbum } = useOfflineStore();
+  const downloadAlbum = useOfflineStore(s => s.downloadAlbum);
  const requestDownloadFolder = useDownloadModalStore(s => s.requestFolder);

  const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
@@ -72,26 +73,23 @@ export default function Albums() {
    if (selectedAlbums.length === 0) return;
    const folder = auth.downloadFolder || await requestDownloadFolder();
    if (!folder) return;
-
-    let done = 0;
+    const { start, complete, fail } = useZipDownloadStore.getState();
+    clearSelection();
    for (const album of selectedAlbums) {
-      showToast(t('albums.downloadingZip', { current: done + 1, total: selectedAlbums.length, name: album.name }), 8000, 'info');
+      const downloadId = crypto.randomUUID();
+      const filename = `${sanitizeFilename(album.name)}.zip`;
+      const destPath = await join(folder, filename);
+      const url = buildDownloadUrl(album.id);
+      start(downloadId, filename);
      try {
-        const url = buildDownloadUrl(album.id);
-        const response = await fetch(url);
-        if (!response.ok) throw new Error(`HTTP ${response.status}`);
-        const blob = await response.blob();
-        const buffer = await blob.arrayBuffer();
-        const path = await join(folder, `${sanitizeFilename(album.name)}.zip`);
-        await writeFile(path, new Uint8Array(buffer));
-        done++;
+        await invoke('download_zip', { id: downloadId, url, destPath });
+        complete(downloadId);
      } catch (e) {
+        fail(downloadId);
        console.error('ZIP download failed for', album.name, e);
        showToast(t('albums.downloadZipFailed', { name: album.name }), 4000, 'error');
      }
    }
-    showToast(t('albums.downloadZipDone', { count: done }), 4000, 'info');
-    clearSelection();
  };

  const handleAddOffline = async () => {
@@ -8,6 +8,7 @@ import { ArrowLeft, Users, ExternalLink, Heart, Play, Shuffle, Radio, HardDriveD
 import { open } from '@tauri-apps/plugin-shell';
 import { usePlayerStore, songToTrack } from '../store/playerStore';
 import { useOfflineStore } from '../store/offlineStore';
+import { useOfflineJobStore } from '../store/offlineJobStore';
 import { useAuthStore } from '../store/authStore';
 import { useTranslation } from 'react-i18next';
 import { lastfmGetSimilarArtists, lastfmIsConfigured } from '../api/lastfm';
@@ -69,7 +70,8 @@ export default function ArtistDetail() {
  const openContextMenu = usePlayerStore(state => state.openContextMenu);
  const currentTrack = usePlayerStore(state => state.currentTrack);
  const isPlaying = usePlayerStore(state => state.isPlaying);
-  const { downloadArtist, bulkProgress } = useOfflineStore();
+  const downloadArtist = useOfflineStore(s => s.downloadArtist);
+  const bulkProgress = useOfflineJobStore(s => s.bulkProgress);
  const activeServerId = useAuthStore(s => s.activeServerId) ?? '';
  const musicLibraryFilterVersion = useAuthStore(s => s.musicLibraryFilterVersion);
  const entityRatingSupportByServer = useAuthStore(s => s.entityRatingSupportByServer);
@@ -7,9 +7,10 @@ import { useTranslation } from 'react-i18next';
 import { useAuthStore } from '../store/authStore';
 import { useOfflineStore } from '../store/offlineStore';
 import { useDownloadModalStore } from '../store/downloadModalStore';
-import { writeFile } from '@tauri-apps/plugin-fs';
+import { invoke } from '@tauri-apps/api/core';
 import { join } from '@tauri-apps/api/path';
 import { showToast } from '../utils/toast';
+import { useZipDownloadStore } from '../store/zipDownloadStore';

 const PAGE_SIZE = 30;

@@ -29,7 +30,7 @@ export default function NewReleases() {
  const musicLibraryFilterVersion = useAuthStore(s => s.musicLibraryFilterVersion);
  const auth = useAuthStore();
  const serverId = useAuthStore(s => s.activeServerId ?? '');
-  const { downloadAlbum } = useOfflineStore();
+  const downloadAlbum = useOfflineStore(s => s.downloadAlbum);
  const requestDownloadFolder = useDownloadModalStore(s => s.requestFolder);

  const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
@@ -54,21 +55,23 @@ export default function NewReleases() {
    if (selectedAlbums.length === 0) return;
    const folder = auth.downloadFolder || await requestDownloadFolder();
    if (!folder) return;
-    let done = 0;
+    const { start, complete, fail } = useZipDownloadStore.getState();
+    clearSelection();
    for (const album of selectedAlbums) {
-      showToast(t('albums.downloadingZip', { current: done + 1, total: selectedAlbums.length, name: album.name }), 8000, 'info');
+      const downloadId = crypto.randomUUID();
+      const filename = `${sanitizeFilename(album.name)}.zip`;
+      const destPath = await join(folder, filename);
+      const url = buildDownloadUrl(album.id);
+      start(downloadId, filename);
      try {
-        const blob = await fetch(buildDownloadUrl(album.id)).then(r => { if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.blob(); });
-        const path = await join(folder, `${sanitizeFilename(album.name)}.zip`);
-        await writeFile(path, new Uint8Array(await blob.arrayBuffer()));
-        done++;
+        await invoke('download_zip', { id: downloadId, url, destPath });
+        complete(downloadId);
      } catch (e) {
+        fail(downloadId);
        console.error('ZIP download failed for', album.name, e);
        showToast(t('albums.downloadZipFailed', { name: album.name }), 4000, 'error');
      }
    }
-    showToast(t('albums.downloadZipDone', { count: done }), 4000, 'info');
-    clearSelection();
  };

  const handleAddOffline = async () => {
@@ -12,10 +12,12 @@ import { usePlayerStore, songToTrack } from '../store/playerStore';
 import { useShallow } from 'zustand/react/shallow';
 import { usePlaylistStore } from '../store/playlistStore';
 import { useOfflineStore } from '../store/offlineStore';
+import { useOfflineJobStore } from '../store/offlineJobStore';
 import { useAuthStore } from '../store/authStore';
 import { useDownloadModalStore } from '../store/downloadModalStore';
-import { writeFile } from '@tauri-apps/plugin-fs';
+import { invoke } from '@tauri-apps/api/core';
 import { join } from '@tauri-apps/api/path';
+import { useZipDownloadStore } from '../store/zipDownloadStore';
 import { useDragDrop } from '../contexts/DragDropContext';
 import CachedImage, { useCachedUrl } from '../components/CachedImage';
 import { coverArtCacheKey, buildCoverArtUrl } from '../api/subsonic';
@@ -83,8 +85,24 @@ export default function PlaylistDetail() {
  );
  const touchPlaylist = usePlaylistStore((s) => s.touchPlaylist);
  const { startDrag, isDragging } = useDragDrop();
-  const { downloadPlaylist, isAlbumDownloading, isAlbumDownloaded, getAlbumProgress } = useOfflineStore();
+  const downloadPlaylist = useOfflineStore(s => s.downloadPlaylist);
+  const deleteAlbum = useOfflineStore(s => s.deleteAlbum);
  const activeServerId = useAuthStore(s => s.activeServerId) ?? '';
+  const isDownloading = useOfflineJobStore(s =>
+    !!id && s.jobs.some(j => j.albumId === id && (j.status === 'queued' || j.status === 'downloading'))
+  );
+  const isCached = useOfflineStore(s => {
+    if (!id) return false;
+    const meta = s.albums[`${activeServerId}:${id}`];
+    if (!meta || meta.trackIds.length === 0) return false;
+    return meta.trackIds.every(tid => !!s.tracks[`${activeServerId}:${tid}`]);
+  });
+  const offlineProgressDone = useOfflineJobStore(s => {
+    if (!id) return 0;
+    return s.jobs.filter(j => j.albumId === id && (j.status === 'done' || j.status === 'error')).length;
+  });
+  const offlineProgressTotal = useOfflineJobStore(s => (!id ? 0 : s.jobs.filter(j => j.albumId === id).length));
+  const offlineProgress = offlineProgressTotal > 0 ? { done: offlineProgressDone, total: offlineProgressTotal } : null;
  const downloadFolder = useAuthStore(s => s.downloadFolder);
  const setDownloadFolder = useAuthStore(s => s.setDownloadFolder);
  const requestDownloadFolder = useDownloadModalStore(s => s.requestFolder);
@@ -100,7 +118,9 @@ export default function PlaylistDetail() {
  const [hoveredSuggestionId, setHoveredSuggestionId] = useState<string | null>(null);
  const [contextMenuSongId, setContextMenuSongId] = useState<string | null>(null);
  const contextMenuOpen = usePlayerStore(s => s.contextMenu.isOpen);
-  const [downloadProgress, setDownloadProgress] = useState<number | null>(null);
+  const zipDownloads = useZipDownloadStore(s => s.downloads);
+  const [zipDownloadId, setZipDownloadId] = useState<string | null>(null);
+  const activeZip = zipDownloadId ? zipDownloads.find(d => d.id === zipDownloadId) : undefined;

  // ── Bulk select ───────────────────────────────────────────────────
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
@@ -299,38 +319,21 @@ export default function PlaylistDetail() {
    if (!playlist || !id) return;
    const folder = downloadFolder || await requestDownloadFolder();
    if (!folder) return;
-    setDownloadProgress(0);
+
+    const filename = `${sanitizeFilename(playlist.name)}.zip`;
+    const destPath = await join(folder, filename);
+    const url = buildDownloadUrl(id);
+    const downloadId = crypto.randomUUID();
+
+    const { start, complete, fail } = useZipDownloadStore.getState();
+    start(downloadId, filename);
+    setZipDownloadId(downloadId);
    try {
-      const url = buildDownloadUrl(id);
-      const response = await fetch(url);
-      if (!response.ok) throw new Error(`HTTP ${response.status}`);
-      const contentLength = response.headers.get('Content-Length');
-      const total = contentLength ? parseInt(contentLength, 10) : 0;
-      const chunks: Uint8Array<ArrayBuffer>[] = [];
-      if (total && response.body) {
-        const reader = response.body.getReader();
-        let received = 0;
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) break;
-          chunks.push(value);
-          received += value.length;
-          setDownloadProgress(Math.round((received / total) * 100));
-        }
-      } else {
-        const buffer = await response.arrayBuffer() as ArrayBuffer;
-        chunks.push(new Uint8Array(buffer));
-        setDownloadProgress(100);
-      }
-      const blob = new Blob(chunks);
-      const buffer = await blob.arrayBuffer();
-      const path = await join(folder, `${sanitizeFilename(playlist.name)}.zip`);
-      await writeFile(path, new Uint8Array(buffer));
+      await invoke('download_zip', { id: downloadId, url, destPath });
+      complete(downloadId);
    } catch (e) {
-      console.error('Download failed:', e);
-      setDownloadProgress(null);
-    } finally {
-      setTimeout(() => setDownloadProgress(null), 60000);
+      fail(downloadId);
+      console.error('ZIP download failed:', e);
    }
  };

@@ -587,33 +590,34 @@ export default function PlaylistDetail() {
                >
                  <Search size={16} /> {t('playlists.addSongs')}
                </button>
-                {songs.length > 0 && id && (() => {
-                  const isDownloading = isAlbumDownloading(id);
-                  const isCached = isAlbumDownloaded(id, activeServerId);
-                  const progress = isDownloading ? getAlbumProgress(id) : null;
-                  return (
-                    <button
-                      className="btn btn-ghost"
-                      disabled={isDownloading}
-                      onClick={() => { if (playlist) downloadPlaylist(id, playlist.name, playlist.coverArt, songs, activeServerId); }}
-                      data-tooltip={isDownloading
-                        ? t('albumDetail.offlineDownloading', { n: progress?.done ?? 0, total: progress?.total ?? 0 })
-                        : isCached ? t('playlists.offlineCached') : t('playlists.cacheOffline')}
-                    >
-                      {isDownloading
-                        ? <div className="spinner" style={{ width: 14, height: 14, borderTopColor: 'currentColor' }} />
-                        : isCached ? <Check size={16} /> : <HardDriveDownload size={16} />}
-                    </button>
-                  );
-                })()}
+                {songs.length > 0 && id && (
+                  <button
+                    className={`btn btn-ghost${isCached ? ' btn-danger' : ''}`}
+                    disabled={isDownloading}
+                    onClick={() => {
+                      if (isCached) {
+                        deleteAlbum(id, activeServerId);
+                      } else if (playlist) {
+                        downloadPlaylist(id, playlist.name, playlist.coverArt, songs, activeServerId);
+                      }
+                    }}
+                    data-tooltip={isDownloading
+                      ? t('albumDetail.offlineDownloading', { n: offlineProgress?.done ?? 0, total: offlineProgress?.total ?? 0 })
+                      : isCached ? t('playlists.removeOffline') : t('playlists.cacheOffline')}
+                  >
+                    {isDownloading
+                      ? <div className="spinner" style={{ width: 14, height: 14, borderTopColor: 'currentColor' }} />
+                      : isCached ? <Trash2 size={16} /> : <HardDriveDownload size={16} />}
+                  </button>
+                )}
                {songs.length > 0 && (
-                  downloadProgress !== null ? (
+                  activeZip && !activeZip.done && !activeZip.error ? (
                    <div className="download-progress-wrap">
                      <Download size={14} />
                      <div className="download-progress-bar">
-                        <div className="download-progress-fill" style={{ width: `${downloadProgress}%` }} />
+                        <div className="download-progress-fill" style={{ width: `${activeZip.total ? Math.round((activeZip.bytes / activeZip.total) * 100) : 0}%` }} />
                      </div>
-                      <span className="download-progress-pct">{downloadProgress}%</span>
+                      <span className="download-progress-pct">{activeZip.total ? Math.round((activeZip.bytes / activeZip.total) * 100) : '…'}%</span>
                    </div>
                  ) : (
                    <button className="btn btn-ghost" onClick={handleDownload} data-tooltip={t('playlists.downloadZip')}>
@@ -8,9 +8,10 @@ import { useAuthStore } from '../store/authStore';
 import { filterAlbumsByMixRatings, getMixMinRatingsConfigFromAuth } from '../utils/mixRatingFilter';
 import { useOfflineStore } from '../store/offlineStore';
 import { useDownloadModalStore } from '../store/downloadModalStore';
-import { writeFile } from '@tauri-apps/plugin-fs';
+import { invoke } from '@tauri-apps/api/core';
 import { join } from '@tauri-apps/api/path';
 import { showToast } from '../utils/toast';
+import { useZipDownloadStore } from '../store/zipDownloadStore';

 const ALBUM_COUNT = 30;
 /** Extra pool when mix rating filter is on so we can still fill the grid after filtering. */
@@ -43,7 +44,7 @@ export default function RandomAlbums() {
  const mixMinRatingAlbum = auth.mixMinRatingAlbum;
  const mixMinRatingArtist = auth.mixMinRatingArtist;
  const serverId = auth.activeServerId ?? '';
-  const { downloadAlbum } = useOfflineStore();
+  const downloadAlbum = useOfflineStore(s => s.downloadAlbum);
  const requestDownloadFolder = useDownloadModalStore(s => s.requestFolder);
  const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
  const [loading, setLoading] = useState(true);
@@ -65,21 +66,23 @@ export default function RandomAlbums() {
    if (selectedAlbums.length === 0) return;
    const folder = auth.downloadFolder || await requestDownloadFolder();
    if (!folder) return;
-    let done = 0;
+    const { start, complete, fail } = useZipDownloadStore.getState();
+    clearSelection();
    for (const album of selectedAlbums) {
-      showToast(t('albums.downloadingZip', { current: done + 1, total: selectedAlbums.length, name: album.name }), 8000, 'info');
+      const downloadId = crypto.randomUUID();
+      const filename = `${sanitizeFilename(album.name)}.zip`;
+      const destPath = await join(folder, filename);
+      const url = buildDownloadUrl(album.id);
+      start(downloadId, filename);
      try {
-        const blob = await fetch(buildDownloadUrl(album.id)).then(r => { if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.blob(); });
-        const path = await join(folder, `${sanitizeFilename(album.name)}.zip`);
-        await writeFile(path, new Uint8Array(await blob.arrayBuffer()));
-        done++;
+        await invoke('download_zip', { id: downloadId, url, destPath });
+        complete(downloadId);
      } catch (e) {
+        fail(downloadId);
        console.error('ZIP download failed for', album.name, e);
        showToast(t('albums.downloadZipFailed', { name: album.name }), 4000, 'error');
      }
    }
-    showToast(t('albums.downloadZipDone', { count: done }), 4000, 'info');
-    clearSelection();
  };

  const handleAddOffline = async () => {