mirror of
https://github.com/immich-app/immich.git
synced 2025-01-28 06:32:44 +01:00
refactor(web): use derived instead of get(t) (#10884)
This commit is contained in:
parent
6791af8c2c
commit
3cd187dced
6 changed files with 16 additions and 18 deletions
web/src/lib
|
@ -109,8 +109,8 @@
|
||||||
curve
|
curve
|
||||||
shadow
|
shadow
|
||||||
url={getPeopleThumbnailUrl(person)}
|
url={getPeopleThumbnailUrl(person)}
|
||||||
altText={getPersonNameWithHiddenValue(person.name, person.isHidden)}
|
altText={$getPersonNameWithHiddenValue(person.name, person.isHidden)}
|
||||||
title={getPersonNameWithHiddenValue(person.name, person.isHidden)}
|
title={$getPersonNameWithHiddenValue(person.name, person.isHidden)}
|
||||||
widthStyle="90px"
|
widthStyle="90px"
|
||||||
heightStyle="90px"
|
heightStyle="90px"
|
||||||
thumbhash={null}
|
thumbhash={null}
|
||||||
|
@ -118,7 +118,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</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}
|
{person.name}
|
||||||
</p>
|
</p>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -236,7 +236,7 @@
|
||||||
shadow
|
shadow
|
||||||
url={getPeopleThumbnailUrl(selectedPersonToReassign[face.id])}
|
url={getPeopleThumbnailUrl(selectedPersonToReassign[face.id])}
|
||||||
altText={selectedPersonToReassign[face.id].name}
|
altText={selectedPersonToReassign[face.id].name}
|
||||||
title={getPersonNameWithHiddenValue(
|
title={$getPersonNameWithHiddenValue(
|
||||||
selectedPersonToReassign[face.id].name,
|
selectedPersonToReassign[face.id].name,
|
||||||
selectedPersonToReassign[face.id]?.isHidden,
|
selectedPersonToReassign[face.id]?.isHidden,
|
||||||
)}
|
)}
|
||||||
|
@ -250,7 +250,7 @@
|
||||||
shadow
|
shadow
|
||||||
url={getPeopleThumbnailUrl(face.person)}
|
url={getPeopleThumbnailUrl(face.person)}
|
||||||
altText={face.person.name}
|
altText={face.person.name}
|
||||||
title={getPersonNameWithHiddenValue(face.person.name, face.person.isHidden)}
|
title={$getPersonNameWithHiddenValue(face.person.name, face.person.isHidden)}
|
||||||
widthStyle={thumbnailWidth}
|
widthStyle={thumbnailWidth}
|
||||||
heightStyle={thumbnailWidth}
|
heightStyle={thumbnailWidth}
|
||||||
hidden={face.person.isHidden}
|
hidden={face.person.isHidden}
|
||||||
|
|
|
@ -169,7 +169,7 @@
|
||||||
<ControlAppBar on:close={() => goto(AppRoute.PHOTOS)} forceDark>
|
<ControlAppBar on:close={() => goto(AppRoute.PHOTOS)} forceDark>
|
||||||
<svelte:fragment slot="leading">
|
<svelte:fragment slot="leading">
|
||||||
<p class="text-lg">
|
<p class="text-lg">
|
||||||
{memoryLaneTitle(currentMemory.yearsAgo)}
|
{$memoryLaneTitle(currentMemory.yearsAgo)}
|
||||||
</p>
|
</p>
|
||||||
</svelte:fragment>
|
</svelte:fragment>
|
||||||
|
|
||||||
|
@ -261,7 +261,7 @@
|
||||||
{#if previousMemory}
|
{#if previousMemory}
|
||||||
<div class="absolute bottom-4 right-4 text-left text-white">
|
<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-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>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</button>
|
</button>
|
||||||
|
@ -344,7 +344,7 @@
|
||||||
{#if nextMemory}
|
{#if nextMemory}
|
||||||
<div class="absolute bottom-4 left-4 text-left text-white">
|
<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-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>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -80,7 +80,7 @@
|
||||||
draggable="false"
|
draggable="false"
|
||||||
/>
|
/>
|
||||||
<p class="absolute bottom-2 left-4 z-10 text-lg text-white">
|
<p class="absolute bottom-2 left-4 z-10 text-lg text-white">
|
||||||
{memoryLaneTitle(memory.yearsAgo)}
|
{$memoryLaneTitle(memory.yearsAgo)}
|
||||||
</p>
|
</p>
|
||||||
<div
|
<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"
|
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"
|
||||||
|
|
|
@ -317,10 +317,9 @@ export const handlePromiseError = <T>(promise: Promise<T>): void => {
|
||||||
promise.catch((error) => console.error(`[utils.ts]:handlePromiseError ${error}`, error));
|
promise.catch((error) => console.error(`[utils.ts]:handlePromiseError ${error}`, error));
|
||||||
};
|
};
|
||||||
|
|
||||||
export const memoryLaneTitle = (yearsAgo: number) => {
|
export const memoryLaneTitle = derived(t, ($t) => {
|
||||||
const $t = get(t);
|
return (yearsAgo: number) => $t('years_ago', { values: { years: yearsAgo } });
|
||||||
return $t('years_ago', { values: { years: yearsAgo } });
|
});
|
||||||
};
|
|
||||||
|
|
||||||
export const withError = async <T>(fn: () => Promise<T>): Promise<[undefined, T] | [unknown, undefined]> => {
|
export const withError = async <T>(fn: () => Promise<T>): Promise<[undefined, T] | [unknown, undefined]> => {
|
||||||
try {
|
try {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import type { PersonResponseDto } from '@immich/sdk';
|
import type { PersonResponseDto } from '@immich/sdk';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
import { get } from 'svelte/store';
|
import { derived } from 'svelte/store';
|
||||||
|
|
||||||
export const searchNameLocal = (
|
export const searchNameLocal = (
|
||||||
name: string,
|
name: string,
|
||||||
|
@ -27,7 +27,6 @@ export const searchNameLocal = (
|
||||||
.slice(0, slice);
|
.slice(0, slice);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getPersonNameWithHiddenValue = (name: string, isHidden: boolean) => {
|
export const getPersonNameWithHiddenValue = derived(t, ($t) => {
|
||||||
const $t = get(t);
|
return (name: string, isHidden: boolean) => $t('person_hidden', { values: { name: name, hidden: isHidden } });
|
||||||
return $t('person_hidden', { values: { name: name, hidden: isHidden } });
|
});
|
||||||
};
|
|
||||||
|
|
Loading…
Reference in a new issue