11.js

function playIt() {
    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");

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

        // Method 2
        /*
            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(e) {
        video.currentTime = (e.offsetX / progress.offsetWidth) * video.duration;
    }

    function toggleFullScreen() {
        if (buttonFullScreen) {
            player.requestFullscreen();
        } else {
            document.exitFullscreen();
        }
    }
    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)
    );

    let buttonFullScreen = true;
    fullScreen.addEventListener("click", toggleFullScreen);
    fullScreen.addEventListener("click", () => {
        buttonFullScreen = buttonFullScreen == false ? true : false;
    });

    let mousedown = false;
    progress.addEventListener("click", scrub);
    progress.addEventListener("mousemove", (e) => mousedown && scrub(e));
    progress.addEventListener("mousedown", () => (mousedown = true));
    progress.addEventListener("mouseup", () => (mousedown = false));
}
window.addEventListener("DOMContentLoaded", playIt);