Update YouTubeVolumeControl.user.js

YouTubeVolumeControl.user.js

@@ -12,19 +12,20 @@
 // @downloadURL  https://update.greasyfork.org/scripts/513759/YouTube%20Volume%20Control%20with%20Memory.user.js
 // @updateURL    https://update.greasyfork.org/scripts/513759/YouTube%20Volume%20Control%20with%20Memory.meta.js
 // ==/UserScript==
+
 (async function () {
     'use strict';
- 
+
     // Default volume if none is saved
-    let previousVolume = await GM.getValue('youtubeVolume', 50);
- 
+    let previousVolume = await GM.getValue('youtubeVolume', 5);
+
     // Create input element for volume control
     const volumeInput = document.createElement('input');
     volumeInput.type = 'number';
     volumeInput.min = 0;
     volumeInput.max = 100;
     volumeInput.value = previousVolume;
- 
+
     // Set input field styles to resemble YouTube's UI
     volumeInput.style.width = '30px';
     volumeInput.style.marginRight = '10px';
@@ -40,31 +41,31 @@
     volumeInput.style.outline = 'none';
     volumeInput.style.position = 'relative';
     volumeInput.style.top = '13px';
- 
+
     // Change border color on focus
     volumeInput.addEventListener('focus', () => {
         volumeInput.style.borderColor = 'rgba(255, 255, 255, 0.6)';
     });
- 
+
     volumeInput.addEventListener('blur', () => {
         volumeInput.style.borderColor = 'rgba(255, 255, 255, 0.3)';
     });
- 
+
     // Change background color on hover
     volumeInput.addEventListener('mouseenter', () => {
         volumeInput.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
     });
- 
+
     volumeInput.addEventListener('mouseleave', () => {
         volumeInput.style.backgroundColor = 'rgba(255, 255, 255, 0.0)';
     });
- 
+
     // Prevent YouTube hotkeys when typing in the input
     volumeInput.addEventListener('keydown', function (event) {
         event.stopPropagation();
         console.log('Keydown event in volume input, stopping propagation.');
     });
- 
+
     // Function to set the volume based on input value
     async function setVolume(volumeValue) {
         const player = document.querySelector('video');
@@ -73,12 +74,12 @@
             if (volumeValue < 0) volumeValue = 0;
             if (volumeValue > 100) volumeValue = 100;
             volumeInput.value = volumeValue;
- 
+
             // Set the player volume and save to Tampermonkey storage
             player.volume = volumeValue / 100;
             await GM.setValue('youtubeVolume', volumeValue);
             console.log(`Volume set to ${volumeValue} and saved to Tampermonkey storage.`);
- 
+
             // Sync YouTube's volume slider UI
             const volumeSlider = document.querySelector('.ytp-volume-slider-handle');
             if (volumeSlider) {
@@ -87,10 +88,10 @@
             }
         }
     }
- 
+
     // Event listener for input change (manually changing the volume in the input box)
     volumeInput.addEventListener('input', () => setVolume(volumeInput.value));
- 
+
     // Function to update the input field when YouTube's player volume is changed
     async function updateVolumeInput() {
         const player = document.querySelector('video');
@@ -99,14 +100,14 @@
             volumeInput.value = currentVolume;
             await GM.setValue('youtubeVolume', currentVolume);
             console.log(`Volume input updated to ${currentVolume} from video player.`);
- 
+
             // Show 0 if the video is muted
             if (player.muted) {
                 volumeInput.value = 0;
             }
         }
     }
- 
+
     // Function to handle mute changes
     async function handleMuteChange() {
         const player = document.querySelector('video');
@@ -120,13 +121,17 @@
             console.log(`Mute state changed: muted = ${player.muted}`);
         }
     }
- 
+
     // Inject the input box into YouTube's control bar
-    function injectVolumeControl() {
+    async function injectVolumeControl() {
         const volumeSliderPanel = document.querySelector('.ytp-volume-panel');
         if (volumeSliderPanel) {
+            // Fetch and set the volume immediately before setting the initial volume
+            previousVolume = await GM.getValue('youtubeVolume', 5);
+            volumeInput.value = previousVolume;
             volumeSliderPanel.parentNode.insertBefore(volumeInput, volumeSliderPanel);
             setVolume(previousVolume); // Set initial volume
+
             const player = document.querySelector('video');
             if (player) {
                 player.addEventListener('volumechange', updateVolumeInput);
@@ -139,8 +144,5 @@
             setTimeout(injectVolumeControl, 500);
         }
     }
-
-    // Inject the volume control when the page is ready
-    injectVolumeControl();
-
+
 })();