- {nearScreen && children}
+ {nearScreenOrFullscreen && children}
) {
canPlay,
}
}
-
-function fullscreenSubscribe(onChange: () => void) {
- document.addEventListener('fullscreenchange', onChange)
- return () => document.removeEventListener('fullscreenchange', onChange)
-}
-
-function useFullscreen(ref: React.RefObject) {
- const isFullscreen = useSyncExternalStore(fullscreenSubscribe, () =>
- Boolean(document.fullscreenElement),
- )
-
- const toggleFullscreen = useCallback(() => {
- if (isFullscreen) {
- document.exitFullscreen()
- } else {
- if (!ref.current) return
- ref.current.requestFullscreen()
- }
- }, [isFullscreen, ref])
-
- return [isFullscreen, toggleFullscreen] as const
-}