React 프로그램에서 영상 전체화면 기능 구현

안녕하세요:) 개발자 우디입니다! 아래 내용 관련하여 작업 중이신 분들께 도움이되길 바라며 글을 공유하니 참고 부탁드립니다😊
(이번에 벨로그로 이사오면서 예전 글을 옮겨적었습니다. 이 점 양해 부탁드립니다!)

작업 시점: 2021년 8월

상황

• 프로그램 사용자들이 보다 편하게 영상 작업을 할 수 있도록 하기 위해 영상 전체화면 보기 기능을 구현함.

구현 과정

• 함수 정의

  onFullScreenIconClick = () => {
    if (!this.context.api.isVideoLoaded()) return;
    if (document.fullscreenElement) {
      this.setState(
        {
          isFullScreen: false,
        },
        () => {
          document.exitFullscreen();
        },
      );
    } else {
      this.setState(
        {
          isFullScreen: true,
        },
        () => {
          this.videoFixedAspectRatioWrapperRef.current.requestFullscreen();
        },
      );
    }
  };

  • document의 fullscreenElement 프로퍼티를 활용하여 현재 상태 파악 후 이후 작업 진행
• UI에 함수 적용

  <div className="fullScreenControl">
    <img
      src={this.state.isFullScreen ? fullScreenExitIcon : fullScreenIcon}
      alt="fullScreenIcon"
      className="fullScreenIcon"
      onClick={this.onFullScreenIconClick}
    />
  </div>

팀원의 긍정적 반응