feat: no slideshow transition (#12989)

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}

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')}

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",

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,
   };
 }