Keeps YouTube progress bar visible all the time.
< 腳本YouTube Permanent ProgressBar的回應
Thanks a bunch! Sorry for the very late reply, I've been busy with work, I'll post this as an update if you don't mind.
Fix some bugs in my version, mostly the chapter cache is not cleaned correctly in some case.
(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,
TARGET_FPS: 15, // frame per second. Set 0 to update on each rAF.
},
// cache frequently accessed DOM nodes and chapter metrics
domCache: {player:null, video:null, currentTimeEl:null, progressBar:null, bufferBar:null},
chapterCache: {len:0,widths:[],totalWidth:0,ratio:1,duration:0},
// 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 = this.domCache.video || (this.domCache.video = player.querySelector("video"));
const currentTimeEl = this.domCache.currentTimeEl || (this.domCache.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 = this.domCache.video || (this.domCache.video = player.querySelector("video"));
const progressBar = this.domCache.progressBar || (this.domCache.progressBar = player.querySelector(".ytp-play-progress"));
const bufferBar = this.domCache.bufferBar || (this.domCache.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 chapter metrics only if cache is invalid (length/width) OR the video duration has changed.
// This handles YouTube SPA navigation where a new video may have the same number of chapters but different length.
if (this.chapterCache.len !== chapterElements.length || !this.chapterCache.totalWidth || this.chapterCache.duration !== video.duration) {
this.chapterCache.len = chapterElements.length;
this.chapterCache.widths = Array.from(chapterElements).map(el => el.offsetWidth || el.getBoundingClientRect().width || 0);
this.chapterCache.totalWidth = this.chapterCache.widths.reduce((a,b)=>a+b,0);
this.chapterCache.duration = video.duration;
this.chapterCache.ratio = this.chapterCache.totalWidth ? (video.duration / this.chapterCache.totalWidth) : 1;
}
const widths = this.chapterCache.widths;
const durationWidthRatio = this.chapterCache.ratio;
let accumulatedWidth = 0;
for (let i = 0; i < chapterElements.length; i++) {
const chapterWidth = widths[i];
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;
}
},
// -------- Cache helpers --------
resetChapterCache: function(){
this.chapterCache = {len:0,widths:[],totalWidth:0,ratio:1,duration:0};
this.domCache = {player:null, video:null, currentTimeEl:null, progressBar:null, bufferBar:null};
},
// 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);
}
},
/* ------------------ Performance-friendly update loop ------------------ */
rafId: 0,
resizeObserver: null,
/* Starts a requestAnimationFrame loop only while the <video> is playing. */
attachLoop: function(video) {
let last = 0;
const loop = (ts) => {
if (video.paused || document.hidden) {
this.rafId = requestAnimationFrame(loop);
return;
}
if (!this.options.TARGET_FPS || ts - last >= 1000 / this.options.TARGET_FPS) {
this.update();
last = ts;
}
this.rafId = requestAnimationFrame(loop);
};
this.rafId = requestAnimationFrame(loop);
},
/* Locate the player & video element and wire play/pause events. */
waitForVideo: function() {
const tryAttach = () => {
const player = this.domCache.player = document.querySelector('.html5-video-player');
const video = this.domCache.video = player?.querySelector('video');
if (!video) {
setTimeout(tryAttach, 1000);
return;
}
// Observe layout changes to invalidate chapter width cache (helps embeds/resizes)
try {
if (this.resizeObserver) this.resizeObserver.disconnect();
const ro = new ResizeObserver(() => { this.chapterCache.totalWidth = 0; });
this.resizeObserver = ro;
const observedEl = player.querySelector('.ytp-progress-bar') || player;
ro.observe(observedEl);
} catch(e) { /* ResizeObserver may be unavailable */ }
const startLoop = () => {
cancelAnimationFrame(this.rafId);
this.attachLoop(video);
};
const stopLoop = () => cancelAnimationFrame(this.rafId);
video.addEventListener('play', startLoop);
video.addEventListener('playing',startLoop);
video.addEventListener('pause', stopLoop);
video.addEventListener('ended', stopLoop);
// Auto-start if video already playing
if (!video.paused) startLoop();
};
tryAttach();
},
start: function() {
const onNavigate = () => {
this.resetChapterCache();
this.waitForVideo();
};
document.addEventListener('yt-navigate-finish', onNavigate);
this.waitForVideo();
}
};
permanentProgressBar.start();
})();
Wow, again sorry for the late reply, I had kind of given up on fixing this script. I'll post an update with your contribution asap.
Hi! I’ve refactored the script to reduce idle CPU usage and added a configurable frame-rate: