Day 20 : Video Player 동기화 문제 (해결못함), 코로나 이슈...

오늘의 목표 (였던것)

페이지에 탑재한 Video Player 컴포넌트의 동기화 문제 해결

 

영상의 현재 재생시각인 {elapedTime} 값이 context {Pointer} 값을 바꿔 타 컴포넌트에 영향을 주는건 구현됐지만

반대로 다른 컴포넌트가 context값을 바꿨을 때, 그것이 elapedTime을 바꾸지 않는 상황

 

 

해결하지 못하면 예를들어 차트 컴포넌트를 완성해서 머지했을 때

차트에서 하이라이트가 될 것 같은 포인트를 더블클릭하는데도 해당 부분 미리보기가 안되는 등의 문제가 생길 것이다.

 = 프로젝트가 망한다는 뜻

 

일단 Data Chart 영역을 담당한 팀원이 멋지게 구현을 해둬서 그걸 컴포넌트에 올렸다.

 

차트 영역을 클릭하면 해당 위치로 context값이 동기화되는 모습 (노란 세로선)

하지만 영상을 재생하면 다시 영상이 재생되던 시각으로 강제로 돌아간다...

 

이걸 고치려고 이것저것 시도해보고 있었는데 갑자기 터진 코로나 이슈

 

팀원들 다 어디갔어...

내 옆도 뒤도 확진...

 

아마 나도 높은확률로 확진일듯

내가 멀쩡히 일할수있는 시간도 얼마 남지 않았을 것 같다

우리의 프로젝트는 어디로??

 

일단 할수있는 일을 하자...

 

 

pointer가 바뀌었을 때 영상의 elapedTime이 바뀌지 않는다는 것은

pointer가 바뀔 때마다 발생하는 useEffect를 추가하는 것으로 해결할 수 있을 것이라는 아이디어

 

희망 : 포인터를 바꿀 때마다 영상이 정지하고 해당 위치를 보여주겠지?

현실 : 보여준다. 하지만 영상을 재생하면 1초마다 영상이 멈추는 옵션을 추가

 

어지럽네...

 

영상 플레이어가 다른 컴포넌트에게 전달하기 위해 스스로 pointer를 바꾸는 것도 Effect를 발생시킨다

 

 

그렇다면 영상이 정지하는 기능을 빼면 1초마다 effect가 발생해도 자연스럽게 영상이 이어지지 않을까?

 

하지만 pointer / duration의 float값의 작은 오차때문에

pointer가 변할 때마다 seekTo가 현재의 정확한 정수값 시간보다 미묘하게 다른 위치로 되돌려보내서

1초가 안되는 작은 구간을 무한히 반복한다

 

진짜 어지럽네...

 

 

일단 해결을 위한 아이디어

 

영상 플레이어의 흐름에 의해 자연스럽게 흐르는 time의 변화와, 유저 이벤트에 의한 time의 점프를 구분

각각 따로 구현해서 후자의 경우에만 위의 effect가 실행되도록 해보자

 

일단 userEvent라는 값을 context에 추가하고 이에 작용하는 함수도 만들어 Provider로 배포한다.

userEvent라는 값이 아무튼 바뀌기만 하면 되니까 적당히 +=1로 구현

 

effect가 발동하는 트리거를 pointer가 아닌 userEvent로 변경

 

마지막으로 각 컴포넌트에서 context 함수 changePointer를 쓰던 상황 중에서

유저 이벤트에 의한 강제적 변경의 경우에 모두 userEvent값을 변경하도록 추가

 

된다

근데 뭔가 한박자 느린 바보같은 느낌...

 

유저의 조작에 의해 pointer가 바뀌면 userEvent도 바뀌고 그것때문에 useEffect가 영상의 장면을 바꾼다

context의 변화에 의해 리렌더링

=> 리렌더링시 발생하는 effect때문에 한번 더 context가 변화

=> 이 변화때문에 한번 더 리렌더링

 

총 두번 리렌더링되는 것이 영상의 버벅임으로 이어지는 것 같다

 

useEffect가 렌더링 이후에 적용된다는 성질 때문에 그런다는데

오늘도 뭔가 하나를 배워갑니다...

 

이거 대신에 렌더링 전에 다 처리해주는 무언가를 써야 할 듯

근데 그게 뭔지는 모름

 

진짜진짜 어지럽네...

 

벌써 4시다

별로 한것도 없는데 코로나 이슈때문에 시간을 많이 쓴 것 같다...