fullscreen api

src/components/Slideshow.tsx

@@ -16,6 +16,7 @@ const images: SlideImage[] = [
 ];
 
 const Slideshow: React.FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
   const {
     currentSlide,
     showSlide,
@@ -25,9 +26,20 @@ const Slideshow: React.FC = () => {
     handleWheel,
     isFullscreen,
     toggleFullscreen,
-  } = useSlideshow(images);
+  } = useSlideshow(images, containerRef);
 
-  const containerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const elem = document.documentElement;
+    if (
+      !elem.requestFullscreen &&
+      !elem.mozRequestFullScreen && // Firefox
+      !elem.webkitRequestFullscreen && // Chrome, Safari & Opera
+      !elem.msRequestFullscreen
+    ) {
+      // IE/Edge
+      console.warn("Fullscreen API is not supported in this browser");
+    }
+  }, []);
 
   useEffect(() => {
     const container = containerRef.current;

src/hooks/useSlideshow.ts

@@ -1,7 +1,10 @@
 import { useState, useCallback, useEffect, useRef } from "react";
 import type { SlideImage } from "../types";
 
-export const useSlideshow = (images: SlideImage[]) => {
+export const useSlideshow = (
+  images: SlideImage[],
+  containerRef: React.RefObject<HTMLDivElement>,
+) => {
   const [currentSlide, setCurrentSlide] = useState<number>(0);
   const [isPaused, setIsPaused] = useState<boolean>(false);
   const [scale, setScale] = useState<number>(1);
@@ -59,8 +62,39 @@ export const useSlideshow = (images: SlideImage[]) => {
   );
 
   const toggleFullscreen = useCallback(() => {
-    setIsFullscreen((prev) => !prev);
-    setScale(1); // Reset scale when toggling fullscreen
+    if (!document.fullscreenElement && containerRef.current) {
+      containerRef.current
+        .requestFullscreen()
+        .then(() => {
+          setIsFullscreen(true);
+        })
+        .catch((err) => {
+          console.error(
+            `Error attempting to enable fullscreen: ${err.message}`,
+          );
+        });
+    } else if (document.fullscreenElement) {
+      document
+        .exitFullscreen()
+        .then(() => {
+          setIsFullscreen(false);
+        })
+        .catch((err) => {
+          console.error(`Error attempting to exit fullscreen: ${err.message}`);
+        });
+    }
+    setScale(1);
+  }, [containerRef]);
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", handleFullscreenChange);
+    };
   }, []);
 
   useEffect(() => {

src/styles/Slideshow.module.css

@@ -15,15 +15,24 @@
     transition: all 0.3s ease;
 }
 
-.fullscreen {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.95);
-    z-index: 1000;
+.slideshowContainer:fullscreen {
+    padding: 0;
+    background: #000;
+}
+
+.slideshowContainer:-webkit-full-screen {
+    padding: 0;
+    background: #000;
+}
+
+.slideshowContainer:-moz-full-screen {
+    padding: 0;
+    background: #000;
+}
+
+.slideshowContainer:-ms-fullscreen {
     padding: 0;
+    background: #000;
 }
 
 .slide {

src/types/fullscreen.d.ts

@@ -0,0 +1,16 @@
+interface Document {
+  mozCancelFullScreen?: () => Promise<void>;
+  webkitExitFullscreen?: () => Promise<void>;
+  msExitFullscreen?: () => Promise<void>;
+  mozFullScreenElement?: Element;
+  webkitFullscreenElement?: Element;
+  msFullscreenElement?: Element;
+  fullscreenElement: Element | null;
+}
+
+interface HTMLElement {
+  mozRequestFullScreen?: () => Promise<void>;
+  webkitRequestFullscreen?: () => Promise<void>;
+  msRequestFullscreen?: () => Promise<void>;
+  requestFullscreen: () => Promise<void>;
+}