use-fullscreen

1import { useRef, useState } from 'react'
2import { useEffectWithTarget } from '@/registry/hooks/use-effect-with-target'
3import { useEventListener } from '@/registry/hooks/use-event-listener'
4import { useIsomorphicLayoutEffect } from '@/registry/hooks/use-isomorphic-layout-effect'
5import { useMemoizedFn } from '@/registry/hooks/use-memoized-fn'
6import { useUnmount } from '@/registry/hooks/use-unmount'
7import { getTargetElement as getTargetElementUtil } from '@/registry/lib/create-effect-with-target'
8import { isBrowser } from '@/registry/lib/is-browser'
9import type { BasicTarget } from '@/registry/lib/create-effect-with-target'
10 
11export interface UseFullscreenOptions {
12  /**
13   * Automatically exit fullscreen when component is unmounted
14   *
15   * @default false
16   */
17  autoExit?: boolean
18}
19 
20const eventHandlers = [
21  'fullscreenchange',
22  'webkitfullscreenchange',
23  'webkitendfullscreen',
24  'mozfullscreenchange',
25  'MSFullscreenChange',
26] as const
27 
28type RequestMethod =
29  | 'requestFullscreen'
30  | 'webkitRequestFullscreen'
31  | 'webkitEnterFullscreen'
32  | 'webkitEnterFullScreen'
33  | 'webkitRequestFullScreen'
34  | 'mozRequestFullScreen'
35  | 'msRequestFullscreen'
36 
37type ExitMethod =
38  | 'exitFullscreen'
39  | 'webkitExitFullscreen'
40  | 'webkitExitFullScreen'
41  | 'webkitCancelFullScreen'
42  | 'mozCancelFullScreen'
43  | 'msExitFullscreen'
44 
45type FullscreenEnabledProperty =
46  | 'fullScreen'
47  | 'webkitIsFullScreen'
48  | 'webkitDisplayingFullscreen'
49  | 'mozFullScreen'
50  | 'msFullscreenElement'
51 
52type FullscreenElementProperty =
53  | 'fullscreenElement'
54  | 'webkitFullscreenElement'
55  | 'mozFullScreenElement'
56  | 'msFullscreenElement'
57 
58function getTargetElement(target: BasicTarget<any>) {
59  return getTargetElementUtil(target, document.documentElement)
60}
61 
62function getProperties(target: BasicTarget<any>) {
63  const targetElement = getTargetElement(target)
64 
65  const getRequestMethod = () => {
66    const methods: RequestMethod[] = [
67      'requestFullscreen',
68      'webkitRequestFullscreen',
69      'webkitEnterFullscreen',
70      'webkitEnterFullScreen',
71      'webkitRequestFullScreen',
72      'mozRequestFullScreen',
73      'msRequestFullscreen',
74    ]
75 
76    return methods.find(
77      (method) =>
78        (targetElement && method in targetElement) ||
79        (document && method in document),
80    )
81  }
82 
83  const getExitMethod = () => {
84    const methods: ExitMethod[] = [
85      'exitFullscreen',
86      'webkitExitFullscreen',
87      'webkitExitFullScreen',
88      'webkitCancelFullScreen',
89// … truncated