refactor: download manager (#17935)

web/src/lib/components/asset-viewer/download-panel.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { type DownloadProgress, downloadManager, downloadStore } from '$lib/stores/download-store.svelte';
+  import { type DownloadProgress, downloadManager } from '$lib/managers/download-manager.svelte';
   import { locale } from '$lib/stores/preferences.store';
+  import { mdiClose } from '@mdi/js';
+  import { t } from 'svelte-i18n';
   import { fly, slide } from 'svelte/transition';
   import { getByteUnitString } from '../../utils/byte-units';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
-  import { mdiClose } from '@mdi/js';
-  import { t } from 'svelte-i18n';
 
   const abort = (downloadKey: string, download: DownloadProgress) => {
     download.abort?.abort();
@@ -13,15 +13,15 @@
   };
 </script>
 
-{#if downloadStore.isDownloading}
+{#if downloadManager.isDownloading}
   <div
     transition:fly={{ x: -100, duration: 350 }}
     class="fixed bottom-10 start-2 z-[10000] max-h-[270px] w-[315px] rounded-2xl border bg-immich-bg p-4 text-sm shadow-sm"
   >
     <p class="mb-2 text-xs text-gray-500">{$t('downloading').toUpperCase()}</p>
     <div class="my-2 mb-2 flex max-h-[200px] flex-col overflow-y-auto text-sm">
-      {#each Object.keys(downloadStore.assets) as downloadKey (downloadKey)}
-        {@const download = downloadStore.assets[downloadKey]}
+      {#each Object.keys(downloadManager.assets) as downloadKey (downloadKey)}
+        {@const download = downloadManager.assets[downloadKey]}
         <div class="mb-2 flex place-items-center" transition:slide>
           <div class="w-full pe-10">
             <div class="flex place-items-center justify-between gap-2 text-xs font-medium">

web/src/lib/managers/download-manager.svelte.ts

@@ -5,7 +5,7 @@ export interface DownloadProgress {
   abort: AbortController | null;
 }
 
-class DownloadStore {
+class DownloadManager {
   assets = $state<Record<string, DownloadProgress>>({});
 
   isDownloading = $derived(Object.keys(this.assets).length > 0);
@@ -42,10 +42,4 @@ class DownloadStore {
   }
 }
 
-export const downloadStore = new DownloadStore();
-
-export const downloadManager = {
-  add: (key: string, total: number, abort?: AbortController) => downloadStore.add(key, total, abort),
-  clear: (key: string) => downloadStore.clear(key),
-  update: (key: string, progress: number, total?: number) => downloadStore.update(key, progress, total),
-};
+export const downloadManager = new DownloadManager();

web/src/lib/utils/asset-utils.ts

@@ -3,9 +3,9 @@ import FormatBoldMessage from '$lib/components/i18n/format-bold-message.svelte';
 import type { InterpolationValues } from '$lib/components/i18n/format-message';
 import { NotificationType, notificationController } from '$lib/components/shared-components/notification/notification';
 import { AppRoute } from '$lib/constants';
+import { downloadManager } from '$lib/managers/download-manager.svelte';
 import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
 import { assetsSnapshot, isSelectingAllAssets, type AssetStore } from '$lib/stores/assets-store.svelte';
-import { downloadManager } from '$lib/stores/download-store.svelte';
 import { preferences } from '$lib/stores/user.store';
 import { downloadRequest, getKey, withError } from '$lib/utils';
 import { createAlbum } from '$lib/utils/album-utils';