From 844d6800fcc29f331dd8c02263e6b324e4fe21ae Mon Sep 17 00:00:00 2001
From: yannfrendo <yann.frendo@live.fr>
Date: Tue, 28 Nov 2023 17:43:56 +0100
Subject: [PATCH] Update timeline

---
 .../components/album-page/album-viewer.svelte |  3 +++
 .../components/photos-page/asset-grid.svelte  |  1 +
 .../shared-components/update-panel.svelte     | 24 +++++++++++--------
 .../(user)/albums/[albumId]/+page.svelte      |  3 +++
 web/src/routes/(user)/archive/+page.svelte    |  2 ++
 web/src/routes/(user)/favorites/+page.svelte  |  2 ++
 .../(user)/partners/[userId]/+page.svelte     |  2 ++
 web/src/routes/(user)/photos/+page.svelte     |  2 ++
 web/src/routes/(user)/trash/+page.svelte      |  2 ++
 web/src/routes/+layout.svelte                 |  1 -
 10 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte
index 5b10ab1e87..cfcfc8425c 100644
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@@ -20,6 +20,7 @@
   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';  
 
   export let sharedLink: SharedLinkResponseDto;
   export let user: UserResponseDto | undefined = undefined;
@@ -167,4 +168,6 @@
       </p>
     </section>
   </AssetGrid>
+  <UpdatePanel {assetStore} />
+  
 </main>
diff --git a/web/src/lib/components/photos-page/asset-grid.svelte b/web/src/lib/components/photos-page/asset-grid.svelte
index 1e5304e8e8..2fbd7d01c6 100644
--- a/web/src/lib/components/photos-page/asset-grid.svelte
+++ b/web/src/lib/components/photos-page/asset-grid.svelte
@@ -413,6 +413,7 @@
   {/if}
 </Portal>
 
+
 <style>
   #asset-grid {
     contain: layout;
diff --git a/web/src/lib/components/shared-components/update-panel.svelte b/web/src/lib/components/shared-components/update-panel.svelte
index 59488315fe..b3ed1122b8 100644
--- a/web/src/lib/components/shared-components/update-panel.svelte
+++ b/web/src/lib/components/shared-components/update-panel.svelte
@@ -1,21 +1,25 @@
 <script lang="ts">
   import { websocketStore } from '$lib/stores/websocket';
-  import { AssetStore } from '$lib/stores/assets.store';
+  import type { 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;
 
-  const subscribe = websocketStore.onAssetUpdate.subscribe(value => {
-    if (value && value.originalFileName) {
-      lastAssetName = value.originalFileName;
+  export let assetStore: AssetStore | null;
+  let assetUpdateCount = 0;
+  let lastAssetName: string;
+  let timeoutId: string | number | NodeJS.Timeout | undefined;
+
+  websocketStore.onAssetUpdate.subscribe(asset => {
+    if (asset && asset.originalFileName && assetStore) {
+      lastAssetName = asset.originalFileName;
       assetUpdateCount++;
 
-      assetStore.updateAsset(value);
+      assetStore.updateAsset(asset,true);
 
-      clearTimeout(timeoutId);
+      assetStore.removeAsset(asset.id); // Update timeline
+      assetStore.addAsset(asset);
+
+        clearTimeout(timeoutId);
       timeoutId = setTimeout(() => {
         if (assetUpdateCount === 1) {
           
diff --git a/web/src/routes/(user)/albums/[albumId]/+page.svelte b/web/src/routes/(user)/albums/[albumId]/+page.svelte
index 585de03e78..a162164532 100644
--- a/web/src/routes/(user)/albums/[albumId]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId]/+page.svelte
@@ -58,6 +58,7 @@
   import ActivityStatus from '$lib/components/asset-viewer/activity-status.svelte';
   import { numberOfComments, setNumberOfComments, updateNumberOfComments } from '$lib/stores/activity.store';
   import AlbumOptions from '$lib/components/album-page/album-options.svelte';
+  import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
 
   export let data: PageData;
 
@@ -754,3 +755,5 @@
     on:save={({ detail: description }) => handleUpdateDescription(description)}
   />
 {/if}
+
+<UpdatePanel {assetStore} />
diff --git a/web/src/routes/(user)/archive/+page.svelte b/web/src/routes/(user)/archive/+page.svelte
index 845d36619c..08f081ebd0 100644
--- a/web/src/routes/(user)/archive/+page.svelte
+++ b/web/src/routes/(user)/archive/+page.svelte
@@ -16,6 +16,7 @@
   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;
 
@@ -52,3 +53,4 @@
     />
   </AssetGrid>
 </UserPageLayout>
+<UpdatePanel {assetStore} />
diff --git a/web/src/routes/(user)/favorites/+page.svelte b/web/src/routes/(user)/favorites/+page.svelte
index d335fe67c6..b586e985a8 100644
--- a/web/src/routes/(user)/favorites/+page.svelte
+++ b/web/src/routes/(user)/favorites/+page.svelte
@@ -18,6 +18,7 @@
   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;
 
@@ -57,3 +58,4 @@
     />
   </AssetGrid>
 </UserPageLayout>
+<UpdatePanel {assetStore} />
diff --git a/web/src/routes/(user)/partners/[userId]/+page.svelte b/web/src/routes/(user)/partners/[userId]/+page.svelte
index 42527d1d84..9e645cb668 100644
--- a/web/src/routes/(user)/partners/[userId]/+page.svelte
+++ b/web/src/routes/(user)/partners/[userId]/+page.svelte
@@ -13,6 +13,7 @@
   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;
 
@@ -45,4 +46,5 @@
     </ControlAppBar>
   {/if}
   <AssetGrid {assetStore} {assetInteractionStore} />
+  <UpdatePanel {assetStore} />
 </main>
diff --git a/web/src/routes/(user)/photos/+page.svelte b/web/src/routes/(user)/photos/+page.svelte
index dace52cb86..f2b6a1bdec 100644
--- a/web/src/routes/(user)/photos/+page.svelte
+++ b/web/src/routes/(user)/photos/+page.svelte
@@ -23,6 +23,7 @@
   import type { PageData } from './$types';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { mdiDotsVertical, mdiPlus } from '@mdi/js';
+  import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
 
   export let data: PageData;
 
@@ -97,3 +98,4 @@
     />
   </AssetGrid>
 </UserPageLayout>
+<UpdatePanel {assetStore} />
\ No newline at end of file
diff --git a/web/src/routes/(user)/trash/+page.svelte b/web/src/routes/(user)/trash/+page.svelte
index 5926f4b6a7..848f2f76ea 100644
--- a/web/src/routes/(user)/trash/+page.svelte
+++ b/web/src/routes/(user)/trash/+page.svelte
@@ -23,6 +23,7 @@
   import empty3Url from '$lib/assets/empty-3.svg';
   import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
   import { mdiDeleteOutline, mdiHistory } from '@mdi/js';
+  import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
 
   export let data: PageData;
 
@@ -113,3 +114,4 @@
     </svelte:fragment>
   </ConfirmDialogue>
 {/if}
+<UpdatePanel {assetStore} />
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 93e3547c1d..041ccde046 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -121,7 +121,6 @@
 
 <DownloadPanel />
 <UploadPanel />
-<UpdatePanel />
 <NotificationList />
 
 {#if data.user?.isAdmin}