Player: pass functions to the InbutBox

src/components/Player/InputBox.jsx

@@ -38,6 +38,8 @@ export default function InputBox ({
   windows,
   currentWindowId,
   sendMessage,
+  onFullscreenRequest,
+  setMenuOpen,
 }) {
   const [targetWindow, setTargetWindow] = useState(null)
   const [inputText, setInputText] = useState('')
@@ -126,9 +128,6 @@ export default function InputBox ({
     },
   }
 
-  const enterFullscreen = () =>
-    document.documentElement.requestFullscreen()
-
   return (
     <input {...inputHandlers[inputType]}
       className='inputBox'
@@ -136,7 +135,7 @@ export default function InputBox ({
       value={inputText}
       autofocus
       autocomplete='off'
-      onDblClick={enterFullscreen}
+      onDblClick={onFullscreenRequest}
       onInput={({ target: { value } }) => setInputText(value)}
       type='text' />
   )

src/components/Player/MenuOverlay.jsx

@@ -6,12 +6,26 @@ import ThemeSelector from
 
 import './MenuOverlay.css'
 
-export default function MenuOverlay ({ themeEngine }) {
+export default function MenuOverlay ({
+  themeEngine, onFullscreenRequest, menuOpen, setMenuOpen,
+}) {
   const dialog = useRef(null)
 
+  useEffect(() => {
+    const dialogOpen = dialog.current.open
+
+    if (menuOpen && !dialogOpen) {
+      dialog.current.showModal()
+    }
+
+    if (!menuOpen && dialogOpen) {
+      dialog.current.close()
+    }
+  }, [menuOpen])
+
   useEffect(() => {
     const closeHandler = () => {
-      console.log('dialog closed')
+      setMenuOpen(false)
     }
 
     dialog.current.addEventListener('close', closeHandler)
@@ -27,8 +41,16 @@ export default function MenuOverlay ({ themeEngine }) {
             ElseIfPlayer
           </Link>
         </div>
+
         <div className='appearance'>
-          <button>Request fullscreen</button>
+          <button
+            onClick={() => {
+              dialog.current.close()
+              onFullscreenRequest()
+            }}
+          >
+            Request fullscreen
+          </button>
           <button
             onClick={() => themeEngine.setRandomTheme()}
           >
@@ -41,6 +63,7 @@ export default function MenuOverlay ({ themeEngine }) {
             }} />
           </label>
         </div>
+
         <div>
           <button
             onClick={() => dialog.current.close()}

src/components/Player/Player.jsx

@@ -35,7 +35,10 @@ const runMachine = ({ engine: Engine, wasmBinary, storyfile, handlers }) => {
 }
 
 export default function Player ({
-  vmParts: { storyfile, engine, wasmBinary }, singleWindow,
+  vmParts: { storyfile, engine, wasmBinary },
+  onFullscreenRequest,
+  setMenuOpen,
+  singleWindow,
 }) {
   const [status, setStatus] = useState(INITIAL_STATUS)
 
@@ -113,6 +116,8 @@ export default function Player ({
         windows,
         currentWindowId,
         sendMessage,
+        onFullscreenRequest,
+        setMenuOpen,
       }} />
     </section>)
 }

src/components/Player/UrlPlayer.jsx

@@ -57,7 +57,9 @@ const prepareVM = ({ url, setStatus, setParts }) => {
     })
 }
 
-export default function UrlPlayer ({ url, singleWindow }) {
+export default function UrlPlayer ({
+  url, singleWindow, onFullscreenRequest, setMenuOpen,
+}) {
   const [status, setStatus] = useState(INITIAL_STATUS)
   const [vmParts, setParts] = useState(null)
 
@@ -73,6 +75,8 @@ export default function UrlPlayer ({ url, singleWindow }) {
   return vmParts
     ? (<Player {...{
       vmParts,
+      onFullscreenRequest,
+      setMenuOpen,
       singleWindow,
     }} />)
     : (<Status {...status} />)