src/components/FullscreenButton.tsx 1.2 K raw
1
import { useEffect, useState } from "react";
2
3
export function FullscreenButton() {
4
  const [isFullscreen, setIsFullscreen] = useState(false);
5
6
  useEffect(() => {
7
    const onChange = () => setIsFullscreen(!!document.fullscreenElement);
8
    document.addEventListener("fullscreenchange", onChange);
9
    return () => document.removeEventListener("fullscreenchange", onChange);
10
  }, []);
11
12
  const toggle = () => {
13
    if (document.fullscreenElement) {
14
      document.exitFullscreen();
15
    } else {
16
      document.documentElement.requestFullscreen();
17
    }
18
  };
19
20
  return (
21
    <button
22
      className="fullscreen-btn"
23
      onClick={toggle}
24
      aria-label={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
25
      title={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
26
    >
27
      {isFullscreen ? (
28
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
29
          <path d="M6 2v4H2M10 2v4h4M6 14v-4H2M10 14v-4h4" />
30
        </svg>
31
      ) : (
32
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
33
          <path d="M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4" />
34
        </svg>
35
      )}
36
    </button>
37
  );
38
}