@mantine/hooks/cjs/use-fullscreen/use-fullscreen.cjs

A collection of 50+ hooks for state and UI management

"use client";
let react = require("react");
//#region packages/@mantine/hooks/src/use-fullscreen/use-fullscreen.ts
function getFullscreenElement() {
	const _document = window.document;
	return _document.fullscreenElement || _document.webkitFullscreenElement || _document.mozFullScreenElement || _document.msFullscreenElement;
}
function exitFullscreen() {
	const _document = window.document;
	if (typeof _document.exitFullscreen === "function") return _document.exitFullscreen();
	if (typeof _document.msExitFullscreen === "function") return _document.msExitFullscreen();
	if (typeof _document.webkitExitFullscreen === "function") return _document.webkitExitFullscreen();
	if (typeof _document.mozCancelFullScreen === "function") return _document.mozCancelFullScreen();
	return null;
}
function enterFullScreen(element) {
	const _element = element;
	return _element.requestFullscreen?.() || _element.msRequestFullscreen?.() || _element.webkitEnterFullscreen?.() || _element.webkitRequestFullscreen?.() || _element.mozRequestFullscreen?.();
}
const prefixes = [
	"",
	"webkit",
	"moz",
	"ms"
];
function addEvents(element, { onFullScreen, onError }) {
	prefixes.forEach((prefix) => {
		element.addEventListener(`${prefix}fullscreenchange`, onFullScreen);
		element.addEventListener(`${prefix}fullscreenerror`, onError);
	});
}
function removeEvents(element, { onFullScreen, onError }) {
	prefixes.forEach((prefix) => {
		element.removeEventListener(`${prefix}fullscreenchange`, onFullScreen);
		element.removeEventListener(`${prefix}fullscreenerror`, onError);
	});
}
function useFullscreenElement() {
	const [fullscreen, setFullscreen] = (0, react.useState)(false);
	const refElement = (0, react.useRef)(null);
	const prevNodeRef = (0, react.useRef)(null);
	const handleFullscreenChange = (0, react.useCallback)(() => {
		setFullscreen(refElement.current === getFullscreenElement());
	}, []);
	const handleFullscreenError = (0, react.useCallback)(() => {
		setFullscreen(false);
	}, []);
	const toggle = (0, react.useCallback)(async () => {
		if (!getFullscreenElement() && refElement.current) await enterFullScreen(refElement.current);
		else await exitFullscreen();
	}, []);
	return {
		ref: (0, react.useCallback)((node) => {
			if (prevNodeRef.current && prevNodeRef.current !== node) removeEvents(prevNodeRef.current, {
				onFullScreen: handleFullscreenChange,
				onError: handleFullscreenError
			});
			if (node) addEvents(node, {
				onFullScreen: handleFullscreenChange,
				onError: handleFullscreenError
			});
			refElement.current = node;
			prevNodeRef.current = node;
		}, []),
		toggle,
		fullscreen
	};
}
function useFullscreenDocument() {
	const [fullscreen, setFullscreen] = (0, react.useState)(false);
	const handleFullscreenChange = (0, react.useCallback)(() => {
		setFullscreen(getFullscreenElement() === window.document.documentElement);
	}, []);
	const handleFullscreenError = (0, react.useCallback)(() => {
		setFullscreen(false);
	}, []);
	const toggle = (0, react.useCallback)(async () => {
		if (!getFullscreenElement()) await enterFullScreen(window.document.documentElement);
		else await exitFullscreen();
	}, []);
	(0, react.useEffect)(() => {
		return addEvents(window.document.documentElement, {
			onFullScreen: handleFullscreenChange,
			onError: handleFullscreenError
		});
	}, []);
	return {
		toggle,
		fullscreen
	};
}
//#endregion
exports.useFullscreenDocument = useFullscreenDocument;
exports.useFullscreenElement = useFullscreenElement;

//# sourceMappingURL=use-fullscreen.cjs.map