[Dev's] videoJS 프로그래스바 제어 로직 수정

 

대부분 그럴일은 없겠지만

본의아니게 영상이 나오고 있는 화면을 90도로 회전시켜야 하는 상황이 발생하였을 때

 

이벤트 좌표계도 어련히 변환되리라 생각할 수 있는데

웬걸... 좌표계는 변환이 안되었다...

클릭이벤트는 문제없었는데

 

터치이벤트가 문제였다.

 

예를들어 90도 돌아간 상태의 플레이어에서

프로그래스바를 터치하고 좌우로 드래그하면

프로그래스바는 위아래로 움직인다.

 

그리고 90도 돌아간 상태의 수직으로 그려진 프로그래스바를 위아래로 움직이면

정상적으로 seeking이 안되는 문제가 생긴다.

 

이 문제를 해결하기 위해

 

handleMouseMove

 

이놈을 수정해야했다.

 

videoJS 라이브러리를 뜯어서 여기저기 만져본 결과

90도 회전이 되었을 때, 좌표계를 변환하고, 거기에 따라 currentTime을 다시 계산하여 집어넣어야 했다.

 

var originalHandleMouseMove = player.controlBar.progressControl.seekBar.handleMouseMove;

player.controlBar.progressControl.seekBar.handleMouseMove = function(event) {
    // event와 event.type이 존재하며, 터치 이벤트인 경우에만 로직 수행
    if (event && event.type && event.type.startsWith('touch')) {
        var clientX = event.touches[0].clientY;
        var clientY = event.touches[0].clientX;
        var progressBarHeight = player.controlBar.progressControl.seekBar.el_.getBoundingClientRect().height;
        var relativePosition = 1 - (clientX / progressBarHeight);
        var totalVideoTime = player.duration();
        var currentTime = totalVideoTime * relativePosition;

        this.userSeek_(currentTime);
        // 원래의 handleMouseMove 메소드를 호출합니다.
        return;
    } else {
        // 터치 이벤트가 아닌 경우 원래의 로직 수행
        return originalHandleMouseMove.call(this, event);
    }
};

 

기존 핸들러는 복사해서 가져온 다음, 터치이벤트가 아닌것들은 기존 이벤트로 진행되도록하고

터치이벤트에 한해서만 로직이 수행되도록하였다.

 

 

this.userSeek_(currentTime); 에 새로 계산 한 값을 집어넣어 동작하도록하였고

결과적으로 90도 회전하여도 정상적으로 프로그래스바를 이용한 seeking 이벤트가 동작하는것을 확인할 수 있었다.