wip

Author: midzelis

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -41,6 +41,7 @@
   import { fly, slide } from 'svelte/transition';
 
   import { eventManager } from '$lib/managers/event-manager.svelte';
+  import { viewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
   import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
   import ActivityStatus from './activity-status.svelte';
   import ActivityViewer from './activity-viewer.svelte';
@@ -164,15 +165,31 @@
   console.log('on create - assetviwer');
 
   let transitionName = $state<string | null>('good');
+
   $inspect(transitionName).with((a, b) => console.log('trans', a, b));
   $inspect(asset).with(console.log);
+  let addInfoTransition;
+  let finished;
   onMount(async () => {
+    debugger;
+    addInfoTransition = () => {
+      console.log('adding info');
+      detailPanelTransitionName = 'info';
+    };
+    eventManager.on('TransitionToAssetViewer', addInfoTransition);
+    eventManager.on('TransitionToTimeline', addInfoTransition);
+    finished = () => {
+      console.log('removing info');
+      detailPanelTransitionName = null;
+      transitionName = null;
+      console.log('clearning tasnition name in asset viwer');
+    };
+    eventManager.on('Finished', finished);
+
     console.log('on mount - assetviwer');
     eventManager.emit('AssetViewerLoaded');
     eventManager.on('Finished', () => {
       debugger;
-      transitionName = null;
-      console.log('clearning tasnition name in asset viwer');
     });
     unsubscribes.push(
       websocketEvents.on('on_upload_success', (asset) => onAssetUpdate({ event: 'upload', asset })),
@@ -215,6 +232,10 @@
     }
 
     activityManager.reset();
+    console.log('offing');
+    eventManager.off('TransitionToAssetViewer', addInfoTransition!);
+    eventManager.off('TransitionToTimeline', addInfoTransition!);
+    eventManager.off('Finished', finished!);
   });
 
   const handleGetAllAlbums = async () => {
@@ -260,31 +281,40 @@
         return;
       }
     }
-    transitionName = order;
 
-    const navigatingPromise = new Promise((resolve) => {
-      eventManager.once('loaded', () => {
-        resolve();
-      });
-
-      console.log('BEFORE VIEW TRANS');
-      debugger;
-      const transition = document.startViewTransition(async () => {
-        console.log('IN VIEW TRANS');
-        console.log('emit', 'StartViewTransition');
-        eventManager.emit('StartViewTransition');
-        console.log('starting');
-        debugger;
-
-        await navigatingPromise;
-        debugger;
-        console.log('AFTER VIEW TRANS!');
-      });
-      transition.updateCallbackDone.then(() => {
-        console.log('DONE VIEW TRANS!');
-        eventManager.emit('EndViewTransition');
-      });
-    });
+    transitionName = order;
+    detailPanelTransitionName = 'onTop';
+
+    viewTransitionManager.startTransition(
+      new Promise<void>((resolve) => {
+        eventManager.once('RenderLoaded', () => {
+          resolve();
+        });
+      }),
+    );
+    // const navigatingPromise = new Promise((resolve) => {
+    //   eventManager.once('loaded', () => {
+    //     resolve();
+    //   });
+
+    //   console.log('BEFORE VIEW TRANS');
+    //   debugger;
+    //   const transition = document.startViewTransition(async () => {
+    //     console.log('IN VIEW TRANS');
+    //     console.log('emit', 'StartViewTransition');
+    //     eventManager.emit('StartViewTransition');
+    //     console.log('starting');
+    //     debugger;
+
+    //     await navigatingPromise;
+    //     debugger;
+    //     console.log('AFTER VIEW TRANS!');
+    //   });
+    //   transition.updateCallbackDone.then(() => {
+    //     console.log('DONE VIEW TRANS!');
+    //     eventManager.emit('EndViewTransition');
+    //   });
+    // });
 
     e?.stopPropagation();
 
@@ -311,6 +341,9 @@
       }
     }
   };
+  onDestroy(() => {
+    console.log('destryo');
+  });
 
   // const showEditorHandler = () => {
   //   if (isShowActivity) {
@@ -447,6 +480,7 @@
     }
   });
   let viewerHeight = $state<number>(0);
+  let detailPanelTransitionName = $state<string | null>(null);
 </script>
 
 <OnEvents onAssetReplace={handleAssetReplace} />
@@ -626,7 +660,7 @@
     <div
       transition:slide={{ axis: 'x', duration: 150 }}
       id="detail-panel"
-      style:view-transition-name="info"
+      style:view-transition-name={detailPanelTransitionName}
       class="row-start-1 row-span-4 w-[360px] overflow-y-auto transition-all dark:border-l dark:border-s-immich-dark-gray bg-light"
       translate="yes"
     >

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -195,12 +195,14 @@
     imageLoaded = true;
     assetFileUrl = imageLoaderUrl;
     originalImageLoaded = targetImageSize === AssetMediaSize.Fullsize || targetImageSize === 'original';
-    console.log('load', imageLoaderUrl, imageLoaded);
-    eventManager.emit('loaded');
+    console.log('RenderLoaded', imageLoaderUrl, imageLoaded);
+    eventManager.emit('RenderLoaded');
   };
 
   const onerror = () => {
     imageError = imageLoaded = true;
+    console.log('RenderLoaded err', imageLoaderUrl, imageLoaded);
+    eventManager.emit('RenderLoaded');
   };
 
   $effect(() => {

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -211,9 +211,7 @@
       document.removeEventListener('pointermove', moveHandler, true);
     };
   });
-  onDestroy(() => {
-    console.log(asset.id);
-  });
+  onDestroy(() => {});
 
   let transitionToAssetViewer = $state(false);
   let rect = $state<DOMRect>();

web/src/lib/components/timeline/TimelineDateGroup.svelte

@@ -16,7 +16,7 @@
   import { fromTimelinePlainDate, getDateLocaleString } from '$lib/utils/timeline-util';
   import { Icon } from '@immich/ui';
   import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
-  import { type Snippet } from 'svelte';
+  import { tick, type Snippet } from 'svelte';
 
   let { isUploading } = uploadAssetsStore;
   let { isViewing: showAssetViewer } = assetViewingStore;
@@ -250,7 +250,13 @@
               // tag  target on the 'old' snaptho
               animationTargetAssetId = asset.id;
               viewTransitionManager.startTransition(
-                new Promise<void>((resolve) => eventManager.once('AssetViewerLoaded', () => resolve())),
+                new Promise<void>((resolve) =>
+                  eventManager.once('AssetViewerLoaded', () => {
+                    eventManager.emit('TransitionToAssetViewer');
+                    tick().then(resolve, () => void 0);
+                    // resolve();
+                  }),
+                ),
               );
 
               eventManager.once('StartViewTransition', () => {
@@ -321,6 +327,11 @@
   :global(::view-transition-new(info)) {
     animation: 250ms ease-in 0s flyInRight forwards;
   }
+  :global(::view-transition-old(onTop)),
+  :global(::view-transition-new(onTop)) {
+    z-index: 1000000;
+    animation: none;
+  }
 
   :global(::view-transition-old(*)) {
     /* z-index: 10000; */
@@ -345,20 +356,28 @@
     /* z-index: 10000; */
     animation: 350ms flyOutLeft;
     transform-origin: center;
+    height: 100%;
+    object-fit: contain;
   }
   :global(::view-transition-new(next)) {
     animation: 350ms flyInRight;
     transform-origin: center;
+    height: 100%;
+    object-fit: contain;
   }
 
   :global(::view-transition-old(previous)) {
     /* z-index: 10000; */
     animation: 350ms flyOutRight;
     transform-origin: center;
+    height: 100%;
+    object-fit: contain;
   }
   :global(::view-transition-new(previous)) {
     animation: 350ms flyInLeft;
     transform-origin: center;
+    height: 100%;
+    object-fit: contain;
   }
 
   @keyframes -global-flyInLeft {

web/src/lib/managers/ViewTransitionManager.svelte.ts

@@ -7,19 +7,25 @@ class ViewTransitionManager {
     eventManager.emit('BeforeStartViewTransition');
     // next call will create the 'old' view snapshot
     const transition = document.startViewTransition(async () => {
-      // Good time to remove any view-transition-name styles created during
-      // BeforeStartViewTransition, then trigger the actual view transition.
-      eventManager.emit('StartViewTransition');
-      await domUpdateComplete;
+      try {
+        // Good time to remove any view-transition-name styles created during
+        // BeforeStartViewTransition, then trigger the actual view transition.
+        eventManager.emit('StartViewTransition');
+        await domUpdateComplete;
+      } catch (e) {
+        console.log('EXCETPION', e);
+      }
     });
     // UpdateCallbackDone is a good time to add any view-transition-name styles
     // to the new DOM state, before the 'new' view snapshot is creatd
-    transition.updateCallbackDone.then(() => eventManager.emit('UpdateCallbackDone'));
+    transition.updateCallbackDone
+      .then(() => eventManager.emit('UpdateCallbackDone'))
+      .catch((e) => console.log('EXCEPTION', e));
     // Both old/new snapshots are taken - pseudo elements are created, transition is
     // about to start
-    transition.ready.then(() => eventManager.emit('Ready'));
+    transition.ready.then(() => eventManager.emit('Ready')).catch((e) => console.log('EXCEPTION', e));
     // Transition is complete
-    transition.finished.then(() => eventManager.emit('Finished'));
+    transition.finished.then(() => eventManager.emit('Finished')).catch((e) => console.log('EXCEPTION IN IFNISHED', e));
     transition.finished.then(() => finishedCallback?.());
   }
 }

web/src/lib/managers/event-manager.svelte.ts

@@ -47,6 +47,8 @@ export type Events = {
   TransitionToAssetViewer: [];
   AssetViewerLoaded: [];
 
+  RenderLoaded: [];
+
   BeforeStartViewTransition: [];
   Finished: [];
   Ready: [];