☰

YouTube Volume Control with Memory and Draggable UI

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-23 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         YouTube Volume Control with Memory and Draggable UI
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.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. // @grant        none
  9. // @license      UnLicense
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Variable to hold the previous volume level
  16.     let previousVolume = localStorage.getItem('youtubeVolume') || 50;
  17.  
  18.     // Create input element for volume control
  19.     const volumeInput = document.createElement('input');
  20.     volumeInput.type = 'number';
  21.     volumeInput.min = 0;
  22.     volumeInput.max = 100;
  23.     volumeInput.value = previousVolume;
  24.  
  25.     // Set input field styles to resemble YouTube's UI
  26.     volumeInput.style.width = '30px';
  27.     volumeInput.style.marginRight = '10px';
  28.     volumeInput.style.backgroundColor = 'rgba(255, 255, 255, 0.0)';
  29.     volumeInput.style.color = 'white'; // Change text color to white
  30.     volumeInput.style.border = '0px solid rgba(255, 255, 255, 0.0)';
  31.     volumeInput.style.borderRadius = '4px';
  32.     volumeInput.style.zIndex = 9999;
  33.     volumeInput.style.height = '24px';
  34.     volumeInput.style.fontSize = '16px';
  35.     volumeInput.style.padding = '0 4px';
  36.     volumeInput.style.transition = 'border-color 0.3s, background-color 0.3s'; // Added background color transition
  37.     volumeInput.style.outline = 'none';
  38.     volumeInput.style.position = 'relative';
  39.     volumeInput.style.top = '12px'; // Adjust to lower the input 12 pixels
  40.  
  41.     // Change border color on focus
  42.     volumeInput.addEventListener('focus', () => {
  43.         volumeInput.style.borderColor = 'rgba(255, 255, 255, 0.6)';
  44.     });
  45.  
  46.     volumeInput.addEventListener('blur', () => {
  47.         volumeInput.style.borderColor = 'rgba(255, 255, 255, 0.3)';
  48.     });
  49.  
  50.     // Change background color on hover
  51.     volumeInput.addEventListener('mouseenter', () => {
  52.         volumeInput.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; // Dark background on hover
  53.     });
  54.  
  55.     volumeInput.addEventListener('mouseleave', () => {
  56.         volumeInput.style.backgroundColor = 'rgba(255, 255, 255, 0.0)'; // Restore background when not hovered
  57.     });
  58.  
  59.     // Prevent YouTube hotkeys when typing in the input
  60.     volumeInput.addEventListener('keydown', function(event) {
  61.         event.stopPropagation();
  62.         console.log('Keydown event in volume input, stopping propagation.');
  63.     });
  64.  
  65.     // Function to set the volume based on input value
  66.     function setVolume() {
  67.         const player = document.querySelector('video');
  68.         if (player) {
  69.             let volumeValue = volumeInput.value;
  70.  
  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 local storage
  77.             player.volume = volumeValue / 100;
  78.             localStorage.setItem('youtubeVolume', volumeValue);
  79.             console.log(`Volume set to ${volumeValue} and saved to local 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);
  92.  
  93.     // Function to update the input field when YouTube's player volume is changed
  94.     function updateVolumeInput() {
  95.         const player = document.querySelector('video');
  96.         if (player) {
  97.             const currentVolume = Math.round(player.volume * 100);
  98.             volumeInput.value = currentVolume;
  99.             localStorage.setItem('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.     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(); // 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. })();