diff --git a/i18n/en.json b/i18n/en.json index 1dbd50e294..c555706ba8 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -2022,6 +2022,9 @@ "skip_to_folders": "Skip to folders", "skip_to_tags": "Skip to tags", "slideshow": "Slideshow", + "slideshow_animate": "Animate slideshow", + "slideshow_animate_pan_strength": "Pan strength percentage", + "slideshow_animate_zoom_strength": "Zoom strength percentage", "slideshow_body": "Sit back and watch your photos play in a full-screen slideshow.", "slideshow_metadata_overlay_mode": "Overlay content", "slideshow_metadata_overlay_mode_description_only": "Description only", diff --git a/web/src/lib/modals/SlideshowSettingsModal.svelte b/web/src/lib/modals/SlideshowSettingsModal.svelte index 6540f63124..f355bdda3b 100644 --- a/web/src/lib/modals/SlideshowSettingsModal.svelte +++ b/web/src/lib/modals/SlideshowSettingsModal.svelte @@ -22,6 +22,9 @@ const { slideshowDelay, showProgressBar, + slideshowAnimate, + slideshowAnimatePanStrength, + slideshowAnimateZoomStrength, slideshowNavigation, slideshowLook, slideshowTransition, @@ -41,6 +44,9 @@ // Temporary variables to hold the settings - marked as reactive with $state() but initialized with store values let tempSlideshowDelay = $state($slideshowDelay); let tempShowProgressBar = $state($showProgressBar); + let tempSlideshowAnimate = $state($slideshowAnimate); + let tempSlideshowAnimatePanStrength = $state($slideshowAnimatePanStrength); + let tempSlideshowAnimateZoomStrength = $state($slideshowAnimateZoomStrength); let tempSlideshowNavigation = $state($slideshowNavigation); let tempSlideshowLook = $state($slideshowLook); let tempSlideshowTransition = $state($slideshowTransition); @@ -84,6 +90,9 @@ const onSubmit = () => { $slideshowDelay = tempSlideshowDelay; $showProgressBar = tempShowProgressBar; + $slideshowAnimate = tempSlideshowAnimate; + $slideshowAnimatePanStrength = tempSlideshowAnimatePanStrength; + $slideshowAnimateZoomStrength = tempSlideshowAnimateZoomStrength; $slideshowNavigation = tempSlideshowNavigation; $slideshowLook = tempSlideshowLook; $slideshowTransition = tempSlideshowTransition; @@ -151,5 +160,15 @@ {$t('admin.slideshow_duration_description')} + + + + + + + + + + diff --git a/web/src/lib/stores/slideshow.store.ts b/web/src/lib/stores/slideshow.store.ts index 17ba266ee1..e6417b53ee 100644 --- a/web/src/lib/stores/slideshow.store.ts +++ b/web/src/lib/stores/slideshow.store.ts @@ -42,6 +42,9 @@ function createSlideshowStore() { const slideshowState = writable(SlideshowState.None); const showProgressBar = persisted('slideshow-show-progressbar', true); + const slideshowAnimate = persisted('slideshow-animate', false); + const slideshowAnimatePanStrength = persisted('slideshow-animate-pan-strength', 50, {}); + const slideshowAnimateZoomStrength = persisted('slideshow-animate-zoom-strength', 50, {}); const slideshowDelay = persisted('slideshow-delay', 5, {}); const slideshowTransition = persisted('slideshow-transition', true); const slideshowAutoplay = persisted('slideshow-autoplay', true, {}); @@ -89,6 +92,9 @@ function createSlideshowStore() { slideshowRepeat, slideshowShowMetadataOverlay, slideshowMetadataOverlayMode, + slideshowAnimate, + slideshowAnimatePanStrength, + slideshowAnimateZoomStrength, }; }