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>

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}