Javascript - How do I check to exit from full screen with nextjs?

coflow
September 28, 2023
178 views
0 votes
2 Answers

'use client'

const  App = () => {
  const [isFScreen, setIsFScreen] = useState(false)

  useEffect(() => {
    const down = (e: KeyboardEvent) => {
        if (e.key === "Escape"){
          setIsFScreen(false)
        }
    }

    document.addEventListener("keydown", down)
  }, [])

  return(
    <div id="gameScreen">
     <span onClick={() => {
       setIsFScreen(!isFScreen)
       document.getElementById("gameScreen")?.requestFullscreen()}}>
         Full Screen
     </span>
    </div>
)}

When I press the ESC key once, it exits full screen but "setIsFScreen" does not become false. I have to press it twice to make it false. How can i solve this?

I was expecting the status to be false when it exited full screen.

Answers

Chosen as BEST ANSWER

  const [isFScreen, setFullScreen] = useState(false);

  useEffect(() => {
    function handleFullScreenChange() {
      if (document.fullscreenElement) {
        setFullScreen(true);
      } else {
        setFullScreen(false);
      }
    }

    document.addEventListener('fullscreenchange', handleFullScreenChange);

    return () => {
      document.removeEventListener('fullscreenchange', handleFullScreenChange);
    };
  }, []);

  useEffect(() => {
    function handleEscKeyPress(event:any) {
      if (event.key === 'Escape') {
        exitFullScreen();
      }
    }

    if (isFScreen) {
      window.addEventListener('keydown', handleEscKeyPress);
    } else {
      window.removeEventListener('keydown', handleEscKeyPress);
    }

    return () => {
      window.removeEventListener('keydown', handleEscKeyPress);
    };
  }, [isFScreen]);

  const enterFullScreen = () => {
    if (document.getElementById("gameScreen")?.requestFullscreen) {
      document.getElementById("gameScreen")?.requestFullscreen();
    }
  };

  const exitFullScreen = () => {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  };

I solved this problem with ChatGPT. THANKS CHATGPT!

(Edit)

just use the listen events for fulllscreen

const  App = () => {
  const [isFScreen, setIsFScreen] = useState(false)

  useEffect(() => {
    const exitHandler= (e:any) => {
       setIsFScreen(false);
    }

    document.addEventListener('fullscreenchange', exitHandler, false);
    document.addEventListener('mozfullscreenchange', exitHandler, false);
    document.addEventListener('MSFullscreenChange', exitHandler, false);
    document.addEventListener('webkitfullscreenchange', exitHandler, false);
  }, [])

  return(
    <div id="gameScreen">
     <span onClick={() => {
       setIsFScreen(!isFScreen)
       document.getElementById("gameScreen")?.requestFullscreen()}}>
         Full Screen
     </span>
    </div>
)}

Supports Opera, Safari, Chrome with webkit, Firefox/Gecko with moz, IE 11 with MSFullScreenChange, and will support the actual spec with fullscreenchange once it’s been successfully implemented in all of the browsers. Obviously, Fullscreen API is only supported in the modern browsers, so I did not provide attachEvent fallbacks for older versions of IE.

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – How do I check to exit from full screen with nextjs?

Answers