From 0795f8a7618f278e66c69301ff3d3ff2e0da3255 Mon Sep 17 00:00:00 2001
From: Min Idzelis <min123@gmail.com>
Date: Wed, 23 Apr 2025 21:41:09 +0000
Subject: [PATCH] re-add alt-text

---
 .../asset-viewer/photo-viewer.svelte          | 17 ++++++++-------
 .../assets/thumbnail/thumbnail.svelte         |  6 ++----
 .../components/photos-page/memory-lane.svelte |  3 ++-
 .../duplicates/duplicate-asset.svelte         |  3 ++-
 web/src/lib/stores/assets-store.svelte.ts     | 10 ++++++---
 web/src/lib/utils/thumbnail-util.ts           | 21 +++++++------------
 web/src/lib/utils/timeline-util.ts            |  9 ++++++++
 web/src/lib/utils/tunables.ts                 |  3 +--
 8 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/photo-viewer.svelte b/web/src/lib/components/asset-viewer/photo-viewer.svelte
index a67de24a74..b47e4e645e 100644
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/photo-viewer.svelte
@@ -1,26 +1,27 @@
 <script lang="ts">
   import { shortcuts } from '$lib/actions/shortcut';
   import { zoomImageAction, zoomed } from '$lib/actions/zoom-image';
+  import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
   import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
+  import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
+  import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import { boundingBoxesArray } from '$lib/stores/people.store';
   import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
   import { SlideshowLook, SlideshowState, slideshowLookCssMapping, slideshowStore } from '$lib/stores/slideshow.store';
   import { photoZoomState } from '$lib/stores/zoom-image.store';
   import { getAssetOriginalUrl, getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
   import { canCopyImageToClipboard, copyImageToClipboard, isWebCompatibleImage } from '$lib/utils/asset-utils';
+  import { handleError } from '$lib/utils/handle-error';
   import { getBoundingBox } from '$lib/utils/people-utils';
   import { getAltText } from '$lib/utils/thumbnail-util';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { AssetMediaSize, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
   import { onDestroy, onMount } from 'svelte';
-  import { t } from 'svelte-i18n';
   import { type SwipeCustomEvent, swipe } from 'svelte-gestures';
+  import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
-  import { handleError } from '$lib/utils/handle-error';
-  import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
-  import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
-  import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
 
   interface Props {
     asset: AssetResponseDto;
@@ -194,7 +195,7 @@
   bind:clientWidth={containerWidth}
   bind:clientHeight={containerHeight}
 >
-  <img style="display:none" src={imageLoaderUrl} alt={$getAltText(asset)} {onload} {onerror} />
+  <img style="display:none" src={imageLoaderUrl} alt="" {onload} {onerror} />
   {#if !imageLoaded}
     <div id="spinner" class="flex h-full items-center justify-center">
       <LoadingSpinner />
@@ -210,7 +211,7 @@
       {#if $slideshowState !== SlideshowState.None && $slideshowLook === SlideshowLook.BlurredBackground}
         <img
           src={assetFileUrl}
-          alt={$getAltText(asset)}
+          alt=""
           class="absolute top-0 left-0 -z-10 object-cover h-full w-full blur-lg"
           draggable="false"
         />
@@ -218,7 +219,7 @@
       <img
         bind:this={$photoViewerImgElement}
         src={assetFileUrl}
-        alt={$getAltText(asset)}
+        alt={$getAltText(toTimelineAsset(asset))}
         class="h-full w-full {$slideshowState === SlideshowState.None
           ? 'object-contain'
           : slideshowLookCssMapping[$slideshowLook]}"
diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
index 0bf883b633..9cbd19f35f 100644
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -4,7 +4,7 @@
   import { locale, playVideoThumbnailOnHover } from '$lib/stores/preferences.store';
   import { getAssetPlaybackUrl, getAssetThumbnailUrl, isSharedLink } from '$lib/utils';
   import { timeToSeconds } from '$lib/utils/date-time';
-  // import { getAltText } from '$lib/utils/thumbnail-util';
+  import { getAltText } from '$lib/utils/thumbnail-util';
   import { AssetMediaSize } from '@immich/sdk';
   import {
     mdiArchiveArrowDownOutline,
@@ -21,7 +21,6 @@
   import { mobileDevice } from '$lib/stores/mobile-device.svelte';
   import { getFocusable } from '$lib/utils/focus-util';
   import { currentUrlReplaceAssetId } from '$lib/utils/navigation';
-  import { getAltTextForTimelineAsset } from '$lib/utils/thumbnail-util';
   import { TUNABLES } from '$lib/utils/tunables';
   import { onMount } from 'svelte';
   import type { ClassValue } from 'svelte/elements';
@@ -368,12 +367,11 @@
           </div>
         {/if}
       </div>
-      <!-- altText={$getAltText(asset)} -->
       <ImageThumbnail
         class={imageClass}
         {brokenAssetClass}
         url={getAssetThumbnailUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash })}
-        altText={getAltTextForTimelineAsset(asset)}
+        altText={$getAltText(asset)}
         widthStyle="{width}px"
         heightStyle="{height}px"
         curve={selected}
diff --git a/web/src/lib/components/photos-page/memory-lane.svelte b/web/src/lib/components/photos-page/memory-lane.svelte
index acf66e5dde..790d2f2d7f 100644
--- a/web/src/lib/components/photos-page/memory-lane.svelte
+++ b/web/src/lib/components/photos-page/memory-lane.svelte
@@ -5,6 +5,7 @@
   import { memoryStore } from '$lib/stores/memory.store.svelte';
   import { getAssetThumbnailUrl, memoryLaneTitle } from '$lib/utils';
   import { getAltText } from '$lib/utils/thumbnail-util';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -82,7 +83,7 @@
           <img
             class="h-full w-full rounded-xl object-cover"
             src={getAssetThumbnailUrl(memory.assets[0].id)}
-            alt={$t('memory_lane_title', { values: { title: $getAltText(memory.assets[0]) } })}
+            alt={$t('memory_lane_title', { values: { title: $getAltText(toTimelineAsset(memory.assets[0])) } })}
             draggable="false"
           />
           <p class="absolute bottom-2 left-4 z-10 text-lg text-white max-md:text-sm">
diff --git a/web/src/lib/components/utilities-page/duplicates/duplicate-asset.svelte b/web/src/lib/components/utilities-page/duplicates/duplicate-asset.svelte
index 97f44e3ec4..facd73b8c4 100644
--- a/web/src/lib/components/utilities-page/duplicates/duplicate-asset.svelte
+++ b/web/src/lib/components/utilities-page/duplicates/duplicate-asset.svelte
@@ -3,6 +3,7 @@
   import { getAssetThumbnailUrl } from '$lib/utils';
   import { getAssetResolution, getFileSize } from '$lib/utils/asset-utils';
   import { getAltText } from '$lib/utils/thumbnail-util';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { type AssetResponseDto, getAllAlbums } from '@immich/sdk';
   import { mdiHeart, mdiImageMultipleOutline, mdiMagnifyPlus } from '@mdi/js';
   import { t } from 'svelte-i18n';
@@ -36,7 +37,7 @@
       <!-- THUMBNAIL-->
       <img
         src={getAssetThumbnailUrl(asset.id)}
-        alt={$getAltText(asset)}
+        alt={$getAltText(toTimelineAsset(asset))}
         title={assetData}
         class="h-60 object-cover rounded-t-xl w-full"
         draggable="false"
diff --git a/web/src/lib/stores/assets-store.svelte.ts b/web/src/lib/stores/assets-store.svelte.ts
index 1c641990c1..259b9e0e28 100644
--- a/web/src/lib/stores/assets-store.svelte.ts
+++ b/web/src/lib/stores/assets-store.svelte.ts
@@ -15,7 +15,6 @@ import {
   getTimeBucket,
   getTimeBuckets,
   TimeBucketSize,
-  type AssetResponseDto,
   type AssetStackResponseDto,
 } from '@immich/sdk';
 import { clamp, debounce, isEqual, throttle } from 'lodash-es';
@@ -85,6 +84,11 @@ export type TimelineAsset = {
   duration: string | null;
   projectionType: string | null;
   livePhotoVideoId: string | null;
+  text: {
+    city: string | null;
+    country: string | null;
+    people: string[];
+  };
 };
 class IntersectingAsset {
   // --- public ---
@@ -1089,7 +1093,7 @@ export class AssetStore {
       );
       if (bucketResponse) {
         if (this.#options.timelineAlbumId) {
-          const bucketAssets = await getTimeBucket(
+          const albumAssets = await getTimeBucket(
             {
               albumId: this.#options.timelineAlbumId,
               timeBucket: bucketDate,
@@ -1098,7 +1102,7 @@ export class AssetStore {
             },
             { signal },
           );
-          for (const { id } of bucketAssets) {
+          for (const { id } of albumAssets) {
             this.albumAssets.add(id);
           }
         }
diff --git a/web/src/lib/utils/thumbnail-util.ts b/web/src/lib/utils/thumbnail-util.ts
index 35f5739212..01b06c935e 100644
--- a/web/src/lib/utils/thumbnail-util.ts
+++ b/web/src/lib/utils/thumbnail-util.ts
@@ -1,5 +1,4 @@
 import type { TimelineAsset } from '$lib/stores/assets-store.svelte';
-import { AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
 import { t } from 'svelte-i18n';
 import { derived } from 'svelte/store';
 import { fromLocalDateTime } from './timeline-util';
@@ -44,24 +43,18 @@ export const getAltTextForTimelineAsset = (_: TimelineAsset) => {
 };
 
 export const getAltText = derived(t, ($t) => {
-  return (asset: AssetResponseDto | null | undefined) => {
-    if (!asset) {
-      return '';
-    }
-    if (asset.exifInfo?.description) {
-      return asset.exifInfo.description;
-    }
-
+  return (asset: TimelineAsset) => {
     const date = fromLocalDateTime(asset.localDateTime).toLocaleString({ dateStyle: 'long' });
-    const hasPlace = !!asset.exifInfo?.city && !!asset.exifInfo?.country;
-    const names = asset.people?.filter((p) => p.name).map((p) => p.name) ?? [];
+    const { city, country, people: names } = asset.text;
+    const hasPlace = city && country;
+
     const peopleCount = names.length;
-    const isVideo = asset.type === AssetTypeEnum.Video;
+    const isVideo = asset.isVideo;
 
     const values = {
       date,
-      city: asset.exifInfo?.city,
-      country: asset.exifInfo?.country,
+      city,
+      country,
       person1: names[0],
       person2: names[1],
       person3: names[2],
diff --git a/web/src/lib/utils/timeline-util.ts b/web/src/lib/utils/timeline-util.ts
index 2165e13773..ff4217bf1e 100644
--- a/web/src/lib/utils/timeline-util.ts
+++ b/web/src/lib/utils/timeline-util.ts
@@ -114,6 +114,14 @@ export const toTimelineAsset = (unknownAsset: AssetResponseDto | TimelineAsset):
   const assetResponse = unknownAsset as AssetResponseDto;
   const { width, height } = getAssetRatio(assetResponse);
   const ratio = width / height;
+  const city = assetResponse.exifInfo?.city;
+  const country = assetResponse.exifInfo?.country;
+  const people = assetResponse.people?.map((person) => person.name) || [];
+  const text = {
+    city: city || null,
+    country: country || null,
+    people,
+  };
   return {
     id: assetResponse.id,
     ownerId: assetResponse.ownerId,
@@ -129,6 +137,7 @@ export const toTimelineAsset = (unknownAsset: AssetResponseDto | TimelineAsset):
     duration: assetResponse.duration || null,
     projectionType: assetResponse.exifInfo?.projectionType || null,
     livePhotoVideoId: assetResponse.livePhotoVideoId || null,
+    text,
   };
 };
 export const isTimelineAsset = (arg: AssetResponseDto | TimelineAsset): arg is TimelineAsset =>
diff --git a/web/src/lib/utils/tunables.ts b/web/src/lib/utils/tunables.ts
index ee9f1d31d8..d044b63267 100644
--- a/web/src/lib/utils/tunables.ts
+++ b/web/src/lib/utils/tunables.ts
@@ -1,4 +1,5 @@
 import { browser } from '$app/environment';
+
 function getBoolean(string: string | null, fallback: boolean) {
   if (string === null) {
     return fallback;
@@ -11,13 +12,11 @@ function getNumber(string: string | null, fallback: number) {
   }
   return Number.parseInt(string);
 }
-
 const storage = browser
   ? localStorage
   : {
       getItem: () => null,
     };
-
 export const TUNABLES = {
   LAYOUT: {
     WASM: getBoolean(storage.getItem('LAYOUT.WASM'), false),