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

chore(web): translate alt text (#10922)

Browse Source 
* chore(web): translate image alt text

* fix: capitalize translations, improve unit test

* fix: unit testing against the actual en.json file

* fix: use derived store to generate alt text
This commit is contained in:
Ben
2024-07-07 22:29:56 +00:00
committed by GitHub
parent a5467d60ea
commit 39221c8d1f
7 changed files with 113 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
web/src/lib/utils/thumbnail-util.ts
View File

@ -1,4 +1,6 @@
import type { AssetResponseDto } from '@immich/sdk';
import { AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
import { t } from 'svelte-i18n';
import { derived } from 'svelte/store';
import { fromLocalDateTime } from './timeline-util';
/**
@ -35,29 +37,39 @@ export function getThumbnailSize(assetCount: number, viewWidth: number): number
return 300;
}
export function getAltText(asset: AssetResponseDto) {
if (asset.exifInfo?.description) {
return asset.exifInfo.description;
}
export const getAltText = derived(t, ($t) => {
return (asset: AssetResponseDto) => {
if (asset.exifInfo?.description) {
return asset.exifInfo.description;
}
let altText = 'Image taken';
if (asset.exifInfo?.city && asset.exifInfo.country) {
altText += ` in ${asset.exifInfo.city}, ${asset.exifInfo.country}`;
}
let altText = $t('image_taken', { values: { isVideo: asset.type === AssetTypeEnum.Video } });
const names = asset.people?.filter((p) => p.name).map((p) => p.name) ?? [];
if (names.length == 1) {
altText += ` with ${names[0]}`;
}
if (names.length > 1 && names.length <= 3) {
altText += ` with ${names.slice(0, -1).join(', ')} and ${names.at(-1)}`;
}
if (names.length > 3) {
altText += ` with ${names.slice(0, 2).join(', ')}, and ${names.length - 2} others`;
}
if (asset.exifInfo?.city && asset.exifInfo?.country) {
const placeText = $t('image_alt_text_place', {
values: { city: asset.exifInfo.city, country: asset.exifInfo.country },
});
altText += ` ${placeText}`;
}
const date = fromLocalDateTime(asset.localDateTime).toLocaleString({ dateStyle: 'long' });
altText += ` on ${date}`;
const names = asset.people?.filter((p) => p.name).map((p) => p.name) ?? [];
if (names.length > 0) {
const namesText = $t('image_alt_text_people', {
values: {
count: names.length,
person1: names[0],
person2: names[1],
person3: names[2],
others: names.length > 3 ? names.length - 2 : 0,
},
});
altText += ` ${namesText}`;
}
return altText;
}
const date = fromLocalDateTime(asset.localDateTime).toLocaleString({ dateStyle: 'long' });
const dateText = $t('image_alt_text_date', { values: { date } });
altText += ` ${dateText}`;
return altText;
};
});