refactor: auto advance asset viewer (#3554)

web/src/lib/components/album-page/album-viewer.svelte

@@ -449,7 +449,7 @@
     {/if}
 
     {#if album.assetCount > 0}
-      <GalleryViewer assets={album.assets} {sharedLink} bind:selectedAssets={multiSelectAsset} viewFrom="album-page" />
+      <GalleryViewer assets={album.assets} {sharedLink} bind:selectedAssets={multiSelectAsset} />
     {:else}
       <!-- Album is empty - Show asset selectection buttons -->
       <section id="empty-album" class=" mt-[200px] flex place-content-center place-items-center">

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

@@ -30,7 +30,16 @@
   export let showNavigation = true;
   export let sharedLink: SharedLinkResponseDto | undefined = undefined;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    archived: AssetResponseDto;
+    unarchived: AssetResponseDto;
+    favorite: AssetResponseDto;
+    unfavorite: AssetResponseDto;
+    close: void;
+    next: void;
+    previous: void;
+  }>();
+
   let appearsInAlbums: AlbumResponseDto[] = [];
   let isShowAlbumPicker = false;
   let isShowDeleteConfirmation = false;
@@ -105,18 +114,16 @@
     closeViewer();
   };
 
-  const closeViewer = () => {
-    dispatch('close');
-  };
+  const closeViewer = () => dispatch('close');
 
   const navigateAssetForward = (e?: Event) => {
     e?.stopPropagation();
-    dispatch('navigate-next');
+    dispatch('next');
   };
 
   const navigateAssetBackward = (e?: Event) => {
     e?.stopPropagation();
-    dispatch('navigate-previous');
+    dispatch('previous');
   };
 
   const showDetailInfoHandler = () => {
@@ -159,7 +166,8 @@
       });
 
       asset.isFavorite = data.isFavorite;
-      assetStore?.updateAsset(asset.id, data.isFavorite);
+      assetStore?.updateAsset(data);
+      dispatch(data.isFavorite ? 'favorite' : 'unfavorite', data);
 
       notificationController.show({
         type: NotificationType.Info,
@@ -215,12 +223,8 @@
       });
 
       asset.isArchived = data.isArchived;
-
-      if (data.isArchived) {
-        dispatch('archived', data);
-      } else {
-        dispatch('unarchived', data);
-      }
+      assetStore?.updateAsset(data);
+      dispatch(data.isArchived ? 'archived' : 'unarchived', data);
 
       notificationController.show({
         type: NotificationType.Info,

web/src/lib/components/memory-page/memory-viewer.svelte

@@ -268,7 +268,7 @@
         bottom={-200}
       >
         <div id="gallery-memory" bind:this={memoryGallery}>
-          <GalleryViewer assets={currentMemory.assets} viewFrom="album-page" />
+          <GalleryViewer assets={currentMemory.assets} />
         </div>
       </IntersectionObserver>
     </section>

web/src/lib/components/photos-page/asset-grid.svelte

@@ -13,7 +13,7 @@
 
   import { browser } from '$app/environment';
   import { goto } from '$app/navigation';
-  import { AppRoute } from '$lib/constants';
+  import { AppRoute, AssetAction } from '$lib/constants';
   import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
   import { BucketPosition, type AssetStore, type Viewport } from '$lib/stores/assets.store';
   import { isSearchEnabled } from '$lib/stores/search.store';
@@ -22,6 +22,7 @@
   export let isAlbumSelectionMode = false;
   export let assetStore: AssetStore;
   export let assetInteractionStore: AssetInteractionStore;
+  export let removeAction: AssetAction | null = null;
 
   const { assetSelectionCandidates, assetSelectionStart, selectedAssets, isMultiSelectState } = assetInteractionStore;
   const viewport: Viewport = { width: 0, height: 0 };
@@ -81,18 +82,34 @@
     element.scrollBy(0, event.detail.heightDelta);
   }
 
-  const navigateToPreviousAsset = async () => {
-    const prevAsset = await assetStore.getPreviousAssetId($viewingAsset.id);
-    if (prevAsset) {
-      assetViewingStore.setAssetId(prevAsset);
+  const handlePrevious = async () => {
+    const previousAsset = await assetStore.getPreviousAssetId($viewingAsset.id);
+    if (previousAsset) {
+      assetViewingStore.setAssetId(previousAsset);
     }
+
+    return !!previousAsset;
   };
 
-  const navigateToNextAsset = async () => {
+  const handleNext = async () => {
     const nextAsset = await assetStore.getNextAssetId($viewingAsset.id);
     if (nextAsset) {
       assetViewingStore.setAssetId(nextAsset);
     }
+
+    return !!nextAsset;
+  };
+
+  const handleClose = () => assetViewingStore.showAssetViewer(false);
+
+  const handleAction = async (asset: AssetResponseDto, action: AssetAction) => {
+    if (removeAction === action) {
+      // find the next asset to show or close the viewer
+      (await handleNext()) || (await handlePrevious()) || handleClose();
+
+      // delete after find the next one
+      assetStore.removeAsset(asset.id);
+    }
   };
 
   let animationTick = false;
@@ -109,12 +126,6 @@
     });
   };
 
-  const handleArchiveSuccess = (e: CustomEvent) => {
-    const asset = e.detail as AssetResponseDto;
-    navigateToNextAsset();
-    assetStore.removeAsset(asset.id);
-  };
-
   let lastAssetMouseEvent: AssetResponseDto | null = null;
 
   $: if (!lastAssetMouseEvent) {
@@ -319,12 +330,13 @@
     <AssetViewer
       {assetStore}
       asset={$viewingAsset}
-      on:navigate-previous={navigateToPreviousAsset}
-      on:navigate-next={navigateToNextAsset}
-      on:close={() => {
-        assetViewingStore.showAssetViewer(false);
-      }}
-      on:archived={handleArchiveSuccess}
+      on:previous={() => handlePrevious()}
+      on:next={() => handleNext()}
+      on:close={() => handleClose()}
+      on:archived={({ detail: asset }) => handleAction(asset, AssetAction.ARCHIVE)}
+      on:unarchived={({ detail: asset }) => handleAction(asset, AssetAction.UNARCHIVE)}
+      on:favorite={({ detail: asset }) => handleAction(asset, AssetAction.FAVORITE)}
+      on:unfavorite={({ detail: asset }) => handleAction(asset, AssetAction.UNFAVORITE)}
     />
   {/if}
 </Portal>

web/src/lib/components/share-page/individual-shared-viewer.svelte

@@ -106,6 +106,6 @@
     </ControlAppBar>
   {/if}
   <section class="my-[160px] flex flex-col px-6 sm:px-12 md:px-24 lg:px-40">
-    <GalleryViewer {assets} {sharedLink} bind:selectedAssets viewFrom="shared-link-page" />
+    <GalleryViewer {assets} {sharedLink} bind:selectedAssets />
   </section>
 </section>

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -1,7 +1,3 @@
-<script lang="ts" context="module">
-  export type ViewFrom = 'archive-page' | 'album-page' | 'favorites-page' | 'search-page' | 'shared-link-page';
-</script>
-
 <script lang="ts">
   import { page } from '$app/stores';
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
@@ -9,7 +5,6 @@
   import { AssetResponseDto, SharedLinkResponseDto, ThumbnailFormat } from '@api';
   import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
   import { flip } from 'svelte/animate';
-  import { archivedAsset } from '$lib/stores/archived-asset.store';
   import { getThumbnailSize } from '$lib/utils/thumbnail-util';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
 
@@ -17,7 +12,6 @@
   export let sharedLink: SharedLinkResponseDto | undefined = undefined;
   export let selectedAssets: Set<AssetResponseDto> = new Set();
   export let disableAssetSelect = false;
-  export let viewFrom: ViewFrom;
   export let showArchiveIcon = false;
 
   let { isViewing: showAssetViewer } = assetViewingStore;
@@ -86,16 +80,6 @@
     $showAssetViewer = false;
     history.pushState(null, '', `${$page.url.pathname}`);
   };
-
-  const handleUnarchivedSuccess = (event: CustomEvent) => {
-    const asset = event.detail as AssetResponseDto;
-    switch (viewFrom) {
-      case 'archive-page':
-        $archivedAsset = $archivedAsset.filter((a) => a.id != asset.id);
-        navigateAssetForward();
-        break;
-    }
-  };
 </script>
 
 {#if assets.length > 0}
@@ -124,9 +108,8 @@
     asset={selectedAsset}
     publicSharedKey={sharedLink?.key}
     {sharedLink}
-    on:navigate-previous={navigateAssetBackward}
-    on:navigate-next={navigateAssetForward}
+    on:previous={navigateAssetBackward}
+    on:next={navigateAssetForward}
     on:close={closeViewer}
-    on:unarchived={handleUnarchivedSuccess}
   />
 {/if}