ensure keys on getAssetInfo, alt-text

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -21,6 +21,7 @@
   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';
@@ -372,7 +373,7 @@
         class={imageClass}
         {brokenAssetClass}
         url={getAssetThumbnailUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash })}
-        altText="todo"
+        altText={getAltTextForTimelineAsset(asset)}
         widthStyle="{width}px"
         heightStyle="{height}px"
         curve={selected}

web/src/lib/components/photos-page/actions/link-live-photo-action.svelte

@@ -2,6 +2,7 @@
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { getAssetControlContext } from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import type { TimelineAsset } from '$lib/stores/assets-store.svelte';
+  import { getKey } from '$lib/utils';
   import type { OnLink, OnUnlink } from '$lib/utils/actions';
   import { handleError } from '$lib/utils/handle-error';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
@@ -56,7 +57,7 @@
       try {
         loading = true;
         const stillResponse = await updateAsset({ id: still.id, updateAssetDto: { livePhotoVideoId: null } });
-        const motionResponse = await getAssetInfo({ id: motionId });
+        const motionResponse = await getAssetInfo({ id: motionId, key: getKey() });
         onUnlink({ still: toTimelineAsset(stillResponse), motion: toTimelineAsset(motionResponse) });
         clearSelect();
       } catch (error) {

web/src/lib/components/photos-page/asset-grid.svelte

@@ -19,7 +19,7 @@
   import { showDeleteModal } from '$lib/stores/preferences.store';
   import { searchStore } from '$lib/stores/search.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
-  import { handlePromiseError } from '$lib/utils';
+  import { getKey, handlePromiseError } from '$lib/utils';
   import { deleteAssets, updateStackedAssetInTimeline, updateUnstackedAssetInTimeline } from '$lib/utils/actions';
   import { archiveAssets, cancelMultiselect, selectAllAssets, stackAssets } from '$lib/utils/asset-utils';
   import { navigate } from '$lib/utils/navigation';
@@ -369,7 +369,7 @@
 
     if (previousAsset) {
       const preloadAsset = await assetStore.getPreviousAsset(previousAsset);
-      const asset = await getAssetInfo({ id: previousAsset.id });
+      const asset = await getAssetInfo({ id: previousAsset.id, key: getKey() });
       assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
       await navigate({ targetRoute: 'current', assetId: previousAsset.id });
     }
@@ -382,7 +382,7 @@
 
     if (nextAsset) {
       const preloadAsset = await assetStore.getNextAsset(nextAsset);
-      const asset = await getAssetInfo({ id: nextAsset.id });
+      const asset = await getAssetInfo({ id: nextAsset.id, key: getKey() });
       assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
       await navigate({ targetRoute: 'current', assetId: nextAsset.id });
     }
@@ -395,7 +395,7 @@
 
     if (randomAsset) {
       const preloadAsset = await assetStore.getNextAsset(randomAsset);
-      const asset = await getAssetInfo({ id: randomAsset.id });
+      const asset = await getAssetInfo({ id: randomAsset.id, key: getKey() });
       assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
       await navigate({ targetRoute: 'current', assetId: randomAsset.id });
       return asset;

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -511,7 +511,6 @@
             <div
               class="absolute text-center p-1 text-xs font-mono font-semibold w-full bottom-0 bg-gradient-to-t bg-slate-50/75 overflow-clip text-ellipsis whitespace-pre-wrap"
             >
-              {@debug}
               {(asset as AssetResponseDto).originalFileName}
             </div>
           {/if}

web/src/lib/stores/assets-store.svelte.ts

@@ -1175,7 +1175,7 @@ export class AssetStore {
     await this.initTask.waitUntilCompletion();
     let bucket = this.#findBucketForAsset(id);
     if (!bucket) {
-      const asset = toTimelineAsset(await getAssetInfo({ id }));
+      const asset = toTimelineAsset(await getAssetInfo({ id, key: getKey() }));
       if (!asset || this.isExcluded(asset)) {
         return;
       }

web/src/lib/utils/thumbnail-util.ts

@@ -1,3 +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';
@@ -37,7 +38,7 @@ export function getThumbnailSize(assetCount: number, viewWidth: number): number
   return 300;
 }
 
-export const getAltTextForTimelineAsset = () => {
+export const getAltTextForTimelineAsset = (_: TimelineAsset) => {
   // TODO: implement this in a performant way
   return '';
 };