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