// ==UserScript==
// @name YouTube Volume Control with Memory
// @namespace https://github.com/Nick2bad4u/UserStyles
// @version 4.0
// @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.
// @author Nick2bad4u
// @match *://www.youtube.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant GM.getValue
// @grant GM.setValue
// @license UnLicense
// @tag youtube
// ==/UserScript==
(async function () {
'use strict';
// Default volume if none is saved
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';
volumeInput.style.backgroundColor =
'rgba(255, 255, 255, 0.0)';
volumeInput.style.color = 'white';
volumeInput.style.border =
'0px solid rgba(255, 255, 255, 0.0)';
volumeInput.style.borderRadius = '4px';
volumeInput.style.zIndex = 9999;
volumeInput.style.height = '24px';
volumeInput.style.fontSize = '16px';
volumeInput.style.padding = '0 4px';
volumeInput.style.transition =
'border-color 0.3s, background-color 0.3s';
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');
if (player) {
// Validate input (must be between 0 and 100)
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) {
volumeSlider.style.left = `${volumeValue}%`;
console.log(
'YouTube volume slider updated.',
);
}
}
}
// 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');
if (player) {
const currentVolume = Math.round(
player.volume * 100,
);
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');
if (player) {
if (player.muted) {
volumeInput.value = 0; // Show 0 when muted
} else {
volumeInput.value = previousVolume; // Restore previous volume when unmuted
player.volume = previousVolume / 100; // Set the player volume back to previous
}
console.log(
`Mute state changed: muted = ${player.muted}`,
);
}
}
// Inject the input box into YouTube's control bar
function injectVolumeControl() {
const volumeSliderPanel =
document.querySelector('.ytp-volume-panel');
if (volumeSliderPanel) {
volumeSliderPanel.parentNode.insertBefore(
volumeInput,
volumeSliderPanel,
);
setVolume(previousVolume); // Set initial volume
const player =
document.querySelector('video');
if (player) {
player.addEventListener(
'volumechange',
updateVolumeInput,
);
player.addEventListener(
'mute',
handleMuteChange,
);
player.addEventListener(
'unmute',
handleMuteChange,
);
console.log(
'Volume input injected and event listeners attached.',
);
}
} else {
console.log(
'Volume panel not found, retrying...',
);
setTimeout(injectVolumeControl, 500);
}
}
// Inject the volume control when the page is ready
injectVolumeControl();
})();
