use-fullscreen/cjs/useFullscreen.js

Fullscreen hook for React

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("react");
var doc = document;
var changeEvent = [
    'fullscreenchange',
    'webkitfullscreenchange',
    'mozfullscreenchange',
    'MSFullscreenChange',
].find(function (name) { return "on" + name in doc; });
var fullscreenEnabled = changeEvent &&
    doc.fullscreenEnabled !== false &&
    doc.webkitFullscreenEnabled !== false &&
    doc.mozFullScreenEnabled !== false &&
    doc.msFullscreenEnabled !== false;
function requestFullscreen(el) {
    if (el === void 0) { el = doc.documentElement; }
    var req = el.requestFullscreen ||
        el.webkitRequestFullscreen ||
        el.mozRequestFullScreen ||
        el.msRequestFullscreen;
    return req.call(el);
}
function exitFullscreen() {
    var exit = doc.exitFullscreen ||
        doc.webkitExitFullscreen ||
        doc.mozCancelFullScreen ||
        doc.msExitFullscreen;
    return exit.call(doc);
}
function isBrowserFullscreen() {
    return !!(doc.fullscreen ||
        doc.fullscreenElement ||
        doc.webkitFullscreenElement ||
        doc.mozFullScreenElement ||
        doc.msFullscreenElement ||
        doc.webkitIsFullScreen ||
        doc.mozFullScreen);
}
/**
 * Request fullscreen for element, or exit fullscreen if browser
 * is already in fullscreen.
 *
 * @param el defaults to `document.documentElement`
 *
 * @returns some modern browsers will return a promise
 */
function toggleFullscreen(el) {
    if (isBrowserFullscreen()) {
        return exitFullscreen();
    }
    else {
        return requestFullscreen(el);
    }
}
/**
 * Returns the current fullscreen state, and a toggle function if fullscreen is
 * available and enabled in the browser.
 */
function useFullscreen() {
    var _a = react_1.useState(isBrowserFullscreen()), isFullscreen = _a[0], setState = _a[1];
    react_1.useEffect(function () {
        function handleFullscreenChange() {
            setState(isBrowserFullscreen());
        }
        if (fullscreenEnabled) {
            doc.addEventListener(changeEvent, handleFullscreenChange);
            return function () {
                doc.removeEventListener(changeEvent, handleFullscreenChange);
            };
        }
    }, []);
    return [isFullscreen, fullscreenEnabled ? toggleFullscreen : undefined];
}
exports.default = useFullscreen;