diff --git a/src/components/image/useImageZoomControls.ts b/src/components/image/useImageZoomControls.ts index b6c83472..4b5ac312 100644 --- a/src/components/image/useImageZoomControls.ts +++ b/src/components/image/useImageZoomControls.ts @@ -33,6 +33,14 @@ export default function useImageZoomControls( } }, [imageRef, isEnabled]); + const open = useCallback(() => { + viewerRef.current?.show(); + }, [viewerRef]); + + const close = useCallback(() => { + viewerRef.current?.hide(); + }, [viewerRef]); + // On shown, disable keyboard commands const onShown = useCallback(() => setShouldRespondToKeyboardCommands?.(false), @@ -69,4 +77,9 @@ export default function useImageZoomControls( document.removeEventListener(EVENT_KEYDOWN, handleKeyDown); }; }, [handleKeyDown]); + + return { + open, + close, + }; } diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx index 5233ec3a..55b03576 100644 --- a/src/photo/PhotoLarge.tsx +++ b/src/photo/PhotoLarge.tsx @@ -37,6 +37,8 @@ import useOnVisible from '@/utility/useOnVisible'; import PhotoDate from './PhotoDate'; import { useAppState } from '@/state/AppState'; import useImageZoomControls from '@/components/image/useImageZoomControls'; +import { LuZoomIn } from 'react-icons/lu'; +import LoaderButton from '@/components/primitives/LoaderButton'; export default function PhotoLarge({ photo, @@ -79,7 +81,7 @@ export default function PhotoLarge({ onVisible?: () => void }) { const ref = useRef(null); - const refZoomControls = useRef(null); + const refZoomControlsContainer = useRef(null); const { areZoomControlsEnabled, @@ -97,7 +99,10 @@ export default function PhotoLarge({ useOnVisible(ref, onVisible); - useImageZoomControls(refZoomControls, areZoomControlsEnabled); + const { open } = useImageZoomControls( + refZoomControlsContainer, + areZoomControlsEnabled, + ); const hasTitle = showTitle && @@ -152,7 +157,7 @@ export default function PhotoLarge({ arePhotosMatted && matteContentWidthForAspectRatio(), )}>
} + {areZoomControlsEnabled && + } + onClick={open} + styleAs="link" + className="text-medium" + />} {ALLOW_PUBLIC_DOWNLOADS &&