Brings 'YouTube shorts' to 21st century, where we have control over things that we watch.

YouTube_Shorts_ProgressBar.js

// ==UserScript==
// @name         YouTube Shorts ProgressBar
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Brings 'YouTube shorts' to 21st century, where we have control over things that we watch.
// @author       Can Kurt
// @match        *://www.youtube.com/*
// @license      MIT
// ==/UserScript==

var shortsProgressBar = {

    options : {
        BACKGROUND_COLOR: "#BFBFBF",
        COLOR: "#0076ff",                    // Blue
        // COLOR: "#FF0000",                 // Youtube's red
        THICKNESS: "6px",
        BORDER_RADIUS: "10px",

        UPDATE_INTERVAL: 100
    },


    /*
    *  Creates custom progress bar element
    */
    createProgressBarElement: function(video) {
        let progressBar = document.createElement("div");
        progressBar.setAttribute("class", "CK-shorts-progress-bar");

        progressBar.style.width = player.offsetWidth + "px";
        progressBar.style.height = shortsProgressBar.options.THICKNESS;
        progressBar.style.backgroundColor = shortsProgressBar.options.BACKGROUND_COLOR;
        progressBar.style.borderRadius = shortsProgressBar.options.BORDER_RADIUS;
        progressBar.style.margin = "auto";
        progressBar.style.cursor = "pointer";

        progressBar.onclick = function (e) {
            var value_clicked = e.offsetX * 1 / this.offsetWidth;
            video.currentTime = value_clicked * video.duration;
        }

        let progress = document.createElement("div");
        progress.setAttribute("class", "CK-shorts-progress");

        progress.style.width = "0%";
        progress.style.height = "100%";
        progress.style.backgroundColor = shortsProgressBar.options.COLOR;
        progress.style.borderRadius = shortsProgressBar.options.BORDER_RADIUS;


        progressBar.appendChild(progress);

        return progressBar;

    },


    update : function() {

        // Get video element
        const player = document.querySelector(".html5-video-player");
        if (player == null) {
            return;
        }
        const video = player.querySelector("video");
        if (video == null || isNaN(video.duration)) {
            return;
        }

        // Get all reel-video elements (shorts page can have infinite amount of videos)
        var reelVideoRenderers = document.getElementsByTagName("ytd-reel-video-renderer");

        for (let i = 0; i < reelVideoRenderers.length; i++) {

            let progressBar = reelVideoRenderers[i].querySelector(".CK-shorts-progress-bar");

            // If element does not have the pb create a new one and add it to player controls.
            if(progressBar == null) {

                // Create a new pb
                let progressBar = shortsProgressBar.createProgressBarElement(video);

                // Add the bar to player controls.
                reelVideoRenderers[i].getElementsByClassName("player-controls")[0].append(progressBar);
            }
            // Else update the existing pb
            else{
                // Hide pb if controls is hidden
                let playerControls = reelVideoRenderers[i].getAttribute("show-player-controls");
                if(playerControls == null) {
                    progressBar.style.display="none";
                }
                else {
                    progressBar.style.display="";
                }

                // Update pb
                let time = video.currentTime / video.duration;
                progressBar.getElementsByClassName("CK-shorts-progress")[0].style.width=(time * 100) + "%";

            }
        }

    },


    start : function(){
        setInterval(shortsProgressBar.update, shortsProgressBar.options.UPDATE_INTERVAL);
    }

}


shortsProgressBar.start();