self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-27 09:21:05 +02:00
Code Issues Releases Activity

refactor(web): use derived instead of get(t) (#10884)

Browse Source
This commit is contained in:
Michel Heusschen 2024-07-05 15:06:35 +02:00 committed by GitHub
parent 6791af8c2c
commit 3cd187dced
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 16 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/lib/components/faces-page/assign-face-side-panel.svelte
View File

@ -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 @@
/>
</div>
<p class="mt-1 truncate font-medium" title={getPersonNameWithHiddenValue(person.name, person.isHidden)}>
<p class="mt-1 truncate font-medium" title={$getPersonNameWithHiddenValue(person.name, person.isHidden)}>
{person.name}
</p>
</button>

4
web/src/lib/components/faces-page/person-side-panel.svelte
View File

@ -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}

6
web/src/lib/components/memory-page/memory-viewer.svelte
View File

@ -169,7 +169,7 @@
<ControlAppBar on:close={() => goto(AppRoute.PHOTOS)} forceDark>
<svelte:fragment slot="leading">
<p class="text-lg">
{memoryLaneTitle(currentMemory.yearsAgo)}
{$memoryLaneTitle(currentMemory.yearsAgo)}
</p>
</svelte:fragment>
@ -261,7 +261,7 @@
{#if previousMemory}
<div class="absolute bottom-4 right-4 text-left text-white">
<p class="text-xs font-semibold text-gray-200">{$t('previous').toUpperCase()}</p>
<p class="text-xl">{memoryLaneTitle(previousMemory.yearsAgo)}</p>
<p class="text-xl">{$memoryLaneTitle(previousMemory.yearsAgo)}</p>
</div>
{/if}
</button>
@ -344,7 +344,7 @@
{#if nextMemory}
<div class="absolute bottom-4 left-4 text-left text-white">
<p class="text-xs font-semibold text-gray-200">{$t('up_next').toUpperCase()}</p>
<p class="text-xl">{memoryLaneTitle(nextMemory.yearsAgo)}</p>
<p class="text-xl">{$memoryLaneTitle(nextMemory.yearsAgo)}</p>
</div>
{/if}
</button>

2
web/src/lib/components/photos-page/memory-lane.svelte
View File

@ -80,7 +80,7 @@
draggable="false"
/>
<p class="absolute bottom-2 left-4 z-10 text-lg text-white">
{memoryLaneTitle(memory.yearsAgo)}
{$memoryLaneTitle(memory.yearsAgo)}
</p>
<div
class="absolute left-0 top-0 z-0 h-full w-full rounded-xl bg-gradient-to-t from-black/40 via-transparent to-transparent transition-all hover:bg-black/20"

7
web/src/lib/utils.ts
View File

@ -317,10 +317,9 @@ export const handlePromiseError = <T>(promise: Promise<T>): 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 <T>(fn: () => Promise<T>): Promise<[undefined, T] | [unknown, undefined]> => {
try {

9
web/src/lib/utils/person.ts
View File

@ -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 } });
});