useFullscreen

1'use client'
2 
3import * as React from 'react'
4 
5export function useFullscreen({
6  element,
7  onFullscreenChange,
8}: {
9  element?: React.RefObject<HTMLElement>
10  onFullscreenChange?: (isFullscreen: boolean) => void
11} = {}) {
12  const [isFullscreen, setIsFullscreen] = React.useState(false)
13 
14  const enterFullscreenEvent = React.useEffectEvent(async () => {
15    const targetElement = element?.current || document.documentElement
16 
17    try {
18      if (targetElement.requestFullscreen) {
19        await targetElement.requestFullscreen()
20      }
21      else if ('mozRequestFullScreen' in targetElement && typeof targetElement.mozRequestFullScreen === 'function') {
22        await targetElement.mozRequestFullScreen()
23      }
24      else if ('webkitRequestFullscreen' in targetElement && typeof targetElement.webkitRequestFullscreen === 'function') {
25        await targetElement.webkitRequestFullscreen()
26      }
27      else if ('msRequestFullscreen' in targetElement && typeof targetElement.msRequestFullscreen === 'function') {
28        await targetElement.msRequestFullscreen()
29      }
30    }
31    catch (error) {
32      console.error('Failed to enter fullscreen mode:', error)
33    }
34  })
35 
36  const exitFullscreenEvent = React.useEffectEvent(async () => {
37    try {
38      if (document.exitFullscreen) {
39        await document.exitFullscreen()
40      }
41      else if ('mozCancelFullScreen' in document && typeof document.mozCancelFullScreen === 'function') {
42        await document.mozCancelFullScreen()
43      }
44      else if ('webkitExitFullscreen' in document && typeof document.webkitExitFullscreen === 'function') {
45        await document.webkitExitFullscreen()
46      }
47      else if ('msExitFullscreen' in document && typeof document.msExitFullscreen === 'function') {
48        await document.msExitFullscreen()
49      }
50    }
51    catch (error) {
52      console.error('Failed to exit fullscreen mode:', error)
53    }
54  })
55 
56  const toggleFullscreenEvent = React.useEffectEvent(() => {
57    if (isFullscreen) {
58      exitFullscreenEvent()
59    }
60    else {
61      enterFullscreenEvent()
62    }
63  })
64 
65  React.useEffect(() => {
66    const handleFullscreenChange = () => {
67      const fullscreenElement
68        = document.fullscreenElement
69          || (document as any).mozFullScreenElement
70          || (document as any).webkitFullscreenElement
71          || (document as any).msFullscreenElement
72 
73      const newIsFullscreen = !!fullscreenElement
74      setIsFullscreen(newIsFullscreen)
75 
76      if (onFullscreenChange) {
77// … truncated