☰

Youtube Scroll Volume

Use the scroll wheel to adjust volume of youtube videos

  1. // ==UserScript==
  2. // @name         Youtube Scroll Volume
  3. // @namespace    https://greasyfork.org/users/649
  4. // @version      1.1.12
  5. // @description  Use the scroll wheel to adjust volume of youtube videos
  6. // @author       Adrien Pyke
  7. // @match        *://www.youtube.com/*
  8. // @grant        GM_addStyle
  9. // @grant        GM_getValue
  10. // @grant        GM_setValue
  11. // @grant        GM_registerMenuCommand
  12. // @require      https://cdn.jsdelivr.net/gh/kufii/My-UserScripts@22210afba13acf7303fc91590b8265faf3c7eda7/libs/gm_config.js
  13. // @require      https://cdn.jsdelivr.net/gh/fuzetsu/userscripts@ec863aa92cea78a20431f92e80ac0e93262136df/wait-for-elements/wait-for-elements.js
  14. // @require      https://cdn.jsdelivr.net/gh/kufii/quick-query.js@2993f91ae90f3b2aff4af7e9ce0b08504f5c8060/dist/window/qq.js
  15. // ==/UserScript==
  16.  
  17. (() => {
  18.   'use strict';
  19.  
  20.   const { q } = window.QuickQuery;
  21.  
  22.   const Util = {
  23.     bound: (num, min, max) => Math.max(Math.min(num, max), min)
  24.   };
  25.  
  26.   const Config = GM_config([
  27.     { key: 'reverse', label: 'Reverse Scroll', default: false, type: 'bool' },
  28.     {
  29.       key: 'horizontal',
  30.       label: 'Use Horizontal Scroll',
  31.       default: false,
  32.       type: 'bool'
  33.     },
  34.     {
  35.       key: 'step',
  36.       label: 'Change By',
  37.       default: 5,
  38.       type: 'number',
  39.       min: 1,
  40.       max: 100
  41.     },
  42.     { key: 'hud', label: 'Display HUD', default: true, type: 'bool' },
  43.     {
  44.       key: 'requireShift',
  45.       label: 'Only handle scroll if holding "Shift" key',
  46.       default: false,
  47.       type: 'bool'
  48.     }
  49.   ]);
  50.   GM_registerMenuCommand('Youtube Scroll Volume Settings', Config.setup);
  51.  
  52.   let config = Config.load();
  53.   Config.onsave = newConf => (config = newConf);
  54.  
  55.   GM_addStyle(/* css */ `
  56. 		.YSV_hud {
  57. 			display: flex;
  58. 			flex-direction: column;
  59. 			justify-content: flex-end;
  60. 			align-items: center;
  61. 			position: absolute;
  62. 			top: 0;
  63. 			bottom: 0;
  64. 			left: 0;
  65. 			right: 0;
  66. 			opacity: 0;
  67. 			transition: opacity 500ms ease 0s;
  68. 			z-index: 10;
  69. 			pointer-events: none;
  70. 		}
  71. 		.YSV_bar {
  72. 			background-color: #444;
  73. 			border: 2px solid white;
  74. 			width: 80%;
  75. 			max-width: 600px;
  76. 			margin-bottom: 10%;
  77. 		}
  78. 		.YSV_progress {
  79. 			transition: width 100ms ease-out 0s;
  80. 			background-color: #888;
  81. 			height: 20px;
  82. 		}
  83. 		.YSV_text {
  84. 			position: absolute;
  85. 			text-align: center;
  86. 			line-height: 20px;
  87. 			width: 80%;
  88. 			max-width: 600px;
  89. 			color: white;
  90. 		}
  91. 	`);
  92.  
  93.   const createHud = () => {
  94.     const hud = document.createElement('div');
  95.     hud.classList.add('YSV_hud');
  96.     hud.innerHTML =
  97.       '<div class="YSV_bar"><div class="YSV_text"></div><div class="YSV_progress"></div></div>';
  98.     return hud;
  99.   };
  100.  
  101.   waitForElems({
  102.     sel: 'ytd-player',
  103.     onmatch(node) {
  104.       let id;
  105.  
  106.       const hud = createHud();
  107.       const progress = q(hud).q('.YSV_progress');
  108.       const text = q(hud).q('.YSV_text');
  109.       node.appendChild(hud);
  110.  
  111.       const showHud = volume => {
  112.         clearTimeout(id);
  113.         progress.style.width = `${volume}%`;
  114.         text.innerHTML = `${volume}%`;
  115.         hud.style.opacity = 1;
  116.         id = setTimeout(() => (hud.style.opacity = 0), 800);
  117.       };
  118.  
  119.       node.onwheel = e => {
  120.         if (config.requireShift && !e.shiftKey) return;
  121.         const player = node.getPlayer();
  122.         const dir =
  123.           ((config.horizontal ? -e.deltaX : e.deltaY) > 0 ? -1 : 1) *
  124.           (config.reverse ? -1 : 1);
  125.  
  126.         const vol = Util.bound(player.getVolume() + config.step * dir, 0, 100);
  127.         if (vol > 0 && player.isMuted()) player.unMute();
  128.         player.setVolume(vol);
  129.         if (config.hud) showHud(vol);
  130.  
  131.         e.preventDefault();
  132.         e.stopImmediatePropagation();
  133.       };
  134.     }
  135.   });
  136. })();