Displays the volume when it's changing.
// ==UserScript==
// @name YouTube - Display current volume
// @namespace https://greasyfork.org/users/1142347
// @version 1.0
// @description Displays the volume when it's changing.
// @description:fr Affiche le volume lorsqu'il change.
// @description:de Geeft het volume weer als het verandert.
// @description:it Visualizza il volume quando sta cambiando.
// @description:zh-CN 显示变化时的音量。
// @author Caassiiee
// @match https://www.youtube.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant none
// @license GPL-3.0-only
// ==/UserScript==
(function() {
'use strict';
let previousVolume = -1;
function displaySquareVolume() {
const player = document.getElementById('movie_player');
const currentVolume = player.getVolume();
if (currentVolume !== previousVolume) {
previousVolume = currentVolume;
const squareVolume = document.querySelectorAll('div[data-layer="4"]');
squareVolume.forEach((div) => {
if(div.className === 'ytp-bezel-text-hide') {
div.classList.remove('ytp-bezel-text-hide');
}
if (div.classList.length === 0) {
const ytpBezelTextWrapper = div.querySelector('.ytp-bezel-text-wrapper');
const ytpBezelText = ytpBezelTextWrapper.querySelector('.ytp-bezel-text');
const ytpBezel = div.querySelector('.ytp-bezel');
div.style.display = 'block';
if (ytpBezelText && ytpBezel) {
ytpBezelText.innerText = currentVolume + "%";
ytpBezel.style.display = 'none';
}
setTimeout(()=> {
div.style.display = 'none';
}, 500);
}
});
}
}
function checkVideoExists() {
const videoElement = document.querySelector('video');
if (videoElement) {
videoElement.addEventListener('volumechange', displaySquareVolume);
previousVolume = videoElement.volume * 100;
}
}
const observer = new MutationObserver(checkVideoExists);
const body = document.body;
const config = { childList: true, subtree: true };
observer.observe(body, config);
})();