refactor: download action (#25124)

web/src/lib/components/ActionButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { isEnabled } from '$lib/utils';
   import { IconButton, type ActionItem } from '@immich/ui';
 
   type Props = {
@@ -9,6 +10,6 @@
   const { title, icon, color = 'secondary', onAction } = $derived(action);
 </script>
 
-{#if icon && (action.$if?.() ?? true)}
+{#if icon && isEnabled(action)}
   <IconButton variant="ghost" shape="round" {color} {icon} aria-label={title} onclick={() => onAction(action)} />
 {/if}

web/src/lib/components/ActionMenuItem.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import { isEnabled } from '$lib/utils';
+  import { type ActionItem } from '@immich/ui';
+
+  type Props = {
+    action: ActionItem;
+  };
+
+  const { action }: Props = $props();
+  const { title, icon, onAction } = $derived(action);
+</script>
+
+{#if icon && isEnabled(action)}
+  <MenuOption {icon} text={title} onClick={() => onAction(action)} />
+{/if}

web/src/lib/components/asset-viewer/actions/download-action.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-  import { shortcut } from '$lib/actions/shortcut';
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { downloadFile } from '$lib/utils/asset-utils';
-  import { getAssetInfo } from '@immich/sdk';
-  import { IconButton } from '@immich/ui';
-  import { mdiDownload } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    asset: TimelineAsset;
-    menuItem?: boolean;
-  }
-
-  let { asset, menuItem = false }: Props = $props();
-
-  const onDownloadFile = async () => downloadFile(await getAssetInfo({ ...authManager.params, id: asset.id }));
-</script>
-
-<svelte:document use:shortcut={{ shortcut: { key: 'd', shift: true }, onShortcut: onDownloadFile }} />
-
-{#if !menuItem}
-  <IconButton
-    color="secondary"
-    shape="round"
-    variant="ghost"
-    icon={mdiDownload}
-    aria-label={$t('download')}
-    onclick={onDownloadFile}
-  />
-{:else}
-  <MenuOption icon={mdiDownload} text={$t('download')} onClick={onDownloadFile} />
-{/if}

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -2,12 +2,12 @@
   import { goto } from '$app/navigation';
   import { resolve } from '$app/paths';
   import ActionButton from '$lib/components/ActionButton.svelte';
+  import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
   import type { OnAction, PreAction } from '$lib/components/asset-viewer/actions/action';
   import AddToAlbumAction from '$lib/components/asset-viewer/actions/add-to-album-action.svelte';
   import AddToStackAction from '$lib/components/asset-viewer/actions/add-to-stack-action.svelte';
   import ArchiveAction from '$lib/components/asset-viewer/actions/archive-action.svelte';
   import DeleteAction from '$lib/components/asset-viewer/actions/delete-action.svelte';
-  import DownloadAction from '$lib/components/asset-viewer/actions/download-action.svelte';
   import KeepThisDeleteOthersAction from '$lib/components/asset-viewer/actions/keep-this-delete-others.svelte';
   import RatingAction from '$lib/components/asset-viewer/actions/rating-action.svelte';
   import RemoveAssetFromStack from '$lib/components/asset-viewer/actions/remove-asset-from-stack.svelte';
@@ -27,7 +27,7 @@
   import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
   import { user } from '$lib/stores/user.store';
   import { photoZoomState } from '$lib/stores/zoom-image.store';
-  import { getAssetJobName, getSharedLink, withoutIcons } from '$lib/utils';
+  import { getAssetJobName, withoutIcons } from '$lib/utils';
   import type { OnUndoDelete } from '$lib/utils/actions';
   import { canCopyImageToClipboard } from '$lib/utils/asset-utils';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
@@ -96,9 +96,7 @@
     setPlayOriginalVideo,
   }: Props = $props();
 
-  const sharedLink = getSharedLink();
   let isOwner = $derived($user && asset.ownerId === $user?.id);
-  let showDownloadButton = $derived(sharedLink ? sharedLink.allowDownload : !asset.isOffline);
   let isLocked = $derived(asset.visibility === AssetVisibility.Locked);
   let smartSearchEnabled = $derived(featureFlagsManager.value.smartSearch);
 
@@ -113,9 +111,8 @@
 
   const { Cast } = $derived(getGlobalActions($t));
 
-  const { Share, Offline, Favorite, Unfavorite, PlayMotionPhoto, StopMotionPhoto, Info } = $derived(
-    getAssetActions($t, asset),
-  );
+  const { Share, Download, SharedLinkDownload, Offline, Favorite, Unfavorite, PlayMotionPhoto, StopMotionPhoto, Info } =
+    $derived(getAssetActions($t, asset));
 
   // $: showEditorButton =
   //   isOwner &&
@@ -169,10 +166,7 @@
       />
     {/if}
 
-    {#if !isOwner && showDownloadButton}
-      <DownloadAction asset={toTimelineAsset(asset)} />
-    {/if}
-
+    <ActionButton action={SharedLinkDownload} />
     <ActionButton action={Info} />
     <ActionButton action={Favorite} />
     <ActionButton action={Unfavorite} />
@@ -188,9 +182,8 @@
         {#if showSlideshow && !isLocked}
           <MenuOption icon={mdiPresentationPlay} text={$t('slideshow')} onClick={onPlaySlideshow} />
         {/if}
-        {#if showDownloadButton}
-          <DownloadAction asset={toTimelineAsset(asset)} menuItem />
-        {/if}
+
+        <ActionMenuItem action={Download} />
 
         {#if !isLocked}
           {#if asset.isTrashed}

web/src/lib/components/shared-components/context-menu/menu-option.svelte

@@ -3,12 +3,12 @@
   import { shortcut as bindShortcut, shortcutLabel as computeShortcutLabel } from '$lib/actions/shortcut';
   import { optionClickCallbackStore, selectedIdStore } from '$lib/stores/context-menu.store';
   import { generateId } from '$lib/utils/generate-id';
-  import { Icon } from '@immich/ui';
+  import { Icon, type IconLike } from '@immich/ui';
 
   interface Props {
     text: string;
     subtitle?: string;
-    icon?: string;
+    icon?: IconLike;
     activeColor?: string;
     textColor?: string;
     onClick: () => void;
@@ -19,7 +19,7 @@
   let {
     text,
     subtitle = '',
-    icon = '',
+    icon,
     activeColor = 'bg-slate-300',
     textColor = 'text-immich-fg dark:text-immich-dark-bg',
     onClick,

web/src/lib/components/timeline/actions/DownloadAction.svelte

@@ -3,7 +3,8 @@
 
   import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { downloadArchive, downloadFile } from '$lib/utils/asset-utils';
+  import { handleDownloadAsset } from '$lib/services/asset.service';
+  import { downloadArchive } from '$lib/utils/asset-utils';
   import { getAssetInfo } from '@immich/sdk';
   import { IconButton } from '@immich/ui';
   import { mdiDownload } from '@mdi/js';
@@ -24,7 +25,7 @@
     if (assets.length === 1) {
       clearSelect();
       let asset = await getAssetInfo({ ...authManager.params, id: assets[0].id });
-      await downloadFile(asset);
+      await handleDownloadAsset(asset);
       return;
     }