Keep the YouTube red video progress tracker at the bottom visible even when controls auto-hide.
// ==UserScript==
// @name YouTube ProgressBar Preserver
// @namespace https://greatest.deepsurf.us/en/users/670188-hacker09?sort=daily_installs
// @version 1
// @description Keep the YouTube red video progress tracker at the bottom visible even when controls auto-hide.
// @author hacker09
// @include https://www.youtube.com/*
// @include https://www.youtube-nocookie.com/embed/*
// @exclude https://www.youtube.com/live_chat*
// @exclude https://www.youtube.com/live_chat_replay*
// @icon https://www.youtube.com/s/desktop/03f86491/img/favicon.ico
// @grant none
// ==/UserScript==
(function() {
if (!document.getElementById('yt-prog-style')) { //Check if the style element is missing
document.head.appendChild(Object.assign(document.createElement('style'), {id: 'yt-prog-style', textContent: 'body:not(.tm-clean-ui):not(:has(.ytp-autohide)):has(#player:hover) #yt-custom-prog, body:not(.tm-clean-ui):not(:has(.ytp-autohide)):has(#player-controls:hover) #yt-custom-prog, body:not(.tm-clean-ui):not(:has(.ytp-autohide)):has(ytm-custom-control:hover) #yt-custom-prog, body:not(.tm-clean-ui) .html5-video-player:not(.ytp-autohide):hover #yt-custom-prog, body:not(.tm-clean-ui) .html5-video-player.paused-mode #yt-custom-prog, body:not(.tm-clean-ui):has(#player-control-overlay.fadein:not(.fadeout)) #yt-custom-prog { opacity: 0 !important; visibility: hidden !important; }'})); //Inject the CSS rules directly into the head
}
document.addEventListener('timeupdate', function(e) { //Listen for the video timeupdate event
if (e.target.classList) { //Ensure the event target supports classList
if (e.target.classList.contains('html5-main-video')) { //Ensure the target is the YouTube video element
if (document.getElementById('yt-custom-prog')) { //Check if the custom progress bar is already injected
document.getElementById('yt-custom-prog').style.background = `linear-gradient(to right, #f00 ${(e.target.currentTime / e.target.duration) * 100}%, grey ${(e.target.currentTime / e.target.duration) * 100}%, grey ${e.target.buffered.length ? (e.target.buffered.end(e.target.buffered.length - 1) / e.target.duration) * 100 : 0}%, transparent 0)`; //Update the gradient to show played and buffered amounts
} else { //If the progress bar is not in the DOM yet
(e.target.closest('.html5-video-player') || e.target.parentElement).appendChild(Object.assign(document.createElement('div'), {id:'yt-custom-prog', style:'position:absolute;bottom:0;left:0;height:3px;z-index:999999;pointer-events:none;width:100%;transition:opacity 0.2s;'})); //Create and append the progress bar element with full width
}
}
}
}, true); //Use event capturing
})();