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)}
+      {#each Object.keys(downloadManager.assets) as downloadKey (downloadKey)}
-        {@const download = downloadStore.assets[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 = new DownloadManager();
-
-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),
-};

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';

web/src/routes/admin/repair/+page.svelte

@@ -7,7 +7,7 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
-  import { downloadManager } from '$lib/stores/download-store.svelte';
+  import { downloadManager } from '$lib/managers/download-manager.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { copyToClipboard } from '$lib/utils';
   import { downloadBlob } from '$lib/utils/asset-utils';

web/src/routes/admin/system-settings/+page.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
+  import type { SettingsComponentProps } from '$lib/components/admin-page/settings/admin-settings';
   import AdminSettings from '$lib/components/admin-page/settings/admin-settings.svelte';
   import AuthSettings from '$lib/components/admin-page/settings/auth/auth-settings.svelte';
   import BackupSettings from '$lib/components/admin-page/settings/backup-settings/backup-settings.svelte';
   import FFmpegSettings from '$lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte';
   import ImageSettings from '$lib/components/admin-page/settings/image/image-settings.svelte';
   import JobSettings from '$lib/components/admin-page/settings/job-settings/job-settings.svelte';
-  import MetadataSettings from '$lib/components/admin-page/settings/metadata-settings/metadata-settings.svelte';
   import LibrarySettings from '$lib/components/admin-page/settings/library-settings/library-settings.svelte';
   import LoggingSettings from '$lib/components/admin-page/settings/logging-settings/logging-settings.svelte';
   import MachineLearningSettings from '$lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte';
   import MapSettings from '$lib/components/admin-page/settings/map-settings/map-settings.svelte';
+  import MetadataSettings from '$lib/components/admin-page/settings/metadata-settings/metadata-settings.svelte';
   import NewVersionCheckSettings from '$lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte';
   import NotificationSettings from '$lib/components/admin-page/settings/notification-settings/notification-settings.svelte';
   import ServerSettings from '$lib/components/admin-page/settings/server/server-settings.svelte';
@@ -17,15 +18,16 @@
   import ThemeSettings from '$lib/components/admin-page/settings/theme/theme-settings.svelte';
   import TrashSettings from '$lib/components/admin-page/settings/trash-settings/trash-settings.svelte';
   import UserSettings from '$lib/components/admin-page/settings/user-settings/user-settings.svelte';
-  import { Button, Text, HStack, Alert } from '@immich/ui';
+  import SearchBar from '$lib/components/elements/search-bar.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import SettingAccordionState from '$lib/components/shared-components/settings/setting-accordion-state.svelte';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
   import { QueryParameter } from '$lib/constants';
-  import { downloadManager } from '$lib/stores/download-store.svelte';
+  import { downloadManager } from '$lib/managers/download-manager.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { copyToClipboard } from '$lib/utils';
   import { downloadBlob } from '$lib/utils/asset-utils';
+  import { Alert, Button, HStack, Text } from '@immich/ui';
   import {
     mdiAccountOutline,
     mdiBackupRestore,
@@ -48,11 +50,9 @@
     mdiUpload,
     mdiVideoOutline,
   } from '@mdi/js';
-  import type { PageData } from './$types';
-  import { t } from 'svelte-i18n';
   import type { Component } from 'svelte';
-  import type { SettingsComponentProps } from '$lib/components/admin-page/settings/admin-settings';
+  import { t } from 'svelte-i18n';
-  import SearchBar from '$lib/components/elements/search-bar.svelte';
+  import type { PageData } from './$types';
 
   interface Props {
     data: PageData;