Websocket basic

Websocket basic

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

@@ -215,6 +215,14 @@ 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

@@ -125,7 +125,6 @@
           longitude: gps.lng,
         },
       });
-      notificationController.show({ message: 'Metadata updated please reload to apply', type: NotificationType.Info });
     } catch (error) {
       handleError(error, 'Unable to change location');
     }

web/src/lib/components/photos-page/actions/change-date-action.svelte

@@ -24,7 +24,7 @@
       await api.assetApi.updateAssets({
         assetBulkUpdateDto: { ids, dateTimeOriginal },
       });
-      notificationController.show({ message: 'Metadata updated please reload to apply', type: NotificationType.Info });
+      notificationController.show({ message: 'Updating date please wait', type: NotificationType.Info });
     } catch (error) {
       handleError(error, 'Unable to change date');
     }

web/src/lib/components/photos-page/actions/change-location-action.svelte

@@ -29,7 +29,7 @@
           longitude: point.lng,
         },
       });
-      notificationController.show({ message: 'Metadata updated please reload to apply', type: NotificationType.Info });
+      notificationController.show({ message: 'Updating location please wait', type: NotificationType.Info });
     } catch (error) {
       handleError(error, 'Unable to update location');
     }

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { websocketStore } from '$lib/stores/websocket';
+  import { notificationController, NotificationType } from './notification/notification';
+
+  let assetUpdateCount = 0;
+  let lastAssetName;
+  let timeoutId;
+
+  const subscribe = websocketStore.onAssetUpdate.subscribe(value => {
+    if (value && value.originalFileName) {
+      lastAssetName = value.originalFileName;
+      assetUpdateCount++;
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        if (assetUpdateCount === 1) {
+          
+          notificationController.show({
+            message: `Asset updated: ${lastAssetName}.\nPlease reload to apply changes`,
+            type: NotificationType.Info,
+          });
+        } else {
+          notificationController.show({
+            message: `${assetUpdateCount} assets updated.\nPlease reload to apply changes`,
+            type: NotificationType.Info,
+          });
+        }
+        assetUpdateCount = 0;
+      }, 500);
+    }
+  });
+
+</script>

web/src/lib/stores/websocket.ts

@@ -14,6 +14,7 @@ export const websocketStore = {
   onUploadSuccess: writable<AssetResponseDto>(),
   onAssetDelete: writable<string>(),
   onAssetTrash: writable<string[]>(),
+  onAssetUpdate: writable<AssetResponseDto>(),
   onPersonThumbnail: writable<string>(),
   serverVersion: writable<ServerVersionResponseDto>(),
   connected: writable<boolean>(false),
@@ -41,6 +42,7 @@ export const openWebsocketConnection = () => {
       // .on('on_upload_success', (data) => websocketStore.onUploadSuccess.set(data))
       .on('on_asset_delete', (data) => websocketStore.onAssetDelete.set(data))
       .on('on_asset_trash', (data) => websocketStore.onAssetTrash.set(data))
+      .on('on_asset_update', (data) => websocketStore.onAssetUpdate.set(data))
       .on('on_person_thumbnail', (data) => websocketStore.onPersonThumbnail.set(data))
       .on('on_server_version', (data) => websocketStore.serverVersion.set(data))
       .on('on_config_update', () => loadConfig())

web/src/routes/(user)/albums/[albumId]/+page.svelte

@@ -11,8 +11,8 @@
   import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
   import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
   import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
-  import ChangeDate from '$lib/components/photos-page/actions/change-date.svelte';
-  import ChangeLocation from '$lib/components/photos-page/actions/change-location.svelte';
+  import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
+  import ChangeLocation from '$lib/components/photos-page/actions/change-location-action.svelte';
   import RemoveFromAlbum from '$lib/components/photos-page/actions/remove-from-album.svelte';
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';

web/src/routes/(user)/favorites/+page.svelte

@@ -2,8 +2,8 @@
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
   import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
-  import ChangeDate from '$lib/components/photos-page/actions/change-date.svelte';
-  import ChangeLocation from '$lib/components/photos-page/actions/change-location.svelte';
+  import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
+  import ChangeLocation from '$lib/components/photos-page/actions/change-location-action.svelte';
   import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
   import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
   import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';

web/src/routes/(user)/people/[personId]/+page.svelte

@@ -8,8 +8,8 @@
   import SetBirthDateModal from '$lib/components/faces-page/set-birth-date-modal.svelte';
   import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
   import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
-  import ChangeDate from '$lib/components/photos-page/actions/change-date.svelte';
-  import ChangeLocation from '$lib/components/photos-page/actions/change-location.svelte';
+  import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
+  import ChangeLocation from '$lib/components/photos-page/actions/change-location-action.svelte';
   import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
   import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
   import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';

web/src/routes/(user)/photos/+page.svelte

@@ -2,8 +2,8 @@
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
   import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
-  import ChangeDate from '$lib/components/photos-page/actions/change-date.svelte';
-  import ChangeLocation from '$lib/components/photos-page/actions/change-location.svelte';
+  import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
+  import ChangeLocation from '$lib/components/photos-page/actions/change-location-action.svelte';
   import AssetJobActions from '$lib/components/photos-page/actions/asset-job-actions.svelte';
   import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
   import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';

web/src/routes/(user)/search/+page.svelte

@@ -3,8 +3,8 @@
   import { page } from '$app/stores';
   import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
   import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
-  import ChangeDate from '$lib/components/photos-page/actions/change-date.svelte';
-  import ChangeLocation from '$lib/components/photos-page/actions/change-location.svelte';
+  import ChangeDate from '$lib/components/photos-page/actions/change-location-action.svelte';
+  import ChangeLocation from '$lib/components/photos-page/actions/change-datetion-action.svelte';
   import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
   import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
   import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';

web/src/routes/+layout.svelte

@@ -5,6 +5,7 @@
   import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte';
   import DownloadPanel from '$lib/components/asset-viewer/download-panel.svelte';
   import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
+  import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
   import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte';
   import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte';
   import type { LayoutData } from './$types';
@@ -120,6 +121,7 @@
 
 <DownloadPanel />
 <UploadPanel />
+<UpdatePanel />
 <NotificationList />
 
 {#if data.user?.isAdmin}