Day11: Custom Video Player

/* Get Our Elements */
const player = document.querySelector('.player')
const video = player.querySelector('.viewer')
const progress = player.querySelector('.progress')
const progressBar = player.querySelector('.progress__filled')
const toggle = player.querySelector('.toggle')
const skipButtons = player.querySelectorAll('[data-skip]')
const ranges = player.querySelectorAll('.player__slider')
const fullscreenBtn = player.querySelector('.screen__button')
const iconBtn = player.querySelector('.icon__button')

/* Build out functions */

// Play or pause video
function togglePlay() {
  const method = video.paused ? 'play' : 'pause'
  video[method]()
}

// Update icon UI based on video play/pause state
function updateButton() {
  const icon = this.paused
    ? ` <i class="fas fa-play"></i>`
    : `<i class="fas fa-pause"></i>`
  toggle.innerHTML = icon

  const iconVideo = this.paused ? ` <i class="fas fa-play"></i>` : ``
  iconBtn.innerHTML = iconVideo
}

// Fast forward and rewind - update video currentTime by data-skip value
function skip() {
  video.currentTime += parseFloat(this.dataset.skip)
}

// Update video volume and playbackRate values
function handleRangeUpdate() {
  video[this.name] = this.value
}

// Update progress bar UI and color
function handleProgress() {
  const percent = (video.currentTime / video.duration) * 100
  progressBar.style.flexBasis = `${percent}%`
  progressBar.style.background = '#ff0000'
}

// Change video playback position
function scrub(e) {
  const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration
  video.currentTime = scrubTime
}

// Request fullscreen
function fullscreen() {
  video.requestFullscreen()
}

/* Hook up the event listeners */

// Handle video play/pause
video.addEventListener('click', togglePlay) // Click video to execute togglePlay
toggle.addEventListener('click', togglePlay) // Click bottom toggle to execute togglePlay
video.addEventListener('play', updateButton) // Listen for video play to update button UI
video.addEventListener('pause', updateButton) // Listen for video pause to update button UI

// When video currentTime updates, trigger timeupdate event to update progress bar UI
video.addEventListener('timeupdate', handleProgress)

// Handle fast forward/rewind
skipButtons.forEach((button) => button.addEventListener('click', skip))

// Handle volume and speed sliders
ranges.forEach((range) => range.addEventListener('change', handleRangeUpdate))
ranges.forEach((range) =>
  range.addEventListener('mousemove', handleRangeUpdate)
)

// Handle progress bar - mousedown is true when mouse pressed, false when released
let mousedown = false
progress.addEventListener('click', scrub) // Click progress bar to execute scrub
progress.addEventListener('mousemove', (e) => mousedown && scrub(e)) // If mousedown is true, execute scrub
progress.addEventListener('mousedown', () => (mousedown = true))
progress.addEventListener('mouseup', () => (mousedown = false))

// Handle fullscreen
fullscreenBtn.addEventListener('click', fullscreen)