feat(web): Map in albums & shared albums (#17906)

* add btn, map and marker

* Fix bug in navigation assetviewer

* Correct bug on main Viewer

* Add to user album the map of his pictures

* change icon to outline

* lint & format

* with manager instead of variable

* remove duplicate

* chore: minor styling change

* formatting

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

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

@@ -0,0 +1,158 @@
+<script lang="ts">
+  import { clickOutside } from '$lib/actions/click-outside';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
+  import type Map from '$lib/components/shared-components/map/map.svelte';
+  import Portal from '$lib/components/shared-components/portal/portal.svelte';
+  import { timeToLoadTheMap } from '$lib/constants';
+  import { albumMapViewManager } from '$lib/managers/album-view-map.manager.svelte';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import { handlePromiseError } from '$lib/utils';
+  import { delay } from '$lib/utils/asset-utils';
+  import { navigate } from '$lib/utils/navigation';
+  import { getAlbumInfo, type AlbumResponseDto, type MapMarkerResponseDto } from '@immich/sdk';
+  import { LoadingSpinner } from '@immich/ui';
+  import { mdiMapOutline } from '@mdi/js';
+  import { onDestroy, onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    album: AlbumResponseDto;
+  }
+
+  let { album }: Props = $props();
+  let abortController: AbortController;
+  let { isViewing: showAssetViewer, asset: viewingAsset, setAssetId } = assetViewingStore;
+  let viewingAssets: string[] = $state([]);
+  let viewingAssetCursor = 0;
+
+  let mapElement = $state<ReturnType<typeof Map>>();
+
+  let zoom = $derived(1);
+  let mapMarkers: MapMarkerResponseDto[] = $state([]);
+
+  onMount(async () => {
+    mapMarkers = await loadMapMarkers();
+  });
+
+  onDestroy(() => {
+    abortController?.abort();
+    assetViewingStore.showAssetViewer(false);
+  });
+
+  async function loadMapMarkers() {
+    if (abortController) {
+      abortController.abort();
+    }
+    abortController = new AbortController();
+
+    let albumInfo: AlbumResponseDto = await getAlbumInfo({ id: album.id, withoutAssets: false });
+
+    let markers: MapMarkerResponseDto[] = [];
+    for (const asset of albumInfo.assets) {
+      if (asset.exifInfo?.latitude && asset.exifInfo?.longitude) {
+        markers.push({
+          id: asset.id,
+          lat: asset.exifInfo.latitude,
+          lon: asset.exifInfo.longitude,
+          city: asset.exifInfo?.city ?? null,
+          country: asset.exifInfo?.country ?? null,
+          state: asset.exifInfo?.state ?? null,
+        });
+      }
+    }
+
+    return markers;
+  }
+
+  function openMap() {
+    albumMapViewManager.isInMapView = true;
+  }
+
+  function closeMap() {
+    if (!$showAssetViewer) {
+      albumMapViewManager.isInMapView = false;
+    }
+  }
+
+  async function onViewAssets(assetIds: string[]) {
+    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>
+
+<CircleIconButton title={$t('map')} onclick={openMap} icon={mdiMapOutline} />
+
+{#if albumMapViewManager.isInMapView}
+  <div use:clickOutside={{ onOutclick: closeMap }}>
+    <FullScreenModal title={$t('map')} width="wide" onClose={closeMap}>
+      <div class="flex flex-col w-full h-full gap-2">
+        <div class="h-[500px] min-h-[300px] w-full">
+          {#await import('../shared-components/map/map.svelte')}
+            {#await delay(timeToLoadTheMap) then}
+              <!-- show the loading spinner only if loading the map takes too much time -->
+              <div class="flex items-center justify-center h-full w-full">
+                <LoadingSpinner />
+              </div>
+            {/await}
+          {:then { default: Map }}
+            <Map
+              bind:this={mapElement}
+              center={undefined}
+              {zoom}
+              clickable={false}
+              bind:mapMarkers
+              onSelect={onViewAssets}
+            />
+          {/await}
+        </div>
+      </div>
+    </FullScreenModal>
+  </div>
+
+  <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>
+{/if}

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

@@ -20,6 +20,7 @@
   import { t } from 'svelte-i18n';
   import { onDestroy } from 'svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import AlbumMap from '$lib/components/album-page/album-map.svelte';
 
   interface Props {
     sharedLink: SharedLinkResponseDto;
@@ -91,7 +92,9 @@
             icon={mdiFolderDownloadOutline}
           />
         {/if}
-
+        {#if sharedLink.showMetadata}
+          <AlbumMap {album} />
+        {/if}
         <ThemeButton />
       {/snippet}
     </ControlAppBar>

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

@@ -27,6 +27,7 @@
   import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { mobileDevice } from '$lib/stores/mobile-device.svelte';
   import { focusNext } from '$lib/utils/focus-util';
+  import { albumMapViewManager } from '$lib/managers/album-view-map.manager.svelte';
 
   interface Props {
     isSelectionMode?: boolean;
@@ -382,7 +383,6 @@
 
   const handleNext = async () => {
     const nextAsset = await assetStore.getNextAsset($viewingAsset);
-
     if (nextAsset) {
       const preloadAsset = await assetStore.getNextAsset(nextAsset);
       assetViewingStore.setAsset(nextAsset, preloadAsset ? [preloadAsset] : []);
@@ -802,26 +802,28 @@
   </section>
 </section>
 
-<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 !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}
 
 <style>
   #asset-grid {

web/src/lib/components/shared-components/map/map.svelte

@@ -175,7 +175,7 @@
 <MapLibre
   {hash}
   style=""
-  class="h-full"
+  class="h-full rounded-2xl"
   {center}
   {zoom}
   attributionControl={false}
@@ -232,7 +232,7 @@
       >
         {#snippet children({ feature })}
           <div
-            class="rounded-full w-[40px] h-[40px] bg-immich-primary text-immich-gray flex justify-center items-center font-mono font-bold shadow-lg hover:bg-immich-dark-primary transition-all duration-200 hover:text-immich-dark-bg opacity-90"
+            class="rounded-full w-[40px] h-[40px] bg-immich-primary text-white flex justify-center items-center font-mono font-bold shadow-lg hover:bg-immich-dark-primary transition-all duration-200 hover:text-immich-dark-bg opacity-90"
           >
             {feature.properties?.point_count}
           </div>

web/src/lib/managers/album-view-map.manager.svelte.ts

@@ -0,0 +1,13 @@
+class AlbumMapViewManager {
+  #isInMapView = $state(false);
+
+  get isInMapView() {
+    return this.#isInMapView;
+  }
+
+  set isInMapView(isInMapView: boolean) {
+    this.#isInMapView = isInMapView;
+  }
+}
+
+export const albumMapViewManager = new AlbumMapViewManager();

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -2,6 +2,7 @@
   import { afterNavigate, goto, onNavigate } from '$app/navigation';
   import { scrollMemoryClearer } from '$lib/actions/scroll-memory';
   import AlbumDescription from '$lib/components/album-page/album-description.svelte';
+  import AlbumMap from '$lib/components/album-page/album-map.svelte';
   import AlbumOptions from '$lib/components/album-page/album-options.svelte';
   import AlbumSummary from '$lib/components/album-page/album-summary.svelte';
   import AlbumTitle from '$lib/components/album-page/album-title.svelte';
@@ -500,6 +501,8 @@
               />
             {/if}
 
+            <AlbumMap {album} />
+
             {#if album.assetCount > 0}
               <CircleIconButton title={$t('slideshow')} onclick={handleStartSlideshow} icon={mdiPresentationPlay} />
               <CircleIconButton title={$t('download')} onclick={handleDownloadAlbum} icon={mdiFolderDownloadOutline} />