From 6d3f3d86161b93ad513032a6b276f378aa887f51 Mon Sep 17 00:00:00 2001 From: Alex Date: Thu, 10 Apr 2025 11:48:21 -0500 Subject: [PATCH] refactor: convert download manager into a state class (#17491) * fix(web): download progress bar not functioning * remove unused method --- .../asset-viewer/download-panel.svelte | 10 ++-- web/src/lib/stores/download-store.svelte.ts | 51 +++++++++++++++++++ web/src/lib/stores/download.ts | 48 ----------------- web/src/lib/utils/asset-utils.ts | 2 +- web/src/routes/admin/repair/+page.svelte | 2 +- .../routes/admin/system-settings/+page.svelte | 2 +- 6 files changed, 59 insertions(+), 56 deletions(-) create mode 100644 web/src/lib/stores/download-store.svelte.ts delete mode 100644 web/src/lib/stores/download.ts diff --git a/web/src/lib/components/asset-viewer/download-panel.svelte b/web/src/lib/components/asset-viewer/download-panel.svelte index 17f5e7e6a8..80a14a5ac3 100644 --- a/web/src/lib/components/asset-viewer/download-panel.svelte +++ b/web/src/lib/components/asset-viewer/download-panel.svelte @@ -1,5 +1,5 @@ -{#if $isDownloading} +{#if downloadStore.isDownloading}

{$t('downloading').toUpperCase()}

- {#each Object.keys($downloadAssets) as downloadKey (downloadKey)} - {@const download = $downloadAssets[downloadKey]} + {#each Object.keys(downloadStore.assets) as downloadKey (downloadKey)} + {@const download = downloadStore.assets[downloadKey]}
@@ -31,7 +31,7 @@ {/if}
-
+

diff --git a/web/src/lib/stores/download-store.svelte.ts b/web/src/lib/stores/download-store.svelte.ts new file mode 100644 index 0000000000..8c03671e73 --- /dev/null +++ b/web/src/lib/stores/download-store.svelte.ts @@ -0,0 +1,51 @@ +export interface DownloadProgress { + progress: number; + total: number; + percentage: number; + abort: AbortController | null; +} + +class DownloadStore { + assets = $state>({}); + + isDownloading = $derived(Object.keys(this.assets).length > 0); + + #update(key: string, value: Partial | null) { + if (value === null) { + delete this.assets[key]; + return; + } + + if (!this.assets[key]) { + this.assets[key] = { progress: 0, total: 0, percentage: 0, abort: null }; + } + + const item = this.assets[key]; + Object.assign(item, value); + item.percentage = Math.min(Math.floor((item.progress / item.total) * 100), 100); + } + + add(key: string, total: number, abort?: AbortController) { + this.#update(key, { total, abort }); + } + + clear(key: string) { + this.#update(key, null); + } + + update(key: string, progress: number, total?: number) { + const download: Partial = { progress }; + if (total !== undefined) { + download.total = total; + } + this.#update(key, download); + } +} + +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), +}; diff --git a/web/src/lib/stores/download.ts b/web/src/lib/stores/download.ts deleted file mode 100644 index fc450d95ef..0000000000 --- a/web/src/lib/stores/download.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { derived, writable } from 'svelte/store'; - -export interface DownloadProgress { - progress: number; - total: number; - percentage: number; - abort: AbortController | null; -} - -export const downloadAssets = writable>({}); - -export const isDownloading = derived(downloadAssets, ($downloadAssets) => { - return Object.keys($downloadAssets).length > 0; -}); - -const update = (key: string, value: Partial | null) => { - downloadAssets.update((state) => { - const newState = { ...state }; - - if (value === null) { - delete newState[key]; - return newState; - } - - if (!newState[key]) { - newState[key] = { progress: 0, total: 0, percentage: 0, abort: null }; - } - - const item = newState[key]; - Object.assign(item, value); - item.percentage = Math.min(Math.floor((item.progress / item.total) * 100), 100); - newState[key] = { ...item }; - - return newState; - }); -}; - -export const downloadManager = { - add: (key: string, total: number, abort?: AbortController) => update(key, { total, abort }), - clear: (key: string) => update(key, null), - update: (key: string, progress: number, total?: number) => { - const download: Partial = { progress }; - if (total !== undefined) { - download.total = total; - } - update(key, download); - }, -}; diff --git a/web/src/lib/utils/asset-utils.ts b/web/src/lib/utils/asset-utils.ts index c3b23e1e93..bd3cb416b5 100644 --- a/web/src/lib/utils/asset-utils.ts +++ b/web/src/lib/utils/asset-utils.ts @@ -5,7 +5,7 @@ import { NotificationType, notificationController } from '$lib/components/shared import { AppRoute } from '$lib/constants'; 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'; +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'; diff --git a/web/src/routes/admin/repair/+page.svelte b/web/src/routes/admin/repair/+page.svelte index 17896d2e51..635a140452 100644 --- a/web/src/routes/admin/repair/+page.svelte +++ b/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'; + import { downloadManager } from '$lib/stores/download-store.svelte'; import { locale } from '$lib/stores/preferences.store'; import { copyToClipboard } from '$lib/utils'; import { downloadBlob } from '$lib/utils/asset-utils'; diff --git a/web/src/routes/admin/system-settings/+page.svelte b/web/src/routes/admin/system-settings/+page.svelte index 6fe4275303..6512461ee9 100644 --- a/web/src/routes/admin/system-settings/+page.svelte +++ b/web/src/routes/admin/system-settings/+page.svelte @@ -22,7 +22,7 @@ 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'; + import { downloadManager } from '$lib/stores/download-store.svelte'; import { featureFlags } from '$lib/stores/server-config.store'; import { copyToClipboard } from '$lib/utils'; import { downloadBlob } from '$lib/utils/asset-utils';