From bd708249614028ccbfdaa8c6646ead1c55d44bb5 Mon Sep 17 00:00:00 2001
From: Dag Stuan <dag.stuan@bekk.no>
Date: Tue, 17 Jun 2025 16:09:34 +0200
Subject: [PATCH] fix(web): more refactoring and tweaking of the memory viewer.
 (#19214)

* Fix fade in for video-native-viewer.

The previous implementation never actually faded in the video element.
Fix this by ensuring the video element is only added to the DOM after
mounting, so Svelte can handle the fade-in transition correctly.

* Refactor asset viewing in memory page.

Split photo and video viewing into separate components to ensure they
work similarly to the assets viewer. The previous implementation faded
out the assets, while the assets-viewer only fades assets in. For
images, add a spinner while waiting for the image to load, before adding
the image to the DOM. For videos, add the video to the DOM after
mounting the component. In both cases, the assets fade in smoothly, like
the regular assets viewer.

* fix: styling

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
---
 .../asset-viewer/video-native-viewer.svelte   | 112 +++++++++---------
 .../memory-page/memory-photo-viewer.svelte    |  69 +++++++++++
 .../memory-page/memory-video-viewer.svelte    |  40 +++++++
 .../memory-page/memory-viewer.svelte          |  92 +++++++-------
 .../shared-components/control-app-bar.svelte  |   3 -
 5 files changed, 209 insertions(+), 107 deletions(-)
 create mode 100644 web/src/lib/components/memory-page/memory-photo-viewer.svelte
 create mode 100644 web/src/lib/components/memory-page/memory-video-viewer.svelte

diff --git a/web/src/lib/components/asset-viewer/video-native-viewer.svelte b/web/src/lib/components/asset-viewer/video-native-viewer.svelte
index 8205c8c353..4b8bb40f77 100644
--- a/web/src/lib/components/asset-viewer/video-native-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/video-native-viewer.svelte
@@ -2,6 +2,7 @@
   import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
   import VideoRemoteViewer from '$lib/components/asset-viewer/video-remote-viewer.svelte';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+  import { assetViewerFadeDuration } from '$lib/constants';
   import { castManager } from '$lib/managers/cast-manager.svelte';
   import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import { loopVideo as loopVideoPreference, videoViewerMuted, videoViewerVolume } from '$lib/stores/preferences.store';
@@ -41,8 +42,11 @@
   let assetFileUrl = $state('');
   let forceMuted = $state(false);
   let isScrubbing = $state(false);
+  let showVideo = $state(false);
 
   onMount(() => {
+    // Show video after mount to ensure fading in.
+    showVideo = true;
     assetFileUrl = getAssetPlaybackUrl({ id: assetId, cacheKey });
     if (videoPlayer) {
       forceMuted = false;
@@ -102,59 +106,61 @@
   });
 </script>
 
-<div
-  transition:fade={{ duration: 150 }}
-  class="flex h-full select-none place-content-center place-items-center"
-  bind:clientWidth={containerWidth}
-  bind:clientHeight={containerHeight}
->
-  {#if castManager.isCasting}
-    <div class="place-content-center h-full place-items-center">
-      <VideoRemoteViewer
-        poster={getAssetThumbnailUrl({ id: assetId, size: AssetMediaSize.Preview, cacheKey })}
-        {onVideoStarted}
-        {onVideoEnded}
-        {assetFileUrl}
-      />
-    </div>
-  {:else}
-    <video
-      bind:this={videoPlayer}
-      loop={$loopVideoPreference && loopVideo}
-      autoplay
-      playsinline
-      controls
-      class="h-full object-contain"
-      use:swipe={() => ({})}
-      onswipe={onSwipe}
-      oncanplay={(e) => handleCanPlay(e.currentTarget)}
-      onended={onVideoEnded}
-      onvolumechange={(e) => {
-        if (!forceMuted) {
-          $videoViewerMuted = e.currentTarget.muted;
-        }
-      }}
-      onseeking={() => (isScrubbing = true)}
-      onseeked={() => (isScrubbing = false)}
-      onplaying={(e) => {
-        e.currentTarget.focus();
-      }}
-      onclose={() => onClose()}
-      muted={forceMuted || $videoViewerMuted}
-      bind:volume={$videoViewerVolume}
-      poster={getAssetThumbnailUrl({ id: assetId, size: AssetMediaSize.Preview, cacheKey })}
-      src={assetFileUrl}
-    >
-    </video>
-
-    {#if isLoading}
-      <div class="absolute flex place-content-center place-items-center">
-        <LoadingSpinner />
+{#if showVideo}
+  <div
+    transition:fade={{ duration: assetViewerFadeDuration }}
+    class="flex h-full select-none place-content-center place-items-center"
+    bind:clientWidth={containerWidth}
+    bind:clientHeight={containerHeight}
+  >
+    {#if castManager.isCasting}
+      <div class="place-content-center h-full place-items-center">
+        <VideoRemoteViewer
+          poster={getAssetThumbnailUrl({ id: assetId, size: AssetMediaSize.Preview, cacheKey })}
+          {onVideoStarted}
+          {onVideoEnded}
+          {assetFileUrl}
+        />
       </div>
-    {/if}
+    {:else}
+      <video
+        bind:this={videoPlayer}
+        loop={$loopVideoPreference && loopVideo}
+        autoplay
+        playsinline
+        controls
+        class="h-full object-contain"
+        use:swipe={() => ({})}
+        onswipe={onSwipe}
+        oncanplay={(e) => handleCanPlay(e.currentTarget)}
+        onended={onVideoEnded}
+        onvolumechange={(e) => {
+          if (!forceMuted) {
+            $videoViewerMuted = e.currentTarget.muted;
+          }
+        }}
+        onseeking={() => (isScrubbing = true)}
+        onseeked={() => (isScrubbing = false)}
+        onplaying={(e) => {
+          e.currentTarget.focus();
+        }}
+        onclose={() => onClose()}
+        muted={forceMuted || $videoViewerMuted}
+        bind:volume={$videoViewerVolume}
+        poster={getAssetThumbnailUrl({ id: assetId, size: AssetMediaSize.Preview, cacheKey })}
+        src={assetFileUrl}
+      >
+      </video>
 
-    {#if isFaceEditMode.value}
-      <FaceEditor htmlElement={videoPlayer} {containerWidth} {containerHeight} {assetId} />
+      {#if isLoading}
+        <div class="absolute flex place-content-center place-items-center">
+          <LoadingSpinner />
+        </div>
+      {/if}
+
+      {#if isFaceEditMode.value}
+        <FaceEditor htmlElement={videoPlayer} {containerWidth} {containerHeight} {assetId} />
+      {/if}
     {/if}
-  {/if}
-</div>
+  </div>
+{/if}
diff --git a/web/src/lib/components/memory-page/memory-photo-viewer.svelte b/web/src/lib/components/memory-page/memory-photo-viewer.svelte
new file mode 100644
index 0000000000..b0b1dc98a6
--- /dev/null
+++ b/web/src/lib/components/memory-page/memory-photo-viewer.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+  import { assetViewerFadeDuration } from '$lib/constants';
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import { getAssetThumbnailUrl } from '$lib/utils';
+  import { getAltText } from '$lib/utils/thumbnail-util';
+  import { AssetMediaSize } from '@immich/sdk';
+  import { onMount } from 'svelte';
+  import { fade } from 'svelte/transition';
+
+  interface Props {
+    asset: TimelineAsset;
+  }
+
+  const { asset }: Props = $props();
+
+  let assetFileUrl: string = $state('');
+  let imageLoaded: boolean = $state(false);
+  let loader = $state<HTMLImageElement>();
+
+  const onload = () => {
+    imageLoaded = true;
+    assetFileUrl = imageLoaderUrl;
+  };
+
+  onMount(() => {
+    if (loader?.complete) {
+      onload();
+    }
+    loader?.addEventListener('load', onload);
+    return () => {
+      loader?.removeEventListener('load', onload);
+    };
+  });
+
+  const imageLoaderUrl = $derived(getAssetThumbnailUrl({ id: asset.id, size: AssetMediaSize.Preview }));
+</script>
+
+{#if !imageLoaded}
+  <!-- svelte-ignore a11y_missing_attribute -->
+  <img bind:this={loader} style="display:none" src={imageLoaderUrl} aria-hidden="true" />
+{/if}
+
+{#if !imageLoaded}
+  <div id="spinner" class="flex h-full items-center justify-center">
+    <LoadingSpinner />
+  </div>
+{:else if imageLoaded}
+  <div transition:fade={{ duration: assetViewerFadeDuration }} class="h-full w-full">
+    <img
+      class="h-full w-full rounded-2xl object-contain transition-all"
+      src={assetFileUrl}
+      alt={$getAltText(asset)}
+      draggable="false"
+    />
+  </div>
+{/if}
+
+<style>
+  @keyframes delayedVisibility {
+    to {
+      visibility: visible;
+    }
+  }
+  #spinner {
+    visibility: hidden;
+    animation: 0s linear 0.4s forwards delayedVisibility;
+  }
+</style>
diff --git a/web/src/lib/components/memory-page/memory-video-viewer.svelte b/web/src/lib/components/memory-page/memory-video-viewer.svelte
new file mode 100644
index 0000000000..7758b067f3
--- /dev/null
+++ b/web/src/lib/components/memory-page/memory-video-viewer.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { assetViewerFadeDuration } from '$lib/constants';
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import { getAssetPlaybackUrl, getAssetThumbnailUrl } from '$lib/utils';
+  import { AssetMediaSize } from '@immich/sdk';
+  import { onMount } from 'svelte';
+  import { fade } from 'svelte/transition';
+
+  interface Props {
+    asset: TimelineAsset;
+    videoPlayer: HTMLVideoElement | undefined;
+    videoViewerMuted?: boolean;
+    videoViewerVolume?: number;
+  }
+
+  let { asset, videoPlayer = $bindable(), videoViewerVolume, videoViewerMuted }: Props = $props();
+
+  let showVideo: boolean = $state(false);
+
+  onMount(() => {
+    // Show video after mount to ensure fading in.
+    showVideo = true;
+  });
+</script>
+
+{#if showVideo}
+  <div class="h-full w-full bg-pink-9000" transition:fade={{ duration: assetViewerFadeDuration }}>
+    <video
+      bind:this={videoPlayer}
+      autoplay
+      playsinline
+      class="h-full w-full rounded-2xl object-contain transition-all"
+      src={getAssetPlaybackUrl({ id: asset.id })}
+      poster={getAssetThumbnailUrl({ id: asset.id, size: AssetMediaSize.Preview })}
+      draggable="false"
+      muted={videoViewerMuted}
+      volume={videoViewerVolume}
+    ></video>
+  </div>
+{/if}
diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte
index 77ccebe42b..f1a15f4429 100644
--- a/web/src/lib/components/memory-page/memory-viewer.svelte
+++ b/web/src/lib/components/memory-page/memory-viewer.svelte
@@ -4,6 +4,8 @@
   import { intersectionObserver } from '$lib/actions/intersection-observer';
   import { resizeObserver } from '$lib/actions/resize-observer';
   import { shortcuts } from '$lib/actions/shortcut';
+  import MemoryPhotoViewer from '$lib/components/memory-page/memory-photo-viewer.svelte';
+  import MemoryVideoViewer from '$lib/components/memory-page/memory-video-viewer.svelte';
   import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
   import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
   import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
@@ -23,7 +25,7 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import { AppRoute, assetViewerFadeDuration, QueryParameter } from '$lib/constants';
+  import { AppRoute, QueryParameter } from '$lib/constants';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -31,9 +33,8 @@
   import { type MemoryAsset, memoryStore } from '$lib/stores/memory.store.svelte';
   import { locale, videoViewerMuted, videoViewerVolume } from '$lib/stores/preferences.store';
   import { preferences } from '$lib/stores/user.store';
-  import { getAssetPlaybackUrl, getAssetThumbnailUrl, handlePromiseError, memoryLaneTitle } from '$lib/utils';
+  import { getAssetThumbnailUrl, handlePromiseError, memoryLaneTitle } from '$lib/utils';
   import { cancelMultiselect } from '$lib/utils/asset-utils';
-  import { getAltText } from '$lib/utils/thumbnail-util';
   import { fromISODateTimeUTC, toTimelineAsset } from '$lib/utils/timeline-util';
   import { AssetMediaSize, getAssetInfo } from '@immich/sdk';
   import { IconButton } from '@immich/ui';
@@ -59,7 +60,6 @@
   import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
   import { Tween } from 'svelte/motion';
-  import { fade } from 'svelte/transition';
 
   let memoryGallery: HTMLElement | undefined = $state();
   let memoryWrapper: HTMLElement | undefined = $state();
@@ -363,15 +363,16 @@
       {/snippet}
 
       <div class="flex place-content-center place-items-center gap-2 overflow-hidden">
-        <IconButton
-          shape="round"
-          variant="ghost"
-          color="secondary"
-          aria-label={paused ? $t('play_memories') : $t('pause_memories')}
-          icon={paused ? mdiPlay : mdiPause}
-          onclick={() => handlePromiseError(handleAction('PlayPauseButtonClick', paused ? 'play' : 'pause'))}
-          class="hover:text-black"
-        />
+        <div class="w-[50px] dark">
+          <IconButton
+            shape="round"
+            variant="ghost"
+            color="secondary"
+            aria-label={paused ? $t('play_memories') : $t('pause_memories')}
+            icon={paused ? mdiPlay : mdiPause}
+            onclick={() => handlePromiseError(handleAction('PlayPauseButtonClick', paused ? 'play' : 'pause'))}
+          />
+        </div>
 
         {#each current.memory.assets as asset, index (asset.id)}
           <a class="relative w-full py-2" href={asHref(asset)} aria-label={$t('view')}>
@@ -385,20 +386,23 @@
             {(current.assetIndex + 1).toLocaleString($locale)}/{current.memory.assets.length.toLocaleString($locale)}
           </p>
         </div>
-        <IconButton
-          shape="round"
-          variant="ghost"
-          color="secondary"
-          aria-label={$videoViewerMuted ? $t('unmute_memories') : $t('mute_memories')}
-          icon={$videoViewerMuted ? mdiVolumeOff : mdiVolumeHigh}
-          onclick={() => ($videoViewerMuted = !$videoViewerMuted)}
-        />
+
+        <div class="w-[50px] dark">
+          <IconButton
+            shape="round"
+            variant="ghost"
+            color="secondary"
+            aria-label={$videoViewerMuted ? $t('unmute_memories') : $t('mute_memories')}
+            icon={$videoViewerMuted ? mdiVolumeOff : mdiVolumeHigh}
+            onclick={() => ($videoViewerMuted = !$videoViewerMuted)}
+          />
+        </div>
       </div>
     </ControlAppBar>
 
     {#if galleryInView}
       <div
-        class="fixed top-20 start-1/2 -translate-x-1/2 transition-opacity"
+        class="fixed top-10 start-1/2 -translate-x-1/2 transition-opacity dark z-1"
         class:opacity-0={!galleryInView}
         class:opacity-100={galleryInView}
       >
@@ -409,7 +413,6 @@
         >
           <IconButton
             shape="round"
-            variant="ghost"
             color="secondary"
             aria-label={$t('hide_gallery')}
             icon={mdiChevronUp}
@@ -463,30 +466,16 @@
         >
           <div class="relative h-full w-full rounded-2xl bg-black">
             {#key current.asset.id}
-              <div transition:fade={{ duration: assetViewerFadeDuration }} class="h-full w-full">
-                {#if current.asset.isVideo}
-                  <video
-                    bind:this={videoPlayer}
-                    autoplay
-                    playsinline
-                    class="h-full w-full rounded-2xl object-contain transition-all"
-                    src={getAssetPlaybackUrl({ id: current.asset.id })}
-                    poster={getAssetThumbnailUrl({ id: current.asset.id, size: AssetMediaSize.Preview })}
-                    draggable="false"
-                    muted={$videoViewerMuted}
-                    volume={$videoViewerVolume}
-                    transition:fade
-                  ></video>
-                {:else}
-                  <img
-                    class="h-full w-full rounded-2xl object-contain transition-all"
-                    src={getAssetThumbnailUrl({ id: current.asset.id, size: AssetMediaSize.Preview })}
-                    alt={$getAltText(current.asset)}
-                    draggable="false"
-                    transition:fade
-                  />
-                {/if}
-              </div>
+              {#if current.asset.isVideo}
+                <MemoryVideoViewer
+                  asset={current.asset}
+                  bind:videoPlayer
+                  videoViewerMuted={$videoViewerMuted}
+                  videoViewerVolume={$videoViewerVolume}
+                />
+              {:else}
+                <MemoryPhotoViewer asset={current.asset} />
+              {/if}
             {/key}
 
             <div
@@ -543,26 +532,28 @@
             </div>
             <!-- CONTROL BUTTONS -->
             {#if current.previous}
-              <div class="absolute top-1/2 start-0 ms-4">
+              <div class="absolute top-1/2 start-0 ms-4 dark">
                 <IconButton
                   shape="round"
                   aria-label={$t('previous_memory')}
                   icon={mdiChevronLeft}
                   variant="ghost"
                   color="secondary"
+                  size="giant"
                   onclick={handlePreviousAsset}
                 />
               </div>
             {/if}
 
             {#if current.next}
-              <div class="absolute top-1/2 end-0 me-4">
+              <div class="absolute top-1/2 end-0 me-4 dark">
                 <IconButton
                   shape="round"
                   aria-label={$t('next_memory')}
                   icon={mdiChevronRight}
                   variant="ghost"
                   color="secondary"
+                  size="giant"
                   onclick={handleNextAsset}
                 />
               </div>
@@ -626,13 +617,12 @@
   <!-- GALLERY VIEWER -->
   <section class="bg-immich-dark-gray p-4">
     <div
-      class="sticky mb-10 flex place-content-center place-items-center transition-all"
+      class="sticky mb-10 flex place-content-center place-items-center transition-all dark"
       class:opacity-0={galleryInView}
       class:opacity-100={!galleryInView}
     >
       <IconButton
         shape="round"
-        variant="ghost"
         color="secondary"
         aria-label={$t('show_gallery')}
         icon={mdiChevronDown}
diff --git a/web/src/lib/components/shared-components/control-app-bar.svelte b/web/src/lib/components/shared-components/control-app-bar.svelte
index 22ee340006..a28dfd45cf 100644
--- a/web/src/lib/components/shared-components/control-app-bar.svelte
+++ b/web/src/lib/components/shared-components/control-app-bar.svelte
@@ -62,8 +62,6 @@
       document.removeEventListener('scroll', onScroll);
     }
   });
-
-  let buttonClass = $derived(forceDark ? 'hover:text-immich-dark-gray' : undefined);
 </script>
 
 <div in:fly={{ y: 10, duration: 200 }} class="absolute top-0 w-full bg-transparent">
@@ -90,7 +88,6 @@
           variant="ghost"
           icon={backIcon}
           size="large"
-          class={buttonClass}
         />
       {/if}
       {@render leading?.()}