fix(web): asset disappears from album after metadata edit (#7520)

web/src/lib/components/album-page/album-viewer.svelte

@@ -20,7 +20,6 @@
   import ThemeButton from '../shared-components/theme-button.svelte';
   import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
   import { mdiFileImagePlusOutline, mdiFolderDownloadOutline } from '@mdi/js';
-  import UpdatePanel from '../shared-components/update-panel.svelte';
   import { handlePromiseError } from '$lib/utils';
 
   export let sharedLink: SharedLinkResponseDto;
@@ -168,5 +167,4 @@
       {/if}
     </section>
   </AssetGrid>
-  <UpdatePanel {assetStore} />
 </main>

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

@@ -1,18 +0,0 @@
-<script lang="ts">
-  import { websocketEvents } from '$lib/stores/websocket';
-  import type { AssetStore } from '$lib/stores/assets.store';
-  import { onMount } from 'svelte';
-
-  export let assetStore: AssetStore | null;
-
-  onMount(() => {
-    return websocketEvents.on('on_asset_update', (asset) => {
-      if (asset.originalFileName && assetStore) {
-        assetStore.updateAsset(asset, true);
-
-        assetStore.removeAsset(asset.id); // Update timeline
-        assetStore.addAsset(asset);
-      }
-    });
-  });
-</script>

web/src/lib/stores/assets.store.ts

@@ -49,6 +49,11 @@ interface AddAsset {
   value: AssetResponseDto;
 }
 
+interface UpdateAsset {
+  type: 'update';
+  value: AssetResponseDto;
+}
+
 interface DeleteAsset {
   type: 'delete';
   value: string;
@@ -61,7 +66,7 @@ interface TrashAsset {
 
 export const photoViewer = writable<HTMLImageElement | null>(null);
 
-type PendingChange = AddAsset | DeleteAsset | TrashAsset;
+type PendingChange = AddAsset | UpdateAsset | DeleteAsset | TrashAsset;
 
 export class AssetStore {
   private store$ = writable(this);
@@ -102,6 +107,9 @@ export class AssetStore {
       websocketEvents.on('on_asset_trash', (ids) => {
         this.addPendingChanges(...ids.map((id): TrashAsset => ({ type: 'trash', value: id })));
       }),
+      websocketEvents.on('on_asset_update', (asset) => {
+        this.addPendingChanges({ type: 'update', value: asset });
+      }),
       websocketEvents.on('on_asset_delete', (id: string) => {
         this.addPendingChanges({ type: 'delete', value: id });
       }),
@@ -122,6 +130,11 @@ export class AssetStore {
           break;
         }
 
+        case 'update': {
+          this.updateAsset(value);
+          break;
+        }
+
         case 'trash': {
           if (!this.options.isTrashed) {
             this.removeAsset(value);
@@ -276,6 +289,10 @@ export class AssetStore {
       return;
     }
 
+    this.addAssetToBucket(asset);
+  }
+
+  private addAssetToBucket(asset: AssetResponseDto) {
     const timeBucket = DateTime.fromISO(asset.fileCreatedAt).toUTC().startOf('month').toString();
     let bucket = this.getBucketByDate(timeBucket);
 
@@ -307,7 +324,7 @@ export class AssetStore {
     // If we added an asset to the store, we need to recalculate
     // asset store containers
     this.assets.push(asset);
-    this.updateAsset(asset, true);
+    this.emit(true);
   }
 
   getBucketByDate(bucketDate: string): AssetBucket | null {
@@ -338,14 +355,20 @@ export class AssetStore {
     return null;
   }
 
-  updateAsset(_asset: AssetResponseDto, recalculate = false) {
+  updateAsset(_asset: AssetResponseDto) {
     const asset = this.assets.find((asset) => asset.id === _asset.id);
     if (!asset) {
       return;
     }
 
-    Object.assign(asset, _asset);
+    const recalculate = asset.fileCreatedAt !== _asset.fileCreatedAt;
+    if (recalculate) {
+      this.removeAsset(asset.id);
+      this.addAssetToBucket(_asset);
+      return;
+    }
 
+    Object.assign(asset, _asset);
     this.emit(recalculate);
   }
 
@@ -357,6 +380,9 @@ export class AssetStore {
   }
 
   removeAsset(id: string) {
+    this.assets = this.assets.filter((asset) => asset.id !== id);
+    delete this.assetToBucket[id];
+
     for (let index = 0; index < this.buckets.length; index++) {
       const bucket = this.buckets[index];
       for (let index_ = 0; index_ < bucket.assets.length; index_++) {

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

@@ -30,7 +30,6 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
-  import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
   import { AppRoute, dateFormats } from '$lib/constants';
   import { numberOfComments, setNumberOfComments, updateNumberOfComments } from '$lib/stores/activity.store';
@@ -718,8 +717,6 @@
   />
 {/if}
 
-<UpdatePanel {assetStore} />
-
 <style>
   ::placeholder {
     color: rgb(60, 60, 60);

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

@@ -16,7 +16,6 @@
   import { AssetStore } from '$lib/stores/assets.store';
   import type { PageData } from './$types';
   import { mdiPlus, mdiDotsVertical } from '@mdi/js';
-  import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
 
   export let data: PageData;
 
@@ -53,4 +52,3 @@
     />
   </AssetGrid>
 </UserPageLayout>
-<UpdatePanel {assetStore} />

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

@@ -18,7 +18,6 @@
   import { AssetStore } from '$lib/stores/assets.store';
   import type { PageData } from './$types';
   import { mdiDotsVertical, mdiPlus } from '@mdi/js';
-  import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
 
   export let data: PageData;
 
@@ -58,4 +57,3 @@
     />
   </AssetGrid>
 </UserPageLayout>
-<UpdatePanel {assetStore} />

web/src/routes/(user)/partners/[userId]/+page.svelte

@@ -13,7 +13,6 @@
   import { onDestroy } from 'svelte';
   import type { PageData } from './$types';
   import { mdiPlus, mdiArrowLeft } from '@mdi/js';
-  import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
 
   export let data: PageData;
 
@@ -46,5 +45,4 @@
     </ControlAppBar>
   {/if}
   <AssetGrid {assetStore} {assetInteractionStore} />
-  <UpdatePanel {assetStore} />
 </main>

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

@@ -22,7 +22,6 @@
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { mdiDotsVertical, mdiPlus } from '@mdi/js';
-  import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
   import { user } from '$lib/stores/user.store';
 
   let { isViewing: showAssetViewer } = assetViewingStore;
@@ -96,4 +95,3 @@
     />
   </AssetGrid>
 </UserPageLayout>
-<UpdatePanel {assetStore} />

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

@@ -15,7 +15,6 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
-  import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
   import { AppRoute } from '$lib/constants';
   import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
   import { AssetStore } from '$lib/stores/assets.store';
@@ -115,4 +114,3 @@
     </svelte:fragment>
   </ConfirmDialogue>
 {/if}
-<UpdatePanel {assetStore} />