File size: 3,552 Bytes
763be49 |
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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
import { useState, useEffect, useCallback } from 'react';
export interface FullscreenHook {
isFullscreenActive: boolean;
toggleFullscreen: () => Promise<void>;
requestFullscreenSupportError?: string;
}
export const useFullscreen = (
showToast?: (message: string, type: 'info' | 'error') => void
): FullscreenHook => {
const [isFullscreenActive, setIsFullscreenActive] = useState<boolean>(false);
const [requestFullscreenSupportError, setRequestFullscreenSupportError] = useState<string | undefined>();
const handleFullscreenChange = useCallback(() => {
setIsFullscreenActive(!!(
document.fullscreenElement ||
(document as any).webkitFullscreenElement ||
(document as any).mozFullScreenElement ||
(document as any).msFullscreenElement
));
}, []);
useEffect(() => {
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('MSFullscreenChange', handleFullscreenChange);
handleFullscreenChange(); // Initial check
return () => {
document.removeEventListener('fullscreenchange', handleFullscreenChange);
document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
document.removeEventListener('MSFullscreenChange', handleFullscreenChange);
};
}, [handleFullscreenChange]);
const toggleFullscreen = async () => {
const element = document.documentElement as any;
try {
if (!isFullscreenActive) {
if (element.requestFullscreen) {
await element.requestFullscreen();
} else if (element.mozRequestFullScreen) { // Firefox
await element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) { // Chrome, Safari, Opera
await element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // IE/Edge
await element.msRequestFullscreen();
} else {
const errorMsg = "Fullscreen API is not supported by this browser.";
setRequestFullscreenSupportError(errorMsg);
if (showToast) showToast(errorMsg, "error");
return;
}
} else {
if (document.exitFullscreen) {
await document.exitFullscreen();
} else if ((document as any).mozCancelFullScreen) {
await (document as any).mozCancelFullScreen();
} else if ((document as any).webkitExitFullscreen) {
await (document as any).webkitExitFullscreen();
} else if ((document as any).msExitFullscreen) {
await (document as any).msExitFullscreen();
} else {
const errorMsg = "Could not exit fullscreen. API not found.";
setRequestFullscreenSupportError(errorMsg);
if (showToast) showToast(errorMsg, "error");
return;
}
}
setRequestFullscreenSupportError(undefined);
} catch (err: any) {
console.error("Fullscreen API error:", err);
const errorMsg = `Fullscreen mode change failed: ${err.message || 'Unknown error'}`;
setRequestFullscreenSupportError(errorMsg);
if (showToast) showToast(errorMsg, "error");
handleFullscreenChange(); // Ensure state reflects reality
}
};
return { isFullscreenActive, toggleFullscreen, requestFullscreenSupportError };
};
|