fix: mobile edit handling (#25315)

Co-authored-by: mertalev <101130780+mertalev@users.noreply.github.com>

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

@@ -7,6 +7,7 @@
   import AddToStackAction from '$lib/components/asset-viewer/actions/add-to-stack-action.svelte';
   import ArchiveAction from '$lib/components/asset-viewer/actions/archive-action.svelte';
   import DeleteAction from '$lib/components/asset-viewer/actions/delete-action.svelte';
+  import EditAction from '$lib/components/asset-viewer/actions/edit-action.svelte';
   import KeepThisDeleteOthersAction from '$lib/components/asset-viewer/actions/keep-this-delete-others.svelte';
   import RatingAction from '$lib/components/asset-viewer/actions/rating-action.svelte';
   import RemoveAssetFromStack from '$lib/components/asset-viewer/actions/remove-asset-from-stack.svelte';
@@ -19,6 +20,7 @@
   import UnstackAction from '$lib/components/asset-viewer/actions/unstack-action.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import { ProjectionType } from '$lib/constants';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { Route } from '$lib/route';
   import { getGlobalActions } from '$lib/services/app.service';
@@ -71,7 +73,7 @@
     onUndoDelete?: OnUndoDelete;
     onRunJob: (name: AssetJobName) => void;
     onPlaySlideshow: () => void;
-    // onEdit: () => void;
+    onEdit: () => void;
     onClose?: () => void;
     playOriginalVideo: boolean;
     setPlayOriginalVideo: (value: boolean) => void;
@@ -91,7 +93,7 @@
     onRunJob,
     onPlaySlideshow,
     onClose,
-    // onEdit,
+    onEdit,
     playOriginalVideo = false,
     setPlayOriginalVideo,
   }: Props = $props();
@@ -126,17 +128,17 @@
   const sharedLink = getSharedLink();
 
   // TODO: Enable when edits are ready for release
-  // let showEditorButton = $derived(
-  //   isOwner &&
-  //     asset.type === AssetTypeEnum.Image &&
-  //     !(
-  //       asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR ||
-  //       (asset.originalPath && asset.originalPath.toLowerCase().endsWith('.insp'))
-  //     ) &&
-  //     !(asset.originalPath && asset.originalPath.toLowerCase().endsWith('.gif')) &&
-  //     !(asset.originalPath && asset.originalPath.toLowerCase().endsWith('.svg')) &&
-  //     !asset.livePhotoVideoId,
-  // );
+  let showEditorButton = $derived(
+    isOwner &&
+      asset.type === AssetTypeEnum.Image &&
+      !(
+        asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR ||
+        (asset.originalPath && asset.originalPath.toLowerCase().endsWith('.insp'))
+      ) &&
+      !(asset.originalPath && asset.originalPath.toLowerCase().endsWith('.gif')) &&
+      !(asset.originalPath && asset.originalPath.toLowerCase().endsWith('.svg')) &&
+      !asset.livePhotoVideoId,
+  );
 </script>
 
 <CommandPaletteDefaultProvider
@@ -189,9 +191,9 @@
       <RatingAction {asset} {onAction} />
     {/if}
 
-    <!-- {#if showEditorButton}
+    {#if showEditorButton}
       <EditAction onAction={onEdit} />
-    {/if} -->
+    {/if}
 
     {#if isOwner}
       <DeleteAction {asset} {onAction} {preAction} {onUndoDelete} />

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

@@ -254,12 +254,12 @@
     });
   };
 
-  // const showEditor = () => {
-  //   if (assetViewerManager.isShowActivityPanel) {
-  //     assetViewerManager.isShowActivityPanel = false;
-  //   }
-  //   isShowEditor = !isShowEditor;
-  // };
+  const showEditor = () => {
+    if (assetViewerManager.isShowActivityPanel) {
+      assetViewerManager.isShowActivityPanel = false;
+    }
+    isShowEditor = !isShowEditor;
+  };
 
   const handleRunJob = async (name: AssetJobName) => {
     try {
@@ -466,6 +466,7 @@
         preAction={handlePreAction}
         onAction={handleAction}
         {onUndoDelete}
+        onEdit={showEditor}
         onRunJob={handleRunJob}
         onPlaySlideshow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
         onClose={onClose ? () => onClose(asset) : undefined}

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

@@ -115,7 +115,7 @@ export class EditManager {
       // Setup the websocket listener before sending the edit request
       const editCompleted = waitForWebsocketEvent(
         'AssetEditReadyV1',
-        (event) => event.assetId === this.currentAsset!.id,
+        (event) => event.asset.id === this.currentAsset!.id,
         10_000,
       );
 

web/src/lib/stores/websocket.ts

@@ -31,7 +31,7 @@ export interface Events {
   on_notification: (notification: NotificationDto) => void;
 
   AppRestartV1: (event: AppRestartEvent) => void;
-  AssetEditReadyV1: (data: { assetId: string }) => void;
+  AssetEditReadyV1: (data: { asset: { id: string } }) => void;
 }
 
 const websocket: Socket<Events> = io({