YouTube Permanent ProgressBar

Keeps YouTube progress bar visible all the time.
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         YouTube Permanent ProgressBar
// @namespace    http://tampermonkey.net/
// @version      0.3.8
// @description  Keeps YouTube progress bar visible all the time.
// @author       ChromiaCat
// @match        *://www.youtube.com/*
// @license      MIT
// ==/UserScript==

(function() {
    "use strict";

    var style = document.createElement('style');
    var to = { createHTML: s => s },
        tp = window.trustedTypes?.createPolicy ? trustedTypes.createPolicy("", to) : to,
        html = s => tp.createHTML(s);
    style.type = 'text/css';
    style.innerHTML = html(
        '.ytp-autohide .ytp-chrome-bottom{opacity:1!important;display:block!important}' +
        '.ytp-autohide .ytp-chrome-bottom .ytp-progress-bar-container{bottom:-1px!important}' +
        '.ytp-autohide .ytp-chrome-bottom .ytp-chrome-controls{opacity:0!important}' +
        '.ytp-progress-bar-container:not(:hover) .ytp-scrubber-container{display:none!important}'
    );
    document.getElementsByTagName('head')[0].appendChild(style);

    var permanentProgressBar = {
        options: {
            // To change bar update rate, go to line 161.
            UPDATE_VIDEO_TIMER: true,
            UPDATE_PROGRESSBAR: true,
            UPDATE_BUFFERBAR: true,
        },

        // Converts current video time to a human-readable format.
        prettifyVideoTime: function(video) {
            let seconds = "" + Math.floor(video.currentTime % 60);
            let minutes = "" + Math.floor((video.currentTime % 3600) / 60);
            let hours = "" + Math.floor(video.currentTime / 3600);
            if (video.currentTime / 60 > 60) {
                return `${hours}:${minutes.padStart(2, '0')}:${seconds.padStart(2, '0')}`;
            } else {
                return `${minutes}:${seconds.padStart(2, '0')}`;
            }
        },

        // For progress mode, return current time; for buffer mode, return the end of the buffered range that contains currentTime.
        getDuration: function(video, type) {
            if (type === "PROGRESSBAR") {
                return video.currentTime;
            } else if (type === "BUFFERBAR") {
                if (video.buffered.length > 0) {
                    for (let i = 0; i < video.buffered.length; i++) {
                        if (video.currentTime >= video.buffered.start(i) && video.currentTime <= video.buffered.end(i)) {
                            return video.buffered.end(i);
                        }
                    }
                }
                return 0;
            }
        },

        // Updates the current time display on the player.
        updateCurrentTimeField: function(player) {
            const video = player.querySelector("video");
            const currentTimeEl = player.querySelector(".ytp-time-current");
            if (!video || !currentTimeEl) return;
            currentTimeEl.innerText = permanentProgressBar.prettifyVideoTime(video);
        },

        // For non-chaptered videos, update the progress and buffer bars directly.
        updateOverallProgressBar: function(player) {
            const video = player.querySelector("video");
            const progressBar = player.querySelector(".ytp-play-progress");
            const bufferBar = player.querySelector(".ytp-load-progress");
            if (!video || !progressBar || !bufferBar) return;
            if (!video.duration) return;

            let progressRatio = video.currentTime / video.duration;
            let bufferRatio = this.getDuration(video, "BUFFERBAR") / video.duration;

            progressBar.style.transform = `scaleX(${Math.min(1, progressRatio.toFixed(5))})`;
            bufferBar.style.transform = `scaleX(${Math.min(1, bufferRatio.toFixed(5))})`;
        },

        // For chaptered videos, update each chapter element directly based on current time.
        updateProgressBarWithChapters: function(player, type) {
            const video = player.querySelector("video");
            if (!video || isNaN(video.duration)) return;

            // Get the chapter elements and corresponding progress elements.
            const chapterElements = player.getElementsByClassName("ytp-progress-bar-padding");
            let chapterProgressEls;
            if (type === "PROGRESSBAR") {
                chapterProgressEls = player.getElementsByClassName("ytp-play-progress");
            } else if (type === "BUFFERBAR") {
                chapterProgressEls = player.getElementsByClassName("ytp-load-progress");
            }
            if (!chapterElements || !chapterProgressEls) return;

            // Compute total width of the progress bar (sum of all chapter widths)
            let totalWidth = 0;
            for (let i = 0; i < chapterElements.length; i++) {
                totalWidth += chapterElements[i].offsetWidth;
            }
            const durationWidthRatio = video.duration / totalWidth;

            let accumulatedWidth = 0;
            for (let i = 0; i < chapterElements.length; i++) {
                const chapterWidth = chapterElements[i].offsetWidth;
                const chapterEndTime = durationWidthRatio * (accumulatedWidth + chapterWidth);
                const chapterStartTime = durationWidthRatio * accumulatedWidth;
                let currentTimeForType = this.getDuration(video, type);
                let ratio;
                if (currentTimeForType >= chapterEndTime) {
                    ratio = 1;
                } else if (currentTimeForType < chapterStartTime) {
                    ratio = 0;
                } else {
                    ratio = (currentTimeForType - chapterStartTime) / (chapterEndTime - chapterStartTime);
                }
                chapterProgressEls[i].style.transform = `scaleX(${Math.min(1, ratio.toFixed(5))})`;
                accumulatedWidth += chapterWidth;
            }
        },

        // The main update function which selects chapter-mode or overall mode.
        update: function() {
            const player = document.querySelector(".html5-video-player");
            if (!player) return;

            if (this.options.UPDATE_VIDEO_TIMER) {
                this.updateCurrentTimeField(player);
            }

            // If chapter elements exist, update chapter-mode; otherwise use overall mode.
            let chapterElements = player.getElementsByClassName("ytp-progress-bar-padding");
            if (chapterElements.length > 0) {
                if (this.options.UPDATE_PROGRESSBAR) {
                    this.updateProgressBarWithChapters(player, "PROGRESSBAR");
                }
                if (this.options.UPDATE_BUFFERBAR) {
                    this.updateProgressBarWithChapters(player, "BUFFERBAR");
                }
            } else {
                this.updateOverallProgressBar(player);
            }
        },

        // The update loop runs on each animation frame.
        // Update loop code with update rate settings improved by https://gf.qytechs.cn/en/users/475505-tettedev
        updateLoopThrottled: function() {
            const loop = (ups) => {
                setTimeout(() => {
                    permanentProgressBar.update();
                    requestAnimationFrame(permanentProgressBar.updateLoop);
                }, 1000 / ups);
            };

            const updateRate = 20; // How many per second. Floats are allowed e.g. 4.20
            loop(updateRate);
        },

        updateLoop: function() {
            permanentProgressBar.update();
            requestAnimationFrame(permanentProgressBar.updateLoop);
        },

        start: function() {
            requestAnimationFrame(this.updateLoopThrottled); // (this.updateLoop) Happens every aniamtion frame,
                                                    // (this.updateLoopThrottled) is configurable to run slower but may cause jittering if YT's code updates the bar at the same time e.g. when exposing the player's controls.
                                                    // I'm not sure how to disable YT's bar updating code to allow flawless bar updating for slower loop code, if you know how let me know.
        }
    };

    permanentProgressBar.start();
})();
欢迎访问Greasy Fork镜像
