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 1b6894dd91..0dd4251dab 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 @@ -109,8 +109,8 @@ curve shadow url={getPeopleThumbnailUrl(person)} - altText={getPersonNameWithHiddenValue(person.name, person.isHidden)} - title={getPersonNameWithHiddenValue(person.name, person.isHidden)} + altText={$getPersonNameWithHiddenValue(person.name, person.isHidden)} + title={$getPersonNameWithHiddenValue(person.name, person.isHidden)} widthStyle="90px" heightStyle="90px" thumbhash={null} @@ -118,7 +118,7 @@ /> -

+

{person.name}

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 735e6ff654..712100763c 100644 --- a/web/src/lib/components/faces-page/person-side-panel.svelte +++ b/web/src/lib/components/faces-page/person-side-panel.svelte @@ -236,7 +236,7 @@ shadow url={getPeopleThumbnailUrl(selectedPersonToReassign[face.id])} altText={selectedPersonToReassign[face.id].name} - title={getPersonNameWithHiddenValue( + title={$getPersonNameWithHiddenValue( selectedPersonToReassign[face.id].name, selectedPersonToReassign[face.id]?.isHidden, )} @@ -250,7 +250,7 @@ shadow url={getPeopleThumbnailUrl(face.person)} altText={face.person.name} - title={getPersonNameWithHiddenValue(face.person.name, face.person.isHidden)} + title={$getPersonNameWithHiddenValue(face.person.name, face.person.isHidden)} widthStyle={thumbnailWidth} heightStyle={thumbnailWidth} hidden={face.person.isHidden} diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte index ee58dc40c8..ea268126c2 100644 --- a/web/src/lib/components/memory-page/memory-viewer.svelte +++ b/web/src/lib/components/memory-page/memory-viewer.svelte @@ -169,7 +169,7 @@ goto(AppRoute.PHOTOS)} forceDark>

- {memoryLaneTitle(currentMemory.yearsAgo)} + {$memoryLaneTitle(currentMemory.yearsAgo)}

@@ -261,7 +261,7 @@ {#if previousMemory}

{$t('previous').toUpperCase()}

-

{memoryLaneTitle(previousMemory.yearsAgo)}

+

{$memoryLaneTitle(previousMemory.yearsAgo)}

{/if} @@ -344,7 +344,7 @@ {#if nextMemory}

{$t('up_next').toUpperCase()}

-

{memoryLaneTitle(nextMemory.yearsAgo)}

+

{$memoryLaneTitle(nextMemory.yearsAgo)}

{/if} diff --git a/web/src/lib/components/photos-page/memory-lane.svelte b/web/src/lib/components/photos-page/memory-lane.svelte index 5c50056627..ac2cbe415d 100644 --- a/web/src/lib/components/photos-page/memory-lane.svelte +++ b/web/src/lib/components/photos-page/memory-lane.svelte @@ -80,7 +80,7 @@ draggable="false" />

- {memoryLaneTitle(memory.yearsAgo)} + {$memoryLaneTitle(memory.yearsAgo)}

(promise: Promise): void => { promise.catch((error) => console.error(`[utils.ts]:handlePromiseError ${error}`, error)); }; -export const memoryLaneTitle = (yearsAgo: number) => { - const $t = get(t); - return $t('years_ago', { values: { years: yearsAgo } }); -}; +export const memoryLaneTitle = derived(t, ($t) => { + return (yearsAgo: number) => $t('years_ago', { values: { years: yearsAgo } }); +}); export const withError = async (fn: () => Promise): Promise<[undefined, T] | [unknown, undefined]> => { try { diff --git a/web/src/lib/utils/person.ts b/web/src/lib/utils/person.ts index 06cddc9bdf..79f9284d8a 100644 --- a/web/src/lib/utils/person.ts +++ b/web/src/lib/utils/person.ts @@ -1,6 +1,6 @@ import type { PersonResponseDto } from '@immich/sdk'; import { t } from 'svelte-i18n'; -import { get } from 'svelte/store'; +import { derived } from 'svelte/store'; export const searchNameLocal = ( name: string, @@ -27,7 +27,6 @@ export const searchNameLocal = ( .slice(0, slice); }; -export const getPersonNameWithHiddenValue = (name: string, isHidden: boolean) => { - const $t = get(t); - return $t('person_hidden', { values: { name: name, hidden: isHidden } }); -}; +export const getPersonNameWithHiddenValue = derived(t, ($t) => { + return (name: string, isHidden: boolean) => $t('person_hidden', { values: { name: name, hidden: isHidden } }); +});