👀 Views: 0 💬 Answers: 1 📅 Created: 2025-08-20

react fullscreen-api event-listener JavaScript

I'm dealing with I'm working on a React application that utilizes the Fullscreen API to enable a full-screen mode for a video player. Everything seems to work as expected until I try to listen for changes in the full-screen state. I have a function set up to handle the `fullscreenchange` event, but for some reason, it doesn't seem to fire consistently. Here's the relevant code snippet: ```javascript import React, { useEffect } from 'react'; const VideoPlayer = () => { const videoRef = React.useRef(null); const handleFullscreenChange = () => { if (document.fullscreenElement) { console.log('Entered full-screen mode'); } else { console.log('Exited full-screen mode'); } }; useEffect(() => { document.addEventListener('fullscreenchange', handleFullscreenChange); return () => { document.removeEventListener('fullscreenchange', handleFullscreenChange); }; }, []); const toggleFullscreen = () => { if (videoRef.current) { if (!document.fullscreenElement) { videoRef.current.requestFullscreen(); } else { document.exitFullscreen(); } } }; return ( <div> <video ref={videoRef} src="your-video-source.mp4" controls /> <button onClick={toggleFullscreen}>Toggle Fullscreen</button> </div> ); }; export default VideoPlayer; ``` I verified that the `toggleFullscreen` function works, and the video enters/exits full-screen mode as expected. However, I sometimes get no console output when changing the state. My browser is Chrome 94, and I have tested it on a few different machines with the same result. I suspect it might be related to the timing of the event listeners or maybe a problem with the cleanup function. Is there something I'm missing or a better approach to ensure that the event fires reliably? This is happening in both development and production on Ubuntu 22.04. Any examples would be super helpful.