Tampermonkey: YouTube: always show an additional progress bar below the video (not just on mouse move or pause)

youtube-progress-always.tamper.js

// ==UserScript==
// @name         YouTube: always show a progress bar
// @namespace    https://gist.github.com/vogler
// @downloadURL  https://gist.github.com/vogler/f0bba0a52a6fed61afab19245e72b5d4/raw/youtube-progress-always.tamper.js
// @version      0.5
// @description  YouTube: always show an additional progress bar below the video (not just on mouse move or pause)
// @author       Ralf Vogler
// @ match        https://www.youtube.com/watch?v=* // this will not work if you open youtube.com and then click on a video since it is a SPA
// @match        https://www.youtube.com/*
// @grant        none
// ==/UserScript==

const alsoInFullscreen = true;

(async function() {
    'use strict';

    // style progress bar
    const p = document.createElement('div');
    p.style.backgroundColor = '#909090'; // gray instead of red to avoid confusion with original progress bar
    p.style.height = '4px';
    if (alsoInFullscreen) {
        p.style.position = 'absolute';
        p.style.bottom = '0px';
        p.style.zIndex = 60;
        // TODO align with original progress bar? hard since it has some relative margins.
    }

    // update its width on video progress
    // the surrounding MutationObserver is needed for when navigating from youtube.com to a video instead of opening it in a new tab
    // could also try https://www.tampermonkey.net/documentation.php?locale=en#api:window.onurlchange
    (new MutationObserver((mutations, observer) => {
        if (document.location.pathname != '/watch') return;
        const player = document.querySelector('#ytd-player');
        const v = document.querySelector('#movie_player video');
        if (!player || !v) return;
        observer.disconnect();
        player.appendChild(p); // append progress bar below video
        console.log('youtube-progress-always:', v);
        v.addEventListener('timeupdate', e => {
            p.style.width = Math.round(v.currentTime) / v.duration * 100 + '%'; // Math.round to smooth progress movement a bit; could also round to percentage for fewer/coarser visual updates
        }, { passive: true });
    })).observe(document, { subtree: true, childList: true });
})();