feat: PreloadManager

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
-  import { cancelImageUrl } from '$lib/utils/sw-messaging';
+  import { preloadManager } from '$lib/managers/PreloadManager.svelte';
   import { Icon } from '@immich/ui';
   import { mdiEyeOffOutline } from '@mdi/js';
   import type { ActionReturn } from 'svelte/action';
@@ -60,7 +60,7 @@
       onComplete?.(false);
     }
     return {
-      destroy: () => cancelImageUrl(url),
+      destroy: () => preloadManager.cancelPreloadUrl(url),
     };
   }
 

web/src/lib/components/timeline/Timeline.svelte

@@ -188,7 +188,7 @@
       // the performance benefits of deferred layouts while still supporting deep linking
       // to assets at the end of the timeline.
       timelineManager.isScrollingOnLoad = true;
-      const monthGroup = await timelineManager.findMonthGroupForAsset({ id: assetId });
+      const monthGroup = await timelineManager.findMonthGroupForAsset(assetId);
       if (!monthGroup) {
         return false;
       }

web/src/lib/managers/PreloadManager.svelte.ts

@@ -0,0 +1,37 @@
+import { getAssetUrl } from '$lib/utils';
+import { cancelImageUrl, preloadImageUrl } from '$lib/utils/sw-messaging';
+import { AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
+
+class PreloadManager {
+  preload(asset: AssetResponseDto | undefined) {
+    if (!asset) {
+      return;
+    }
+    if (globalThis.isSecureContext) {
+      preloadImageUrl(getAssetUrl({ asset }));
+      return;
+    }
+    if (asset.type === AssetTypeEnum.Image) {
+      const img = new Image();
+      img.src = getAssetUrl({ asset });
+    }
+  }
+
+  cancel(asset: AssetResponseDto | undefined) {
+    if (!globalThis.isSecureContext || !asset) {
+      return;
+    }
+    const url = getAssetUrl({ asset });
+    cancelImageUrl(url);
+  }
+
+  cancelPreloadUrl(url: string) {
+    if (!globalThis.isSecureContext) {
+      return;
+    }
+
+    cancelImageUrl(url);
+  }
+}
+
+export const preloadManager = new PreloadManager();

web/src/lib/managers/timeline-manager/internal/search-support.svelte.ts

@@ -1,5 +1,5 @@
 import { plainDateTimeCompare, type TimelineYearMonth } from '$lib/utils/timeline-util';
-import { AssetOrder, type AssetResponseDto } from '@immich/sdk';
+import { AssetOrder } from '@immich/sdk';
 import { DateTime } from 'luxon';
 import type { MonthGroup } from '../month-group.svelte';
 import { TimelineManager } from '../timeline-manager.svelte';
@@ -7,16 +7,12 @@ import type { AssetDescriptor, Direction, TimelineAsset } from '../types';
 
 export async function getAssetWithOffset(
   timelineManager: TimelineManager,
-  assetDescriptor: AssetDescriptor | AssetResponseDto,
+  assetDescriptor: AssetDescriptor,
   interval: 'asset' | 'day' | 'month' | 'year' = 'asset',
   direction: Direction,
 ): Promise<TimelineAsset | undefined> {
-  const monthGroup = await timelineManager.findMonthGroupForAsset(assetDescriptor);
-  if (!monthGroup) {
-    return;
-  }
-  const asset = monthGroup.findAssetById(assetDescriptor);
-  if (!asset) {
+  const { asset, monthGroup } = findMonthGroupForAsset(timelineManager, assetDescriptor.id) ?? {};
+  if (!monthGroup || !asset) {
     return;
   }
 

web/src/lib/managers/timeline-manager/timeline-manager.svelte.spec.ts

@@ -524,7 +524,6 @@ describe('TimelineManager', () => {
         { count: 3, timeBucket: '2024-01-01T00:00:00.000Z' },
       ]);
       sdkMock.getTimeBucket.mockImplementation(({ timeBucket }) => Promise.resolve(bucketAssetsResponse[timeBucket]));
-      sdkMock.getAssetInfo.mockRejectedValue(new Error('Asset not found'));
       await timelineManager.updateViewport({ width: 1588, height: 1000 });
     });
 

web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts

@@ -16,13 +16,12 @@ import { WebsocketSupport } from '$lib/managers/timeline-manager/internal/websoc
 import { CancellableTask } from '$lib/utils/cancellable-task';
 import { PersistedLocalStorage } from '$lib/utils/persisted';
 import {
-  isAssetResponseDto,
   setDifference,
   toTimelineAsset,
   type TimelineDateTime,
   type TimelineYearMonth,
 } from '$lib/utils/timeline-util';
-import { AssetOrder, getAssetInfo, getTimeBuckets, type AssetResponseDto } from '@immich/sdk';
+import { AssetOrder, getAssetInfo, getTimeBuckets } from '@immich/sdk';
 import { clamp, isEqual } from 'lodash-es';
 import { SvelteDate, SvelteSet } from 'svelte/reactivity';
 import { DayGroup } from './day-group.svelte';
@@ -344,30 +343,27 @@ export class TimelineManager extends VirtualScrollManager {
     this.addAssetsUpsertSegments([...notExcluded]);
   }
 
-  async findMonthGroupForAsset(asset: AssetDescriptor | AssetResponseDto) {
+  async findMonthGroupForAsset(id: string) {
     if (!this.isInitialized) {
       await this.initTask.waitUntilCompletion();
     }
 
-    const { id } = asset;
     let { monthGroup } = findMonthGroupForAssetUtil(this, id) ?? {};
     if (monthGroup) {
       return monthGroup;
     }
 
-    const response = isAssetResponseDto(asset)
-      ? asset
-      : await getAssetInfo({ ...authManager.params, id }).catch(() => null);
+    const response = await getAssetInfo({ ...authManager.params, id }).catch(() => null);
     if (!response) {
       return;
     }
 
-    const timelineAsset = toTimelineAsset(response);
-    if (this.isExcluded(timelineAsset)) {
+    const asset = toTimelineAsset(response);
+    if (!asset || this.isExcluded(asset)) {
       return;
     }
 
-    monthGroup = await this.#loadMonthGroupAtTime(timelineAsset.localDateTime, { cancelable: false });
+    monthGroup = await this.#loadMonthGroupAtTime(asset.localDateTime, { cancelable: false });
     if (monthGroup?.findAssetById({ id })) {
       return monthGroup;
     }
@@ -536,14 +532,14 @@ export class TimelineManager extends VirtualScrollManager {
   }
 
   async getLaterAsset(
-    assetDescriptor: AssetDescriptor | AssetResponseDto,
+    assetDescriptor: AssetDescriptor,
     interval: 'asset' | 'day' | 'month' | 'year' = 'asset',
   ): Promise<TimelineAsset | undefined> {
     return await getAssetWithOffset(this, assetDescriptor, interval, 'later');
   }
 
   async getEarlierAsset(
-    assetDescriptor: AssetDescriptor | AssetResponseDto,
+    assetDescriptor: AssetDescriptor,
     interval: 'asset' | 'day' | 'month' | 'year' = 'asset',
   ): Promise<TimelineAsset | undefined> {
     return await getAssetWithOffset(this, assetDescriptor, interval, 'earlier');

web/src/lib/utils.ts

@@ -1,10 +1,12 @@
 import { defaultLang, langs, locales } from '$lib/constants';
 import { authManager } from '$lib/managers/auth-manager.svelte';
-import { lang } from '$lib/stores/preferences.store';
+import { alwaysLoadOriginalFile, lang } from '$lib/stores/preferences.store';
+import { isWebCompatibleImage } from '$lib/utils/asset-utils';
 import { handleError } from '$lib/utils/handle-error';
 import {
   AssetJobName,
   AssetMediaSize,
+  AssetTypeEnum,
   MemoryType,
   QueueName,
   finishOAuth,
@@ -17,6 +19,7 @@ import {
   linkOAuthAccount,
   startOAuth,
   unlinkOAuthAccount,
+  type AssetResponseDto,
   type MemoryResponseDto,
   type PersonResponseDto,
   type ServerVersionResponseDto,
@@ -191,6 +194,37 @@ const createUrl = (path: string, parameters?: Record<string, unknown>) => {
 
 type AssetUrlOptions = { id: string; cacheKey?: string | null };
 
+export const getAssetUrl = ({
+  asset,
+  sharedLink,
+  forceOriginal = false,
+}: {
+  asset: AssetResponseDto;
+  sharedLink?: SharedLinkResponseDto;
+  forceOriginal?: boolean;
+}) => {
+  const id = asset.id;
+  const cacheKey = asset.thumbhash;
+  if (sharedLink && (!sharedLink.allowDownload || !sharedLink.showMetadata)) {
+    return getAssetThumbnailUrl({ id, size: AssetMediaSize.Preview, cacheKey });
+  }
+  const targetSize = targetImageSize(asset, forceOriginal);
+  return targetSize === 'original'
+    ? getAssetOriginalUrl({ id, cacheKey })
+    : getAssetThumbnailUrl({ id, size: targetSize, cacheKey });
+};
+
+const forceUseOriginal = (asset: AssetResponseDto) => {
+  return asset.type === AssetTypeEnum.Image && asset.duration && !asset.duration.includes('0:00:00.000');
+};
+
+export const targetImageSize = (asset: AssetResponseDto, forceOriginal: boolean) => {
+  if (forceOriginal || get(alwaysLoadOriginalFile) || forceUseOriginal(asset)) {
+    return isWebCompatibleImage(asset) ? 'original' : AssetMediaSize.Fullsize;
+  }
+  return AssetMediaSize.Preview;
+};
+
 export const getAssetOriginalUrl = (options: string | AssetUrlOptions) => {
   if (typeof options === 'string') {
     options = { id: options };

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

@@ -1,4 +1,4 @@
-import type { AssetDescriptor, TimelineAsset, ViewportTopMonth } from '$lib/managers/timeline-manager/types';
+import type { TimelineAsset, ViewportTopMonth } from '$lib/managers/timeline-manager/types';
 import { locale } from '$lib/stores/preferences.store';
 import { getAssetRatio } from '$lib/utils/asset-utils';
 import { AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
@@ -192,13 +192,8 @@ export const toTimelineAsset = (unknownAsset: AssetResponseDto | TimelineAsset):
   };
 };
 
-export const isTimelineAsset = (
-  unknownAsset: AssetDescriptor | AssetResponseDto | TimelineAsset,
-): unknownAsset is TimelineAsset => (unknownAsset as TimelineAsset).ratio !== undefined;
-
-export const isAssetResponseDto = (
-  unknownAsset: AssetDescriptor | AssetResponseDto | TimelineAsset,
-): unknownAsset is AssetResponseDto => (unknownAsset as AssetResponseDto).type !== undefined;
+export const isTimelineAsset = (unknownAsset: AssetResponseDto | TimelineAsset): unknownAsset is TimelineAsset =>
+  (unknownAsset as TimelineAsset).ratio !== undefined;
 
 export const isTimelineAssets = (assets: AssetResponseDto[] | TimelineAsset[]): assets is TimelineAsset[] =>
   assets.length === 0 || 'ratio' in assets[0];