// Get 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 fullscreen = player.querySelector('.fullscreen');

// Build functions

function togglePlay() {

video.paused ? video.play() : video.pause();

}

function updateButton(e) {

const icon = this.paused ? '►' : '❚❚';

toggle.textContent = icon;

}

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(e) {

const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;

video.currentTime = scrubTime;

}

function toggleFullscreen() {

if (!document.fullscreenElement) {

if (video.requestFullscreen) {

video.requestFullscreen();

} else if (video.webkitRequestFullscreen) {

video.webkitRequestFullscreen();

} else if (video.mozRequestFullScreen) {

video.mozRequestFullScreen();

} else if (video.msRequestFullscreen) {

video.msRequestFullscreen();

}

} else {

if (document.exitFullscreen) {

document.exitFullscreen();

}

}

}

// Hook up event listeners

toggle.addEventListener('click', togglePlay);

video.addEventListener('play', updateButton);

video.addEventListener('pause', updateButton);

video.addEventListener('timeupdate', handleProgress);

skipButtons.forEach(button => button.addEventListener('click', skip));

ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));

ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate));

let mousedown = false;

progress.addEventListener('click', scrub);

progress.addEventListener('mousemove', (e) => mousedown && scrub(e));

progress.addEventListener('mousedown', () => mousedown = true);

progress.addEventListener('mouseup', () => mousedown = false);

fullscreen.addEventListener('click', toggleFullscreen);