From db08ca7c9bb28d38f6167d63c50a5621130df888 Mon Sep 17 00:00:00 2001
From: martabal <74269598+martabal@users.noreply.github.com>
Date: Fri, 27 Sep 2024 16:17:44 +0200
Subject: [PATCH] feat: no slideshow transition

---
 .../lib/components/asset-viewer/asset-viewer.svelte | 13 +++++++------
 web/src/lib/components/slideshow-settings.svelte    |  3 ++-
 web/src/lib/i18n/en.json                            |  1 +
 web/src/lib/stores/slideshow.store.ts               |  2 ++
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index 850a7c159f43c..451915d13aca7 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -67,6 +67,7 @@
     stopProgress: stopSlideshowProgress,
     slideshowNavigation,
     slideshowState,
+    slideshowTransition,
   } = slideshowStore;
 
   let appearsInAlbums: AlbumResponseDto[] = [];
@@ -82,13 +83,14 @@
   let numberOfComments: number;
   let fullscreenElement: Element;
   let unsubscribes: (() => void)[] = [];
+  let selectedEditType: string = '';
+  let stack: StackResponseDto | null = null;
+
   let zoomToggle = () => void 0;
   let copyImage: () => Promise<void>;
 
   $: isFullScreen = fullscreenElement !== null;
 
-  let stack: StackResponseDto | null = null;
-
   const refreshStack = async () => {
     if (isSharedLink()) {
       return;
@@ -390,11 +392,9 @@
     onAction?.(action);
   };
 
-  let selectedEditType: string = '';
-
-  function handleUpdateSelectedEditType(type: string) {
+  const handleUpdateSelectedEditType = (type: string) => {
     selectedEditType = type;
-  }
+  };
 </script>
 
 <svelte:document bind:fullscreenElement />
@@ -508,6 +508,7 @@
               onNextAsset={() => navigateAsset('next')}
               on:close={closeViewer}
               {sharedLink}
+              haveFadeTransition={$slideshowState === SlideshowState.None || $slideshowTransition}
             />
           {/if}
         {:else}
diff --git a/web/src/lib/components/slideshow-settings.svelte b/web/src/lib/components/slideshow-settings.svelte
index e2bf6a4b2c22d..6f0397be98f19 100644
--- a/web/src/lib/components/slideshow-settings.svelte
+++ b/web/src/lib/components/slideshow-settings.svelte
@@ -18,7 +18,7 @@
   import SettingDropdown from './shared-components/settings/setting-dropdown.svelte';
   import { t } from 'svelte-i18n';
 
-  const { slideshowDelay, showProgressBar, slideshowNavigation, slideshowLook } = slideshowStore;
+  const { slideshowDelay, showProgressBar, slideshowNavigation, slideshowLook, slideshowTransition } = slideshowStore;
 
   export let onClose = () => {};
 
@@ -65,6 +65,7 @@
       }}
     />
     <SettingSwitch title={$t('show_progress_bar')} bind:checked={$showProgressBar} />
+    <SettingSwitch title={$t('show_slideshow_transition')} bind:checked={$slideshowTransition} />
     <SettingInputField
       inputType={SettingInputFieldType.NUMBER}
       label={$t('duration')}
diff --git a/web/src/lib/i18n/en.json b/web/src/lib/i18n/en.json
index fae9d9b574f5b..3c200fd6e25b2 100644
--- a/web/src/lib/i18n/en.json
+++ b/web/src/lib/i18n/en.json
@@ -1144,6 +1144,7 @@
   "show_person_options": "Show person options",
   "show_progress_bar": "Show Progress Bar",
   "show_search_options": "Show search options",
+  "show_slideshow_transition": "Show slideshow transition",
   "show_supporter_badge": "Supporter badge",
   "show_supporter_badge_description": "Show a supporter badge",
   "shuffle": "Shuffle",
diff --git a/web/src/lib/stores/slideshow.store.ts b/web/src/lib/stores/slideshow.store.ts
index daa4e987916b4..3be96fda3eadb 100644
--- a/web/src/lib/stores/slideshow.store.ts
+++ b/web/src/lib/stores/slideshow.store.ts
@@ -38,6 +38,7 @@ function createSlideshowStore() {
 
   const showProgressBar = persisted<boolean>('slideshow-show-progressbar', true);
   const slideshowDelay = persisted<number>('slideshow-delay', 5, {});
+  const slideshowTransition = persisted<boolean>('slideshow-transition', true);
 
   return {
     restartProgress: {
@@ -67,6 +68,7 @@ function createSlideshowStore() {
     slideshowState,
     slideshowDelay,
     showProgressBar,
+    slideshowTransition,
   };
 }