refactor(web): asset job actions (#25426)

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.spec.ts

@@ -16,7 +16,7 @@ describe('AssetViewerNavBar component', () => {
     preAction: () => {},
     onZoomImage: () => {},
     onAction: () => {},
-    onRunJob: () => {},
+    onEdit: () => {},
     onPlaySlideshow: () => {},
     onClose: () => {},
     playOriginalVideo: false,

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

@@ -28,12 +28,11 @@
   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 { getSharedLink, 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';
   import {
-    AssetJobName,
     AssetTypeEnum,
     AssetVisibility,
     type AlbumResponseDto,
@@ -44,13 +43,9 @@
   import { CommandPaletteDefaultProvider, IconButton, type ActionItem } from '@immich/ui';
   import {
     mdiArrowLeft,
-    mdiCogRefreshOutline,
     mdiCompare,
     mdiContentCopy,
-    mdiDatabaseRefreshOutline,
     mdiDotsVertical,
-    mdiHeadSyncOutline,
-    mdiImageRefreshOutline,
     mdiImageSearch,
     mdiMagnifyMinusOutline,
     mdiMagnifyPlusOutline,
@@ -71,7 +66,6 @@
     preAction: PreAction;
     onAction: OnAction;
     onUndoDelete?: OnUndoDelete;
-    onRunJob: (name: AssetJobName) => void;
     onPlaySlideshow: () => void;
     onEdit: () => void;
     onClose?: () => void;
@@ -90,7 +84,6 @@
     preAction,
     onAction,
     onUndoDelete = undefined,
-    onRunJob,
     onPlaySlideshow,
     onClose,
     onEdit,
@@ -124,6 +117,10 @@
     PlayMotionPhoto,
     StopMotionPhoto,
     Info,
+    RefreshFacesJob,
+    RefreshMetadataJob,
+    RegenerateThumbnailJob,
+    TranscodeVideoJob,
   } = $derived(getAssetActions($t, asset));
   const sharedLink = getSharedLink();
 
@@ -140,7 +137,24 @@
 
 <CommandPaletteDefaultProvider
   name={$t('assets')}
-  actions={withoutIcons([Close, Share, Offline, Favorite, Unfavorite, PlayMotionPhoto, StopMotionPhoto, Info])}
+  actions={withoutIcons([
+    Close,
+    Cast,
+    Share,
+    Download,
+    DownloadOriginal,
+    SharedLinkDownload,
+    Offline,
+    Favorite,
+    Unfavorite,
+    PlayMotionPhoto,
+    StopMotionPhoto,
+    Info,
+    RefreshFacesJob,
+    RefreshMetadataJob,
+    RegenerateThumbnailJob,
+    TranscodeVideoJob,
+  ])}
 />
 
 <div
@@ -275,28 +289,10 @@
         {/if}
         {#if isOwner}
           <hr />
-          <MenuOption
-            icon={mdiHeadSyncOutline}
-            onClick={() => onRunJob(AssetJobName.RefreshFaces)}
-            text={$getAssetJobName(AssetJobName.RefreshFaces)}
-          />
-          <MenuOption
-            icon={mdiDatabaseRefreshOutline}
-            onClick={() => onRunJob(AssetJobName.RefreshMetadata)}
-            text={$getAssetJobName(AssetJobName.RefreshMetadata)}
-          />
-          <MenuOption
-            icon={mdiImageRefreshOutline}
-            onClick={() => onRunJob(AssetJobName.RegenerateThumbnail)}
-            text={$getAssetJobName(AssetJobName.RegenerateThumbnail)}
-          />
-          {#if asset.type === AssetTypeEnum.Video}
-            <MenuOption
-              icon={mdiCogRefreshOutline}
-              onClick={() => onRunJob(AssetJobName.TranscodeVideo)}
-              text={$getAssetJobName(AssetJobName.TranscodeVideo)}
-            />
-          {/if}
+          <ActionMenuItem action={RefreshFacesJob} />
+          <ActionMenuItem action={RefreshMetadataJob} />
+          <ActionMenuItem action={RegenerateThumbnailJob} />
+          <ActionMenuItem action={TranscodeVideoJob} />
         {/if}
       </ButtonContextMenu>
     {/if}

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

@@ -19,7 +19,7 @@
   import { alwaysLoadOriginalVideo } from '$lib/stores/preferences.store';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { user } from '$lib/stores/user.store';
-  import { getAssetJobMessage, getAssetUrl, getSharedLink, handlePromiseError } from '$lib/utils';
+  import { getAssetUrl, getSharedLink, handlePromiseError } from '$lib/utils';
   import type { OnUndoDelete } from '$lib/utils/actions';
   import { navigateToAsset } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
@@ -28,18 +28,15 @@
   import { preloadImageUrl } from '$lib/utils/sw-messaging';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import {
-    AssetJobName,
     AssetTypeEnum,
     getAllAlbums,
     getAssetInfo,
     getStack,
-    runAssetJobs,
     type AlbumResponseDto,
     type AssetResponseDto,
     type PersonResponseDto,
     type StackResponseDto,
   } from '@immich/sdk';
-  import { toastManager } from '@immich/ui';
   import { onDestroy, onMount, untrack } from 'svelte';
   import { t } from 'svelte-i18n';
   import { fly } from 'svelte/transition';
@@ -262,15 +259,6 @@
     isShowEditor = !isShowEditor;
   };
 
-  const handleRunJob = async (name: AssetJobName) => {
-    try {
-      await runAssetJobs({ assetJobsDto: { assetIds: [asset.id], name } });
-      toastManager.success($getAssetJobMessage(name));
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_submit_job'));
-    }
-  };
-
   /**
    * Slide show mode
    */
@@ -473,7 +461,6 @@
         onAction={handleAction}
         {onUndoDelete}
         onEdit={showEditor}
-        onRunJob={handleRunJob}
         onPlaySlideshow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
         onClose={onClose ? () => onClose(asset) : undefined}
         {playOriginalVideo}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
-  import { getAssetJobIcon, getAssetJobMessage, getAssetJobName } from '$lib/utils';
+  import { getAssetJobIcon, getAssetJobName } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { AssetJobName, runAssetJobs } from '@immich/sdk';
   import { toastManager } from '@immich/ui';
@@ -22,7 +22,7 @@
     try {
       const ids = [...getOwnedAssets()].map(({ id }) => id);
       await runAssetJobs({ assetJobsDto: { assetIds: ids, name } });
-      toastManager.success($getAssetJobMessage(name));
+      toastManager.success(getAssetJobName($t, name));
       clearSelect();
     } catch (error) {
       handleError(error, $t('errors.unable_to_submit_job'));
@@ -32,6 +32,6 @@
 
 {#each jobs as job (job)}
   {#if isAllVideos || job !== AssetJobName.TranscodeVideo}
-    <MenuOption text={$getAssetJobName(job)} icon={getAssetJobIcon(job)} onClick={() => handleRunJob(job)} />
+    <MenuOption text={getAssetJobName($t, job)} icon={getAssetJobIcon(job)} onClick={() => handleRunJob(job)} />
   {/if}
 {/each}