diff --git a/e2e/src/specs/web/album.e2e-spec.ts b/e2e/src/specs/web/album.e2e-spec.ts index 953c7d00ae1cd..cd8bb875828d4 100644 --- a/e2e/src/specs/web/album.e2e-spec.ts +++ b/e2e/src/specs/web/album.e2e-spec.ts @@ -1,6 +1,7 @@ import { LoginResponseDto } from '@immich/sdk'; -import { test } from '@playwright/test'; -import { utils } from 'src/utils'; +import { expect, test } from '@playwright/test'; +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(); + }); }); diff --git a/web/src/lib/components/album-page/album-map.svelte b/web/src/lib/components/album-page/album-map.svelte index 455a99f755558..623ac48dede03 100644 --- a/web/src/lib/components/album-page/album-map.svelte +++ b/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; } };