From cc30c2ea49ce76c06f8bd361f17abef916c1487b Mon Sep 17 00:00:00 2001
From: carlobortolan <carlobortolan@gmail.com>
Date: Mon, 13 Jan 2025 18:34:11 +0100
Subject: [PATCH] Update FullscreenButton.tsx and fix linting

---
 src/components/FullscreenButton.tsx        | 45 ++++++++++++++--------
 src/components/image/ImageWithFallback.tsx |  2 +-
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/components/FullscreenButton.tsx b/src/components/FullscreenButton.tsx
index fcbab1b6..e5794184 100644
--- a/src/components/FullscreenButton.tsx
+++ b/src/components/FullscreenButton.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, RefObject } from 'react';
+import { useEffect, useCallback, RefObject } from 'react';
 import { MdFullscreen, MdFullscreenExit } from 'react-icons/md';
 import { clsx } from 'clsx/lite';
 import { useAppState } from '@/state/AppState';
@@ -15,39 +15,52 @@ export default function FullscreenButton({
 }) {
   const { isFullscreen, setIsFullscreen } = useAppState();
 
-  const toggleFullscreen = async () => {
+  // Toggle fullscreen mode
+  const toggleFullscreen = useCallback(async () => {
     if (!document.fullscreenElement) {
       await imageRef.current?.requestFullscreen();
-      setIsFullscreen && setIsFullscreen(true);
+      setIsFullscreen?.(true);
     } else {
       await document.exitFullscreen();
-      setIsFullscreen && setIsFullscreen(false);
+      setIsFullscreen?.(false);
     }
-  };
+  }, [imageRef, setIsFullscreen]);
+
+  // Toggle fullscreen on 'f' key press
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    if (event.key === 'f' || event.key === 'F') {
+      toggleFullscreen();
+    }
+  }, [toggleFullscreen]);
+
+  // Handle fullscreen change (e.g, switching tabs in fullscreen mode)
+  const handleFullscreenChange = useCallback(() => {
+    if (!document.fullscreenElement) {
+      setIsFullscreen?.(false);
+    }
+  }, [setIsFullscreen]);
 
   useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'f' || event.key === 'F') {
-        toggleFullscreen();
-      }
-    };
-
     document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
     };
-  }, [toggleFullscreen]);
+  }, [handleKeyDown, handleFullscreenChange]);
 
   return (
     <LoaderButton
       title="Toggle Fullscreen"
       className={clsx(
         className,
-        'text-medium absolute bottom-2 right-2 bg-white p-2 rounded'
+        'text-medium absolute bottom-2 right-2 bg-white p-2 rounded',
       )}
-      icon={isFullscreen ? <MdFullscreenExit size={18} /> : <MdFullscreen size={18} />}
-      spinnerColor='light-gray'
-      styleAs='link'
+      icon={isFullscreen ? <MdFullscreenExit size={18} />
+        : <MdFullscreen size={18} />}
+      spinnerColor="light-gray"
+      styleAs="link"
       onClick={toggleFullscreen}
     />
   );
diff --git a/src/components/image/ImageWithFallback.tsx b/src/components/image/ImageWithFallback.tsx
index 5d18738b..0143c3f8 100644
--- a/src/components/image/ImageWithFallback.tsx
+++ b/src/components/image/ImageWithFallback.tsx
@@ -108,6 +108,6 @@ export default function ImageWithFallback(props: ImageProps & {
         onError,
       }} />
       {allowFullscreen && <FullscreenButton imageRef={imgRef} />}
-      </div>
+    </div>
   );
 }