feat: redesign asset-viewer previous/next and hide when nav not possible (#24903)

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

@@ -10,6 +10,7 @@
   import { websocketEvents } from '$lib/stores/websocket';
   import { handlePromiseError } from '$lib/utils';
   import { updateStackedAssetInTimeline, updateUnstackedAssetInTimeline } from '$lib/utils/actions';
+  import { navigateToAsset } from '$lib/utils/asset-utils';
   import { navigate } from '$lib/utils/navigation';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { type AlbumResponseDto, type AssetResponseDto, type PersonResponseDto, getAssetInfo } from '@immich/sdk';
@@ -24,7 +25,6 @@
     isShared?: boolean;
     album?: AlbumResponseDto;
     person?: PersonResponseDto;
-
     removeAction?: AssetAction.UNARCHIVE | AssetAction.ARCHIVE | AssetAction.SET_VISIBILITY_TIMELINE | null;
   }
 
@@ -41,7 +41,7 @@
   const getNextAsset = async (currentAsset: AssetResponseDto, preload: boolean = true) => {
     const earlierTimelineAsset = await timelineManager.getEarlierAsset(currentAsset);
     if (earlierTimelineAsset) {
-      const asset = await getAssetInfo({ ...authManager.params, id: earlierTimelineAsset.id });
+      const asset = await assetCacheManager.getAsset({ ...authManager.params, id: earlierTimelineAsset.id });
       if (preload) {
         // also pre-cache an extra one, to pre-cache these assetInfos for the next nav after this one is complete
         void getNextAsset(asset, false);
@@ -52,9 +52,8 @@
 
   const getPreviousAsset = async (currentAsset: AssetResponseDto, preload: boolean = true) => {
     const laterTimelineAsset = await timelineManager.getLaterAsset(currentAsset);
-
     if (laterTimelineAsset) {
-      const asset = await getAssetInfo({ ...authManager.params, id: laterTimelineAsset.id });
+      const asset = await assetCacheManager.getAsset({ ...authManager.params, id: laterTimelineAsset.id });
       if (preload) {
         // also pre-cache an extra one, to pre-cache these assetInfos for the next nav after this one is complete
         void getPreviousAsset(asset, false);
@@ -86,15 +85,6 @@
     untrack(() => handlePromiseError(loadCloseAssets($viewingAsset)));
   });
 
-  const handleNavigateToAsset = async (targetAsset: AssetResponseDto | undefined | null) => {
-    if (!targetAsset) {
-      return false;
-    }
-
-    await navigate({ targetRoute: 'current', assetId: targetAsset.id });
-    return true;
-  };
-
   const handleRandom = async () => {
     const randomAsset = await timelineManager.getRandomAsset();
     if (randomAsset) {
@@ -124,8 +114,8 @@
 
         // find the next asset to show or close the viewer
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        (await handleNavigateToAsset(assetCursor?.nextAsset)) ||
-          (await handleNavigateToAsset(assetCursor?.previousAsset)) ||
+        (await navigateToAsset(assetCursor?.nextAsset)) ||
+          (await navigateToAsset(assetCursor?.previousAsset)) ||
           (await handleClose(action.asset));
 
         break;
@@ -197,18 +187,17 @@
       await navigate({ targetRoute: 'current', assetId: restoredAsset.id });
     }
   };
-  onDestroy(() => {
-    assetCacheManager.invalidate();
-  });
-  const onAssetUpdate = ({ asset }: { event: 'upload' | 'update'; asset: AssetResponseDto }) => {
+
+  const handleUpdateOrUpload = (asset: AssetResponseDto) => {
     if (asset.id === assetCursor.current.id) {
       void loadCloseAssets(asset);
     }
   };
+
   onMount(() => {
     const unsubscribes = [
-      websocketEvents.on('on_upload_success', (asset: AssetResponseDto) => onAssetUpdate({ event: 'upload', asset })),
-      websocketEvents.on('on_asset_update', (asset: AssetResponseDto) => onAssetUpdate({ event: 'update', asset })),
+      websocketEvents.on('on_upload_success', (asset: AssetResponseDto) => handleUpdateOrUpload(asset)),
+      websocketEvents.on('on_asset_update', (asset: AssetResponseDto) => handleUpdateOrUpload(asset)),
     ];
     return () => {
       for (const unsubscribe of unsubscribes) {
@@ -216,6 +205,10 @@
       }
     };
   });
+
+  onDestroy(() => {
+    assetCacheManager.invalidate();
+  });
 </script>
 
 {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
@@ -234,8 +227,6 @@
       assetCacheManager.invalidate();
     }}
     onUndoDelete={handleUndoDelete}
-    onPrevious={() => handleNavigateToAsset(assetCursor.previousAsset)}
-    onNext={() => handleNavigateToAsset(assetCursor.nextAsset)}
     onRandom={handleRandom}
     onClose={handleClose}
   />