Brings 'YouTube shorts' to 21st century, where we have control over things that we watch.
// ==UserScript==
// @name YouTube Shorts ProgressBar
// @namespace http://tampermonkey.net/
// @version 0.2
// @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("#shorts-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();