Enable zoom controls by default

README.md

@@ -111,6 +111,7 @@ Application behavior can be changed by configuring the following environment var
 
 #### Display
 - `NEXT_PUBLIC_HIDE_EXIF_DATA = 1` hides EXIF data in photo details and OG images (potentially useful for portfolios, which don't focus on photography)
+- `NEXT_PUBLIC_HIDE_ZOOM_CONTROLS = 1` hides fullscreen photo zoom controls
 - `NEXT_PUBLIC_HIDE_TAKEN_AT_TIME = 1` hides taken at time from photo meta
 - `NEXT_PUBLIC_HIDE_SOCIAL = 1` removes X button from share modal
 - `NEXT_PUBLIC_HIDE_FILM_SIMULATIONS = 1` prevents Fujifilm simulations showing up in `/grid` sidebar and CMD-K search results
@@ -119,7 +120,6 @@ Application behavior can be changed by configuring the following environment var
 #### Settings
 - `NEXT_PUBLIC_GRID_HOMEPAGE = 1` shows grid layout on homepage
 - `NEXT_PUBLIC_DEFAULT_THEME = light | dark` sets preferred initial theme (defaults to `system` when not configured)
-- `NEXT_PUBLIC_ZOOM_CONTROLS = 1` enables fullscreen photo zoom controls
 - `NEXT_PUBLIC_MATTE_PHOTOS = 1` constrains the size of each photo, and enables a surrounding border (potentially useful for photos with tall aspect ratios)
 - `NEXT_PUBLIC_GEO_PRIVACY = 1` disables collection/display of location-based data (⚠️ re-compresses uploaded images in order to remove GPS information)
 - `NEXT_PUBLIC_ALLOW_PUBLIC_DOWNLOADS = 1` enables public photo downloads for all visitors (⚠️ may result in increased bandwidth usage)

src/components/cmdk/CommandKClient.tsx

@@ -92,7 +92,7 @@ export default function CommandKClient({
     selectedPhotoIds,
     setSelectedPhotoIds,
     isGridHighDensity,
-    areZoomControlsEnabled,
+    areZoomControlsShown,
     arePhotosMatted,
     shouldShowBaselineGrid,
     shouldDebugImageFallbacks,
@@ -100,7 +100,7 @@ export default function CommandKClient({
     setShouldRespondToKeyboardCommands,
     setShouldShowBaselineGrid,
     setIsGridHighDensity,
-    setAreZoomControlsEnabled,
+    setAreZoomControlsShown,
     setArePhotosMatted,
     setShouldDebugImageFallbacks,
   } = useAppState();
@@ -253,8 +253,8 @@ export default function CommandKClient({
       accessory: <RiToolsFill size={16} className="translate-x-[-1px]" />,
       items: [{
         label: 'Toggle Zoom Controls',
-        action: () => setAreZoomControlsEnabled?.(prev => !prev),
-        annotation: areZoomControlsEnabled ? <FaCheck size={12} /> : undefined,
+        action: () => setAreZoomControlsShown?.(prev => !prev),
+        annotation: areZoomControlsShown ? <FaCheck size={12} /> : undefined,
       }, {
         label: 'Toggle Photo Matting',
         action: () => setArePhotosMatted?.(prev => !prev),

src/photo/PhotoLarge.tsx

@@ -85,12 +85,12 @@ export default function PhotoLarge({
   const refZoomControlsContainer = useRef<HTMLDivElement>(null);
 
   const {
-    areZoomControlsEnabled,
+    areZoomControlsShown,
     arePhotosMatted,
     isUserSignedIn,
   } = useAppState();
 
-  const showZoomControls = showZoomControlsProp && areZoomControlsEnabled;
+  const showZoomControls = showZoomControlsProp && areZoomControlsShown;
 
   const tags = sortTags(photo.tags, primaryTag);
 

src/site/SiteChecklistClient.tsx

@@ -60,6 +60,7 @@ export default function SiteChecklistClient({
   isBlurEnabled,
   // Display
   showExifInfo,
+  showZoomControls,
   showTakenAtTimeHidden,
   showSocial,
   showFilmSimulations,
@@ -68,7 +69,6 @@ export default function SiteChecklistClient({
   isGridHomepageEnabled,
   hasDefaultTheme,
   defaultTheme,
-  areZoomControlsEnabled,
   arePhotosMatted,
   isGeoPrivacyEnabled,
   gridAspectRatio,
@@ -474,6 +474,15 @@ export default function SiteChecklistClient({
               Set environment variable to {'"1"'} to hide EXIF data:
               {renderEnvVars(['NEXT_PUBLIC_HIDE_EXIF_DATA'])}
             </ChecklistRow>
+            <ChecklistRow
+              title="Zoom controls"
+              status={showZoomControls}
+              optional
+            >
+              Set environment variable to {'"1"'} to hide
+              fullscreen photo zoom controls:
+              {renderEnvVars(['NEXT_PUBLIC_HIDE_ZOOM_CONTROLS'])}
+            </ChecklistRow>
             <ChecklistRow
               title="Show taken at time"
               status={showTakenAtTimeHidden}
@@ -538,15 +547,6 @@ export default function SiteChecklistClient({
               (defaults to {'\'system\''}):
               {renderEnvVars(['NEXT_PUBLIC_DEFAULT_THEME'])}
             </ChecklistRow>
-            <ChecklistRow
-              title="Zoom controls"
-              status={areZoomControlsEnabled}
-              optional
-            >
-              Set environment variable to {'"1"'} to enable
-              fullscreen photo zoom controls:
-              {renderEnvVars(['NEXT_PUBLIC_ZOOM_CONTROLS'])}
-            </ChecklistRow>
             <ChecklistRow
               title="Photo matting"
               status={arePhotosMatted}

src/site/config.ts

@@ -165,6 +165,8 @@ export const BLUR_ENABLED =
 
 export const SHOW_EXIF_DATA =
   process.env.NEXT_PUBLIC_HIDE_EXIF_DATA !== '1';
+export const SHOW_ZOOM_CONTROLS =
+  process.env.NEXT_PUBLIC_HIDE_ZOOM_CONTROLS !== '1';
 export const SHOW_TAKEN_AT_TIME =
   process.env.NEXT_PUBLIC_HIDE_TAKEN_AT_TIME !== '1';
 export const SHOW_SOCIAL =
@@ -184,8 +186,6 @@ export const DEFAULT_THEME =
     : process.env.NEXT_PUBLIC_DEFAULT_THEME === 'light'
       ? 'light'
       : 'system';
-export const ZOOM_CONTROLS_ENABLED =
-  process.env.NEXT_PUBLIC_ZOOM_CONTROLS === '1';
 export const MATTE_PHOTOS =
   process.env.NEXT_PUBLIC_MATTE_PHOTOS === '1';
 export const GEO_PRIVACY_ENABLED =
@@ -264,6 +264,7 @@ export const CONFIG_CHECKLIST_STATUS = {
   isBlurEnabled: BLUR_ENABLED,
   // DISPLAY
   showExifInfo: SHOW_EXIF_DATA,
+  showZoomControls: SHOW_ZOOM_CONTROLS,
   showTakenAtTimeHidden: SHOW_TAKEN_AT_TIME,
   showSocial: SHOW_SOCIAL,
   showFilmSimulations: SHOW_FILM_SIMULATIONS,
@@ -272,7 +273,6 @@ export const CONFIG_CHECKLIST_STATUS = {
   isGridHomepageEnabled: GRID_HOMEPAGE_ENABLED,
   hasDefaultTheme: Boolean(process.env.NEXT_PUBLIC_DEFAULT_THEME),
   defaultTheme: DEFAULT_THEME,
-  areZoomControlsEnabled: ZOOM_CONTROLS_ENABLED,
   arePhotosMatted: MATTE_PHOTOS,
   isGeoPrivacyEnabled: GEO_PRIVACY_ENABLED,
   gridAspectRatio: GRID_ASPECT_RATIO,

src/state/AppState.ts

@@ -33,8 +33,8 @@ export interface AppStateContext {
   // DEBUG
   isGridHighDensity?: boolean
   setIsGridHighDensity?: Dispatch<SetStateAction<boolean>>
-  areZoomControlsEnabled?: boolean
-  setAreZoomControlsEnabled?: Dispatch<SetStateAction<boolean>>
+  areZoomControlsShown?: boolean
+  setAreZoomControlsShown?: Dispatch<SetStateAction<boolean>>
   arePhotosMatted?: boolean
   setArePhotosMatted?: Dispatch<SetStateAction<boolean>>
   shouldDebugImageFallbacks?: boolean

src/state/AppStateProvider.tsx

@@ -9,7 +9,7 @@ import useSWR from 'swr';
 import {
   HIGH_DENSITY_GRID,
   MATTE_PHOTOS,
-  ZOOM_CONTROLS_ENABLED,
+  SHOW_ZOOM_CONTROLS,
 } from '@/site/config';
 import { getPhotosHiddenMetaCachedAction } from '@/photo/actions';
 import { ShareModalProps } from '@/share';
@@ -50,8 +50,8 @@ export default function AppStateProvider({
   // DEBUG
   const [isGridHighDensity, setIsGridHighDensity] =
     useState(HIGH_DENSITY_GRID);
-  const [areZoomControlsEnabled, setAreZoomControlsEnabled] =
-    useState(ZOOM_CONTROLS_ENABLED);
+  const [areZoomControlsShown, setAreZoomControlsShown] =
+    useState(SHOW_ZOOM_CONTROLS);
   const [arePhotosMatted, setArePhotosMatted] =
     useState(MATTE_PHOTOS);
   const [shouldDebugImageFallbacks, setShouldDebugImageFallbacks] =
@@ -122,8 +122,8 @@ export default function AppStateProvider({
         // DEBUG
         isGridHighDensity,
         setIsGridHighDensity,
-        areZoomControlsEnabled,
-        setAreZoomControlsEnabled,
+        areZoomControlsShown,
+        setAreZoomControlsShown,
         arePhotosMatted,
         setArePhotosMatted,
         shouldDebugImageFallbacks,