hooks use-web-fullscreen.ts

0% Statements 0/23

0% Branches 0/8

0% Functions 0/6

0% Lines 0/20

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useCallback, useEffect, useState } from "react";
 
export const useWebFullscreen = () => {
  const supportsFullscreen =
    typeof document !== "undefined" &&
    !!document.documentElement.requestFullscreen;
 
  const [isFullscreen, setIsFullscreen] = useState(
    () => typeof document !== "undefined" && !!document.fullscreenElement,
  );
 
  useEffect(() => {
    Iif (!supportsFullscreen) return;
 
    const handler = () => {
      setIsFullscreen(!!document.fullscreenElement);
    };
 
    document.addEventListener("fullscreenchange", handler);
    return () => {
      document.removeEventListener("fullscreenchange", handler);
    };
  }, [supportsFullscreen]);
 
  const toggleFullscreen = useCallback(async () => {
    Iif (!supportsFullscreen) return;
 
    try {
      if (!document.fullscreenElement) {
        await document.documentElement.requestFullscreen();
      } else {
        await document.exitFullscreen();
      }
    } catch (err) {
      console.error("Fullscreen toggle failed", err);
    }
  }, [supportsFullscreen]);
 
  return { isFullscreen, supportsFullscreen, toggleFullscreen };
};