☰

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