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 && (