From a16b83d1ebb5c6a69eadde1c8f83f985bce1fecf Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Thu, 14 Nov 2024 16:05:36 +0100
Subject: [PATCH] fix(web): ensure current asset index stays within bounds
 (#14013)

---
 .../gallery-viewer/gallery-viewer.svelte      | 31 ++++++++++++++-----
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
index aa84bd69f0846..35eaf45d53a09 100644
--- a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
+++ b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
@@ -66,11 +66,15 @@
 
   const handleNext = async () => {
     try {
-      const asset = onNext ? await onNext() : assets[++currentViewAssetIndex];
-      if (asset) {
-        setAsset(asset);
-        await navigate({ targetRoute: 'current', assetId: $viewingAsset.id });
+      let asset: AssetResponseDto | undefined;
+      if (onNext) {
+        asset = await onNext();
+      } else {
+        currentViewAssetIndex = Math.min(currentViewAssetIndex + 1, assets.length - 1);
+        asset = assets[currentViewAssetIndex];
       }
+
+      await navigateToAsset(asset);
     } catch (error) {
       handleError(error, $t('errors.cannot_navigate_next_asset'));
     }
@@ -78,16 +82,27 @@
 
   const handlePrevious = async () => {
     try {
-      const asset = onPrevious ? await onPrevious() : assets[--currentViewAssetIndex];
-      if (asset) {
-        setAsset(asset);
-        await navigate({ targetRoute: 'current', assetId: $viewingAsset.id });
+      let asset: AssetResponseDto | undefined;
+      if (onPrevious) {
+        asset = await onPrevious();
+      } else {
+        currentViewAssetIndex = Math.max(currentViewAssetIndex - 1, 0);
+        asset = assets[currentViewAssetIndex];
       }
+
+      await navigateToAsset(asset);
     } catch (error) {
       handleError(error, $t('errors.cannot_navigate_previous_asset'));
     }
   };
 
+  const navigateToAsset = async (asset?: AssetResponseDto) => {
+    if (asset && asset.id !== $viewingAsset.id) {
+      setAsset(asset);
+      await navigate({ targetRoute: 'current', assetId: $viewingAsset.id });
+    }
+  };
+
   const handleAction = async (action: Action) => {
     switch (action.type) {
       case AssetAction.ARCHIVE: