most bugs fixed

Author: midzelis

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

@@ -162,35 +162,22 @@
     }
   };
 
-  console.log('on create - assetviwer');
+  let transitionName = $state<string | null>('hero');
 
-  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;
-    });
     unsubscribes.push(
       websocketEvents.on('on_upload_success', (asset) => onAssetUpdate({ event: 'upload', asset })),
       websocketEvents.on('on_asset_update', (asset) => onAssetUpdate({ event: 'update', asset })),
@@ -232,7 +219,6 @@
     }
 
     activityManager.reset();
-    console.log('offing');
     eventManager.off('TransitionToAssetViewer', addInfoTransition!);
     eventManager.off('TransitionToTimeline', addInfoTransition!);
     eventManager.off('Finished', finished!);
@@ -263,7 +249,7 @@
   };
 
   const closeViewer = () => {
-    transitionName = 'good';
+    transitionName = 'hero';
     onClose(asset);
   };
 
@@ -292,29 +278,6 @@
         });
       }),
     );
-    // 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();
 
@@ -341,9 +304,6 @@
       }
     }
   };
-  onDestroy(() => {
-    console.log('destryo');
-  });
 
   // const showEditorHandler = () => {
   //   if (isShowActivity) {
@@ -481,6 +441,7 @@
   });
   let viewerHeight = $state<number>(0);
   let detailPanelTransitionName = $state<string | null>(null);
+  let loaded = $state(false);
 </script>
 
 <OnEvents onAssetReplace={handleAssetReplace} />
@@ -496,7 +457,10 @@
 >
   <!-- Top navigation bar -->
   {#if $slideshowState === SlideshowState.None && !isShowEditor}
-    <div class="col-span-4 col-start-1 row-span-1 row-start-1 transition-transform">
+    <div
+      class="col-span-4 col-start-1 row-span-1 row-start-1 transition-transform"
+      style:view-transition-name="exclude"
+    >
       <AssetViewerNavBar
         {asset}
         {album}
@@ -550,13 +514,16 @@
       bind:clientHeight={viewerHeight}
       class="z-[-1] relative col-start-1 col-span-4 row-start-1 row-span-full flex items-center"
     >
-      <div data-transition-asset style:view-transition-name={transitionName} class="grow">
+      <div data-transition-asset style:view-transition-name={transitionName} class={['mx-auto max-h-dvh']}>
         {#if previewStackedAsset}
           {#key previewStackedAsset.id}
             {#if previewStackedAsset.type === AssetTypeEnum.Image}
               <PhotoViewer
                 bind:zoomToggle
                 bind:copyImage
+                onPhotoLoaded={() => {
+                  loaded = true;
+                }}
                 asset={previewStackedAsset}
                 {preloadAssets}
                 onPreviousAsset={() => navigateAsset('previous')}
@@ -603,6 +570,9 @@
                 <PhotoViewer
                   bind:zoomToggle
                   bind:copyImage
+                  onPhotoLoaded={() => {
+                    loaded = true;
+                  }}
                   {asset}
                   {preloadAssets}
                   onPreviousAsset={() => navigateAsset('previous')}

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

@@ -40,9 +40,11 @@
     onNextAsset?: (() => void) | null;
     copyImage?: () => Promise<void>;
     zoomToggle?: (() => void) | null;
+    onPhotoLoaded?: (() => void) | null;
   }
 
   let {
+    onPhotoLoaded,
     asset,
     preloadAssets = undefined,
     element = $bindable(),
@@ -192,16 +194,16 @@
   };
 
   const onload = () => {
+    onPhotoLoaded?.();
     imageLoaded = true;
     assetFileUrl = imageLoaderUrl;
     originalImageLoaded = targetImageSize === AssetMediaSize.Fullsize || targetImageSize === 'original';
-    console.log('RenderLoaded', imageLoaderUrl, imageLoaded);
     eventManager.emit('RenderLoaded');
   };
 
   const onerror = () => {
+    onPhotoLoaded?.();
     imageError = imageLoaded = true;
-    console.log('RenderLoaded err', imageLoaderUrl, imageLoaded);
     eventManager.emit('RenderLoaded');
   };
 
@@ -211,7 +213,7 @@
 
   onMount(() => {
     if (loader?.complete) {
-      onload();
+      void onload();
     }
     loader?.addEventListener('load', onload, { passive: true });
     loader?.addEventListener('error', onerror, { passive: true });
@@ -247,12 +249,10 @@
 
 <div
   bind:this={element}
-  class="relative h-full select-none"
+  class="relative h-full w-full select-none max-h-full max-h-full"
   bind:clientWidth={containerWidth}
   bind:clientHeight={containerHeight}
 >
-  <img style="display:none" src={imageLoaderUrl} alt="" {onload} {onerror} />
-
   {#if !imageLoaded}
     <div id="spinner" class="flex h-full items-center justify-center">
       <LoadingSpinner />
@@ -276,7 +276,7 @@
         bind:this={$photoViewerImgElement}
         src={assetFileUrl}
         alt={$getAltText(toTimelineAsset(asset))}
-        class="h-full w-full {$slideshowState === SlideshowState.None
+        class="max-h-dvh h-full w-full {$slideshowState === SlideshowState.None
           ? 'object-contain'
           : slideshowLookCssMapping[$slideshowLook]}"
         draggable="false"

web/src/lib/components/layouts/user-page-layout.svelte

@@ -7,7 +7,8 @@
   import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
   import UserSidebar from '$lib/components/shared-components/side-bar/user-sidebar.svelte';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
-  import type { Snippet } from 'svelte';
+  import { getContext, type Snippet } from 'svelte';
+  import type { AppState } from '../../../routes/+layout.svelte';
 
   interface Props {
     hideNavbar?: boolean;
@@ -37,10 +38,12 @@
 
   let scrollbarClass = $derived(scrollbar ? 'immich-scrollbar' : 'scrollbar-hidden');
   let hasTitleClass = $derived(title ? 'top-16 h-[calc(100%-(--spacing(16)))]' : 'top-0 h-full');
+  const appState = getContext('AppState') as AppState;
+  let isAssetViewer = $derived(appState.isAssetViewer);
 </script>
 
 <header>
-  {#if !hideNavbar}
+  {#if !hideNavbar && !isAssetViewer}
     <NavigationBar {showUploadButton} onUploadClick={() => openFileUploadDialog()} />
   {/if}
 
@@ -53,13 +56,15 @@
     {hideNavbar ? 'pt-(--navbar-height)' : ''}
     {hideNavbar ? 'max-md:pt-(--navbar-height-md)' : ''}"
 >
-  {#if sidebar}
+  {#if isAssetViewer}
+    <div></div>
+  {:else if sidebar}
     {@render sidebar()}
   {:else}
     <UserSidebar />
   {/if}
 
-  <main class="relative">
+  <main class="relative w-full">
     <div class="{scrollbarClass} absolute {hasTitleClass} w-full overflow-y-auto p-2" use:useActions={use}>
       {@render children?.()}
     </div>

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

@@ -11,6 +11,7 @@
   import { fade, fly } from 'svelte/transition';
 
   interface Props {
+    invisible: boolean;
     /** Offset from the top of the timeline (e.g., for headers) */
     timelineTopOffset?: number;
     /** Offset from the bottom of the timeline (e.g., for footers) */
@@ -39,6 +40,7 @@
   }
 
   let {
+    invisible = false,
     timelineTopOffset = 0,
     timelineBottomOffset = 0,
     height = 0,
@@ -501,6 +503,7 @@
   aria-valuemin={toScrollY(0)}
   data-id="scrubber"
   class="absolute end-0 z-1 select-none hover:cursor-row-resize"
+  class:invisible
   style:padding-top={PADDING_TOP + 'px'}
   style:padding-bottom={PADDING_BOTTOM + 'px'}
   style:width

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

@@ -3,13 +3,13 @@
   import { page } from '$app/state';
   import { resizeObserver, type OnResizeCallback } from '$lib/actions/resize-observer';
   import Scrubber from '$lib/components/timeline/Scrubber.svelte';
-  import TimelineAssetViewer from '$lib/components/timeline/TimelineAssetViewer.svelte';
   import TimelineKeyboardActions from '$lib/components/timeline/actions/TimelineKeyboardActions.svelte';
   import { AssetAction } from '$lib/constants';
   import HotModuleReload from '$lib/elements/HotModuleReload.svelte';
   import Portal from '$lib/elements/Portal.svelte';
   import Skeleton from '$lib/elements/Skeleton.svelte';
 
+  import TimelineAssetViewer from '$lib/components/timeline/TimelineAssetViewer.svelte';
   import { eventManager } from '$lib/managers/event-manager.svelte';
   import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
   import { isIntersecting } from '$lib/managers/timeline-manager/internal/intersection-support.svelte';
@@ -45,7 +45,7 @@
   //     };
   //   },
   // });
-  // console.log('hi', send, typeof receive);
+
   export type Something = {
     send: any;
     receive: any;
@@ -244,17 +244,19 @@
         timelineManager.viewportWidth = rect.width;
       }
     }
-    const scrollTarget = $gridScrollTarget?.at;
+    const scrollTarget = getScrollTarget();
     let scrolled = false;
     if (scrollTarget) {
       scrolled = await scrollAndLoadAsset(scrollTarget);
     }
 
     if (!scrolled) {
       // if the asset is not found, scroll to the top
-      // timelineManager.scrollTo(0);
+      timelineManager.scrollTo(0);
+    }
+    if (!isAssetViewerRoute(page)) {
+      invisible = false;
     }
-    invisible = false;
   };
 
   // note: only modified once in afterNavigate()
@@ -270,10 +272,11 @@
     const isNavigatingToAssetViewer = isAssetViewerRoute(to);
     const isNavigatingFromAssetViewer = isAssetViewerRoute(from);
     hasNavigatedToOrFromAssetViewer = isNavigatingToAssetViewer !== isNavigatingFromAssetViewer;
-    if (!isNavigatingFromAssetViewer && isNavigatingToAssetViewer) {
-    }
   });
 
+  const getScrollTarget = () => {
+    return $gridScrollTarget?.at ?? page.params.assetId ?? null;
+  };
   // afterNavigate is only called after navigation to a new URL, {complete} will resolve
   // after successful navigation.
   afterNavigate(({ complete }) => {
@@ -286,11 +289,11 @@
       if (isDirectNavigation) {
         initialLoadWasAssetViewer = isAssetViewerPage && !hasNavigatedToOrFromAssetViewer;
       }
-
       void scrollAfterNavigate();
       if (!isAssetViewerPage) {
-        const scrollTarget = $gridScrollTarget?.at ?? null;
+        const scrollTarget = getScrollTarget();
         await tick();
+
         eventManager.emit('TimelineLoaded', { id: scrollTarget });
       }
     });
@@ -302,7 +305,7 @@
   const topSectionResizeObserver: OnResizeCallback = ({ height }) => (timelineManager.topSectionHeight = height);
 
   onMount(() => {
-    if (!enableRouting) {
+    if (!enableRouting && !isAssetViewerRoute(page)) {
       invisible = false;
     }
   });
@@ -608,6 +611,7 @@
 {#if timelineManager.months.length > 0}
   <Scrubber
     {timelineManager}
+    {invisible}
     height={timelineManager.viewportHeight}
     timelineTopOffset={timelineManager.topSectionHeight}
     timelineBottomOffset={timelineManager.bottomSectionHeight}

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

@@ -85,11 +85,8 @@
 
   const handleClose = async (asset: { id: string }) => {
     const awaitInit = new Promise<void>((resolve) => eventManager.once('StartViewTransition', resolve));
-    console.log('emit back to timeline');
     eventManager.emit('TransitionToTimeline', { id: asset.id });
-    console.log('waitint for init');
     await awaitInit;
-    console.log('done with  for init');
 
     assetViewingStore.showAssetViewer(false);
     invisible = true;