feat: user preferences for archive download size (#10296)

* feat: user preferences for archive download size

* chore: open api

* chore: clean up

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

web/src/lib/components/user-settings-page/download-settings.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import { updateMyPreferences } from '@immich/sdk';
+  import { fade } from 'svelte/transition';
+  import { handleError } from '../../utils/handle-error';
+
+  import { preferences } from '$lib/stores/user.store';
+  import Button from '../elements/buttons/button.svelte';
+  import { t } from 'svelte-i18n';
+  import SettingInputField, {
+    SettingInputFieldType,
+  } from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import { convertFromBytes, convertToBytes } from '$lib/utils/byte-converter';
+
+  let archiveSize = convertFromBytes($preferences?.download?.archiveSize || 4, 'GiB');
+
+  const handleSave = async () => {
+    try {
+      const dto = { download: { archiveSize: Math.floor(convertToBytes(archiveSize, 'GiB')) } };
+      const newPreferences = await updateMyPreferences({ userPreferencesUpdateDto: dto });
+      $preferences = newPreferences;
+
+      notificationController.show({ message: $t('saved_settings'), type: NotificationType.Info });
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_update_settings'));
+    }
+  };
+</script>
+
+<section class="my-4">
+  <div in:fade={{ duration: 500 }}>
+    <form autocomplete="off" on:submit|preventDefault>
+      <div class="ml-4 mt-4 flex flex-col gap-4">
+        <div class="ml-4">
+          <SettingInputField
+            inputType={SettingInputFieldType.NUMBER}
+            label={$t('archive_size')}
+            desc={$t('archive_size_description')}
+            bind:value={archiveSize}
+          />
+        </div>
+        <div class="flex justify-end">
+          <Button type="submit" size="sm" on:click={() => handleSave()}>{$t('save')}</Button>
+        </div>
+      </div>
+    </form>
+  </div>
+</section>

web/src/lib/components/user-settings-page/user-settings-list.svelte

@@ -17,6 +17,7 @@
   import UserProfileSettings from './user-profile-settings.svelte';
   import NotificationsSettings from '$lib/components/user-settings-page/notifications-settings.svelte';
   import { t } from 'svelte-i18n';
+  import DownloadSettings from '$lib/components/user-settings-page/download-settings.svelte';
 
   export let keys: ApiKeyResponseDto[] = [];
   export let sessions: SessionResponseDto[] = [];
@@ -43,6 +44,14 @@
     <DeviceList bind:devices={sessions} />
   </SettingAccordion>
 
+  <SettingAccordion
+    key="download-settings"
+    title={$t('download_settings')}
+    subtitle={$t('download_settings_description')}
+  >
+    <DownloadSettings />
+  </SettingAccordion>
+
   <SettingAccordion key="memories" title={$t('memories')} subtitle={$t('memories_setting_description')}>
     <MemoriesSettings />
   </SettingAccordion>

web/src/lib/i18n/en.json

@@ -312,6 +312,8 @@
   "appears_in": "Appears in",
   "archive": "Archive",
   "archive_or_unarchive_photo": "Archive or unarchive photo",
+  "archive_size": "Archive Size",
+  "archive_size_description": "Configure the archive size for downloads (in GiB)",
   "archived": "Archived",
   "asset_offline": "Asset offline",
   "assets": "Assets",
@@ -413,6 +415,8 @@
   "display_original_photos_setting_description": "Prefer to display the original photo when viewing an asset rather than thumbnails when the original asset is web-compatible. This may result in slower photo display speeds.",
   "done": "Done",
   "download": "Download",
+  "download_settings": "Download",
+  "download_settings_description": "Manage settings related to asset download",
   "downloading": "Downloading",
   "duplicates": "Duplicates",
   "duration": "Duration",

web/src/lib/utils.ts

@@ -301,3 +301,12 @@ export const handlePromiseError = <T>(promise: Promise<T>): void => {
 export const s = (count: number) => (count === 1 ? '' : 's');
 
 export const memoryLaneTitle = (yearsAgo: number) => `${yearsAgo} year${s(yearsAgo)} ago`;
+
+export const withError = async <T>(fn: () => Promise<T>): Promise<[undefined, T] | [unknown, undefined]> => {
+  try {
+    const result = await fn();
+    return [undefined, result];
+  } catch (error) {
+    return [error, undefined];
+  }
+};

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

@@ -5,7 +5,8 @@ import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store'
 import { assetViewingStore } from '$lib/stores/asset-viewing.store';
 import { BucketPosition, isSelectingAllAssets, type AssetStore } from '$lib/stores/assets.store';
 import { downloadManager } from '$lib/stores/download';
-import { downloadRequest, getKey, s } from '$lib/utils';
+import { preferences } from '$lib/stores/user.store';
+import { downloadRequest, getKey, s, withError } from '$lib/utils';
 import { createAlbum } from '$lib/utils/album-utils';
 import { asByteUnitString } from '$lib/utils/byte-units';
 import { encodeHTMLSpecialChars } from '$lib/utils/string-utils';
@@ -20,7 +21,6 @@ import {
   type AssetResponseDto,
   type AssetTypeEnum,
   type DownloadInfoDto,
-  type DownloadResponseDto,
   type UserResponseDto,
 } from '@immich/sdk';
 import { DateTime } from 'luxon';
@@ -94,18 +94,19 @@ export const downloadBlob = (data: Blob, filename: string) => {
   URL.revokeObjectURL(url);
 };
 
-export const downloadArchive = async (fileName: string, options: DownloadInfoDto) => {
-  let downloadInfo: DownloadResponseDto | null = null;
+export const downloadArchive = async (fileName: string, options: Omit<DownloadInfoDto, 'archiveSize'>) => {
+  const $preferences = get(preferences);
+  const dto = { ...options, archiveSize: $preferences.download.archiveSize };
 
-  try {
-    downloadInfo = await getDownloadInfo({ downloadInfoDto: options, key: getKey() });
-  } catch (error) {
+  const [error, downloadInfo] = await withError(() => getDownloadInfo({ downloadInfoDto: dto, key: getKey() }));
+  if (error) {
     handleError(error, 'Unable to download files');
     return;
   }
 
-  // TODO: prompt for big download
-  // const total = downloadInfo.totalSize;
+  if (!downloadInfo) {
+    return;
+  }
 
   for (let index = 0; index < downloadInfo.archives.length; index++) {
     const archive = downloadInfo.archives[index];

web/src/lib/utils/byte-converter.ts

@@ -7,7 +7,7 @@
  * @param unit unit to convert from
  * @returns bytes (number)
  */
-export function convertToBytes(size: number, unit: string): number {
+export function convertToBytes(size: number, unit: 'GiB'): number {
   let bytes = 0;
 
   if (unit === 'GiB') {
@@ -26,7 +26,7 @@ export function convertToBytes(size: number, unit: string): number {
  * @param unit unit to convert to
  * @returns bytes (number)
  */
-export function convertFromBytes(bytes: number, unit: string): number {
+export function convertFromBytes(bytes: number, unit: 'GiB'): number {
   let size = 0;
 
   if (unit === 'GiB') {