동영상 ESC로 멈추기

메인화면 리팩토링

저번 접근성 피드백으로 받았던 것들 중 하나인 화면에 동영상 loop를 esc키로 멈출 수 있게 구현하면 좋을 것 같다는 의견을 수렴하여 프로젝트에 반영하였다.

  const handleKeyDown = (e) => {
    if (e.key === "Escape") {
      setVideoPlay(!videoPlay);
    }
  };

처음에 onKeyDown함수를 만들고 esc를 눌렀을때 Escape가 찍히는 것을 console에서 확인했다.
그래서 if문으로 조건처리하여 누를때마다 상태값을 반대로해주고 확인해봤는데 이상하게도 작동하지 않았다. 원인이 이벤트 핸들러는 적용했지만 포커스를 받지 못하여 tabindex를 추가해주라는 글을 보았고

tab으로 접근하지 못하게 하려고 tabindex를 -1로 주었다.

autoPlay={videoPlay}

비디오 태그안에 있는 autoplay에 상태값이 변경될때마다 true, false로 멈춰주려했지만 이상하게 새로고침을 해야 동작했다...

그러던 도중 videoElement에 play와 pause 메서드가 있는 것을 알았고 videoplay 상태값이 변경될 때마다 동작하도록 useEffect를 사용해 보았다.

  useEffect(() => {
    mainRef.current.focus();
    const videoElement = videoRef.current;
    if (videoElement) {
      if (videoPlay) {
        videoElement.play();
      } else {
        videoElement.pause();
      }
    }
  }, [videoPlay]);

mainRef.current.focus()이 부분은 나중에 추가했는데 첫 화면에서 동영상 div태그를 마우스로 한번 클릭해야 ESC로 동영상을 멈추고 켜는게 가능하여 focus되도록 하여 첫 화면에서 마우스로 클릭하지 않아도 동작될 수 있도록 구현하였다.

다행이도 잘 동작하였고 사용자에게 동영상을 끄고 켤 수 있는 알림창을 띄워주어 5초뒤에 사라지도록 화면에 구성했다.