diff --git a/src/app/AppLayout.tsx b/src/app/AppLayout.tsx index 3c7188b..8956c57 100644 --- a/src/app/AppLayout.tsx +++ b/src/app/AppLayout.tsx @@ -1,15 +1,18 @@ import { useCallback, useEffect, useState } from 'react' import { Outlet } from 'react-router-dom' +import { supportsFullscreen } from '../lib/platform' import styles from './AppLayout.module.css' export function AppLayout() { + const canFullscreen = supportsFullscreen() const [isFullscreen, setIsFullscreen] = useState(!!document.fullscreenElement) useEffect(() => { + if (!canFullscreen) return const onChange = () => setIsFullscreen(!!document.fullscreenElement) document.addEventListener('fullscreenchange', onChange) return () => document.removeEventListener('fullscreenchange', onChange) - }, []) + }, [canFullscreen]) const goFullscreen = useCallback(() => { document.documentElement.requestFullscreen().catch(() => {}) @@ -20,7 +23,7 @@ export function AppLayout() {
- {!isFullscreen && ( + {canFullscreen && !isFullscreen && ( - + {supportsFullscreen() ? ( + <> + + + + ) : ( + + )} )}