84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, RefObject } from 'react';
|
|
|
|
export function useFullscreen(containerRef: RefObject<HTMLElement | null>) {
|
|
const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
|
|
|
|
useEffect(() => {
|
|
const handleFullscreenChange = () => {
|
|
const fullscreenElement =
|
|
document.fullscreenElement ||
|
|
(document as any).webkitFullscreenElement ||
|
|
(document as any).mozFullScreenElement ||
|
|
(document as any).msFullscreenElement;
|
|
|
|
setIsFullscreen(!!fullscreenElement);
|
|
};
|
|
|
|
document.addEventListener('fullscreenchange', handleFullscreenChange);
|
|
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
|
|
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
|
|
document.addEventListener('MSFullscreenChange', handleFullscreenChange);
|
|
|
|
return () => {
|
|
document.removeEventListener('fullscreenchange', handleFullscreenChange);
|
|
document.removeEventListener(
|
|
'webkitfullscreenchange',
|
|
handleFullscreenChange
|
|
);
|
|
document.removeEventListener(
|
|
'mozfullscreenchange',
|
|
handleFullscreenChange
|
|
);
|
|
document.removeEventListener(
|
|
'MSFullscreenChange',
|
|
handleFullscreenChange
|
|
);
|
|
};
|
|
}, []);
|
|
|
|
const enterFullscreen = () => {
|
|
if (!containerRef.current) return;
|
|
|
|
const element = containerRef.current;
|
|
|
|
if (element.requestFullscreen) {
|
|
element.requestFullscreen();
|
|
} else if ((element as any).webkitRequestFullscreen) {
|
|
(element as any).webkitRequestFullscreen();
|
|
} else if ((element as any).mozRequestFullScreen) {
|
|
(element as any).mozRequestFullScreen();
|
|
} else if ((element as any).msRequestFullscreen) {
|
|
(element as any).msRequestFullscreen();
|
|
}
|
|
};
|
|
|
|
const exitFullscreen = () => {
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
} else if ((document as any).webkitExitFullscreen) {
|
|
(document as any).webkitExitFullscreen();
|
|
} else if ((document as any).mozCancelFullScreen) {
|
|
(document as any).mozCancelFullScreen();
|
|
} else if ((document as any).msExitFullscreen) {
|
|
(document as any).msExitFullscreen();
|
|
}
|
|
};
|
|
|
|
const toggleFullscreen = () => {
|
|
if (isFullscreen) {
|
|
exitFullscreen();
|
|
} else {
|
|
enterFullscreen();
|
|
}
|
|
};
|
|
|
|
return {
|
|
isFullscreen,
|
|
enterFullscreen,
|
|
exitFullscreen,
|
|
toggleFullscreen,
|
|
};
|
|
}
|