// ==UserScript==
// @name               YouTube - Display current volume
// @namespace          https://gist.github.com/4lrick/7a069ce704be9ac95f00d8fb9c2c9bb2
// @version            1.2
// @description        Displays the volume when it's changing.
// @description:fr     Affiche le volume lorsqu'il change.
// @description:es     Muestra el volumen cuando está cambiando.
// @description:de     Geeft het volume weer als het verandert.
// @description:it     Visualizza il volume quando sta cambiando.
// @description:zh-CN  显示变化时的音量。
// @author             4lrick
// @match              https://www.youtube.com/*
// @icon               https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant              none
// @license            GPL-3.0-only
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    let volumeDisplayTimeout;

    function displayVolume() {
        const player = document.querySelector('#movie_player');
        const volume = player.getVolume();
        let volumeDisplay = document.querySelector('#ytp-video-volume');

        if (!volumeDisplay) {
            const playerContainer = document.querySelector('.html5-video-player');
            if (playerContainer) {
                volumeDisplay = document.createElement('div');
                volumeDisplay.id = 'ytp-video-volume';
                volumeDisplay.style.position = 'absolute';
                volumeDisplay.style.top = '10%';
                volumeDisplay.style.left = '50%';
                volumeDisplay.style.translate = '-50%';
                volumeDisplay.style.textAlign = 'center';
                volumeDisplay.style.background = 'rgba(0,0,0,.5)';
                volumeDisplay.style.color = '#eee';
                volumeDisplay.style.fontSize = '175%';
                volumeDisplay.style.zIndex = '19';
                volumeDisplay.style.padding = '10px 20px';
                volumeDisplay.style.borderRadius = '3%';
                playerContainer.appendChild(volumeDisplay);
            }
        }
        volumeDisplay.textContent = `${volume}%`;
        volumeDisplay.style.display = 'block';
        clearTimeout(volumeDisplayTimeout);
        volumeDisplayTimeout = setTimeout(() => {
            volumeDisplay.style.display = 'none';
        }, 1000);
    }

    function checkVideoExists() {
        const videoElement = document.querySelector('video');
        if (videoElement) {
            videoElement.addEventListener('volumechange', displayVolume);
        }
    }

    const observer = new MutationObserver(checkVideoExists);
    const body = document.body;
    const config = { childList: true, subtree: true };
    observer.observe(body, config);
})();