game_web_uk/src/hooks/useGameIFrame.js

import { useCallback, useEffect, useRef, useState } from "react";
import { ROUTE_PATH } from "@constants/routes";
import { exitFullScreen, isAndroid, isIOS, isLandscape, isPortrait } from "@utils/helpers";
import { useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { getBankRuptcyGift } from "@features/paySlice";
import { getLandscapeGames, updateGameCardInfo } from "@features/mainSlice";
import { useOrientation } from "react-use";
import { useThemeProvider } from "@contexts/themeContext";
const objInfo = {
    closeCount: 0
}

const useGameIFrame = () => {
    const iFrameRef = useRef(null);
    const [forceLandscape, setForceLandscape] = useState(false);
    const [isGameLoad, setIsGameLoad] = useState(false);
    const ruptcyGift = useSelector(getBankRuptcyGift);
    const LandscapeGames = useSelector(getLandscapeGames);
    const { gameID, isMobile } = useThemeProvider();
    const navigate = useNavigate();
    const dispatch = useDispatch();

    const orientation = useOrientation();
    const onBack = useCallback(() => {
        if (iFrameRef.extBackFunc != null) {
            iFrameRef.extBackFunc();
            return;
        }
        navigate(ROUTE_PATH.BACK);
    }, [navigate]);
    const checkCloseCount = useCallback(() => {
        if (objInfo.closeCount >= 2) {
            onBack();
        }
    }, [onBack]);
    const safeNavigate = useCallback((route, options) => {
        if (isIOS()) {
            window.location.href = route;
        } else {
            navigate(route, options)
        }
    }, [navigate]);
    const receiveMessage = useCallback((event) => {
        const gameWindow = iFrameRef.current?.contentWindow;
        if (!gameWindow || event.source !== gameWindow) return;

        let data = event.data;
        if (data && data.cmd != null) {
            if (data.cmd === "back") {
                onBack();
            }
            else if (data.cmd === "pay") {
                if (!!ruptcyGift && ruptcyGift.length > 0) {
                    global.showExclusiveGift();
                } else {
                    safeNavigate(isMobile() ? ROUTE_PATH.DEPOSIT : ROUTE_PATH.DEPOSIT_POP, { replace: true })
                }
            }
            else if (data.cmd === "withdraw") {
                safeNavigate(isMobile() ? ROUTE_PATH.WITHDRAW : ROUTE_PATH.WITHDRAW_POP, { replace: true });
            }
            else if (data.cmd === "fullScreen") {
                return;
            }
            else if (data.cmd === "closeLoading") {
                setIsGameLoad(true);
                objInfo.closeCount++;
                checkCloseCount();
            }
        }
    }, [checkCloseCount, isMobile, onBack, ruptcyGift, safeNavigate]);
    const clearGameTimeout = useCallback(() => {
        const gameFrame = iFrameRef.current;
        if (gameFrame != null) {
            if (gameFrame.loadtimeout != null) {
                clearTimeout(gameFrame.loadtimeout);
                gameFrame.loadtimeout = null;
            }
        }
    }, []);
    const handleLoadGame = useCallback(() => {
        setIsGameLoad(true);
        clearGameTimeout();
    }, [clearGameTimeout]);
    const initGameEvent = useCallback(() => {
        const gameFrame = iFrameRef.current;
        if (gameFrame != null) {
            gameFrame.addEventListener('load', handleLoadGame);
            gameFrame.loadtimeout = setTimeout(() => {
                handleLoadGame();
            }, 5000);
        }
        window.addEventListener("message", receiveMessage, false);
        objInfo.closeCount = 0;
    }, [handleLoadGame, receiveMessage]);
    const removeGameEvent = useCallback(() => {
        const gameFrame = iFrameRef.current;
        if (gameFrame != null) {
            gameFrame.removeEventListener('load', handleLoadGame);
            clearGameTimeout();
        }
        window.removeEventListener("message", receiveMessage);
        objInfo.closeCount = 0;
    }, [clearGameTimeout, handleLoadGame, receiveMessage]);
    const handleEnterGame = useCallback((data) => {
        objInfo.closeCount = 0;
        setIsGameLoad(false);
        let id = data.id;
        dispatch(updateGameCardInfo({
            data: data,
            level: 0
        }))
        let path = ROUTE_PATH.GAME + "/" + id;
        global.authLockPath = path;
        navigate(path);
    }, [dispatch, navigate]);
    useEffect(() => {
        initGameEvent();
        return () => {
            removeGameEvent();
            exitFullScreen();
        };
    }, [initGameEvent, removeGameEvent]);

    useEffect(() => {
        const landscape = isLandscape(orientation);
        document.documentElement.style.setProperty('--view-size', landscape ? 0.5 : 1);
        if (landscape) setForceLandscape(false);
        if (landscape || window.innerWidth >= window.innerHeight) {
            document.documentElement.classList.add("landscape-page");
        } else {
            document.documentElement.classList.remove("landscape-page");
        }

        return () => {
            document.documentElement.style.setProperty('--view-size', 1);
            document.documentElement.classList.remove("landscape-page");
        }
    }, [orientation]);

    useEffect(() => {
        if (Number(gameID) === 0) return;

        const ios = isIOS();
        const mobileDevice = isAndroid() || ios;
        const portrait = isPortrait();
        const supportsLandscape = (LandscapeGames || []).some(id => Number(id) === Number(gameID));
        if (!supportsLandscape || !mobileDevice || !portrait) {
            return;
        }

        setForceLandscape(true);
        document.documentElement.style.setProperty('--view-size', 0.9);
        if (isIOS()) {
            document.documentElement.style.setProperty('--landscape-ios', "10vh");
        }

        return () => {
            const landscapeScale = isLandscape(orientation) ? 0.5 : 1;
            document.documentElement.style.setProperty('--view-size', landscapeScale);
            document.documentElement.style.setProperty('--landscape-ios', "0vh");
        }
    }, [LandscapeGames, gameID, orientation])
    return {
        iFrameRef,
        isGameLoad,
        forceLandscape,
        safeNavigate,
        setIsGameLoad,
        handleEnterGame,
    };
}
export default useGameIFrame;