From 37b5d9211047d53601ebab4462a700d409dfd21f Mon Sep 17 00:00:00 2001
From: martin <74269598+martabal@users.noreply.github.com>
Date: Fri, 28 Jun 2024 02:16:26 +0200
Subject: [PATCH] fix(web): new feature photo (#9443)

* fix: new feature photo

* fix: use updatedAt
---
 .../lib/model/person_response_dto.dart        | Bin 3908 -> 4668 bytes
 .../model/person_with_faces_response_dto.dart | Bin 4359 -> 5119 bytes
 open-api/immich-openapi-specs.json            |  10 ++++++++++
 open-api/typescript-sdk/src/fetch-client.ts   |   4 ++++
 server/src/dtos/person.dto.ts                 |   4 ++++
 server/src/services/person.service.spec.ts    |   4 ++++
 .../asset-viewer/detail-panel.svelte          |   2 +-
 .../faces-page/assign-face-side-panel.svelte  |   2 +-
 .../faces-page/face-thumbnail.svelte          |   2 +-
 .../faces-page/merge-suggestion-modal.svelte  |   6 +++---
 .../components/faces-page/people-card.svelte  |   2 +-
 .../faces-page/person-side-panel.svelte       |   4 ++--
 .../search-bar/search-people-section.svelte   |   8 +-------
 web/src/lib/i18n/en.json                      |   1 +
 web/src/lib/utils.ts                          |   4 +++-
 web/src/routes/(user)/explore/+page.svelte    |   2 +-
 web/src/routes/(user)/people/+page.svelte     |   2 +-
 .../[[assetId=id]]/+page.svelte               |  15 +++++++++------
 18 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/mobile/openapi/lib/model/person_response_dto.dart b/mobile/openapi/lib/model/person_response_dto.dart
index e1f6b44e5baf1783be0dc05ee28511f56b1c11a8..50ee28f0af5fe4c7e94b9939518f1f9bde295080 100644
GIT binary patch
delta 757
zcmZvaPiqrF7{*Dgl_)~-Q1H<5q=aUpag$uMq=X{%;;BOGNjyw;-)%;xGt2x*2_iWN
z9=+u3cMx**=m+rw2z~`;w(D*!UUt}df6p_|`_BB>{oeU@zqtk288@-ZQ)VfBZda|Q
zSPljQocV3!TIHne0+-Byr75N067x|!8a|7McL7gceep^VGX$wDjc<s}OgWKa#^!`6
zk@S#!BApOyDyWT9E)()G2qve5XMCA3%augN1(oipA``s*@riILfgz=gIbktp!Vw~8
zxI8ah_R7k5ugc%+W2P=?PP$(p=OjsohD&>+oc0+K<()6w(pY3n2uxY>9#)0q!JOf5
zXxK$gaVb7l((sgY7|<2=p9EoU*IK;RVR3-h`?8;SnBPw6?EPQ(kZ1gYj!@muI&Zcb
z9qjM>GN8PvuCEW1NlmU6w|+jt<ARGSeLzAVIKmL)nr^R7Hok86>y1gL(yV`Nd}%!3
z8KN7n<>dCmWkq%0Vp4Qb=V`}Qy|ziz^Xp5a4xSE2r&jwZMZLo!*GG`>&*nq%<DVVg
v871H7?!TrXZ^;*+ChN2;*u(Yb%}>pHsB^D=-`U=(^?m4Wx3_MzjyL}RUugFh

delta 39
vcmdm^azt(eFVkd2ri{%REG&$Z16UtSPGOt8nU}qfakC|7KhtJL9&0uL{PPRB

diff --git a/mobile/openapi/lib/model/person_with_faces_response_dto.dart b/mobile/openapi/lib/model/person_with_faces_response_dto.dart
index b15e6202503aeed0d6096c541f77ebb4473def68..af2e7101c347716868f20509e10b3aa4d0f2730c 100644
GIT binary patch
delta 774
zcmZva&2AGh6ou7@wo+G!1rkW0lc;JY5c0DDlq!m#Y}g^StWX!u_)cSR?2&&`DulA+
z0kY=-Sb@Th7vUvXvjlrOoe3428QJ%{$LAjVQ|nLr>rvw-;AX=1e9oC8{>-f=jnB(|
zzmJo!joj#*jJv=&vtXPPhfr7yd&9w#-e3<1<mDHyBr!`++R^A*vz=)#Ic97@m=dV~
zsYl97$)=K;I2J0UV1r<DN<}7?DRV+AWI|G@&NbPn9ga_>=L7~$8S~O%!K5c7-U@YA
zsI<z;s8#vzbTQNCv>?+hkTX(b;=rZ6)!qaTsSe6>zqAe+lM+*wzJt@zc@$^3G7Wc;
zQ?G13(#i@>CI)ng{l`JfZDYiZ35x?le<+8<V}AEa<)Hr}m^=}4nxML&_0Puht$iFE
zgfgImsHv|H<8e){?%w$Q01pc;srn-l=fDI5jB2{M+TH$syIXIJ_p6@ukL_<;w?u~I
z+H1MLb7xsm?Nf}4DQZ8>p3|>gnsmbdrPWU#4~ECigp`ubVd3i|NQP(gp;&}xhqqR%
wH>UlsX!Kk11!%~5qYCzL{eJgXV~E=K2y>QS1(!s<E;a?@s@++i?tR($3rS%9vH$=8

delta 39
xcmV+?0NDTkCx;@iLjsdm0-Cds1U&(h@dfvj90#hi+y}7%vnvYu0<&EWq6R?=51;@5

diff --git a/open-api/immich-openapi-specs.json b/open-api/immich-openapi-specs.json
index d403cf7530..0ac2cd53c9 100644
--- a/open-api/immich-openapi-specs.json
+++ b/open-api/immich-openapi-specs.json
@@ -9345,6 +9345,11 @@
           },
           "thumbnailPath": {
             "type": "string"
+          },
+          "updatedAt": {
+            "description": "This property was added in v1.107.0",
+            "format": "date-time",
+            "type": "string"
           }
         },
         "required": [
@@ -9414,6 +9419,11 @@
           },
           "thumbnailPath": {
             "type": "string"
+          },
+          "updatedAt": {
+            "description": "This property was added in v1.107.0",
+            "format": "date-time",
+            "type": "string"
           }
         },
         "required": [
diff --git a/open-api/typescript-sdk/src/fetch-client.ts b/open-api/typescript-sdk/src/fetch-client.ts
index 7a1da9d13d..ddf6c958b8 100644
--- a/open-api/typescript-sdk/src/fetch-client.ts
+++ b/open-api/typescript-sdk/src/fetch-client.ts
@@ -158,6 +158,8 @@ export type PersonWithFacesResponseDto = {
     isHidden: boolean;
     name: string;
     thumbnailPath: string;
+    /** This property was added in v1.107.0 */
+    updatedAt?: string;
 };
 export type SmartInfoResponseDto = {
     objects?: string[] | null;
@@ -432,6 +434,8 @@ export type PersonResponseDto = {
     isHidden: boolean;
     name: string;
     thumbnailPath: string;
+    /** This property was added in v1.107.0 */
+    updatedAt?: string;
 };
 export type AssetFaceResponseDto = {
     boundingBoxX1: number;
diff --git a/server/src/dtos/person.dto.ts b/server/src/dtos/person.dto.ts
index b28f18603a..3ad41ecff2 100644
--- a/server/src/dtos/person.dto.ts
+++ b/server/src/dtos/person.dto.ts
@@ -1,6 +1,7 @@
 import { ApiProperty } from '@nestjs/swagger';
 import { Type } from 'class-transformer';
 import { IsArray, IsNotEmpty, IsString, MaxDate, ValidateNested } from 'class-validator';
+import { PropertyLifecycle } from 'src/decorators';
 import { AuthDto } from 'src/dtos/auth.dto';
 import { AssetFaceEntity } from 'src/entities/asset-face.entity';
 import { PersonEntity } from 'src/entities/person.entity';
@@ -71,6 +72,8 @@ export class PersonResponseDto {
   birthDate!: Date | null;
   thumbnailPath!: string;
   isHidden!: boolean;
+  @PropertyLifecycle({ addedAt: 'v1.107.0' })
+  updatedAt?: Date;
 }
 
 export class PersonWithFacesResponseDto extends PersonResponseDto {
@@ -138,6 +141,7 @@ export function mapPerson(person: PersonEntity): PersonResponseDto {
     birthDate: person.birthDate,
     thumbnailPath: person.thumbnailPath,
     isHidden: person.isHidden,
+    updatedAt: person.updatedAt,
   };
 }
 
diff --git a/server/src/services/person.service.spec.ts b/server/src/services/person.service.spec.ts
index eb0e3ad1e9..2aea5c2798 100644
--- a/server/src/services/person.service.spec.ts
+++ b/server/src/services/person.service.spec.ts
@@ -42,6 +42,7 @@ const responseDto: PersonResponseDto = {
   birthDate: null,
   thumbnailPath: '/path/to/thumbnail.jpg',
   isHidden: false,
+  updatedAt: expect.any(Date),
 };
 
 const statistics = { assets: 3 };
@@ -126,6 +127,7 @@ describe(PersonService.name, () => {
             birthDate: null,
             thumbnailPath: '/path/to/thumbnail.jpg',
             isHidden: true,
+            updatedAt: expect.any(Date),
           },
         ],
       });
@@ -255,6 +257,7 @@ describe(PersonService.name, () => {
         birthDate: new Date('1976-06-30'),
         thumbnailPath: '/path/to/thumbnail.jpg',
         isHidden: false,
+        updatedAt: expect.any(Date),
       });
       expect(personMock.update).toHaveBeenCalledWith({ id: 'person-1', birthDate: new Date('1976-06-30') });
       expect(jobMock.queue).not.toHaveBeenCalled();
@@ -407,6 +410,7 @@ describe(PersonService.name, () => {
         id: personStub.noName.id,
         name: personStub.noName.name,
         thumbnailPath: personStub.noName.thumbnailPath,
+        updatedAt: expect.any(Date),
       });
 
       expect(jobMock.queue).not.toHaveBeenCalledWith();
diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index ac3a4b4c9e..6af265e3da 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -213,7 +213,7 @@
                 <ImageThumbnail
                   curve
                   shadow
-                  url={getPeopleThumbnailUrl(person.id)}
+                  url={getPeopleThumbnailUrl(person)}
                   altText={person.name}
                   title={person.name}
                   widthStyle="90px"
diff --git a/web/src/lib/components/faces-page/assign-face-side-panel.svelte b/web/src/lib/components/faces-page/assign-face-side-panel.svelte
index 975dad5b95..1b6894dd91 100644
--- a/web/src/lib/components/faces-page/assign-face-side-panel.svelte
+++ b/web/src/lib/components/faces-page/assign-face-side-panel.svelte
@@ -108,7 +108,7 @@
                 <ImageThumbnail
                   curve
                   shadow
-                  url={getPeopleThumbnailUrl(person.id)}
+                  url={getPeopleThumbnailUrl(person)}
                   altText={getPersonNameWithHiddenValue(person.name, person.isHidden)}
                   title={getPersonNameWithHiddenValue(person.name, person.isHidden)}
                   widthStyle="90px"
diff --git a/web/src/lib/components/faces-page/face-thumbnail.svelte b/web/src/lib/components/faces-page/face-thumbnail.svelte
index bb17ca5795..58e1e0e39b 100644
--- a/web/src/lib/components/faces-page/face-thumbnail.svelte
+++ b/web/src/lib/components/faces-page/face-thumbnail.svelte
@@ -36,7 +36,7 @@
     class:dark:border-immich-dark-primary={border}
     class:border-immich-primary={border}
   >
-    <ImageThumbnail {circle} url={getPeopleThumbnailUrl(person.id)} altText={person.name} widthStyle="100%" shadow />
+    <ImageThumbnail {circle} url={getPeopleThumbnailUrl(person)} altText={person.name} widthStyle="100%" shadow />
   </div>
 
   <div
diff --git a/web/src/lib/components/faces-page/merge-suggestion-modal.svelte b/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
index 3f8a8b36d2..d781e1cc56 100644
--- a/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
+++ b/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
@@ -38,7 +38,7 @@
         <ImageThumbnail
           circle
           shadow
-          url={getPeopleThumbnailUrl(personMerge1.id)}
+          url={getPeopleThumbnailUrl(personMerge1)}
           altText={personMerge1.name}
           widthStyle="100%"
         />
@@ -65,7 +65,7 @@
           border={potentialMergePeople.length > 0}
           circle
           shadow
-          url={getPeopleThumbnailUrl(personMerge2.id)}
+          url={getPeopleThumbnailUrl(personMerge2)}
           altText={personMerge2.name}
           widthStyle="100%"
         />
@@ -84,7 +84,7 @@
                     border={true}
                     circle
                     shadow
-                    url={getPeopleThumbnailUrl(person.id)}
+                    url={getPeopleThumbnailUrl(person)}
                     altText={person.name}
                     widthStyle="100%"
                     on:click={() => changePersonToMerge(person)}
diff --git a/web/src/lib/components/faces-page/people-card.svelte b/web/src/lib/components/faces-page/people-card.svelte
index b532899353..b5a00cf23d 100644
--- a/web/src/lib/components/faces-page/people-card.svelte
+++ b/web/src/lib/components/faces-page/people-card.svelte
@@ -50,7 +50,7 @@
       <ImageThumbnail
         shadow
         {preload}
-        url={getPeopleThumbnailUrl(person.id)}
+        url={getPeopleThumbnailUrl(person)}
         altText={person.name}
         title={person.name}
         widthStyle="100%"
diff --git a/web/src/lib/components/faces-page/person-side-panel.svelte b/web/src/lib/components/faces-page/person-side-panel.svelte
index a848a17e75..103f3f9a6b 100644
--- a/web/src/lib/components/faces-page/person-side-panel.svelte
+++ b/web/src/lib/components/faces-page/person-side-panel.svelte
@@ -234,7 +234,7 @@
                   <ImageThumbnail
                     curve
                     shadow
-                    url={getPeopleThumbnailUrl(selectedPersonToReassign[face.id].id)}
+                    url={getPeopleThumbnailUrl(selectedPersonToReassign[face.id])}
                     altText={selectedPersonToReassign[face.id].name}
                     title={getPersonNameWithHiddenValue(
                       selectedPersonToReassign[face.id].name,
@@ -248,7 +248,7 @@
                   <ImageThumbnail
                     curve
                     shadow
-                    url={getPeopleThumbnailUrl(face.person.id)}
+                    url={getPeopleThumbnailUrl(face.person)}
                     altText={face.person.name}
                     title={getPersonNameWithHiddenValue(face.person.name, face.person.isHidden)}
                     widthStyle={thumbnailWidth}
diff --git a/web/src/lib/components/shared-components/search-bar/search-people-section.svelte b/web/src/lib/components/shared-components/search-bar/search-people-section.svelte
index 0ede8d7fa1..9eec526f4a 100644
--- a/web/src/lib/components/shared-components/search-bar/search-people-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-people-section.svelte
@@ -71,13 +71,7 @@
               : 'border-transparent'}"
             on:click={() => togglePersonSelection(person.id)}
           >
-            <ImageThumbnail
-              circle
-              shadow
-              url={getPeopleThumbnailUrl(person.id)}
-              altText={person.name}
-              widthStyle="100%"
-            />
+            <ImageThumbnail circle shadow url={getPeopleThumbnailUrl(person)} altText={person.name} widthStyle="100%" />
             <p class="mt-2 line-clamp-2 text-sm font-medium dark:text-white">{person.name}</p>
           </button>
         {/each}
diff --git a/web/src/lib/i18n/en.json b/web/src/lib/i18n/en.json
index c8e9ac49b5..9e6eb74894 100644
--- a/web/src/lib/i18n/en.json
+++ b/web/src/lib/i18n/en.json
@@ -621,6 +621,7 @@
     "unable_to_save_settings": "Unable to save settings",
     "unable_to_scan_libraries": "Unable to scan libraries",
     "unable_to_scan_library": "Unable to scan library",
+    "unable_to_set_feature_photo": "Unable to set feature photo",
     "unable_to_set_profile_picture": "Unable to set profile picture",
     "unable_to_submit_job": "Unable to submit job",
     "unable_to_trash_asset": "Unable to trash asset",
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
index 7743d9b592..58bf49c43b 100644
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -17,6 +17,7 @@ import {
   startOAuth,
   unlinkOAuthAccount,
   type AssetResponseDto,
+  type PersonResponseDto,
   type SharedLinkResponseDto,
 } from '@immich/sdk';
 import { mdiCogRefreshOutline, mdiDatabaseRefreshOutline, mdiImageRefreshOutline } from '@mdi/js';
@@ -205,7 +206,8 @@ export const getAssetPlaybackUrl = (options: string | { id: string; checksum?: s
 
 export const getProfileImageUrl = (userId: string) => createUrl(getUserProfileImagePath(userId));
 
-export const getPeopleThumbnailUrl = (personId: string) => createUrl(getPeopleThumbnailPath(personId));
+export const getPeopleThumbnailUrl = (person: PersonResponseDto, updatedAt?: string) =>
+  createUrl(getPeopleThumbnailPath(person.id), { updatedAt: updatedAt ?? person.updatedAt });
 
 export const getAssetJobName = derived(t, ($t) => {
   return (job: AssetJobName) => {
diff --git a/web/src/routes/(user)/explore/+page.svelte b/web/src/routes/(user)/explore/+page.svelte
index 3b25cdc0c1..d0d7a9936f 100644
--- a/web/src/routes/(user)/explore/+page.svelte
+++ b/web/src/routes/(user)/explore/+page.svelte
@@ -61,7 +61,7 @@
               <ImageThumbnail
                 circle
                 shadow
-                url={getPeopleThumbnailUrl(person.id)}
+                url={getPeopleThumbnailUrl(person)}
                 altText={person.name}
                 widthStyle="100%"
               />
diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index 432410798f..41db2c05b6 100644
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@@ -508,7 +508,7 @@
             preload={searchName !== '' || index < 20}
             bind:hidden={person.isHidden}
             shadow
-            url={getPeopleThumbnailUrl(person.id)}
+            url={getPeopleThumbnailUrl(person)}
             altText={person.name}
             widthStyle="100%"
             bind:eyeColor={eyeColorMap[person.id]}
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index eecfbf29b2..f1fbe716a6 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -91,7 +91,7 @@
   let refreshAssetGrid = false;
 
   let personName = '';
-  $: thumbnailData = getPeopleThumbnailUrl(data.person.id);
+  $: thumbnailData = getPeopleThumbnailUrl(data.person);
 
   let name: string = data.person.name;
   let suggestedPeople: PersonResponseDto[] = [];
@@ -121,7 +121,7 @@
 
     return websocketEvents.on('on_person_thumbnail', (personId: string) => {
       if (data.person.id === personId) {
-        thumbnailData = getPeopleThumbnailUrl(data.person.id) + `?now=${Date.now()}`;
+        thumbnailData = getPeopleThumbnailUrl(data.person, Date.now().toString());
       }
     });
   });
@@ -206,10 +206,13 @@
     if (viewMode !== ViewMode.SELECT_PERSON) {
       return;
     }
+    try {
+      await updatePerson({ id: data.person.id, personUpdateDto: { featureFaceAssetId: asset.id } });
+      notificationController.show({ message: $t('feature_photo_updated'), type: NotificationType.Info });
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_set_feature_photo'));
+    }
 
-    await updatePerson({ id: data.person.id, personUpdateDto: { featureFaceAssetId: asset.id } });
-
-    notificationController.show({ message: $t('feature_photo_updated'), type: NotificationType.Info });
     assetInteractionStore.clearMultiselect();
 
     viewMode = ViewMode.VIEW_ASSETS;
@@ -525,7 +528,7 @@
                       <ImageThumbnail
                         circle
                         shadow
-                        url={getPeopleThumbnailUrl(person.id)}
+                        url={getPeopleThumbnailUrl(person)}
                         altText={person.name}
                         widthStyle="2rem"
                         heightStyle="2rem"