feat: PreloadManager - improve perf and standardize preloading behevior

Author: midzelis

pnpm-lock.yaml

@@ -40,7 +40,6 @@
     "@types/geojson": "^7946.0.16",
     "@zoom-image/core": "^0.41.0",
     "@zoom-image/svelte": "^0.3.0",
-    "async-mutex": "^0.5.0",
     "dom-to-image": "^2.6.0",
     "fabric": "^6.5.4",
     "geo-coordinates-parser": "^1.7.4",

web/package.json

@@ -10,17 +10,19 @@
   import { AppRoute, AssetAction, ProjectionType } from '$lib/constants';
   import { activityManager } from '$lib/managers/activity-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import { preloadManager } from '$lib/managers/PreloadManager.svelte';
   import { closeEditorCofirm } from '$lib/stores/asset-editor.store';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { ocrManager } from '$lib/stores/ocr.svelte';
   import { alwaysLoadOriginalVideo, isShowDetail } from '$lib/stores/preferences.store';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { user } from '$lib/stores/user.store';
   import { websocketEvents } from '$lib/stores/websocket';
-  import { getAssetJobMessage, getSharedLink, handlePromiseError } from '$lib/utils';
+  import { getAssetJobMessage, getAssetUrl, getSharedLink, handlePromiseError } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
+  import { InvocationTracker } from '$lib/utils/invocationTracker';
   import { SlideshowHistory } from '$lib/utils/slideshow-history';
+  import { preloadImageUrl } from '$lib/utils/sw-messaging';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import {
     AssetJobName,
@@ -52,9 +54,14 @@
 
   type HasAsset = boolean;
 
+  export type AssetCursor = {
+    current: AssetResponseDto;
+    nextAsset: AssetResponseDto | undefined | null;
+    previousAsset: AssetResponseDto | undefined | null;
+  };
+
   interface Props {
-    asset: AssetResponseDto;
-    preloadAssets?: TimelineAsset[];
+    cursor: AssetCursor;
     showNavigation?: boolean;
     withStacked?: boolean;
     isShared?: boolean;
@@ -71,8 +78,7 @@
   }
 
   let {
-    asset = $bindable(),
-    preloadAssets = $bindable([]),
+    cursor,
     showNavigation = true,
     withStacked = false,
     isShared = false,
@@ -99,10 +105,11 @@
   const stackThumbnailSize = 60;
   const stackSelectedThumbnailSize = 65;
 
+  let asset = $derived(cursor.current);
   let appearsInAlbums: AlbumResponseDto[] = $state([]);
   let shouldPlayMotionPhoto = $state(false);
   let sharedLink = getSharedLink();
-  let enableDetailPanel = asset.hasMetadata;
+  let enableDetailPanel = $derived(asset.hasMetadata);
   let slideshowStateUnsubscribe: () => void;
   let shuffleSlideshowUnsubscribe: () => void;
   let previewStackedAsset: AssetResponseDto | undefined = $state();
@@ -135,7 +142,7 @@
 
     untrack(() => {
       if (stack && stack?.assets.length > 1) {
-        preloadAssets.push(toTimelineAsset(stack.assets[1]));
+        preloadImageUrl(getAssetUrl({ asset: stack.assets[1] }));
       }
     });
   };
@@ -234,7 +241,9 @@
     });
   };
 
-  const navigateAsset = async (order?: 'previous' | 'next', e?: Event) => {
+  const tracker = new InvocationTracker();
+
+  const navigateAsset = (order?: 'previous' | 'next', e?: Event) => {
     if (!order) {
       if ($slideshowState === SlideshowState.PlaySlideshow) {
         order = $slideshowNavigation === SlideshowNavigation.AscendingOrder ? 'previous' : 'next';
@@ -244,38 +253,37 @@
     }
 
     e?.stopPropagation();
+    preloadManager.cancel(asset);
+    if (tracker.isActive()) {
+      return;
+    }
 
-    let hasNext = false;
-
-    if ($slideshowState === SlideshowState.PlaySlideshow && $slideshowNavigation === SlideshowNavigation.Shuffle) {
-      hasNext = order === 'previous' ? slideshowHistory.previous() : slideshowHistory.next();
-      if (!hasNext) {
-        const asset = await onRandom();
-        if (asset) {
-          slideshowHistory.queue(asset);
-          hasNext = true;
+    void tracker.invoke(async () => {
+      let hasNext = false;
+
+      if ($slideshowState === SlideshowState.PlaySlideshow && $slideshowNavigation === SlideshowNavigation.Shuffle) {
+        hasNext = order === 'previous' ? slideshowHistory.previous() : slideshowHistory.next();
+        if (!hasNext) {
+          const asset = await onRandom();
+          if (asset) {
+            slideshowHistory.queue(asset);
+            hasNext = true;
+          }
         }
+      } else {
+        hasNext = order === 'previous' ? await onPrevious() : await onNext();
       }
-    } else {
-      hasNext = order === 'previous' ? await onPrevious() : await onNext();
-    }
 
-    if ($slideshowState === SlideshowState.PlaySlideshow) {
-      if (hasNext) {
-        $restartSlideshowProgress = true;
-      } else {
-        await handleStopSlideshow();
+      if ($slideshowState === SlideshowState.PlaySlideshow) {
+        if (hasNext) {
+          $restartSlideshowProgress = true;
+        } else {
+          await handleStopSlideshow();
+        }
       }
-    }
+    });
   };
 
-  // const showEditorHandler = () => {
-  //   if (isShowActivity) {
-  //     isShowActivity = false;
-  //   }
-  //   isShowEditor = !isShowEditor;
-  // };
-
   const handleRunJob = async (name: AssetJobName) => {
     try {
       await runAssetJobs({ assetJobsDto: { assetIds: [asset.id], name } });
@@ -378,12 +386,6 @@
 
   let isFullScreen = $derived(fullscreenElement !== null);
 
-  $effect(() => {
-    if (asset) {
-      previewStackedAsset = undefined;
-      handlePromiseError(refreshStack());
-    }
-  });
   $effect(() => {
     if (album && !album.isActivityEnabled && activityManager.commentCount === 0) {
       isShowActivity = false;
@@ -395,13 +397,24 @@
     }
   });
 
-  // primarily, this is reactive on `asset`
-  $effect(() => {
-    handlePromiseError(handleGetAllAlbums());
+  const refresh = async () => {
+    await refreshStack();
+    await handleGetAllAlbums();
     ocrManager.clear();
     if (!sharedLink) {
-      handlePromiseError(ocrManager.getAssetOcr(asset.id));
+      if (previewStackedAsset) {
+        await ocrManager.getAssetOcr(previewStackedAsset.id);
+      }
+      await ocrManager.getAssetOcr(asset.id);
     }
+  };
+
+  $effect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    asset;
+    untrack(() => handlePromiseError(refresh()));
+    preloadManager.preload(cursor.nextAsset);
+    preloadManager.preload(cursor.previousAsset);
   });
 </script>
 
@@ -473,8 +486,7 @@
           <PhotoViewer
             bind:zoomToggle
             bind:copyImage
-            asset={previewStackedAsset}
-            {preloadAssets}
+            cursor={{ ...cursor, current: previewStackedAsset }}
             onPreviousAsset={() => navigateAsset('previous')}
             onNextAsset={() => navigateAsset('next')}
             haveFadeTransition={false}
@@ -519,8 +531,7 @@
             <PhotoViewer
               bind:zoomToggle
               bind:copyImage
-              {asset}
-              {preloadAssets}
+              {cursor}
               onPreviousAsset={() => navigateAsset('previous')}
               onNextAsset={() => navigateAsset('next')}
               {sharedLink}