diff --git a/src/components/Player/InputBox.jsx b/src/components/Player/InputBox.jsx index 71c62a7..c9dc81a 100644 --- a/src/components/Player/InputBox.jsx +++ b/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 ( setInputText(value)} type='text' /> ) diff --git a/src/components/Player/MenuOverlay.jsx b/src/components/Player/MenuOverlay.jsx index 47ab3ad..3e825fc 100644 --- a/src/components/Player/MenuOverlay.jsx +++ b/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 +
- +
+