useOrientation #react #hooks

useOrientation.ts

function WindowAddEventListener(props: WindowAddEventListenerProps) {
    const {handleFullScreen} = props;
    const orientationType = useOrientationFullScreen(handleFullScreen);

    useEffect(() => {
        console.debug('orientation type', orientationType);
    }, [orientationType]);
}

-----
  
// type def : "landscape-primary" | "landscape-secondary" | "portrait-primary" | "portrait-secondary"
const getOrientationType = (): ORIENTATION_TYPE => {
    if (screen.orientation.type.startsWith("portrait")) {
        return ORIENTATION_TYPE.PORTRAIT;
    } else {
        return ORIENTATION_TYPE.LANDSCAPE;
    }
}

function useOrientationFullScreen(handleFullScreen: FullScreenHandle): ORIENTATION_TYPE {

    const corePlayer = useRecoilValue(corePlayerState);
    const [orientationType, setOrientationType] = useState<ORIENTATION_TYPE>(getOrientationType());
    const [isFullViewButtonActive, setIsFullViewButtonActive] = useRecoilState(FullViewButton.isActive);

    useEffect(() => {
        const handleOrientationChange = () => {
            setOrientationType(getOrientationType());

            if (getOrientationType() === ORIENTATION_TYPE.LANDSCAPE) {
                if (corePlayer.paused) {
                    return;
                }

                enterFullScreen(handleFullScreen)
                    .then(() => {
                    })
                    .catch(e => {
                        console.error('enter error', e);
                    });
            } else {
                exitFullScreen(handleFullScreen)
                    .then(() => {
                    })
                    .catch(e => {
                        console.error('exit error', e);
                    });
            }
        }

        if (screen.orientation) {
            screen.orientation.addEventListener('change', handleOrientationChange);
        }
        return () => {
            if (screen.orientation) {
                screen.orientation.removeEventListener('change', handleOrientationChange);
            }
        }
    }, []);

    return orientationType;
}

export {useOrientationFullScreen};