diff --git a/src/components/cmdk/CommandKClient.tsx b/src/components/cmdk/CommandKClient.tsx index bd598885..9cf33da6 100644 --- a/src/components/cmdk/CommandKClient.tsx +++ b/src/components/cmdk/CommandKClient.tsx @@ -92,6 +92,7 @@ export default function CommandKClient({ selectedPhotoIds, setSelectedPhotoIds, isGridHighDensity, + areZoomControlsEnabled, arePhotosMatted, shouldShowBaselineGrid, shouldDebugImageFallbacks, @@ -99,6 +100,7 @@ export default function CommandKClient({ setShouldRespondToKeyboardCommands, setShouldShowBaselineGrid, setIsGridHighDensity, + setAreZoomControlsEnabled, setArePhotosMatted, setShouldDebugImageFallbacks, } = useAppState(); @@ -250,6 +252,10 @@ export default function CommandKClient({ heading: 'Debug Tools', accessory: , items: [{ + label: 'Toggle Zoom Controls', + action: () => setAreZoomControlsEnabled?.(prev => !prev), + annotation: areZoomControlsEnabled ? : undefined, + }, { label: 'Toggle Photo Matting', action: () => setArePhotosMatted?.(prev => !prev), annotation: arePhotosMatted ? : undefined, diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx index b2ab48d3..5233ec3a 100644 --- a/src/photo/PhotoLarge.tsx +++ b/src/photo/PhotoLarge.tsx @@ -55,7 +55,6 @@ export default function PhotoLarge({ shouldShareCamera, shouldShareSimulation, shouldShareFocalLength, - shouldShowZoomControls, includeFavoriteInAdminMenu, onVisible, }: { @@ -76,13 +75,18 @@ export default function PhotoLarge({ shouldShareSimulation?: boolean shouldShareFocalLength?: boolean shouldScrollOnShare?: boolean - shouldShowZoomControls?: boolean includeFavoriteInAdminMenu?: boolean onVisible?: () => void }) { const ref = useRef(null); const refZoomControls = useRef(null); + const { + areZoomControlsEnabled, + arePhotosMatted, + isUserSignedIn, + } = useAppState(); + const tags = sortTags(photo.tags, primaryTag); const camera = cameraFromPhoto(photo); @@ -93,9 +97,7 @@ export default function PhotoLarge({ useOnVisible(ref, onVisible); - useImageZoomControls(refZoomControls, shouldShowZoomControls); - - const { arePhotosMatted, isUserSignedIn } = useAppState(); + useImageZoomControls(refZoomControls, areZoomControlsEnabled); const hasTitle = showTitle && @@ -151,7 +153,7 @@ export default function PhotoLarge({ )}>
> + areZoomControlsEnabled?: boolean + setAreZoomControlsEnabled?: Dispatch> arePhotosMatted?: boolean setArePhotosMatted?: Dispatch> shouldDebugImageFallbacks?: boolean diff --git a/src/state/AppStateProvider.tsx b/src/state/AppStateProvider.tsx index e8619fec..7cd7b225 100644 --- a/src/state/AppStateProvider.tsx +++ b/src/state/AppStateProvider.tsx @@ -6,7 +6,11 @@ import { AnimationConfig } from '@/components/AnimateItems'; import usePathnames from '@/utility/usePathnames'; import { getAuthAction } from '@/auth/actions'; import useSWR from 'swr'; -import { HIGH_DENSITY_GRID, MATTE_PHOTOS } from '@/site/config'; +import { + HIGH_DENSITY_GRID, + MATTE_PHOTOS, + ZOOM_CONTROLS_ENABLED, +} from '@/site/config'; import { getPhotosHiddenMetaCachedAction } from '@/photo/actions'; import { ShareModalProps } from '@/share'; import { storeTimezoneCookie } from '@/utility/timezone'; @@ -46,6 +50,8 @@ export default function AppStateProvider({ // DEBUG const [isGridHighDensity, setIsGridHighDensity] = useState(HIGH_DENSITY_GRID); + const [areZoomControlsEnabled, setAreZoomControlsEnabled] = + useState(ZOOM_CONTROLS_ENABLED); const [arePhotosMatted, setArePhotosMatted] = useState(MATTE_PHOTOS); const [shouldDebugImageFallbacks, setShouldDebugImageFallbacks] = @@ -116,6 +122,8 @@ export default function AppStateProvider({ // DEBUG isGridHighDensity, setIsGridHighDensity, + areZoomControlsEnabled, + setAreZoomControlsEnabled, arePhotosMatted, setArePhotosMatted, shouldDebugImageFallbacks,