fix: clear ocr and asset cache when edits are applied (#25533)

* fix: clear ocr and asset cache when edits are applied

* use event manager

* fix: undefined check

web/src/lib/managers/AssetCacheManager.svelte.ts

@@ -1,3 +1,4 @@
+import { eventManager } from '$lib/managers/event-manager.svelte';
 import { getAssetInfo, getAssetOcr, type AssetOcrResponseDto, type AssetResponseDto } from '@immich/sdk';
 
 const defaultSerializer = <K>(params: K) => JSON.stringify(params);
@@ -35,6 +36,13 @@ class AssetCacheManager {
   #assetCache = new AsyncCache<AssetResponseDto>();
   #ocrCache = new AsyncCache<AssetOcrResponseDto[]>();
 
+  constructor() {
+    eventManager.on('AssetEditsApplied', () => {
+      this.#assetCache.clear();
+      this.#ocrCache.clear();
+    });
+  }
+
   async getAsset(assetIdentifier: { key?: string; slug?: string; id: string }, updateCache = true) {
     return this.#assetCache.getOrFetch(assetIdentifier, getAssetInfo, defaultSerializer, updateCache);
   }

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

@@ -1,5 +1,6 @@
 import TransformTool from '$lib/components/asset-viewer/editor/transform-tool/transform-tool.svelte';
 import { transformManager } from '$lib/managers/edit/transform-manager.svelte';
+import { eventManager } from '$lib/managers/event-manager.svelte';
 import { waitForWebsocketEvent } from '$lib/stores/websocket';
 import { editAsset, removeAssetEdits, type AssetEditsDto, type AssetResponseDto } from '@immich/sdk';
 import { ConfirmModal, modalManager, toastManager } from '@immich/ui';
@@ -110,25 +111,29 @@ export class EditManager {
     this.isApplyingEdits = true;
 
     const edits = this.tools.flatMap((tool) => tool.manager.edits);
+    if (!this.currentAsset) {
+      return false;
+    }
+
+    const assetId = this.currentAsset.id;
 
     try {
       // Setup the websocket listener before sending the edit request
-      const editCompleted = waitForWebsocketEvent(
-        'AssetEditReadyV1',
-        (event) => event.asset.id === this.currentAsset!.id,
-        10_000,
-      );
+      const editCompleted = waitForWebsocketEvent('AssetEditReadyV1', (event) => event.asset.id === assetId, 10_000);
 
       await (edits.length === 0
-        ? removeAssetEdits({ id: this.currentAsset!.id })
+        ? removeAssetEdits({ id: assetId })
         : editAsset({
-            id: this.currentAsset!.id,
+            id: assetId,
             assetEditActionListDto: {
               edits,
             },
           }));
 
       await editCompleted;
+
+      eventManager.emit('AssetEditsApplied', assetId);
+
       toastManager.success('Edits applied successfully');
       this.hasAppliedEdits = true;
 

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

@@ -36,6 +36,7 @@ export type Events = {
   AssetReplace: [{ oldAssetId: string; newAssetId: string }];
   AssetsArchive: [string[]];
   AssetsDelete: [string[]];
+  AssetEditsApplied: [string];
 
   AlbumAddAssets: [];
   AlbumUpdate: [AlbumResponseDto];