// ==UserScript==
// @name               YouTube - Display current volume
// @namespace          https://gist.github.com/4lrick/7a069ce704be9ac95f00d8fb9c2c9bb2
// @version            1.0
// @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';

    function displaySquareVolume() {
        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');
                const player = document.getElementById('movie_player');
                div.style.display = 'block';

                if (ytpBezelText && ytpBezel) {
                    ytpBezelText.innerText = player.getVolume() +"%";
                    ytpBezel.style.display = 'none';
                }

                setTimeout(()=> {
                    div.style.display = 'none';
                }, 500);
            }
        });
    }

    function checkVideoExists() {
        const videoElement = document.querySelector('video');
        if (videoElement) {
            videoElement.addEventListener('volumechange', displaySquareVolume);
        }
    }
    const observer = new MutationObserver(checkVideoExists);
    const body = document.body;
    const config = { childList: true, subtree: true };
    observer.observe(body, config);
})();