☰

Youtube Scroll Volume

Use the scroll wheel to adjust volume of youtube videos

当前为 2019-01-02 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Youtube Scroll Volume
  3. // @namespace    https://greasyfork.org/users/649
  4. // @version      1.1.3
  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://gitcdn.link/repo/kufii/My-UserScripts/fa4555701cf5a22eae44f06d9848df6966788fa8/libs/gm_config.js
  13. // @require      https://gitcdn.link/repo/fuzetsu/userscripts/b38eabf72c20fa3cf7da84ecd2cefe0d4a2116be/wait-for-elements/wait-for-elements.js
  14. // @require      https://gitcdn.link/repo/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. 		{ key: 'step', label: 'Change By', default: 5, type: 'number', min: 1, max: 100 },
  29. 		{ key: 'hud', label: 'Display HUD', default: true, type: 'bool' }
  30. 	]);
  31. 	GM_registerMenuCommand('Youtube Scroll Volume Settings', Config.setup);
  32.  
  33. 	let config = Config.load();
  34. 	Config.onsave = newConf => config = newConf;
  35.  
  36. 	GM_addStyle(`
  37. 		.YSV_hud {
  38. 			display: flex;
  39. 			justify-content: center;
  40. 			align-items: center;
  41. 			position: absolute;
  42. 			top: 0;
  43. 			bottom: 0;
  44. 			left: 0;
  45. 			right: 0;
  46. 			opacity: 0;
  47. 			transition: opacity 500ms ease 0s;
  48. 			z-index: 10;
  49. 			pointer-events: none;
  50. 		}
  51. 		.YSV_bar {
  52. 			background-color: #888;
  53. 			border: 2px solid white;
  54. 			width: 80%;
  55. 			max-width: 800px;
  56. 		}
  57. 		.YSV_progress {
  58. 			transition: width 100ms ease-out 0s;
  59. 			background-color: #444;
  60. 			height: 35px;
  61. 		}
  62. 	`);
  63.  
  64. 	const createHud = () => {
  65. 		const hud = document.createElement('div');
  66. 		hud.classList.add('YSV_hud');
  67. 		hud.innerHTML = '<div class="YSV_bar"><div class="YSV_progress"></div></div>';
  68. 		return hud;
  69. 	};
  70.  
  71. 	waitForElems({
  72. 		sel: 'ytd-player',
  73. 		onmatch(node) {
  74. 			let id;
  75.  
  76. 			const hud = createHud();
  77. 			const progress = q(hud).q('.YSV_progress');
  78. 			node.appendChild(hud);
  79.  
  80. 			const showHud = volume => {
  81. 				clearTimeout(id);
  82. 				progress.style.width = `${volume}%`;
  83. 				hud.style.opacity = 1;
  84. 				id = setTimeout(() => hud.style.opacity = 0, 800);
  85. 			};
  86.  
  87. 			node.onwheel = e => {
  88. 				const player = node.getPlayer();
  89. 				const dir = (e.deltaY > 0 ? -1 : 1) * (config.reverse ? -1 : 1);
  90.  
  91. 				const vol = Util.bound(player.getVolume() + (config.step * dir), 0, 100);
  92. 				player.setVolume(vol);
  93. 				if (vol > 0) player.unMute();
  94. 				if (config.hud) showHud(vol);
  95.  
  96. 				e.preventDefault();
  97. 				e.stopImmediatePropagation();
  98. 			};
  99. 		}
  100. 	});
  101. })();