diff --git a/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx b/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx index 65c15024c..41c6d4fad 100644 --- a/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx +++ b/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx @@ -206,8 +206,25 @@ export const LightboxComponent: React.FC = ({ setLightboxSettings({ slideshowDelay: v }); } + const scaleUp = + lightboxSettings?.scaleUp ?? + config?.interface.imageLightbox.scaleUp ?? + false; + + const resetZoomOnNav = + lightboxSettings?.resetZoomOnNav ?? + config?.interface.imageLightbox.resetZoomOnNav ?? + false; + + const scrollMode = + lightboxSettings?.scrollMode ?? + config?.interface.imageLightbox.scrollMode ?? + GQL.ImageLightboxScrollMode.Zoom; + const displayMode = - lightboxSettings?.displayMode ?? GQL.ImageLightboxDisplayMode.FitXy; + lightboxSettings?.displayMode ?? + config?.interface.imageLightbox.displayMode ?? + GQL.ImageLightboxDisplayMode.FitXy; const oldDisplayMode = useRef(displayMode); function setDisplayMode(v: GQL.ImageLightboxDisplayMode) { @@ -250,13 +267,13 @@ export const LightboxComponent: React.FC = ({ // reset zoom status // setResetZoom((r) => !r); // setZoomed(false); - if (lightboxSettings?.resetZoomOnNav) { + if (resetZoomOnNav) { setZoom(1); } setResetPosition((r) => !r); oldIndex.current = index; - }, [index, images.length, lightboxSettings?.resetZoomOnNav]); + }, [index, images.length, resetZoomOnNav]); const getNavOffset = useCallback(() => { if (images.length < 2) return; @@ -288,13 +305,13 @@ export const LightboxComponent: React.FC = ({ // reset zoom status // setResetZoom((r) => !r); // setZoomed(false); - if (lightboxSettings?.resetZoomOnNav) { + if (resetZoomOnNav) { setZoom(1); } setResetPosition((r) => !r); } oldDisplayMode.current = displayMode; - }, [displayMode, lightboxSettings?.resetZoomOnNav]); + }, [displayMode, resetZoomOnNav]); const selectIndex = (e: React.MouseEvent, i: number) => { setIndex(i); @@ -635,7 +652,7 @@ export const LightboxComponent: React.FC = ({ label={intl.formatMessage({ id: "dialogs.lightbox.scale_up.label", })} - checked={lightboxSettings?.scaleUp ?? false} + checked={scaleUp} disabled={displayMode === GQL.ImageLightboxDisplayMode.Original} onChange={(v) => setScaleUp(v.currentTarget.checked)} /> @@ -655,7 +672,7 @@ export const LightboxComponent: React.FC = ({ label={intl.formatMessage({ id: "dialogs.lightbox.reset_zoom_on_nav", })} - checked={lightboxSettings?.resetZoomOnNav ?? false} + checked={resetZoomOnNav} onChange={(v) => setResetZoomOnNav(v.currentTarget.checked)} /> @@ -674,10 +691,7 @@ export const LightboxComponent: React.FC = ({ onChange={(e) => setScrollMode(e.target.value as GQL.ImageLightboxScrollMode) } - value={ - lightboxSettings?.scrollMode ?? - GQL.ImageLightboxScrollMode.Zoom - } + value={scrollMode} className="btn-secondary mx-1 mb-1" >