☰

YouTube Always Hoverable ProgressBar

Makes progressbar hoverable from the very beginning (also works when paused).

  1. // ==UserScript==
  2. // @name         YouTube Always Hoverable ProgressBar
  3. // @namespace    https://github.com/Amadeus-AI
  4. // @version      1.0.3
  5. // @description  Makes progressbar hoverable from the very beginning (also works when paused).
  6. // @icon         https://www.youtube.com/s/desktop/3748dff5/img/favicon_48.png
  7. // @author       AmadeusAI
  8. // @match        *://www.youtube.com/*
  9. // @license      MIT
  10. // ==/UserScript==
  11. /*jshint esversion: 6 */
  12.  
  13. var InstantBar =
  14. {
  15.     css :
  16. `
  17. .ytp-chrome-bottom { opacity: 0 }
  18. .ytp-chrome-top { opacity: 0 }
  19. .ytp-gradient-bottom { opacity: 0 }
  20. .ytp-gradient-top { opacity: 0 }
  21. .html5-video-player:not(.ytp-fullscreen):hover > .ytp-chrome-bottom { opacity: 1 }
  22. .html5-video-player:not(.ytp-fullscreen):hover > .ytp-gradient-bottom { opacity: 1 }
  23. .html5-video-player.ytp-fullscreen > .ytp-chrome-bottom:hover { opacity: 1 }
  24.  
  25. `,
  26.  
  27.     apply : function()
  28.     {
  29.         if (typeof GM_addStyle !== "undefined")
  30.         {
  31.             GM_addStyle(InstantBar.css);
  32.         }
  33.         else
  34.         {
  35.             let styleNode = document.createElement("style");
  36.             styleNode.appendChild(document.createTextNode(InstantBar.css));
  37.             (document.querySelector("head") || document.documentElement).appendChild(styleNode);
  38.         }
  39.     },
  40.  
  41.     start : function()
  42.     {
  43.         // To overwrite youtube's default behavior
  44.         setTimeout(InstantBar.apply, 0);
  45.     }
  46. };
  47.  
  48. InstantBar.start();