import { ReactNode , useRef , useLayoutEffect , useEffect } from "react" ; import fscreen from "fscreen" ; interface Props { enabled : boolean ; children : ReactNode ; onChange ( fullscreen ) : void ; } function leaveFullScreen ( ) { if ( fscreen . fullscreenEnabled ) { fscreen . exitFullscreen ( ) ; } } function enterFullScreen ( node ) { if ( fscreen . fullscreenEnabled ) { fscreen . requestFullscreen ( node ) ; } } function FullScreen ( props ) { const { onChange , enabled } = props ; const ref = useRef < HTMLDivElement | null > ( null ) ; useEffect ( ( ) => { function detectFullScreen ( ) { if ( onChange ) { onChange ( fscreen . fullscreenElement === ref . current ) ; } } fscreen . addEventListener ( "fullscreenchange" , detectFullScreen ) ; return ( ) => { fscreen . removeEventListener ( "fullscreenchange" , detectFullScreen ) ; } ; } , [ onChange ] ) ; useLayoutEffect ( ( ) => { const isEnabled = fscreen . fullscreenElement === ref . current ; if ( isEnabled && ! enabled ) { leaveFullScreen ( ) ; } else if ( ! isEnabled && enabled && ref . current != null ) { enterFullScreen ( ref . current ) ; } } , [ enabled ] ) ; return ( < div ref = { ref } style = { props . enabled ? { height : "100%" , width : "100%" } : undefined } > { props . children } < /div>); } export default FullScreen ;