[React] react-player 플레이어 playing 상태 변경

 

 

졸업작품으로

유튜브 영상을 이용,

스크립트 추출 및 문장 별 발음 녹음 후 평가 기능을 개발 중이다

 

페이지 UI. 오른쪽 Rec 버튼을 누르면 모달창이 열린다

짜잔. 모달창 open한 화면

 

문제의 발생

모달창이 열리면 youtube player가 멈추면서 발음을 평가할 수 있는 환경이 되어야 하는데

멈추지 않는 플레이어 ..

function YoutubePlayer() {
  const url = useRecoilValue(youtubeLinkState);
  return <ReactPlayer url={url} playing controls width="100%" height="62%" />;
}

 

ReactPlayer의 playing 속성이 boolean 타입으로 영상 재생을 책임지는 아이이다

모달창이 열렸는지 닫혔는지에 따라 이 속성을 true or false로 설정해주는 작업이 필요해보였다

 

첫번째 삽질

모달창은 YoutubePlayer 컴포넌트의 상위에 렌더링되기 때문에

모달창이 열렸는지 닫혔는지에 따라

부모 컴포넌트로부터 boolean값을 전달받아 playing 값을 다르게 주는게 좋을 것 같다고 생각했다

 

YoutubePlayer 컴포넌트(왼)와 Script 컴포넌트(오)는 모두 ScriptPage에 렌더링되어 있다

모달창 같은 경우는 Script 컴포넌트의 Rec 버튼을 누를 때 열려야 하기때문에 Script에 아래처럼 삽입되어 있다

 

handleCloseModal 변수에서 isModalOpen 의 값을 변경해준다 해당 변수는 recoil에 저장되어 있으므로

YoutubePlayer에 값을 사용할 수 있다.

 

YoutubePlayer 컴포넌트에서 값을 가져와 보겠다.

ModalOpen이 True이면 playing은 False여야 하므로 !isModalOpen

설정을 하고 실행해봤지만?

안됨..

콘솔에서 확인한 결과 state는 잘바뀌었다만 playing에는 적용이 안된거같다

최종 해결법

개발자도구로 확인해보니 모달창이 열려도 autoplay값이 false로 바뀌지 않는 것을 확인했다

 

document.querySelector를 활용하여 iframe 태그의 attribute값을 직접 수정해주니 원하는대로 정상 작동되는 것을 확인했다!

gpt에 물어봤을 때는 React를 사용하면서 직접 DOM을 건드리는 것은 지양하는 것이 좋다고 했지만

우선 데모 시연까지 시간이 얼마 안 남았기 때문에 더 나은 방법으로 추후에 수정하는 방향으로 가야겠다