From a373d50c31fb367b76c45b0a2c9d20e99e0741d4 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Fri, 13 Sep 2024 12:27:10 -0400
Subject: [PATCH] fix(web): memory viewer (#12649)

refactor(web): memory viewer
---
 .../memory-page/memory-viewer.svelte          | 403 ++++++++++--------
 .../components/photos-page/memory-lane.svelte |   4 +-
 .../gallery-viewer/gallery-viewer.svelte      |  12 +-
 web/src/lib/constants.ts                      |   3 +-
 4 files changed, 242 insertions(+), 180 deletions(-)

diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte
index 0088eb7a43..ae6416873e 100644
--- a/web/src/lib/components/memory-page/memory-viewer.svelte
+++ b/web/src/lib/components/memory-page/memory-viewer.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
+  import { afterNavigate, goto } from '$app/navigation';
   import { page } from '$app/stores';
+  import { intersectionObserver } from '$lib/actions/intersection-observer';
+  import { resizeObserver } from '$lib/actions/resize-observer';
   import { shortcuts } from '$lib/actions/shortcut';
-
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
   import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
@@ -12,16 +13,18 @@
   import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
   import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
   import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
   import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
   import { AppRoute, QueryParameter } from '$lib/constants';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { type Viewport } from '$lib/stores/assets.store';
   import { memoryStore } from '$lib/stores/memory.store';
+  import { locale } from '$lib/stores/preferences.store';
   import { getAssetThumbnailUrl, handlePromiseError, memoryLaneTitle } from '$lib/utils';
   import { fromLocalDateTime } from '$lib/utils/timeline-util';
-  import { AssetMediaSize, getMemoryLane, type AssetResponseDto } from '@immich/sdk';
+  import { AssetMediaSize, getMemoryLane, type AssetResponseDto, type MemoryLaneResponseDto } from '@immich/sdk';
   import {
     mdiChevronDown,
     mdiChevronLeft,
@@ -34,100 +37,154 @@
     mdiPlus,
     mdiSelectAll,
   } from '@mdi/js';
+  import type { NavigationTarget } from '@sveltejs/kit';
   import { DateTime } from 'luxon';
   import { onMount } from 'svelte';
-  import { tweened } from 'svelte/motion';
-  import { fade } from 'svelte/transition';
   import { t } from 'svelte-i18n';
-  import { intersectionObserver } from '$lib/actions/intersection-observer';
-  import { resizeObserver } from '$lib/actions/resize-observer';
-  import { locale } from '$lib/stores/preferences.store';
+  import { tweened } from 'svelte/motion';
+  import { derived } from 'svelte/store';
+  import { fade } from 'svelte/transition';
 
-  const parseIndex = (s: string | null, max: number | null) =>
-    Math.max(Math.min(Number.parseInt(s ?? '') || 0, max ?? 0), 0);
+  type MemoryIndex = {
+    memoryIndex: number;
+    assetIndex: number;
+  };
 
-  $: memoryIndex = parseIndex($page.url.searchParams.get(QueryParameter.MEMORY_INDEX), $memoryStore?.length - 1);
-  $: assetIndex = parseIndex($page.url.searchParams.get(QueryParameter.ASSET_INDEX), currentMemory?.assets.length - 1);
-
-  $: previousMemory = $memoryStore?.[memoryIndex - 1];
-  $: currentMemory = $memoryStore?.[memoryIndex];
-  $: nextMemory = $memoryStore?.[memoryIndex + 1];
-
-  $: previousAsset = currentMemory?.assets[assetIndex - 1];
-  $: currentAsset = currentMemory?.assets[assetIndex];
-  $: nextAsset = currentMemory?.assets[assetIndex + 1];
-
-  $: canGoForward = !!(nextMemory || nextAsset);
-  $: canGoBack = !!(previousMemory || previousAsset);
-
-  const viewport: Viewport = { width: 0, height: 0 };
-  const toNextMemory = () => goto(`?${QueryParameter.MEMORY_INDEX}=${memoryIndex + 1}`);
-  const toPreviousMemory = () => goto(`?${QueryParameter.MEMORY_INDEX}=${memoryIndex - 1}`);
-
-  const toNextAsset = () =>
-    goto(`?${QueryParameter.MEMORY_INDEX}=${memoryIndex}&${QueryParameter.ASSET_INDEX}=${assetIndex + 1}`);
-  const toPreviousAsset = () =>
-    goto(`?${QueryParameter.MEMORY_INDEX}=${memoryIndex}&${QueryParameter.ASSET_INDEX}=${assetIndex - 1}`);
-
-  const toNext = () => (nextAsset ? toNextAsset() : toNextMemory());
-  const toPrevious = () => (previousAsset ? toPreviousAsset() : toPreviousMemory());
-
-  const progress = tweened<number>(0, {
-    duration: (from: number, to: number) => (to ? 5000 * (to - from) : 0),
-  });
-
-  const play = () => progress.set(1);
-  const pause = () => progress.set($progress);
-
-  let resetPromise = Promise.resolve();
-  const reset = () => (resetPromise = progress.set(0));
-
-  let paused = false;
-
-  // Play or pause progress when the paused state changes.
-  $: {
-    if (paused) {
-      handlePromiseError(pause());
-    } else {
-      handlePromiseError(play());
-    }
-  }
-
-  // Progress should be paused when it's no longer possible to advance.
-  $: paused ||= !canGoForward || galleryInView;
-
-  // Advance to the next asset or memory when progress is complete.
-  $: {
-    if ($progress === 1) {
-      handlePromiseError(toNext());
-    }
-  }
-
-  // Progress should be resumed when reset and not paused.
-  $: {
-    if (!$progress && !paused) {
-      handlePromiseError(play());
-    }
-  }
-
-  // Progress should be reset when the current memory or asset changes.
-  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-  $: memoryIndex, assetIndex, handlePromiseError(reset());
-
-  let selectedAssets: Set<AssetResponseDto> = new Set();
-  $: isMultiSelectionMode = selectedAssets.size > 0;
+  type MemoryAsset = MemoryIndex & {
+    memory: MemoryLaneResponseDto;
+    asset: AssetResponseDto;
+    previousMemory?: MemoryLaneResponseDto;
+    previous?: MemoryAsset;
+    next?: MemoryAsset;
+    nextMemory?: MemoryLaneResponseDto;
+  };
 
   let memoryGallery: HTMLElement;
   let memoryWrapper: HTMLElement;
   let galleryInView = false;
+  let paused = false;
+  let selectedAssets: Set<AssetResponseDto> = new Set();
+  let current: MemoryAsset | undefined = undefined;
+  // let memories: MemoryAsset[] = [];
+  let resetPromise = Promise.resolve();
 
+  const { isViewing } = assetViewingStore;
+  const viewport: Viewport = { width: 0, height: 0 };
+  const progress = tweened<number>(0, { duration: (from: number, to: number) => (to ? 5000 * (to - from) : 0) });
+  const memories = derived(memoryStore, (memories) => {
+    memories = memories ?? [];
+    const memoryAssets: MemoryAsset[] = [];
+    let previous: MemoryAsset | undefined;
+    for (const [memoryIndex, memory] of memories.entries()) {
+      for (const [assetIndex, asset] of memory.assets.entries()) {
+        const current = {
+          memory,
+          memoryIndex,
+          previousMemory: memories[memoryIndex - 1],
+          nextMemory: memories[memoryIndex + 1],
+          asset,
+          assetIndex,
+          previous,
+        };
+
+        memoryAssets.push(current);
+
+        if (previous) {
+          previous.next = current;
+        }
+
+        previous = current;
+      }
+    }
+
+    return memoryAssets;
+  });
+
+  $: isMultiSelectionMode = selectedAssets.size > 0;
   $: isAllArchived = [...selectedAssets].every((asset) => asset.isArchived);
   $: isAllFavorite = [...selectedAssets].every((asset) => asset.isFavorite);
-  $: {
-    if (!galleryInView) {
-      selectedAssets = new Set();
+  $: selectedAssets = galleryInView ? selectedAssets : new Set();
+  $: handlePromiseError(handleProgress($progress));
+  $: handlePromiseError(handleAction(galleryInView ? 'pause' : 'play'));
+
+  const loadFromParams = (memories: MemoryAsset[], page: typeof $page | NavigationTarget | null) => {
+    const assetId = page?.params?.assetId ?? page?.url.searchParams.get(QueryParameter.ID) ?? undefined;
+    handlePromiseError(handleAction($isViewing ? 'pause' : 'reset'));
+    return memories.find((memory) => memory.asset.id === assetId) ?? memories[0];
+  };
+  const asHref = (asset: AssetResponseDto) => `?${QueryParameter.ID}=${asset.id}`;
+  const handleNavigate = async (asset?: AssetResponseDto) => {
+    if ($isViewing) {
+      return asset;
     }
-  }
+
+    await handleAction('reset');
+    if (!asset) {
+      return;
+    }
+
+    await goto(asHref(asset));
+  };
+  const handleNextAsset = () => handleNavigate(current?.next?.asset);
+  const handlePreviousAsset = () => handleNavigate(current?.previous?.asset);
+  const handleNextMemory = () => handleNavigate(current?.nextMemory?.assets[0]);
+  const handlePreviousMemory = () => handleNavigate(current?.previousMemory?.assets[0]);
+  const handleEscape = async () => goto(AppRoute.PHOTOS);
+  const handleSelectAll = () => (selectedAssets = new Set(current?.memory.assets || []));
+  const handleAction = async (action: 'reset' | 'pause' | 'play') => {
+    switch (action) {
+      case 'play': {
+        paused = false;
+        await progress.set(1);
+        break;
+      }
+
+      case 'pause': {
+        paused = true;
+        await progress.set($progress);
+        break;
+      }
+
+      case 'reset': {
+        paused = false;
+        resetPromise = progress.set(0);
+        break;
+      }
+    }
+  };
+  const handleProgress = async (progress: number) => {
+    if (progress === 0 && !paused) {
+      await handleAction('play');
+      return;
+    }
+
+    if (progress === 1) {
+      await (current?.next ? handleNextAsset() : handleAction('pause'));
+    }
+  };
+  const handleUpdate = () => {
+    if (!current) {
+      return;
+    }
+    current.memory.assets = current.memory.assets;
+  };
+  const handleRemove = (ids: string[]) => {
+    if (!current) {
+      return;
+    }
+    const idSet = new Set(ids);
+    current.memory.assets = current.memory.assets.filter((asset) => !idSet.has(asset.id));
+    init();
+  };
+
+  const init = () => {
+    $memoryStore = $memoryStore.filter((memory) => memory.assets.length > 0);
+    if ($memoryStore.length === 0) {
+      return handlePromiseError(goto(AppRoute.PHOTOS));
+    }
+
+    current = loadFromParams($memories, $page);
+  };
 
   onMount(async () => {
     if (!$memoryStore) {
@@ -137,28 +194,34 @@
         day: localTime.getDate(),
       });
     }
+
+    init();
   });
 
-  const triggerAssetUpdate = () => (currentMemory.assets = currentMemory.assets);
+  afterNavigate(({ from, to }) => {
+    let target = null;
+    if (to?.params?.assetId) {
+      target = to;
+    } else if (from?.params?.assetId) {
+      target = from;
+    } else {
+      target = $page;
+    }
 
-  const onAssetDelete = (assetIds: string[]) => {
-    const assetIdSet = new Set(assetIds);
-    currentMemory.assets = currentMemory.assets.filter((a: AssetResponseDto) => !assetIdSet.has(a.id));
-  };
-
-  const handleSelectAll = () => {
-    selectedAssets = new Set(currentMemory.assets);
-  };
+    current = loadFromParams($memories, target);
+  });
 </script>
 
 <svelte:window
-  use:shortcuts={[
-    { shortcut: { key: 'ArrowRight' }, onShortcut: () => canGoForward && toNext() },
-    { shortcut: { key: 'd' }, onShortcut: () => canGoForward && toNext() },
-    { shortcut: { key: 'ArrowLeft' }, onShortcut: () => canGoBack && toPrevious() },
-    { shortcut: { key: 'a' }, onShortcut: () => canGoBack && toPrevious() },
-    { shortcut: { key: 'Escape' }, onShortcut: () => goto(AppRoute.PHOTOS) },
-  ]}
+  use:shortcuts={$isViewing
+    ? []
+    : [
+        { shortcut: { key: 'ArrowRight' }, onShortcut: () => handleNextAsset() },
+        { shortcut: { key: 'd' }, onShortcut: () => handleNextAsset() },
+        { shortcut: { key: 'ArrowLeft' }, onShortcut: () => handlePreviousAsset() },
+        { shortcut: { key: 'a' }, onShortcut: () => handlePreviousAsset() },
+        { shortcut: { key: 'Escape' }, onShortcut: () => handleEscape() },
+      ]}
 />
 
 {#if isMultiSelectionMode}
@@ -172,61 +235,56 @@
         <AddToAlbum shared />
       </ButtonContextMenu>
 
-      <FavoriteAction removeFavorite={isAllFavorite} onFavorite={triggerAssetUpdate} />
+      <FavoriteAction removeFavorite={isAllFavorite} onFavorite={handleUpdate} />
 
       <ButtonContextMenu icon={mdiDotsVertical} title={$t('add')}>
         <DownloadAction menuItem />
         <ChangeDate menuItem />
         <ChangeLocation menuItem />
-        <ArchiveAction menuItem unarchive={isAllArchived} onArchive={triggerAssetUpdate} />
-        <DeleteAssets menuItem {onAssetDelete} />
+        <ArchiveAction menuItem unarchive={isAllArchived} onArchive={handleRemove} />
+        <DeleteAssets menuItem onAssetDelete={handleRemove} />
       </ButtonContextMenu>
     </AssetSelectControlBar>
   </div>
 {/if}
 
 <section id="memory-viewer" class="w-full bg-immich-dark-gray" bind:this={memoryWrapper}>
-  {#if currentMemory}
+  {#if current && current.memory.assets.length > 0}
     <ControlAppBar on:close={() => goto(AppRoute.PHOTOS)} forceDark>
       <svelte:fragment slot="leading">
         <p class="text-lg">
-          {$memoryLaneTitle(currentMemory.yearsAgo)}
+          {$memoryLaneTitle(current.memory.yearsAgo)}
         </p>
       </svelte:fragment>
 
-      {#if canGoForward}
-        <div class="flex place-content-center place-items-center gap-2 overflow-hidden">
-          <CircleIconButton
-            title={paused ? $t('play_memories') : $t('pause_memories')}
-            icon={paused ? mdiPlay : mdiPause}
-            on:click={() => (paused = !paused)}
-            class="hover:text-black"
-          />
+      <div class="flex place-content-center place-items-center gap-2 overflow-hidden">
+        <CircleIconButton
+          title={paused ? $t('play_memories') : $t('pause_memories')}
+          icon={paused ? mdiPlay : mdiPause}
+          on:click={() => handleAction(paused ? 'play' : 'pause')}
+          class="hover:text-black"
+        />
 
-          {#each currentMemory.assets as _, index}
-            <a
-              class="relative w-full py-2"
-              href="?{QueryParameter.MEMORY_INDEX}={memoryIndex}&{QueryParameter.ASSET_INDEX}={index}"
-            >
-              <span class="absolute left-0 h-[2px] w-full bg-gray-500" />
-              {#await resetPromise}
-                <span class="absolute left-0 h-[2px] bg-white" style:width={`${index < assetIndex ? 100 : 0}%`} />
-              {:then}
-                <span
-                  class="absolute left-0 h-[2px] bg-white"
-                  style:width={`${index < assetIndex ? 100 : index > assetIndex ? 0 : $progress * 100}%`}
-                />
-              {/await}
-            </a>
-          {/each}
+        {#each current.memory.assets as asset, index}
+          <a class="relative w-full py-2" href={asHref(asset)}>
+            <span class="absolute left-0 h-[2px] w-full bg-gray-500" />
+            {#await resetPromise}
+              <span class="absolute left-0 h-[2px] bg-white" style:width={`${index < current.assetIndex ? 100 : 0}%`} />
+            {:then}
+              <span
+                class="absolute left-0 h-[2px] bg-white"
+                style:width={`${index < current.assetIndex ? 100 : index > current.assetIndex ? 0 : $progress * 100}%`}
+              />
+            {/await}
+          </a>
+        {/each}
 
-          <div>
-            <p class="text-small">
-              {(assetIndex + 1).toLocaleString($locale)}/{currentMemory.assets.length.toLocaleString($locale)}
-            </p>
-          </div>
+        <div>
+          <p class="text-small">
+            {(current.assetIndex + 1).toLocaleString($locale)}/{current.memory.assets.length.toLocaleString($locale)}
+          </p>
         </div>
-      {/if}
+      </div>
     </ControlAppBar>
 
     {#if galleryInView}
@@ -250,22 +308,17 @@
         class="ml-[-100%] box-border flex h-[calc(100vh_-_180px)] w-[300%] items-center justify-center gap-10 overflow-hidden"
       >
         <!-- PREVIOUS MEMORY -->
-        <div
-          class="h-1/2 w-[20vw] rounded-2xl"
-          class:opacity-25={previousMemory}
-          class:opacity-0={!previousMemory}
-          class:hover:opacity-70={previousMemory}
-        >
+        <div class="h-1/2 w-[20vw] rounded-2xl {current.previousMemory ? 'opacity-25 hover:opacity-70' : 'opacity-0'}">
           <button
             type="button"
             class="relative h-full w-full rounded-2xl"
-            disabled={!previousMemory}
-            on:click={toPreviousMemory}
+            disabled={!current.previousMemory}
+            on:click={handlePreviousMemory}
           >
-            {#if previousMemory}
+            {#if current.previousMemory && current.previousMemory.assets.length > 0}
               <img
                 class="h-full w-full rounded-2xl object-cover"
-                src={getAssetThumbnailUrl({ id: previousMemory.assets[0].id, size: AssetMediaSize.Preview })}
+                src={getAssetThumbnailUrl({ id: current.previousMemory.assets[0].id, size: AssetMediaSize.Preview })}
                 alt={$t('previous_memory')}
                 draggable="false"
               />
@@ -279,10 +332,10 @@
               />
             {/if}
 
-            {#if previousMemory}
+            {#if current.previousMemory}
               <div class="absolute bottom-4 right-4 text-left text-white">
                 <p class="text-xs font-semibold text-gray-200">{$t('previous').toUpperCase()}</p>
-                <p class="text-xl">{$memoryLaneTitle(previousMemory.yearsAgo)}</p>
+                <p class="text-xl">{$memoryLaneTitle(current.previousMemory.yearsAgo)}</p>
               </div>
             {/if}
           </button>
@@ -293,12 +346,12 @@
           class="main-view relative flex h-full w-[70vw] place-content-center place-items-center rounded-2xl bg-black"
         >
           <div class="relative h-full w-full rounded-2xl bg-black">
-            {#key currentAsset.id}
+            {#key current.asset.id}
               <img
                 transition:fade
                 class="h-full w-full rounded-2xl object-contain transition-all"
-                src={getAssetThumbnailUrl({ id: currentAsset.id, size: AssetMediaSize.Preview })}
-                alt={currentAsset.exifInfo?.description}
+                src={getAssetThumbnailUrl({ id: current.asset.id, size: AssetMediaSize.Preview })}
+                alt={current.asset.exifInfo?.description}
                 draggable="false"
               />
             {/key}
@@ -309,59 +362,59 @@
               class:opacity-100={!galleryInView}
             >
               <CircleIconButton
-                href="{AppRoute.PHOTOS}?at={currentAsset.id}"
+                href="{AppRoute.PHOTOS}?at={current.asset.id}"
                 icon={mdiImageSearch}
                 title={$t('view_in_timeline')}
                 color="light"
               />
             </div>
             <!-- CONTROL BUTTONS -->
-            {#if canGoBack}
+            {#if current.previous}
               <div class="absolute top-1/2 left-0 ml-4">
                 <CircleIconButton
                   title={$t('previous_memory')}
                   icon={mdiChevronLeft}
                   color="dark"
-                  on:click={toPrevious}
+                  on:click={handlePreviousAsset}
                 />
               </div>
             {/if}
 
-            {#if canGoForward}
+            {#if current.next}
               <div class="absolute top-1/2 right-0 mr-4">
-                <CircleIconButton title={$t('next_memory')} icon={mdiChevronRight} color="dark" on:click={toNext} />
+                <CircleIconButton
+                  title={$t('next_memory')}
+                  icon={mdiChevronRight}
+                  color="dark"
+                  on:click={handleNextAsset}
+                />
               </div>
             {/if}
 
             <div class="absolute left-8 top-4 text-sm font-medium text-white">
               <p>
-                {fromLocalDateTime(currentMemory.assets[0].localDateTime).toLocaleString(DateTime.DATE_FULL)}
+                {fromLocalDateTime(current.memory.assets[0].localDateTime).toLocaleString(DateTime.DATE_FULL)}
               </p>
               <p>
-                {currentAsset.exifInfo?.city || ''}
-                {currentAsset.exifInfo?.country || ''}
+                {current.asset.exifInfo?.city || ''}
+                {current.asset.exifInfo?.country || ''}
               </p>
             </div>
           </div>
         </div>
 
         <!-- NEXT MEMORY -->
-        <div
-          class="h-1/2 w-[20vw] rounded-xl"
-          class:opacity-25={nextMemory}
-          class:opacity-0={!nextMemory}
-          class:hover:opacity-70={nextMemory}
-        >
+        <div class="h-1/2 w-[20vw] rounded-2xl {current.nextMemory ? 'opacity-25 hover:opacity-70' : 'opacity-0'}">
           <button
             type="button"
             class="relative h-full w-full rounded-2xl"
-            on:click={toNextMemory}
-            disabled={!nextMemory}
+            on:click={handleNextMemory}
+            disabled={!current.nextMemory}
           >
-            {#if nextMemory}
+            {#if current.nextMemory && current.nextMemory.assets.length > 0}
               <img
                 class="h-full w-full rounded-2xl object-cover"
-                src={getAssetThumbnailUrl({ id: nextMemory.assets[0].id, size: AssetMediaSize.Preview })}
+                src={getAssetThumbnailUrl({ id: current.nextMemory.assets[0].id, size: AssetMediaSize.Preview })}
                 alt={$t('next_memory')}
                 draggable="false"
               />
@@ -375,10 +428,10 @@
               />
             {/if}
 
-            {#if nextMemory}
+            {#if current.nextMemory}
               <div class="absolute bottom-4 left-4 text-left text-white">
                 <p class="text-xs font-semibold text-gray-200">{$t('up_next').toUpperCase()}</p>
-                <p class="text-xl">{$memoryLaneTitle(nextMemory.yearsAgo)}</p>
+                <p class="text-xl">{$memoryLaneTitle(current.nextMemory.yearsAgo)}</p>
               </div>
             {/if}
           </button>
@@ -411,7 +464,13 @@
         use:resizeObserver={({ height, width }) => ((viewport.height = height), (viewport.width = width))}
         bind:this={memoryGallery}
       >
-        <GalleryViewer assets={currentMemory.assets} {viewport} bind:selectedAssets />
+        <GalleryViewer
+          onNext={handleNextAsset}
+          onPrevious={handlePreviousAsset}
+          assets={current.memory.assets}
+          {viewport}
+          bind:selectedAssets
+        />
       </div>
     </section>
   {/if}
diff --git a/web/src/lib/components/photos-page/memory-lane.svelte b/web/src/lib/components/photos-page/memory-lane.svelte
index 5bc55796ae..459c7a6118 100644
--- a/web/src/lib/components/photos-page/memory-lane.svelte
+++ b/web/src/lib/components/photos-page/memory-lane.svelte
@@ -69,11 +69,11 @@
       </div>
     {/if}
     <div class="inline-block" use:resizeObserver={({ width }) => (innerWidth = width)}>
-      {#each $memoryStore as memory, index (memory.yearsAgo)}
+      {#each $memoryStore as memory (memory.yearsAgo)}
         {#if memory.assets.length > 0}
           <a
             class="memory-card relative mr-8 inline-block aspect-video h-[215px] rounded-xl"
-            href="{AppRoute.MEMORY}?{QueryParameter.MEMORY_INDEX}={index}"
+            href="{AppRoute.MEMORY}?{QueryParameter.ID}={memory.assets[0].id}"
           >
             <img
               class="h-full w-full rounded-xl object-cover"
diff --git a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
index c7b49f6012..d64d784177 100644
--- a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
+++ b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
@@ -24,6 +24,8 @@
   export let viewport: Viewport;
   export let onIntersected: (() => void) | undefined = undefined;
   export let showAssetName = false;
+  export let onPrevious: (() => Promise<AssetResponseDto | undefined>) | undefined = undefined;
+  export let onNext: (() => Promise<AssetResponseDto | undefined>) | undefined = undefined;
 
   let { isViewing: isViewerOpen, asset: viewingAsset, setAsset } = assetViewingStore;
 
@@ -50,8 +52,9 @@
 
   const handleNext = async () => {
     try {
-      if (currentViewAssetIndex < assets.length - 1) {
-        setAsset(assets[++currentViewAssetIndex]);
+      const asset = onNext ? await onNext() : assets[++currentViewAssetIndex];
+      if (asset) {
+        setAsset(asset);
         await navigate({ targetRoute: 'current', assetId: $viewingAsset.id });
       }
     } catch (error) {
@@ -61,8 +64,9 @@
 
   const handlePrevious = async () => {
     try {
-      if (currentViewAssetIndex > 0) {
-        setAsset(assets[--currentViewAssetIndex]);
+      const asset = onPrevious ? await onPrevious() : assets[--currentViewAssetIndex];
+      if (asset) {
+        setAsset(asset);
         await navigate({ targetRoute: 'current', assetId: $viewingAsset.id });
       }
     } catch (error) {
diff --git a/web/src/lib/constants.ts b/web/src/lib/constants.ts
index 05011680dc..7af4635a84 100644
--- a/web/src/lib/constants.ts
+++ b/web/src/lib/constants.ts
@@ -71,9 +71,8 @@ export const dateFormats = {
 
 export enum QueryParameter {
   ACTION = 'action',
-  ASSET_INDEX = 'assetIndex',
+  ID = 'id',
   IS_OPEN = 'isOpen',
-  MEMORY_INDEX = 'memoryIndex',
   ONBOARDING_STEP = 'step',
   OPEN_SETTING = 'openSetting',
   PREVIOUS_ROUTE = 'previousRoute',