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.6
  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. { key: 'requireShift', label: 'Only handle scroll if holding "Shift" key', default: false, type: 'bool' }
  31. ]);
  32. GM_registerMenuCommand('Youtube Scroll Volume Settings', Config.setup);
  33.  
  34. let config = Config.load();
  35. Config.onsave = newConf => config = newConf;
  36.  
  37. GM_addStyle(`
  38. .YSV_hud {
  39. display: flex;
  40. flex-direction: column;
  41. justify-content: flex-end;
  42. align-items: center;
  43. position: absolute;
  44. top: 0;
  45. bottom: 0;
  46. left: 0;
  47. right: 0;
  48. opacity: 0;
  49. transition: opacity 500ms ease 0s;
  50. z-index: 10;
  51. pointer-events: none;
  52. }
  53. .YSV_bar {
  54. background-color: #444;
  55. border: 2px solid white;
  56. width: 80%;
  57. max-width: 600px;
  58. margin-bottom: 10%;
  59. }
  60. .YSV_progress {
  61. transition: width 100ms ease-out 0s;
  62. background-color: #888;
  63. height: 20px;
  64. }
  65. `);
  66.  
  67. const createHud = () => {
  68. const hud = document.createElement('div');
  69. hud.classList.add('YSV_hud');
  70. hud.innerHTML = '<div class="YSV_bar"><div class="YSV_progress"></div></div>';
  71. return hud;
  72. };
  73.  
  74. waitForElems({
  75. sel: 'ytd-player',
  76. onmatch(node) {
  77. let id;
  78.  
  79. const hud = createHud();
  80. const progress = q(hud).q('.YSV_progress');
  81. node.appendChild(hud);
  82.  
  83. const showHud = volume => {
  84. clearTimeout(id);
  85. progress.style.width = `${volume}%`;
  86. hud.style.opacity = 1;
  87. id = setTimeout(() => hud.style.opacity = 0, 800);
  88. };
  89.  
  90. node.onwheel = e => {
  91. if (config.requireShift && !e.shiftKey) return;
  92. const player = node.getPlayer();
  93. const dir = (e.deltaY > 0 ? -1 : 1) * (config.reverse ? -1 : 1);
  94.  
  95. const vol = Util.bound(player.getVolume() + (config.step * dir), 0, 100);
  96. player.setVolume(vol);
  97. if (vol > 0) player.unMute();
  98. if (config.hud) showHud(vol);
  99.  
  100. e.preventDefault();
  101. e.stopImmediatePropagation();
  102. };
  103. }
  104. });
  105. })();