pages235/src/react/EnterFullscreenButton.tsx

28 lines
713 B
TypeScript

import { useEffect, useState } from 'react'
import Button from './Button'
import { useUsingTouch } from './utils'
export default () => {
const [fullScreen, setFullScreen] = useState(false)
useEffect(() => {
document.documentElement.addEventListener('fullscreenchange', () => {
setFullScreen(!!document.fullscreenElement)
})
}, [])
const usingTouch = useUsingTouch()
if (!usingTouch || !document.documentElement.requestFullscreen || fullScreen) return null
return <Button
icon='pixelarticons:scale'
style={{
position: 'fixed',
top: 5,
left: 5,
width: 22,
}}
onClick={() => {
void document.documentElement.requestFullscreen()
}}
/>
}