From caf11fbb961a19af6123767195a6844de5fc4390 Mon Sep 17 00:00:00 2001
From: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>
Date: Thu, 19 Jun 2025 16:09:23 +0200
Subject: [PATCH] fix: album asset viewer (#19252)

---
 .../components/album-page/album-map.svelte    | 54 +------------------
 .../components/photos-page/asset-grid.svelte  | 43 +++++++--------
 .../managers/album-view-map.manager.svelte.ts | 13 -----
 3 files changed, 21 insertions(+), 89 deletions(-)
 delete mode 100644 web/src/lib/managers/album-view-map.manager.svelte.ts

diff --git a/web/src/lib/components/album-page/album-map.svelte b/web/src/lib/components/album-page/album-map.svelte
index 83a66db3af..fbb831a38b 100644
--- a/web/src/lib/components/album-page/album-map.svelte
+++ b/web/src/lib/components/album-page/album-map.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
-  import Portal from '$lib/components/shared-components/portal/portal.svelte';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
   import MapModal from '$lib/modals/MapModal.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { handlePromiseError } from '$lib/utils';
-  import { navigate } from '$lib/utils/navigation';
   import { getAlbumInfo, type AlbumResponseDto, type MapMarkerResponseDto } from '@immich/sdk';
   import { IconButton } from '@immich/ui';
   import { mdiMapOutline } from '@mdi/js';
@@ -17,9 +14,7 @@
 
   let { album }: Props = $props();
   let abortController: AbortController;
-  let { isViewing: showAssetViewer, asset: viewingAsset, setAssetId } = assetViewingStore;
-  let viewingAssets: string[] = $state([]);
-  let viewingAssetCursor = 0;
+  let { setAssetId } = assetViewingStore;
 
   let mapMarkers: MapMarkerResponseDto[] = $state([]);
 
@@ -61,37 +56,9 @@
     const assetIds = await modalManager.show(MapModal, { mapMarkers });
 
     if (assetIds) {
-      viewingAssets = assetIds;
-      viewingAssetCursor = 0;
-
       await setAssetId(assetIds[0]);
     }
   }
-
-  async function navigateNext() {
-    if (viewingAssetCursor < viewingAssets.length - 1) {
-      await setAssetId(viewingAssets[++viewingAssetCursor]);
-      return true;
-    }
-    return false;
-  }
-
-  async function navigatePrevious() {
-    if (viewingAssetCursor > 0) {
-      await setAssetId(viewingAssets[--viewingAssetCursor]);
-      return true;
-    }
-    return false;
-  }
-
-  async function navigateRandom() {
-    if (viewingAssets.length <= 0) {
-      return undefined;
-    }
-    const index = Math.floor(Math.random() * viewingAssets.length);
-    const asset = await setAssetId(viewingAssets[index]);
-    return asset;
-  }
 </script>
 
 <IconButton
@@ -102,22 +69,3 @@
   onclick={openMap}
   aria-label={$t('map')}
 />
-
-<Portal target="body">
-  {#if $showAssetViewer}
-    {#await import('../../../lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
-      <AssetViewer
-        asset={$viewingAsset}
-        showNavigation={viewingAssets.length > 1}
-        onNext={navigateNext}
-        onPrevious={navigatePrevious}
-        onRandom={navigateRandom}
-        onClose={() => {
-          assetViewingStore.showAssetViewer(false);
-          handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
-        }}
-        isShared={false}
-      />
-    {/await}
-  {/if}
-</Portal>
diff --git a/web/src/lib/components/photos-page/asset-grid.svelte b/web/src/lib/components/photos-page/asset-grid.svelte
index ce2b1ca096..ac6ec8906a 100644
--- a/web/src/lib/components/photos-page/asset-grid.svelte
+++ b/web/src/lib/components/photos-page/asset-grid.svelte
@@ -12,7 +12,6 @@
   import ChangeDate from '$lib/components/shared-components/change-date.svelte';
   import Scrubber from '$lib/components/shared-components/scrubber/scrubber.svelte';
   import { AppRoute, AssetAction } from '$lib/constants';
-  import { albumMapViewManager } from '$lib/managers/album-view-map.manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
   import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
@@ -911,28 +910,26 @@
   </section>
 </section>
 
-{#if !albumMapViewManager.isInMapView}
-  <Portal target="body">
-    {#if $showAssetViewer}
-      {#await import('../asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
-        <AssetViewer
-          {withStacked}
-          asset={$viewingAsset}
-          preloadAssets={$preloadAssets}
-          {isShared}
-          {album}
-          {person}
-          preAction={handlePreAction}
-          onAction={handleAction}
-          onPrevious={handlePrevious}
-          onNext={handleNext}
-          onRandom={handleRandom}
-          onClose={handleClose}
-        />
-      {/await}
-    {/if}
-  </Portal>
-{/if}
+<Portal target="body">
+  {#if $showAssetViewer}
+    {#await import('../asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
+      <AssetViewer
+        {withStacked}
+        asset={$viewingAsset}
+        preloadAssets={$preloadAssets}
+        {isShared}
+        {album}
+        {person}
+        preAction={handlePreAction}
+        onAction={handleAction}
+        onPrevious={handlePrevious}
+        onNext={handleNext}
+        onRandom={handleRandom}
+        onClose={handleClose}
+      />
+    {/await}
+  {/if}
+</Portal>
 
 <style>
   #asset-grid {
diff --git a/web/src/lib/managers/album-view-map.manager.svelte.ts b/web/src/lib/managers/album-view-map.manager.svelte.ts
deleted file mode 100644
index 22ed1b58ea..0000000000
--- a/web/src/lib/managers/album-view-map.manager.svelte.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-class AlbumMapViewManager {
-  #isInMapView = $state(false);
-
-  get isInMapView() {
-    return this.#isInMapView;
-  }
-
-  set isInMapView(isInMapView: boolean) {
-    this.#isInMapView = isInMapView;
-  }
-}
-
-export const albumMapViewManager = new AlbumMapViewManager();