refactor(web): album service (#23762)

web/src/lib/components/album-page/album-viewer.svelte

@@ -7,12 +7,13 @@
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import Timeline from '$lib/components/timeline/Timeline.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import { handleDownloadAlbum } from '$lib/services/album.service';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { handlePromiseError } from '$lib/utils';
-  import { cancelMultiselect, downloadAlbum } from '$lib/utils/asset-utils';
+  import { cancelMultiselect } from '$lib/utils/asset-utils';
   import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
   import type { AlbumResponseDto, SharedLinkResponseDto, UserResponseDto } from '@immich/sdk';
   import { IconButton } from '@immich/ui';
@@ -120,7 +121,7 @@
             color="secondary"
             variant="ghost"
             aria-label={$t('download')}
-            onclick={() => downloadAlbum(album)}
+            onclick={() => handleDownloadAlbum(album)}
             icon={mdiDownload}
           />
         {/if}

web/src/lib/components/album-page/albums-list.svelte

@@ -11,6 +11,7 @@
   import AlbumShareModal from '$lib/modals/AlbumShareModal.svelte';
   import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
   import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
+  import { handleDownloadAlbum } from '$lib/services/album.service';
   import {
     AlbumFilter,
     AlbumGroupBy,
@@ -30,7 +31,6 @@
     stringToSortOrder,
     type AlbumGroup,
   } from '$lib/utils/album-utils';
-  import { downloadAlbum } from '$lib/utils/asset-utils';
   import type { ContextMenuPosition } from '$lib/utils/context-menu';
   import { handleError } from '$lib/utils/handle-error';
   import { normalizeSearchString } from '$lib/utils/string-utils';
@@ -221,11 +221,10 @@
     isOpen = false;
   };
 
-  const handleDownloadAlbum = async () => {
+  const onDownloadAlbum = async () => {
     if (contextMenuTargetAlbum) {
-      const album = contextMenuTargetAlbum;
       closeAlbumContextMenu();
-      await downloadAlbum(album);
+      await handleDownloadAlbum(contextMenuTargetAlbum);
     }
   };
 
@@ -419,7 +418,7 @@
     />
     <MenuOption icon={mdiShareVariantOutline} text={$t('share')} onClick={() => openShareModal()} />
   {/if}
-  <MenuOption icon={mdiDownload} text={$t('download')} onClick={() => handleDownloadAlbum()} />
+  <MenuOption icon={mdiDownload} text={$t('download')} onClick={onDownloadAlbum} />
   {#if showFullContextMenu}
     <MenuOption icon={mdiDeleteOutline} text={$t('delete')} onClick={() => setAlbumToDelete()} />
   {/if}

web/src/lib/services/album.service.ts

@@ -0,0 +1,6 @@
+import { downloadArchive } from '$lib/utils/asset-utils';
+import type { AlbumResponseDto } from '@immich/sdk';
+
+export const handleDownloadAlbum = async (album: AlbumResponseDto) => {
+  await downloadArchive(`${album.albumName}.zip`, { albumId: album.id });
+};

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

@@ -30,7 +30,6 @@ import {
   untagAssets,
   updateAsset,
   updateAssets,
-  type AlbumResponseDto,
   type AssetResponseDto,
   type AssetTypeEnum,
   type DownloadInfoDto,
@@ -156,12 +155,6 @@ export const removeTag = async ({
   return assetIds;
 };
 
-export const downloadAlbum = async (album: AlbumResponseDto) => {
-  await downloadArchive(`${album.albumName}.zip`, {
-    albumId: album.id,
-  });
-};
-
 export const downloadBlob = (data: Blob, filename: string) => {
   const url = URL.createObjectURL(data);
 

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -36,6 +36,7 @@
   import AlbumUsersModal from '$lib/modals/AlbumUsersModal.svelte';
   import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
   import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
+  import { handleDownloadAlbum } from '$lib/services/album.service';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { featureFlags } from '$lib/stores/server-config.store';
@@ -43,7 +44,7 @@
   import { preferences, user } from '$lib/stores/user.store';
   import { handlePromiseError, makeSharedLinkUrl } from '$lib/utils';
   import { confirmAlbumDelete } from '$lib/utils/album-utils';
-  import { cancelMultiselect, downloadAlbum } from '$lib/utils/asset-utils';
+  import { cancelMultiselect } from '$lib/utils/asset-utils';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import { handleError } from '$lib/utils/handle-error';
   import {
@@ -233,10 +234,6 @@
     }
   };
 
-  const handleDownloadAlbum = async () => {
-    await downloadAlbum(album);
-  };
-
   const handleRemoveAlbum = async () => {
     const isConfirmed = await confirmAlbumDelete(album);
 
@@ -653,7 +650,7 @@
                 variant="ghost"
                 color="secondary"
                 aria-label={$t('download')}
-                onclick={handleDownloadAlbum}
+                onclick={() => handleDownloadAlbum(album)}
                 icon={mdiDownload}
               />
             {/if}