☰

YouTube Always show progress bar

Always show progress bar

  1. // ==UserScript==
  2. // @name         YouTube Always show progress bar
  3. // @version      0.2
  4. // @description  Always show progress bar
  5. // @author       Workgroups
  6. // @match        *://www.youtube.com/*
  7. // @grant        none
  8. // @namespace https://greasyfork.org/users/127290
  9. // ==/UserScript==
  10. var style = document.createElement('style');
  11. style.type = 'text/css';
  12. //style.innerHTML = '.ytp-autohide .ytp-chrome-bottom{opacity:1!important;width:100%!important;left:0!important}.ytp-autohide .ytp-chrome-bottom .ytp-progress-bar-container{bottom:-1px!important}.ytp-autohide .ytp-chrome-bottom .ytp-chrome-controls{opacity:0!important}';
  13. style.innerHTML = '.ytp-autohide .ytp-chrome-bottom{opacity:1!important;width:100%!important;left:0!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}';
  14.  
  15. document.getElementsByTagName('head')[0].appendChild(style);
  16.  
  17. var findVideoInterval = setInterval(function() {
  18.     var ytplayer = document.querySelector(".html5-video-player:not(.addedupdateevents)");
  19.     if (!ytplayer) {
  20.         return;
  21.     }
  22.     clearInterval(findVideoInterval);
  23.     ytplayer.className+=" addedupdateevents";
  24.     var video = ytplayer.querySelector("video");
  25.     var progressbar = ytplayer.querySelector(".ytp-play-progress");
  26.     var loadbar = ytplayer.querySelector(".ytp-load-progress");
  27.     if (!video || !progressbar || !loadbar) {
  28.         return;
  29.     }
  30.     video.addEventListener("timeupdate",function() {
  31.         progressbar.style.transform = "scaleX("+(video.currentTime/video.duration)+")";
  32.     });
  33.     video.addEventListener("progress",function() {
  34.         loadbar.style.transform = "scaleX("+(video.buffered.end(video.buffered.length-1)/video.duration)+")";
  35.     });
  36. },500);