Merge branch 'chore/makefile_split_setup' into chore/pnpm_alt_small

web/package-lock.json

@@ -20,9 +20,12 @@
         "@photo-sphere-viewer/settings-plugin": "^5.11.5",
         "@photo-sphere-viewer/video-plugin": "^5.11.5",
         "@zoom-image/svelte": "^0.3.0",
+        "async-mutex": "^0.5.0",
         "dom-to-image": "^2.6.0",
         "fabric": "^6.5.4",
+        "geojson": "^0.5.0",
         "handlebars": "^4.7.8",
+        "happy-dom": "^18.0.1",
         "intl-messageformat": "^10.7.11",
         "justified-layout": "^4.1.0",
         "lodash-es": "^4.17.21",
@@ -3922,6 +3925,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/async-mutex": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/async-mutex/-/async-mutex-0.5.0.tgz",
+      "integrity": "sha512-1A94B18jkJ3DYq284ohPxoXbfTA5HsQ7/Mf4DEhcyLx3Bz27Rh59iScbB6EPiP+B+joue6YCxcMXSbFC1tZKwA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -5838,6 +5850,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/geojson": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/geojson/-/geojson-0.5.0.tgz",
+      "integrity": "sha512-/Bx5lEn+qRF4TfQ5aLu6NH+UKtvIv7Lhc487y/c8BdludrCTpiWf9wyI0RTyqg49MFefIAvFDuEi5Dfd/zgNxQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/geojson-vt": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",

web/package.json

@@ -37,9 +37,12 @@
     "@photo-sphere-viewer/settings-plugin": "^5.11.5",
     "@photo-sphere-viewer/video-plugin": "^5.11.5",
     "@zoom-image/svelte": "^0.3.0",
+    "async-mutex": "^0.5.0",
     "dom-to-image": "^2.6.0",
     "fabric": "^6.5.4",
+    "geojson": "^0.5.0",
     "handlebars": "^4.7.8",
+    "happy-dom": "^18.0.1",
     "intl-messageformat": "^10.7.11",
     "justified-layout": "^4.1.0",
     "lodash-es": "^4.17.21",

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

@@ -91,7 +91,7 @@
     empty,
   }: Props = $props();
 
-  let { isViewing: showAssetViewer, asset: viewingAsset, preloadAssets, gridScrollTarget } = assetViewingStore;
+  let { isViewing: showAssetViewer, asset: viewingAsset, preloadAssets, gridScrollTarget, mutex } = assetViewingStore;
 
   let element: HTMLElement | undefined = $state();
 
@@ -438,6 +438,7 @@
   };
 
   const handlePrevious = async () => {
+    const release = await mutex.acquire();
     const laterAsset = await timelineManager.getLaterAsset($viewingAsset);
 
     if (laterAsset) {
@@ -447,11 +448,14 @@
       await navigate({ targetRoute: 'current', assetId: laterAsset.id });
     }
 
+    release();
     return !!laterAsset;
   };
 
   const handleNext = async () => {
+    const release = await mutex.acquire();
     const earlierAsset = await timelineManager.getEarlierAsset($viewingAsset);
+
     if (earlierAsset) {
       const preloadAsset = await timelineManager.getEarlierAsset(earlierAsset);
       const asset = await getAssetInfo({ id: earlierAsset.id, key: authManager.key });
@@ -459,6 +463,7 @@
       await navigate({ targetRoute: 'current', assetId: earlierAsset.id });
     }
 
+    release();
     return !!earlierAsset;
   };
 

web/src/lib/stores/asset-viewing.store.ts

@@ -2,12 +2,14 @@ import { authManager } from '$lib/managers/auth-manager.svelte';
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
 import { type AssetGridRouteSearchParams } from '$lib/utils/navigation';
 import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
+import { Mutex } from 'async-mutex';
 import { readonly, writable } from 'svelte/store';
 
 function createAssetViewingStore() {
   const viewingAssetStoreState = writable<AssetResponseDto>();
   const preloadAssets = writable<TimelineAsset[]>([]);
   const viewState = writable<boolean>(false);
+  const viewingAssetMutex = new Mutex();
   const gridScrollTarget = writable<AssetGridRouteSearchParams | null | undefined>();
 
   const setAsset = (asset: AssetResponseDto, assetsToPreload: TimelineAsset[] = []) => {
@@ -28,6 +30,7 @@ function createAssetViewingStore() {
 
   return {
     asset: readonly(viewingAssetStoreState),
+    mutex: viewingAssetMutex,
     preloadAssets: readonly(preloadAssets),
     isViewing: viewState,
     gridScrollTarget,