re-add alt-text

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]}"

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}

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">

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"