refactor(web): asset viewer actions (#5488)

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

@@ -19,7 +19,7 @@
   import PhotoViewer from './photo-viewer.svelte';
   import VideoViewer from './video-viewer.svelte';
   import PanoramaViewer from './panorama-viewer.svelte';
-  import { ProjectionType } from '$lib/constants';
+  import { AssetAction, ProjectionType } from '$lib/constants';
   import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
   import ProfileImageCropper from '../shared-components/profile-image-cropper.svelte';
   import { isShowDetail } from '$lib/stores/preferences.store';
@@ -64,14 +64,10 @@
   } = slideshowStore;
 
   const dispatch = createEventDispatcher<{
-    archived: AssetResponseDto;
+    action: { type: AssetAction; asset: AssetResponseDto };
-    unarchived: AssetResponseDto;
-    favorite: AssetResponseDto;
-    unfavorite: AssetResponseDto;
     close: void;
     next: void;
     previous: void;
-    unstack: void;
   }>();
 
   let appearsInAlbums: AlbumResponseDto[] = [];
@@ -374,9 +370,7 @@
     try {
       await api.assetApi.deleteAssets({ assetBulkDeleteDto: { ids: [asset.id] } });
 
-      await navigateAssetForward();
+      dispatch('action', { type: AssetAction.TRASH, asset });
-
-      assetStore?.removeAsset(asset.id);
 
       notificationController.show({
         message: 'Moved to trash',
@@ -391,9 +385,7 @@
     try {
       await api.assetApi.deleteAssets({ assetBulkDeleteDto: { ids: [asset.id], force: true } });
 
-      await navigateAssetForward();
+      dispatch('action', { type: AssetAction.DELETE, asset });
-
-      assetStore?.removeAsset(asset.id);
 
       notificationController.show({
         message: 'Permanently deleted asset',
@@ -416,8 +408,7 @@
       });
 
       asset.isFavorite = data.isFavorite;
-      assetStore?.updateAsset(data);
+      dispatch('action', { type: data.isFavorite ? AssetAction.FAVORITE : AssetAction.UNFAVORITE, asset: data });
-      dispatch(data.isFavorite ? 'favorite' : 'unfavorite', data);
 
       notificationController.show({
         type: NotificationType.Info,
@@ -473,8 +464,7 @@
       });
 
       asset.isArchived = data.isArchived;
-      assetStore?.updateAsset(data);
+      dispatch('action', { type: data.isArchived ? AssetAction.ARCHIVE : AssetAction.UNARCHIVE, asset: data });
-      dispatch(data.isArchived ? 'archived' : 'unarchived', data);
 
       notificationController.show({
         type: NotificationType.Info,
@@ -557,10 +547,10 @@
         child.stackParentId = null;
         child.stackCount = 0;
         child.stack = [];
-        assetStore?.addAsset(child);
+        dispatch('action', { type: AssetAction.ADD, asset: child });
       }
 
-      dispatch('unstack');
+      dispatch('close');
       notificationController.show({ type: NotificationType.Info, message: 'Un-stacked', timeout: 1500 });
     } catch (error) {
       await handleError(error, `Unable to unstack`);

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

@@ -128,13 +128,28 @@
 
   const handleClose = () => assetViewingStore.showAssetViewer(false);
 
-  const handleAction = async (asset: AssetResponseDto, action: AssetAction) => {
+  const handleAction = async (action: AssetAction, asset: AssetResponseDto) => {
-    if (removeAction === action) {
+    switch (action) {
-      // find the next asset to show or close the viewer
+      case removeAction:
-      (await handleNext()) || (await handlePrevious()) || handleClose();
+      case AssetAction.TRASH:
+      case AssetAction.DELETE:
+        // find the next asset to show or close the viewer
+        (await handleNext()) || (await handlePrevious()) || handleClose();
 
-      // delete after find the next one
+        // delete after find the next one
-      assetStore.removeAsset(asset.id);
+        assetStore.removeAsset(asset.id);
+        break;
+
+      case AssetAction.ARCHIVE:
+      case AssetAction.UNARCHIVE:
+      case AssetAction.FAVORITE:
+      case AssetAction.UNFAVORITE:
+        assetStore.updateAsset(asset);
+        break;
+
+      case AssetAction.ADD:
+        assetStore.addAsset(asset);
+        break;
     }
   };
 
@@ -402,11 +417,7 @@
       on:previous={() => handlePrevious()}
       on:next={() => handleNext()}
       on:close={() => handleClose()}
-      on:archived={({ detail: asset }) => handleAction(asset, AssetAction.ARCHIVE)}
+      on:action={({ detail: action }) => handleAction(action.type, action.asset)}
-      on:unarchived={({ detail: asset }) => handleAction(asset, AssetAction.UNARCHIVE)}
-      on:favorite={({ detail: asset }) => handleAction(asset, AssetAction.FAVORITE)}
-      on:unfavorite={({ detail: asset }) => handleAction(asset, AssetAction.UNFAVORITE)}
-      on:unstack={() => handleClose()}
     />
   {/if}
 </Portal>

web/src/lib/constants.ts

@@ -4,7 +4,9 @@ export enum AssetAction {
   FAVORITE = 'favorite',
   UNFAVORITE = 'unfavorite',
   TRASH = 'trash',
-  RESTORE = 'restore',
+  DELETE = 'delete',
+  // RESTORE = 'restore',
+  ADD = 'add',
 }
 
 export enum AppRoute {