fix(web): keep map view open after closing asset viewer (#26980)

e2e/src/specs/web/album.e2e-spec.ts

@@ -1,6 +1,7 @@
 import { LoginResponseDto } from '@immich/sdk';
-import { test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
-import { utils } from 'src/utils';
+import { readFileSync } from 'node:fs';
+import { testAssetDir, utils } from 'src/utils';
 
 test.describe('Album', () => {
   let admin: LoginResponseDto;
@@ -22,4 +23,41 @@ test.describe('Album', () => {
     await page.reload();
     await page.getByRole('button', { name: 'Select photos' }).waitFor();
   });
+
+  test('should keep map view open after viewing an asset from the map and going back', async ({ context, page }) => {
+    await utils.setAuthCookies(context, admin.accessToken);
+
+    const imagePath = `${testAssetDir}/metadata/gps-position/thompson-springs.jpg`;
+    const mapAsset = await utils.createAsset(admin.accessToken, {
+      assetData: {
+        bytes: readFileSync(imagePath),
+        filename: 'thompson-springs.jpg',
+      },
+    });
+
+    await utils.waitForQueueFinish(admin.accessToken, 'metadataExtraction');
+
+    const mapAlbum = await utils.createAlbum(admin.accessToken, {
+      albumName: 'Map Test Album',
+      assetIds: [mapAsset.id],
+    });
+
+    await page.goto(`/albums/${mapAlbum.id}`);
+    const mapButton = page.getByRole('button', { name: 'Map' });
+    await expect(mapButton).toBeVisible();
+    await mapButton.click();
+
+    const mapModal = page.getByRole('dialog');
+    await expect(mapModal).toBeVisible();
+
+    const mapMarker = mapModal.getByRole('img', { name: /Map marker/i }).first();
+    await expect(mapMarker).toBeVisible();
+    await mapMarker.click();
+
+    await page.waitForSelector('#immich-asset-viewer');
+    await page.getByRole('button', { name: 'Go back' }).click();
+
+    await expect(page.locator('#immich-asset-viewer')).not.toBeVisible();
+    await expect(mapModal).toBeVisible();
+  });
 });

web/src/lib/components/album-page/album-map.svelte

@@ -2,6 +2,7 @@
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import MapModal from '$lib/modals/MapModal.svelte';
+  import { navigate } from '$lib/utils/navigation';
   import { getAlbumInfo, type AlbumResponseDto, type MapMarkerResponseDto } from '@immich/sdk';
   import { IconButton, modalManager } from '@immich/ui';
   import { mdiMapOutline } from '@mdi/js';
@@ -15,6 +16,7 @@
   let { album }: Props = $props();
   let abortController: AbortController;
 
+  let returnToMap = $state(false);
   let mapMarkers: MapMarkerResponseDto[] = $state([]);
 
   onMount(async () => {
@@ -26,6 +28,13 @@
     assetViewerManager.showAssetViewer(false);
   });
 
+  $effect(() => {
+    if (!assetViewerManager.isViewing && returnToMap) {
+      returnToMap = false;
+      void onClick();
+    }
+  });
+
   async function loadMapMarkers() {
     if (abortController) {
       abortController.abort();
@@ -54,7 +63,10 @@
   const onClick = async () => {
     const assetIds = await modalManager.show(MapModal, { mapMarkers });
     if (assetIds) {
-      await assetViewerManager.setAssetId(assetIds[0]);
+      await navigate({ targetRoute: 'current', assetId: assetIds[0] });
+      returnToMap = true;
+    } else {
+      returnToMap = false;
     }
   };
 </script>