42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
|
import { useState } from "react";
|
||
|
|
|
||
|
|
type Fullscreen = {
|
||
|
|
fullscreen: boolean;
|
||
|
|
toggleFullscreen: () => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
const useFullscreen = (
|
||
|
|
elementRef: React.MutableRefObject<HTMLElement | null>
|
||
|
|
): Fullscreen => {
|
||
|
|
const [fullscreen, setFullscreen] = useState(false);
|
||
|
|
const monitorFullscreenEvent = (): void => {
|
||
|
|
const exitFullscreenEvent = (): void => {
|
||
|
|
if (!document.fullscreenElement) {
|
||
|
|
document.removeEventListener("fullscreenchange", exitFullscreenEvent);
|
||
|
|
setFullscreen(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if (document.fullscreenElement) {
|
||
|
|
setFullscreen(true);
|
||
|
|
document.addEventListener("fullscreenchange", exitFullscreenEvent);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const toggleFullscreen = (): void => {
|
||
|
|
if (fullscreen) {
|
||
|
|
document.exitFullscreen();
|
||
|
|
} else {
|
||
|
|
elementRef.current
|
||
|
|
?.requestFullscreen({ navigationUI: "show" })
|
||
|
|
.then(monitorFullscreenEvent);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return {
|
||
|
|
fullscreen,
|
||
|
|
toggleFullscreen,
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
export default useFullscreen;
|