90 lines
2.7 KiB
TypeScript
90 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, RefObject } from 'react';
|
|
|
|
export function useFullscreen(ref: RefObject<HTMLElement | null>) {
|
|
const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
|
|
|
|
useEffect(() => {
|
|
if (!ref.current) return;
|
|
|
|
const element = ref.current;
|
|
|
|
const handleFullscreenChange = () => {
|
|
const fullscreenElement =
|
|
document.fullscreenElement ||
|
|
(document as any).webkitFullscreenElement ||
|
|
(document as any).mozFullScreenElement ||
|
|
(document as any).msFullscreenElement;
|
|
|
|
setIsFullscreen(
|
|
fullscreenElement === element ||
|
|
(fullscreenElement && element.contains(fullscreenElement))
|
|
);
|
|
};
|
|
|
|
// Add event listeners for fullscreen changes
|
|
document.addEventListener('fullscreenchange', handleFullscreenChange);
|
|
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
|
|
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
|
|
document.addEventListener('MSFullscreenChange', handleFullscreenChange);
|
|
|
|
// Clean up event listeners
|
|
return () => {
|
|
document.removeEventListener('fullscreenchange', handleFullscreenChange);
|
|
document.removeEventListener(
|
|
'webkitfullscreenchange',
|
|
handleFullscreenChange
|
|
);
|
|
document.removeEventListener(
|
|
'mozfullscreenchange',
|
|
handleFullscreenChange
|
|
);
|
|
document.removeEventListener(
|
|
'MSFullscreenChange',
|
|
handleFullscreenChange
|
|
);
|
|
};
|
|
}, [ref]);
|
|
|
|
// Function to request fullscreen
|
|
const enterFullscreen = () => {
|
|
if (!ref.current) return;
|
|
|
|
const element = ref.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();
|
|
}
|
|
};
|
|
|
|
// Function to exit fullscreen
|
|
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 };
|
|
}
|