[Wecode 62일차] fullscreen 이슈

1. fullscreen 시 esc키 눌렀을 경우 무한루프 + 이벤트 적용안되는 현상

  const supportsOrientationChange = "onorientationchange" in window,
            orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
            console.log("orientationEvent",orientationEvent)
        window.addEventListener(orientationEvent, () => this.toggleFullScreenBtn(), false);
		
		document.addEventListener("fullscreenchange",(e) =>  this.onFullScreenChange(e), false);
		document.addEventListener("mozfullscreenchange", (e) =>  this.onFullScreenChange(e), false);
		document.addEventListener("webkitfullscreenchange", (e) => this.onFullScreenChange(e), false);
		document.addEventListener("msfullscreenchange", (e) =>  this.onFullScreenChange(e), false);
		
        this.toggleFullScreenBtn();
        
        
onFullScreenChange()
{
	setTimeout(() => {
        let vx = this.state.rangeValue;  
        this.setState({rangeValue: [vx[0] + 1]}); //Change to some value to refresh
        this.setState({rangeValue: vx});          //And change back again
	}, 100);

}

toggleFullScreenBtn() {
   const browserName = new uaparser(navigator.userAgent).getBrowser().name;
   console.log("toggleFullscreen",browserName)
   const isNormalBrowser = (browserName.localeCompare("Chrome") === 0
        || browserName.localeCompare("Chrome Headless") === 0
        || browserName.localeCompare("Chrome WebView") === 0
        || browserName.localeCompare("Chromium") === 0
        || browserName.localeCompare("Firefox") === 0
        || browserName.localeCompare("Opera Coast") === 0
        || browserName.localeCompare("Opera Mini") === 0
        || browserName.localeCompare("Opera Mobi") === 0
        || browserName.localeCompare("Opera") === 0
        || browserName.localeCompare("Opera Tablet") === 0);
   let ua = navigator.userAgent.toLowerCase();
   let isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
   let isIOS = /Mac|iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
      if (!isIOS) {
         if (isAndroid && isNormalBrowser) {
            this.setState({
              showFullScreenBtn: true
             });
         } else if (isAndroid) {
         this.setState({
           showFullScreenBtn: window.screen.orientation.type.toString() === "landscape-primary"
           || window.screen.orientation.type.toString() === "landscape-secondary"
         });
         } else {
          this.setState({showFullScreenBtn: true}); // not Android + not IOS = desktop device
         }

         if (((window.screen.orientation.type === "portrait-primary")  //set off full screen in bad browser because having issue with scrolling in fullScreen mode
            || (window.screen.orientation.type === "portrait-secondary")) && !isNormalBrowser) {
         if (this.state.isFull)
             this.setState({isFull: false})
         }
      } else {
        this.setState({showFullScreenBtn: false}); // ios not supporting full Screen
    }
 }      

위 코드는 러시아 형이 만든 코드... esc 만누르면 무한루프 발생..

 

나도 따로 만들어야했기에 컴포넌트로 뺐다.

 

모든 fullscreen API/ stack overflow esc 키이벤트 안먹히는 이슈를 다 뒤져본 것 같다.

 

오죽했으면, 브라우져에서 먹히는게 window.innerHeight 일뿐... key이벤트도 안먹혔는데..

 

라이프싸이클도 인식못했는데.. 결론은 침착하게 다시. 

import React, {Component} from "react";
import "./FullScreenButton.css";

export class FullScreenButton extends Component{
    state = {
        isFull : false,
    }

    componentDidMount = ()=>{
        window.addEventListener('fullscreenchange', (e) => {
                this.setState({ isFull: document.fullscreen })
        })
    }
  
    handleFullScreen = (e) => {
        const {isFull} = this.state;
        this.setState({
            isFull : !isFull
        })
        if(!isFull){
            this.openFullscreen();
        }else{
            this.setState({isFull : false})
            this.closeFullScreen();
        }
    }
    
    
    openFullscreen = () => {
        const element = document.documentElement;
        if(element.requestFullscreen){
            element.requestFullscreen();
        }else if(element.mozRequestFullScreen){
            element.mozRequestFullScreen();
        }else if(element.webkitRequestFullscreen){
            element.webkitRequestFullScreen();
        }else if(element.msRequestFullscreen){
            element.msRequestFullScreen();
        }
    }
    
    closeFullScreen = () => {
        if(document.exitFullscreen){
            document.exitFullscreen();
        }else if(document.mozCancleFullScreen){
            document.mozCancleFullScreen();
        }else if(document.webkitExitFullscreen){
            document.webkitExitFullscreen();
        }else if(document.msExitFullscreen){
            document.msExitFullscreen();
        }
    }

    render(){
        const {isFull} = this.state;
        return(
            <div className={this.props.className}>
                <button className={ !isFull ? "full-screen-btn" : "not-full-screen-btn"} 
                        onClick={this.handleFullScreen}></button>
            </div>
        )
    }
}

해결. 라이프사이클에 fullscreenchange 이벤트 찍히는지 체크하고.. 진행...