Update metadata visualisation through the websocket

server/src/domain/job/job.service.ts

@@ -166,7 +166,12 @@ export class JobService {
         break;
 
       case JobName.METADATA_EXTRACTION:
+        const [asset] = await this.assetRepository.getByIds([item.data.id]);
+        if (asset) {
+          this.communicationRepository.send(CommunicationEvent.ASSET_UPDATE, asset.ownerId, mapAsset(asset));
+        }
         await this.jobRepository.queue({ name: JobName.LINK_LIVE_PHOTOS, data: item.data });
+        
         break;
 
       case JobName.LINK_LIVE_PHOTOS:
@@ -215,14 +220,6 @@ export class JobService {
           this.communicationRepository.send(CommunicationEvent.UPLOAD_SUCCESS, asset.ownerId, mapAsset(asset));
         }
       }
-
-      case JobName.SIDECAR_WRITE: {
-        const [asset] = await this.assetRepository.getByIds([item.data.id]);
-        if (asset) {
-          this.communicationRepository.send(CommunicationEvent.ASSET_UPDATE, asset.ownerId, mapAsset(asset));
-        }
-        break;
-      }
     }
 
     // In addition to the above jobs, all of these should queue `SEARCH_INDEX_ASSET`

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

@@ -20,12 +20,9 @@
     mdiMapMarkerOutline,
     mdiInformationOutline,
   } from '@mdi/js';
-  import {
-    notificationController,
-    NotificationType,
-  } from '$lib/components/shared-components/notification/notification';
   import Icon from '$lib/components/elements/icon.svelte';
   import Map from '../shared-components/map/map.svelte';
+  import { websocketStore } from '$lib/stores/websocket';
   import { AppRoute } from '$lib/constants';
   import ChangeLocation from '../shared-components/change-location.svelte';
   import { handleError } from '../../utils/handle-error';
@@ -60,6 +57,12 @@
 
   $: people = asset.people || [];
 
+  const subscribe = websocketStore.onAssetUpdate.subscribe(assetUpdate => {
+    if (assetUpdate && assetUpdate.id === asset.id) {
+      asset = assetUpdate;
+    } 
+  });
+
   const dispatch = createEventDispatcher();
 
   const getMegapixel = (width: number, height: number): number | undefined => {
@@ -101,10 +104,6 @@
 
   async function handleConfirmChangeDate(dateTimeOriginal: string) {
     isShowChangeDate = false;
-    if (asset.exifInfo) {
-      asset.exifInfo.dateTimeOriginal = dateTimeOriginal;
-    }
-
     try {
       await api.assetApi.updateAsset({ id: asset.id, updateAssetDto: { dateTimeOriginal } });
     } catch (error) {

web/src/lib/components/shared-components/update-panel.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import { websocketStore } from '$lib/stores/websocket';
+  import { AssetStore } from '$lib/stores/assets.store';
   import { notificationController, NotificationType } from './notification/notification';
 
+  let assetStore = new AssetStore(/* vos options ici */);
   let assetUpdateCount = 0;
   let lastAssetName;
   let timeoutId;
@@ -10,12 +12,15 @@
     if (value && value.originalFileName) {
       lastAssetName = value.originalFileName;
       assetUpdateCount++;
+
+      assetStore.updateAsset(value);
+
       clearTimeout(timeoutId);
       timeoutId = setTimeout(() => {
         if (assetUpdateCount === 1) {
           
           notificationController.show({
-            message: `Asset updated: ${lastAssetName}.\nPlease reload to apply changes`,
+            message: `Asset updated: ${lastAssetName}.`,
             type: NotificationType.Info,
           });
         } else {