fix: Refresh photo after updating featured photo (#21971)

fix: Refresh person photo after setting featured photo

Co-authored-by: Alex <alex.tran1502@gmail.com>

web/src/lib/components/asset-viewer/actions/action.ts

@@ -1,6 +1,6 @@
 import type { AssetAction } from '$lib/constants';
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-import type { AlbumResponseDto, AssetResponseDto, StackResponseDto } from '@immich/sdk';
+import type { AlbumResponseDto, AssetResponseDto, PersonResponseDto, StackResponseDto } from '@immich/sdk';
 
 type ActionMap = {
   [AssetAction.ARCHIVE]: { asset: TimelineAsset };
@@ -18,6 +18,7 @@ type ActionMap = {
   [AssetAction.REMOVE_ASSET_FROM_STACK]: { stack: StackResponseDto | null; asset: AssetResponseDto };
   [AssetAction.SET_VISIBILITY_LOCKED]: { asset: TimelineAsset };
   [AssetAction.SET_VISIBILITY_TIMELINE]: { asset: TimelineAsset };
+  [AssetAction.SET_PERSON_FEATURED_PHOTO]: { asset: AssetResponseDto; person: PersonResponseDto };
 };
 
 export type Action = {

web/src/lib/components/asset-viewer/actions/set-person-featured-action.svelte

@@ -4,21 +4,36 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
+  import { AssetAction } from '$lib/constants';
   import { handleError } from '$lib/utils/handle-error';
   import { updatePerson, type AssetResponseDto, type PersonResponseDto } from '@immich/sdk';
   import { mdiFaceManProfile } from '@mdi/js';
   import { t } from 'svelte-i18n';
+  import type { OnAction } from './action';
 
   interface Props {
     asset: AssetResponseDto;
     person: PersonResponseDto;
+    onAction?: OnAction;
   }
 
-  let { asset, person }: Props = $props();
+  let { asset, person, onAction }: Props = $props();
 
   const handleSelectFeaturePhoto = async () => {
     try {
-      await updatePerson({ id: person.id, personUpdateDto: { featureFaceAssetId: asset.id } });
+      const updatedPerson = await updatePerson({
+        id: person.id,
+        personUpdateDto: { featureFaceAssetId: asset.id },
+      });
+
+      person = { ...person, ...updatedPerson };
+
+      onAction?.({
+        type: AssetAction.SET_PERSON_FEATURED_PHOTO,
+        asset,
+        person,
+      });
+
       notificationController.show({ message: $t('feature_photo_updated'), type: NotificationType.Info });
     } catch (error) {
       handleError(error, $t('errors.unable_to_set_feature_photo'));

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

@@ -208,7 +208,7 @@
             <SetAlbumCoverAction {asset} {album} />
           {/if}
           {#if person}
-            <SetFeaturedPhotoAction {asset} {person} />
+            <SetFeaturedPhotoAction {asset} {person} {onAction} />
           {/if}
           {#if asset.type === AssetTypeEnum.Image && !isLocked}
             <SetProfilePictureAction {asset} />

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

@@ -22,6 +22,7 @@
   import {
     AssetJobName,
     AssetTypeEnum,
+    getAssetInfo,
     getAllAlbums,
     getStack,
     runAssetJobs,
@@ -339,6 +340,11 @@
         stack = action.stack;
         break;
       }
+      case AssetAction.SET_PERSON_FEATURED_PHOTO: {
+        const assetInfo = await getAssetInfo({ id: asset.id });
+        asset = { ...asset, people: assetInfo.people };
+        break;
+      }
       case AssetAction.KEEP_THIS_DELETE_OTHERS:
       case AssetAction.UNSTACK: {
         closeViewer();

web/src/lib/constants.ts

@@ -14,6 +14,7 @@ export enum AssetAction {
   REMOVE_ASSET_FROM_STACK = 'remove-asset-from-stack',
   SET_VISIBILITY_LOCKED = 'set-visibility-locked',
   SET_VISIBILITY_TIMELINE = 'set-visibility-timeline',
+  SET_PERSON_FEATURED_PHOTO = 'set-person-featured-photo',
 }
 
 export enum AppRoute {