scripts.js

// 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");

// Build our functions

    function togglePlay () {
        const method = video.paused ? "play" : "pause";
        video[method]();
    };

    function updateButton () {
        const icon = this.paused ? '►' : '❚ ❚';
        toggle.textContent = icon;
    };

    function skip () {
        video.currentTime += parseFloat(this.dataset.skip);
    };

    function handleRangeUpdate () {
        // console.log(this.name);
        // console.log(this.value);
        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;
    };

// 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));
    ranges.forEach(range => range.addEventListener("mousemove", handleRangeUpdate));

    let mousedown = false;
    progress.addEventListener("click", scrub);
    progress.addEventListener("mousemove", (e) => {
        if(mousedown) {
            scrub(e);
        };
    });
    progress.addEventListener("mousedown", () => mousedown = true);
    progress.addEventListener("mouseup", () => mousedown = false);