From 637e5cd2d3597404e860e558aa85709299d4ad52 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 26 Jan 2025 15:10:22 -0600
Subject: [PATCH] Disable zoom F key listener on root

---
 src/components/image/useImageZoomControls.ts |  9 ++-
 src/photo/PhotoLarge.tsx                     | 67 ++++++++++++--------
 src/photo/PhotosLarge.tsx                    |  1 +
 src/site/viewerjs.css                        |  2 +-
 4 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/src/components/image/useImageZoomControls.ts b/src/components/image/useImageZoomControls.ts
index 4b5ac312..73c36671 100644
--- a/src/components/image/useImageZoomControls.ts
+++ b/src/components/image/useImageZoomControls.ts
@@ -9,6 +9,7 @@ const EVENT_KEYDOWN = 'keydown';
 export default function useImageZoomControls(
   imageRef: RefObject<HTMLDivElement | null>,
   isEnabled?: boolean,
+  shouldExpandOnFKeydown?: boolean,
 ) {
   const viewerRef = useRef<Viewer | null>(null);
 
@@ -67,10 +68,14 @@ export default function useImageZoomControls(
 
   // On 'F' keydown, toggle fullscreen
   const handleKeyDown = useCallback((e: KeyboardEvent) => {
-    if (!isCommandKOpen && e.key.toUpperCase() === 'F') {
+    if (
+      shouldExpandOnFKeydown &&
+      !isCommandKOpen &&
+      e.key.toUpperCase() === 'F'
+    ) {
       viewerRef.current?.show();
     }
-  }, [isCommandKOpen]);
+  }, [shouldExpandOnFKeydown, isCommandKOpen]);
   useEffect(() => {
     document.addEventListener(EVENT_KEYDOWN, handleKeyDown);
     return () => {
diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index 6de07a27..3458a50c 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -53,6 +53,7 @@ export default function PhotoLarge({
   showCamera = true,
   showSimulation = true,
   showZoomControls: showZoomControlsProp = true,
+  shouldZoomOnFKeydown = true,
   shouldShare = true,
   shouldShareTag,
   shouldShareCamera,
@@ -73,6 +74,7 @@ export default function PhotoLarge({
   showCamera?: boolean
   showSimulation?: boolean
   showZoomControls?: boolean
+  shouldZoomOnFKeydown?: boolean
   shouldShare?: boolean
   shouldShareTag?: boolean
   shouldShareCamera?: boolean
@@ -105,6 +107,7 @@ export default function PhotoLarge({
   const { open } = useImageZoomControls(
     refZoomControlsContainer,
     showZoomControls,
+    shouldZoomOnFKeydown,
   );
 
   const hasTitle =
@@ -141,41 +144,49 @@ export default function PhotoLarge({
     }
   };
 
+  const largePhotoContent =
+    <div className={clsx(
+      arePhotosMatted && 'flex items-center justify-center',
+      // Always specify height to ensure fallback doesn't collapse
+      arePhotosMatted && 'h-[90%]',
+      arePhotosMatted && matteContentWidthForAspectRatio(),
+    )}>
+      <div
+        ref={refZoomControlsContainer}
+        className={clsx(showZoomControls && 'cursor-zoom-in')}
+      >
+        <ImageLarge
+          className={clsx(arePhotosMatted && 'h-full')}
+          imgClassName={clsx(arePhotosMatted &&
+            'object-contain w-full h-full')}
+          alt={altTextForPhoto(photo)}
+          src={photo.url}
+          aspectRatio={photo.aspectRatio}
+          blurDataURL={photo.blurData}
+          blurCompatibilityMode={doesPhotoNeedBlurCompatibility(photo)}
+          priority={priority}
+        />
+      </div>
+    </div>;
+
+  const largePhotoContainerClassName = clsx(arePhotosMatted &&
+    'flex items-center justify-center aspect-[3/2] bg-gray-100',
+  );
+
   return (
     <SiteGrid
       containerRef={ref}
       className={className}
-      contentMain={
-        <Link
+      contentMain={showZoomControls
+        ? <div className={largePhotoContainerClassName}>
+          {largePhotoContent}
+        </div>
+        : <Link
           href={pathForPhoto({ photo })}
-          className={clsx(arePhotosMatted &&
-            'flex items-center justify-center aspect-[3/2] bg-gray-100',
-          )}
+          className={largePhotoContainerClassName}
           prefetch={prefetch}
         >
-          <div className={clsx(
-            arePhotosMatted && 'flex items-center justify-center',
-            // Always specify height to ensure fallback doesn't collapse
-            arePhotosMatted && 'h-[90%]',
-            arePhotosMatted && matteContentWidthForAspectRatio(),
-          )}>
-            <div
-              ref={refZoomControlsContainer}
-              className={clsx(showZoomControls && 'cursor-zoom-in')}
-            >
-              <ImageLarge
-                className={clsx(arePhotosMatted && 'h-full')}
-                imgClassName={clsx(arePhotosMatted &&
-                  'object-contain w-full h-full')}
-                alt={altTextForPhoto(photo)}
-                src={photo.url}
-                aspectRatio={photo.aspectRatio}
-                blurDataURL={photo.blurData}
-                blurCompatibilityMode={doesPhotoNeedBlurCompatibility(photo)}
-                priority={priority}
-              />
-            </div>
-          </div>
+          {largePhotoContent}
         </Link>}
       contentSide={
         <DivDebugBaselineGrid className={clsx(
diff --git a/src/photo/PhotosLarge.tsx b/src/photo/PhotosLarge.tsx
index b1a2fac4..9da562c9 100644
--- a/src/photo/PhotosLarge.tsx
+++ b/src/photo/PhotosLarge.tsx
@@ -31,6 +31,7 @@ export default function PhotosLarge({
           priority={index <= 1}
           prefetchRelatedLinks={prefetchFirstPhotoLinks && index === 0}
           revalidatePhoto={revalidatePhoto}
+          shouldZoomOnFKeydown={false}
           onVisible={index === photos.length - 1
             ? onLastPhotoVisible
             : undefined}
diff --git a/src/site/viewerjs.css b/src/site/viewerjs.css
index d6ede4ae..a2a44f6a 100644
--- a/src/site/viewerjs.css
+++ b/src/site/viewerjs.css
@@ -43,7 +43,7 @@
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-  padding: 2rem 0.25rem;
+  padding: 0rem 0.25rem 2rem 0.25rem;
 }
 .viewer-toolbar > ul > li {
   display: flex;