☰

YouTube Volume Control with Memory

Set YouTube volume manually on a scale of 1-100, remember last set volume, and inject the UI to the left of the volume slider on the video player. Syncs the slider, disables invalid inputs, and adds debugging.

目前为 2024-10-30 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         YouTube Volume Control with Memory
  3. // @namespace    https://github.com/Nick2bad4u/UserStyles
  4. // @version      3.5
  5. // @description  Set YouTube volume manually on a scale of 1-100, remember last set volume, and inject the UI to the left of the volume slider on the video player. Syncs the slider, disables invalid inputs, and adds debugging.
  6. // @author       Nick2bad4u
  7. // @match        *://www.youtube.com/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  9. // @grant        GM.getValue
  10. // @grant        GM.setValue
  11. // @license      UnLicense
  12. // ==/UserScript==
  13. (async function () {
  14.     'use strict';
  15.  
  16.     // Default volume if none is saved
  17.     let previousVolume = await GM.getValue('youtubeVolume', 50);
  18.  
  19.     // Create input element for volume control
  20.     const volumeInput = document.createElement('input');
  21.     volumeInput.type = 'number';
  22.     volumeInput.min = 0;
  23.     volumeInput.max = 100;
  24.     volumeInput.value = previousVolume;
  25.  
  26.     // Set input field styles to resemble YouTube's UI
  27.     volumeInput.style.width = '30px';
  28.     volumeInput.style.marginRight = '10px';
  29.     volumeInput.style.backgroundColor = 'rgba(255, 255, 255, 0.0)';
  30.     volumeInput.style.color = 'white';
  31.     volumeInput.style.border = '0px solid rgba(255, 255, 255, 0.0)';
  32.     volumeInput.style.borderRadius = '4px';
  33.     volumeInput.style.zIndex = 9999;
  34.     volumeInput.style.height = '24px';
  35.     volumeInput.style.fontSize = '16px';
  36.     volumeInput.style.padding = '0 4px';
  37.     volumeInput.style.transition = 'border-color 0.3s, background-color 0.3s';
  38.     volumeInput.style.outline = 'none';
  39.     volumeInput.style.position = 'relative';
  40.     volumeInput.style.top = '13px';
  41.  
  42.     // Change border color on focus
  43.     volumeInput.addEventListener('focus', () => {
  44.         volumeInput.style.borderColor = 'rgba(255, 255, 255, 0.6)';
  45.     });
  46.  
  47.     volumeInput.addEventListener('blur', () => {
  48.         volumeInput.style.borderColor = 'rgba(255, 255, 255, 0.3)';
  49.     });
  50.  
  51.     // Change background color on hover
  52.     volumeInput.addEventListener('mouseenter', () => {
  53.         volumeInput.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
  54.     });
  55.  
  56.     volumeInput.addEventListener('mouseleave', () => {
  57.         volumeInput.style.backgroundColor = 'rgba(255, 255, 255, 0.0)';
  58.     });
  59.  
  60.     // Prevent YouTube hotkeys when typing in the input
  61.     volumeInput.addEventListener('keydown', function (event) {
  62.         event.stopPropagation();
  63.         console.log('Keydown event in volume input, stopping propagation.');
  64.     });
  65.  
  66.     // Function to set the volume based on input value
  67.     async function setVolume(volumeValue) {
  68.         const player = document.querySelector('video');
  69.         if (player) {
  70.             // Validate input (must be between 0 and 100)
  71.             if (volumeValue < 0) volumeValue = 0;
  72.             if (volumeValue > 100) volumeValue = 100;
  73.             volumeInput.value = volumeValue;
  74.  
  75.             // Set the player volume and save to Tampermonkey storage
  76.             player.volume = volumeValue / 100;
  77.             await GM.setValue('youtubeVolume', volumeValue);
  78.             console.log(`Volume set to ${volumeValue} and saved to Tampermonkey storage.`);
  79.  
  80.             // Sync YouTube's volume slider UI
  81.             const volumeSlider = document.querySelector('.ytp-volume-slider-handle');
  82.             if (volumeSlider) {
  83.                 volumeSlider.style.left = `${volumeValue}%`;
  84.                 console.log('YouTube volume slider updated.');
  85.             }
  86.         }
  87.     }
  88.  
  89.     // Event listener for input change (manually changing the volume in the input box)
  90.     volumeInput.addEventListener('input', () => setVolume(volumeInput.value));
  91.  
  92.     // Function to update the input field when YouTube's player volume is changed
  93.     async function updateVolumeInput() {
  94.         const player = document.querySelector('video');
  95.         if (player) {
  96.             const currentVolume = Math.round(player.volume * 100);
  97.             volumeInput.value = currentVolume;
  98.             await GM.setValue('youtubeVolume', currentVolume);
  99.             console.log(`Volume input updated to ${currentVolume} from video player.`);
  100.  
  101.             // Show 0 if the video is muted
  102.             if (player.muted) {
  103.                 volumeInput.value = 0;
  104.             }
  105.         }
  106.     }
  107.  
  108.     // Function to handle mute changes
  109.     async function handleMuteChange() {
  110.         const player = document.querySelector('video');
  111.         if (player) {
  112.             if (player.muted) {
  113.                 volumeInput.value = 0; // Show 0 when muted
  114.             } else {
  115.                 volumeInput.value = previousVolume; // Restore previous volume when unmuted
  116.                 player.volume = previousVolume / 100; // Set the player volume back to previous
  117.             }
  118.             console.log(`Mute state changed: muted = ${player.muted}`);
  119.         }
  120.     }
  121.  
  122.     // Inject the input box into YouTube's control bar
  123.     function injectVolumeControl() {
  124.         const volumeSliderPanel = document.querySelector('.ytp-volume-panel');
  125.         if (volumeSliderPanel) {
  126.             volumeSliderPanel.parentNode.insertBefore(volumeInput, volumeSliderPanel);
  127.             setVolume(previousVolume); // Set initial volume
  128.             const player = document.querySelector('video');
  129.             if (player) {
  130.                 player.addEventListener('volumechange', updateVolumeInput);
  131.                 player.addEventListener('mute', handleMuteChange);
  132.                 player.addEventListener('unmute', handleMuteChange);
  133.                 console.log('Volume input injected and event listeners attached.');
  134.             }
  135.         } else {
  136.             console.log('Volume panel not found, retrying...');
  137.             setTimeout(injectVolumeControl, 500);
  138.         }
  139.     }
  140.  
  141.     // Inject the volume control when the page is ready
  142.     injectVolumeControl();
  143.  
  144. })();