UseFullscreen

1'use client';
2 
3import { useCallback, useEffect, useRef, useState } from 'react';
4 
5// Type for the ref that can be passed to the hook
6export type FullscreenRef = React.RefObject<HTMLElement> | null;
7 
8// Vendor-prefixed Fullscreen API support
9interface VendorDocument extends Document {
10  webkitFullscreenElement?: Element;
11  mozFullScreenElement?: Element;
12  msFullscreenElement?: Element;
13  webkitExitFullscreen?: () => Promise<void>;
14  mozCancelFullScreen?: () => Promise<void>;
15  msExitFullscreen?: () => Promise<void>;
16}
17 
18interface VendorElement extends HTMLElement {
19  webkitRequestFullscreen?: () => Promise<void>;
20  mozRequestFullScreen?: () => Promise<void>;
21  msRequestFullscreen?: () => Promise<void>;
22}
23 
24// Utility functions for cross-browser Fullscreen API
25function getFullscreenElement(): Element | null {
26  const doc = document as VendorDocument;
27  return (
28    doc.fullscreenElement ||
29    doc.webkitFullscreenElement ||
30    doc.mozFullScreenElement ||
31    doc.msFullscreenElement ||
32    null
33  );
34}
35 
36function requestFullscreen(element: HTMLElement) {
37  const el = element as VendorElement;
38  if (el.requestFullscreen) return el.requestFullscreen();
39  if (el.webkitRequestFullscreen) return el.webkitRequestFullscreen();
40  if (el.mozRequestFullScreen) return el.mozRequestFullScreen();
41  if (el.msRequestFullscreen) return el.msRequestFullscreen();
42}
43 
44function exitFullscreen() {
45  const doc = document as VendorDocument;
46  if (doc.exitFullscreen) return doc.exitFullscreen();
47  if (doc.webkitExitFullscreen) return doc.webkitExitFullscreen();
48  if (doc.mozCancelFullScreen) return doc.mozCancelFullScreen();
49  if (doc.msExitFullscreen) return doc.msExitFullscreen();
50}
51 
52function addFullscreenListener(cb: () => void) {
53  document.addEventListener('fullscreenchange', cb);
54  document.addEventListener('webkitfullscreenchange', cb);
55  document.addEventListener('mozfullscreenchange', cb);
56  document.addEventListener('MSFullscreenChange', cb);
57}
58 
59function removeFullscreenListener(cb: () => void) {
60  document.removeEventListener('fullscreenchange', cb);
61  document.removeEventListener('webkitfullscreenchange', cb);
62  document.removeEventListener('mozfullscreenchange', cb);
63  document.removeEventListener('MSFullscreenChange', cb);
64}
65 
66export function useFullscreen(
67  ref: FullscreenRef = null,
68): [boolean, () => void, () => void] {
69  const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
70  const refCached = useRef(ref);
71 
72  useEffect(() => {
73    refCached.current = ref;
74// … truncated