text: // 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');
  
  let mouseDown = false;
  
  // Build out functions
  function togglePlay() {
      if (video.paused) {
          video.play();
      } else {
          video.pause();
      }
  }
  
  function updateButton() {
      toggle.textContent = this.paused ? '►' : '❚ ❚';
  }
  
  function skip() {
      video.currentTime += parseFloat(this.dataset.skip);
  }
  
  function handleRangeUpdate() {
      video[this.name] = this.value;
  }
  
  function handleProgress() {
      const percent = video.currentTime / video.duration * 100;
      progressBar.style.flexBasis = `${percent}%`;
  }
  
  function scrub(event) {
      video.currentTime = event.offsetX / progress.offsetWidth * video.duration;
  }
  
  // Hook up the event listeners
  video.addEventListener('click', togglePlay);
  video.addEventListener('play', updateButton);
  video.addEventListener('pause', updateButton);
  video.addEventListener('timeupdate', handleProgress);
  
  toggle.addEventListener('click', togglePlay);
  
  skipButtons.forEach(button => {
      button.addEventListener('click', skip);
  });
  
  ranges.forEach(range => {
      range.addEventListener('change', handleRangeUpdate);
      range.addEventListener('mousemove', handleRangeUpdate);
  });
  
  progress.addEventListener('click', scrub);
  progress.addEventListener('mousemove', () => {
      if (mouseDown) {
          scrub(event);
      }
  });
  progress.addEventListener('mousedown', () => mouseDown = true);
  progress.addEventListener('mouseup', () => mouseDown = false);