@toluade/use-fullscreen/dist/index.js

[](https://www.npmjs.com/package/@toluade/use-fullscreen)

"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
Object.defineProperty(exports, "__esModule", { value: true });
/* eslint-disable @typescript-eslint/no-unused-vars */
const react_1 = require("react");
function useFullScreen(containerId) {
    const [isFullScreen, setIsFullScreen] = (0, react_1.useState)(false);
    function enterFullScreen(element) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        }
        else if (element.mozRequestFullscreen) {
            element.mozRequestFullscreen(); // Firefox
        }
        else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen(); // Safari
        }
        else if (element.msRequestFullscreen) {
            element.msRequestFullscreen(); // IE/Edge
        }
    }
    function exitFullscreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
        else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }
    const fullScreenMode = () => {
        const container = document.getElementById(containerId);
        if (container !== null) {
            enterFullScreen(container);
        }
    };
    const toggleFullScreen = (e = null) => {
        if (e !== null) {
            e.stopPropagation();
        }
        if (isFullScreen) {
            exitFullscreen();
        }
        else {
            fullScreenMode();
        }
    };
    function isScreenLockSupported() {
        return "wakeLock" in navigator;
    }
    function getScreenLock() {
        return __awaiter(this, void 0, void 0, function* () {
            if (isScreenLockSupported()) {
                let screenLock;
                try {
                    screenLock = yield navigator.wakeLock.request("screen");
                }
                catch (err) {
                    // console.log(err.name, err.message);
                }
                return screenLock;
            }
        });
    }
    function release() {
        return __awaiter(this, void 0, void 0, function* () {
            let screenLock = yield getScreenLock();
            if (typeof screenLock !== "undefined" && screenLock != null) {
                screenLock.release().then(() => {
                    // console.log("Lock released 🎈");
                    screenLock = undefined;
                });
            }
        });
    }
    (0, react_1.useEffect)(() => {
        window.addEventListener("resize", (_evt) => {
            if (window.innerHeight == screen.height) {
                setIsFullScreen(true);
            }
            else {
                setIsFullScreen(false);
            }
        });
        return () => {
            window.removeEventListener("resize", (_evt) => {
                if (window.innerHeight == screen.height) {
                    setIsFullScreen(true);
                }
                else {
                    setIsFullScreen(false);
                }
            });
        };
    }, []);
    (0, react_1.useEffect)(() => {
        if (isFullScreen) {
            getScreenLock();
        }
        else {
            release();
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [isFullScreen]);
    return {
        toggleFullScreen,
        isFullScreen,
        exitFullscreen,
    };
}
exports.default = useFullScreen;