Changes the volume of the Twitch player with the mouse wheel and shows the percentage of volume on the screen when the cursor hovers over the video.
// ==UserScript==
// @name Twitch: Twitch Volume Control
// @namespace http://tampermonkey.net/
// @version 0.2
// @description Changes the volume of the Twitch player with the mouse wheel and shows the percentage of volume on the screen when the cursor hovers over the video.
// @author FerNikoMF
// @match https://www.twitch.tv/*
// @grant none
// @license MIT
// @icon https://i.postimg.cc/4xH3j145/Mediamodifier-Design-Template.png
// ==/UserScript==
(function() {
'use strict';
// Function for creating and displaying an overlay with a volume percentage
function showVolumeOverlay(video, volume) {
let overlay = document.getElementById('volume-overlay');
if (!overlay) {
overlay = document.createElement('div');
overlay.id = 'volume-overlay';
// Styles for the overlay
overlay.style.position = 'fixed';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
overlay.style.color = 'white';
overlay.style.padding = '5px 10px';
overlay.style.borderRadius = '5px';
overlay.style.fontSize = '16px';
overlay.style.zIndex = 9999;
overlay.style.pointerEvents = 'none';
document.body.appendChild(overlay);
}
// Updating the text with the current volume percentage
overlay.textContent = Math.round(volume * 100) + '%';
// Calculating the player's position to place the overlay in the center of the video
const rect = video.getBoundingClientRect();
overlay.style.left = (rect.left + rect.width / 2) + 'px';
overlay.style.top = (rect.top + rect.height / 2) + 'px';
overlay.style.transform = 'translate(-50%, -50%)';
overlay.style.display = 'block';
// If the hiding timer is already running, clear it
if (overlay.hideTimeout) {
clearTimeout(overlay.hideTimeout);
}
// Hiding the overlay after 1 second
overlay.hideTimeout = setTimeout(() => {
overlay.style.display = 'none';
}, 1000);
}
// Function for setting a handler for the wheel event
function addVolumeWheelControl(video) {
if (!video) return;
video.addEventListener('wheel', function(event) {
// Getting the coordinates of the player
const rect = video.getBoundingClientRect();
// Check that the cursor is above the video
if (
event.clientX < rect.left ||
event.clientX > rect.right ||
event.clientY < rect.top ||
event.clientY > rect.bottom
) {
return;
}
// Canceling the standard behavior (for example, scrolling the page)
event.preventDefault();
const step = 0.05; // volume change step
// If the wheel is scrolled down, turn down the volume, otherwise increase
if (event.deltaY > 0) {
video.volume = Math.max(video.volume - step, 0);
} else {
video.volume = Math.min(video.volume + step, 1);
}
// Display the current volume as a percentage
showVolumeOverlay(video, video.volume);
}, { passive: false });
}
// A function for searching for the <video> tag and installing a handler
function init() {
const video = document.querySelector('video');
if (video) {
addVolumeWheelControl(video);
}
}
// Initialize immediately, and also monitor changes in the DOM (for example, when loading the player dynamically)
init();
// An observer for tracking the addition of new elements (for example, when changing the channel)
const observer = new MutationObserver(() => {
const video = document.querySelector('video');
if (video) {
addVolumeWheelControl(video);
}
});
observer.observe(document.body, { childList: true, subtree: true });
})();