Event Timeout

1. Mouseover

 - 우선 마우스가 언제 비디오에 들어가고 나오는지를 탐색

 - 하지만 유튜브는 영상에 들어가면 컨트롤바가 바로 나타나지만 나갈때는 약간 딜레이가 있음

 - showing이 잘 지워지는데 시간내에 다시 들어와도 지워버림

 - 우리는 timeout의 return type을 이해해야 함

   - 우리가 setTimeout 함수를 부르면 return으로 timeout의 id를 받음

   - 여기서 우리는 clearTimeout 함수에 timeout id를 건내주면 됨

 - 문제는 영상 안에서 움직이다가 나갔다 다시 들어오면 timeout을 취소하고 싶음

   - handleMouseMove와 이 timeout을 공유해야 함

let controlsTimeout = null;
const handleMouseMove = () => {
  if (controlsTimeout) {
    clearTimeout(controlsTimeout);
    controlsTimeout = null;
  }
  videoConotrols.classList.add("showing");
};

const handleMouseLeave = () => {
  controlsTimeout = setTimeout(() => {
    videoConotrols.classList.remove("showing");
  }, 3000);
};

 - 마우스가 나가면 controlsTimeout 변수는 null에서 그 timeout id로 바뀜

 - 다시 마우스가 들어오면 controlsTimeout은 계속 숫자일테니 true를 반환하고 clearTimeout을 실행시킴

 - 이제 여기에 CSS를 더해볼 거임

 

2. stop mouse

 - 이제 우리는 마우스가 멈추는걸 감지할거임

   - 마우스가 안에 들어가서 계속 움직이면 컨트롤러를 보여주고 멈추면 기다렸다가 컨트롤러를 숨길거임

 - 슬프게도 mousemove mouseleave와 같은 이벤트는 있지만 mousestop은 없음

   - 그래서 timeout과 cleartimeout을 사용해서 해결

 - 매번 마우스를 움직일 때마다 timeout을 시작 시키고 그 timeout은 컨트롤러를 숨길거임

 - 하지만 마우스가 계속 움직인다면 timeout을 취소시킬거임

let controlsTimeout = null;
let controlsMovementTimeout = null;

const hideControls = () => videoControls.classList.remove("showing");

const handleMouseMove = () => {
  if (controlsTimeout) {
    clearTimeout(controlsTimeout);
    controlsTimeout = null;
  }
  videoControls.classList.add("showing");
  controlsMovementTimeout = setTimeout(hideControls, 1500);
};

const handleMouseLeave = () => {
  controlsTimeout = setTimeout(hideControls, 1500);
};

 - 매번 마우스를 움직일 때마다 timeout을 만들고 이걸 취소시켜야 함

   - controlsMovementTimeout은 null로 초기화하지만 나중에 숫자가 되고 timeout을 취소하면 다시 null로 바뀜

3. CSS

 - https://github.com/Daniel-Jeon/wetube-loaded/commit/90b23145c3c826280bc257ee4131ca2127040fd8

update css · Daniel-Jeon/wetube-loaded@90b2314