@masa-dev/react-signage/dist/features/fullscreen/FullscreenableContainer.js

This is a react library for signage.

import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import { FallbackFullscreenStyle, ContainerBaseStyle } from "./consts";
export function FullscreenableContainer(props) {
    const { fullScreen, style, play, children, onFullscreenChange } = props;
    const containerRef = useRef(null);
    const [fallbackStyle, setFallbackStyle] = useState({});
    useEffect(() => {
        handleFullScreen();
    }, [fullScreen, play]);
    useEffect(() => {
        const fullscreenchanged = () => {
            const isFullScreen = !!document.fullscreenElement;
            onFullscreenChange?.(isFullScreen);
        };
        window.addEventListener('fullscreenchange', fullscreenchanged);
        return () => window.removeEventListener('fullscreenchange', fullscreenchanged);
    });
    function handleFullScreen() {
        if (fullScreen && play) {
            if (document.fullscreenEnabled) {
                containerRef.current?.requestFullscreen();
            }
            else {
                setFallbackStyle(FallbackFullscreenStyle);
            }
        }
        else {
            if (document.fullscreenEnabled && document.fullscreenElement) {
                document.exitFullscreen?.();
            }
            else {
                setFallbackStyle({});
            }
        }
    }
    return _jsx("div", { ref: containerRef, style: { ...ContainerBaseStyle, ...style, ...fallbackStyle }, children: children });
}