☰

YouTube Volume Mouse Controller

Control YouTube video volume by mouse wheel.

  1. // ==UserScript==
  2. // @name            YouTube Volume Mouse Controller
  3. // @namespace       wddd
  4. // @version         1.5.0
  5. // @author          wddd
  6. // @license         MIT
  7. // @description     Control YouTube video volume by mouse wheel.
  8. // @homepage        https://github.com/wdwind/YouTubeVolumeMouseController
  9. // @match           *://www.youtube.com/*
  10. // ==/UserScript==
  11.  
  12. var ytb = {
  13.     inIframe: function() {
  14.         try {
  15.             return window.self !== window.top;
  16.         } catch (e) {
  17.             return true;
  18.         }
  19.     },
  20.     isEmbed: function() {
  21.         return this.inIframe || window.location.href.includes('youtube.com/embed');
  22.     },
  23.     getPlayerElement: function() {
  24.         if (!this.isEmbed()) {
  25.             var ytd_player = document.getElementsByTagName("ytd-player");
  26.             for (var player of ytd_player) {
  27.                 if (player.getPlayer() && player.className.indexOf('preview') == -1) {
  28.                     return player;
  29.                 }
  30.             }
  31.         } else {
  32.             return this.getPlayer();
  33.         }
  34.     },
  35.     getVideo: function() {
  36.         return this.getPlayerElement()?.getElementsByTagName("video")[0];
  37.     },
  38.     getPlayer: function() {
  39.         if (!this.isEmbed()) {
  40.             return this.getPlayerElement()?.getPlayer();
  41.         } else {
  42.             return document.getElementsByClassName("html5-video-player")[0];
  43.         }
  44.     },
  45.     ready: function() {
  46.         return this.getPlayer() && this.getVideo();
  47.     }
  48. }
  49.  
  50. function run() {
  51.     if (!ytb.getPlayer()) {
  52.         // eslint-disable-next-line no-console
  53.         console.log("Player not found (yet).");
  54.         return;
  55.     }
  56.  
  57.     var timer = 0;
  58.  
  59.     // detect available wheel event
  60.     var support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
  61.         document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
  62.             "DOMMouseScroll"; // let"s assume that remaining browsers are older Firefox
  63.  
  64.     ytb.getVideo().addEventListener(support, function (event) {
  65.         var volume = ytb.getPlayer().getVolume();
  66.         var volumeDelta = 5;
  67.         var deltaY = support == "mousewheel" ? event.wheelDelta : (event.deltaY || event.detail);
  68.         
  69.         // Optimize volume change for touchpad
  70.         if (Math.abs(deltaY) < 5) {
  71.             volumeDelta = Math.max(Math.floor(Math.abs(deltaY)), 1);
  72.         }
  73.  
  74.         volume += (deltaY > 0 ? -volumeDelta : volumeDelta);
  75.  
  76.         // Limit the volume between 0 and 100
  77.         volume = Math.max(0, Math.min(100, volume));
  78.  
  79.         if (volume > 0) {
  80.             ytb.getPlayer().unMute(true);
  81.         }
  82.         ytb.getPlayer().setVolume(volume, true);
  83.  
  84.         timer = showSlider(timer, volume);
  85.  
  86.         // Prevent the page to scroll
  87.         event.preventDefault();
  88.         event.stopImmediatePropagation();
  89.         return false;
  90.     });
  91. }
  92.  
  93. function showSlider(timer, volume) {
  94.     if (timer) {
  95.         clearTimeout(timer);
  96.     }
  97.  
  98.     var sliderBar = appendSlideBar();
  99.  
  100.     sliderBar.style.display = "block";
  101.     timer = setTimeout(function () {
  102.         sliderBar.style.display = "none";
  103.     }, 1000);
  104.  
  105.     sliderBar.innerText = "Volume: " + volume;
  106.  
  107.     return timer;
  108. }
  109.  
  110. function appendSlideBar() {
  111.     var sliderBar = document.getElementById("sliderBar");
  112.     if (!sliderBar) {
  113.         var sliderBarElement = document.createElement("div");
  114.         sliderBarElement.id = "sliderBar";
  115.  
  116.         ytb.getPlayerElement().getElementsByClassName("html5-video-container")[0].appendChild(sliderBarElement);
  117.  
  118.         sliderBar = document.getElementById("sliderBar");
  119.         addCss(sliderBar, {
  120.             "width": "100%",
  121.             "height": "20px",
  122.             "position": "relative",
  123.             "z-index": "9999",
  124.             "text-align": "center",
  125.             "color": "#fff",
  126.             "font-size": "initial",
  127.             "opacity": "0.9",
  128.             "background-color": "rgba(0,0,0,0.2)",
  129.         });
  130.     }
  131.  
  132.     if (!ytb.isEmbed()) {
  133.         addCss(sliderBar, {"top": getSliderBarTopProp() + "px"});
  134.     }
  135.  
  136.     return sliderBar;
  137. }
  138.  
  139. function addCss(element, css) {
  140.     for (var cssAttr in css) {
  141.         element.style[cssAttr] = css[cssAttr];
  142.     }
  143. }
  144.  
  145. function getSliderBarTopProp() {
  146.     var fullScreenTitleHeight = 0;
  147.  
  148.     var fullScreenTitle = document.getElementsByClassName("ytp-title")[0];
  149.     if (fullScreenTitle && fullScreenTitle.offsetParent) {
  150.         fullScreenTitleHeight = fullScreenTitle.offsetHeight;
  151.     }
  152.  
  153.     var videoTop = ytb.getVideo().getBoundingClientRect().top;
  154.     var headerBoundingBox = 
  155.         (document.getElementById("masthead-positioner") || document.getElementById("masthead-container")).getBoundingClientRect();
  156.     var headerTop = headerBoundingBox.top;
  157.     var headerHeight = headerBoundingBox.height;
  158.  
  159.     var overlap = (headerHeight + headerTop > 0) ? Math.max(0, headerHeight - videoTop) : 0;
  160.  
  161.     return Math.max(fullScreenTitleHeight, overlap);
  162. }
  163.  
  164. /**
  165.  * YouTube use Javascript to navigate between pages. So the script will not work:
  166.  * 1. If the script only includes/matches the sub pages (like the video page www.youtube.com/watch?v=...)
  167.  * 2. And the user navigates to the sub page from a page which is not included/matched by the script
  168.  *
  169.  * In the above scenario, the script will not be executed.
  170.  *
  171.  * To run the script in all cases,
  172.  * 1. Include/match the whole YouTube host
  173.  * 2. Detect Javascript events, and run the script appropriately
  174.  *
  175.  * Details:
  176.  * * https://stackoverflow.com/questions/32275387/recall-tampermonkey-script-when-page-location-changes/32277150#32277150
  177.  * * https://stackoverflow.com/questions/34077641/how-to-detect-page-navigation-on-youtube-and-modify-html-before-page-is-rendered
  178.  * * https://github.com/1c7/Youtube-Auto-Subtitle-Download/blob/master/Youtube-Subtitle-Downloader/Tampermonkey.js#L122-L152
  179.  */
  180.  
  181. // trigger when navigating to new material design page
  182. window.addEventListener("yt-navigate-finish", function () {
  183.     if (window.location.href.includes("/watch?v=")) {
  184.         run();
  185.     }
  186. });
  187.  
  188. // trigger when navigating to the old page
  189. window.addEventListener("spfdone", function () {
  190.     if (window.location.href.includes("/watch?v=")) {
  191.         run();
  192.     }
  193. });
  194.  
  195. // trigger when directly loading the page
  196. window.addEventListener("DOMContentLoaded", function () {
  197.     if (window.location.href.includes("/watch?v=")) {
  198.         run();
  199.     }
  200. });
  201.  
  202. /**
  203.  * Use MutationObserver to cover all edge cases.
  204.  * https://stackoverflow.com/a/39803618
  205.  * 
  206.  * This is to handle the use case where navigation happens but <video> has not been loaded yet. 
  207.  * (In YouTube the contents are loaded asynchronously.)
  208.  */
  209. var observer = new MutationObserver(function() {
  210.     if (ytb.ready()) {
  211.         observer.disconnect();
  212.         run();
  213.     }
  214. });
  215.  
  216. observer.observe(document.body, /* config */ {childList: true, subtree: true});