📝 오늘 한 것

1. 복습 - VIDEO PLAYER (완성)

📚 배운 것 (복습)

video player 완성
실제 코드는 github에 올림(wetube_v2)

8. VIDEO PLAYER

• [TIL] 211211
  • Mouse Events - mousemove / mouseleave
  • watch.pug 수정 (추가)
  • 자잘한 버그 수정 (추가)
    • 음소거 버튼 클릭 시 볼륨 바에 진행 상태가 색깔로 표시되지 않음
    • 타임라인의 포인터가 끝까지 가지 않음

💡 Mouse Events - mousemove / mouseleave

// videoPlayer.js
let videoPlayerTimeout = null;
let videoPlayerMovementTimeout = null;

const hideVideoPlayer = () => videoPlayer.classList.remove("showing");

const handleMouseMove = () => {
  if (videoPlayerTimeout) {
    clearTimeout(videoPlayerTimeout);
    videoPlayerTimeout = null;
  }
  if (videoPlayerMovementTimeout) {
    clearTimeout(videoPlayerMovementTimeout);
    videoPlayerMovementTimeout = null;
  }
  videoPlayer.classList.add("showing");
  videoPlayerMovementTimeout = setTimeout(hideVideoPlayer, 3000);
};

const handleMouseLeave = () => {
  videoPlayerTimeout = setTimeout(hideVideoPlayer, 3000);
};

video.addEventListener("mousemove", handleMouseMove);
video.addEventListener("mouseleave", handleMouseLeave);

✨ 내일 할 것

1. 복습 계속하기 - VIEWS API