@mantine/hooks/esm/use-fullscreen/use-fullscreen.mjs

A collection of 50+ hooks for state and UI management

"use client";
import { useCallback, useEffect, useRef, useState } from "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] = useState(false);
	const refElement = useRef(null);
	const prevNodeRef = useRef(null);
	const handleFullscreenChange = useCallback(() => {
		setFullscreen(refElement.current === getFullscreenElement());
	}, []);
	const handleFullscreenError = useCallback(() => {
		setFullscreen(false);
	}, []);
	const toggle = useCallback(async () => {
		if (!getFullscreenElement() && refElement.current) await enterFullScreen(refElement.current);
		else await exitFullscreen();
	}, []);
	return {
		ref: 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] = useState(false);
	const handleFullscreenChange = useCallback(() => {
		setFullscreen(getFullscreenElement() === window.document.documentElement);
	}, []);
	const handleFullscreenError = useCallback(() => {
		setFullscreen(false);
	}, []);
	const toggle = useCallback(async () => {
		if (!getFullscreenElement()) await enterFullScreen(window.document.documentElement);
		else await exitFullscreen();
	}, []);
	useEffect(() => {
		return addEvents(window.document.documentElement, {
			onFullScreen: handleFullscreenChange,
			onError: handleFullscreenError
		});
	}, []);
	return {
		toggle,
		fullscreen
	};
}
//#endregion
export { useFullscreenDocument, useFullscreenElement };

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