☰

YouTube Volume Assistant

Enhances the volume control on YouTube by providing additional information and features.

// ==UserScript==
// @name         YouTube Volume Assistant
// @namespace    http://tampermonkey.net/
// @version      0.2.6
// @description  Enhances the volume control on YouTube by providing additional information and features.
// @author       CY Fung
// @license      MIT License
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        none
// @run-at       document-start
// @unwrap
// @allFrames
// @inject-into page
// ==/UserScript==

(function () {
    'use strict';

    //    AudioContext.prototype._createGain = AudioContext.prototype.createGain;

    const insp = o => o ? (o.polymerController || o.inst || o || 0) : (o || 0);


    /** @type {globalThis.PromiseConstructor} */
    const Promise = (async () => { })().constructor; // YouTube hacks Promise in WaterFox Classic and "Promise.resolve(0)" nevers resolve.

    const PromiseExternal = ((resolve_, reject_) => {
        const h = (resolve, reject) => { resolve_ = resolve; reject_ = reject };
        return class PromiseExternal extends Promise {
            constructor(cb = h) {
                super(cb);
                if (cb === h) {
                    /** @type {(value: any) => void} */
                    this.resolve = resolve_;
                    /** @type {(reason?: any) => void} */
                    this.reject = reject_;
                }
            }
        };
    })();

    let wm = new WeakMap();
    /*
        AudioContext.prototype.createGain = function(...args){
            return this.createdGain || (this.createdGain = this._createGain(...args));
        }
    */

    function getMediaElementSource() {
        return wm.get(this) || null;
    }
    function getGainNode() {
        return wm.get(this) || null;
    }

    AudioContext.prototype._createMediaElementSource = AudioContext.prototype.createMediaElementSource;

    AudioContext.prototype.createMediaElementSource = function (video, ...args) {
        let createdMediaElementSource = wm.get(video);
        if (createdMediaElementSource) return createdMediaElementSource;
        wm.set(video, createdMediaElementSource = this._createMediaElementSource(video, ...args));
        video.getMediaElementSource = getMediaElementSource;
        return createdMediaElementSource;
    }


    MediaElementAudioSourceNode.prototype._connect = MediaElementAudioSourceNode.prototype.connect;

    MediaElementAudioSourceNode.prototype.connect = function (gainNode, ...args) {

        this._connect(gainNode, ...args);
        wm.set(this, gainNode);

        this.getGainNode = getGainNode;
    }



    function addDblTap(element, doubleClick) {
        // https://stackoverflow.com/questions/45804917/dblclick-doesnt-work-on-touch-devices

        let expired


        let doubleTouch = function (e) {
            if (e.touches.length === 1) {
                if (!expired) {
                    expired = e.timeStamp + 400
                } else if (e.timeStamp <= expired) {
                    // remove the default of this event ( Zoom )
                    e.preventDefault()
                    doubleClick(e)
                    // then reset the variable for other "double Touches" event
                    expired = null
                } else {
                    // if the second touch was expired, make it as it's the first
                    expired = e.timeStamp + 400
                }
            }
        }

        element.addEventListener('touchstart', doubleTouch)
        element.addEventListener('dblclick', doubleClick)
    }


    function createCSS() {

        if (document.querySelector('#iTFoh')) return;
        let style = document.createElement('style');
        style.id = 'iTFoh';
        style.textContent = `
        .video-tip-offseted {
        margin-top:-1em;
        }
        .volume-tip-gain{
        opacity:0.52;
        }
        .volume-tip-normalized{
        opacity:0.4;
        }
        `;

        document.head.appendChild(style)

    }

    let volumeSlider = null;
    let volumeTitle = '';

    let volumeSpan = null;
    let lastContent = null;
    let gainNode = null;

    function refreshDOM() {
        volumeSlider = document.querySelector('.ytp-volume-panel[role="slider"][title]');
        if (volumeSlider) {
            volumeTitle = volumeSlider.getAttribute('title');
        } else {
            volumeTitle = '';
        }
    }

    function setDblTap() {
        if (!volumeSlider) return;
        if (volumeSlider.hasAttribute('pKRyA')) return;
        volumeSlider.setAttribute('pKRyA', '');

        addDblTap(volumeSlider, (e) => {
            let target = null;
            try {
                target = e.target.closest('.ytp-volume-area').querySelector('.ytp-mute-button');
            } catch (e) { }
            if (target !== null) {
                const e2 = new MouseEvent('contextmenu', {
                    bubbles: true,
                    cancelable: true,
                    view: window
                });
                target.dispatchEvent(e2);
            }
        });
    }

    let template = document.createElement('template');

    let ktid = 0;
    async function changeVolumeText() {

        try {

            if (ktid > 1e9) ktid = 9;
            const tid = ++ktid;


            const volumeSpan_ = volumeSpan;
            if (!volumeSpan_ || !lastContent) return;
            if (lastContent && lastContent !== volumeSpan_.textContent) return;
            if (volumeSpan_ !== volumeSpan || volumeSpan_.isConnected !== true) return;

            let video = document.querySelector('#player video[src]');
            if (!video) return;

            const ytdPlayerElement = document.querySelector('ytd-player');
            if (!ytdPlayerElement) return;
            const ytdPlayerCntX = insp(ytdPlayerElement);
            const ytdPlayerCnt = ytdPlayerCntX.getPlayerPromise ? ytdPlayerCntX : ytdPlayerElement;

            let ytdPlayerPlayer_ = ytdPlayerElement.player_ || insp(ytdPlayerElement).player_ || 0;
            if (!ytdPlayerPlayer_ && typeof ytdPlayerCnt.getPlayerPromise === 'function') ytdPlayerPlayer_ = await ytdPlayerCnt.getPlayerPromise();
            if (tid !== ktid) return;
            if (!ytdPlayerPlayer_ || !ytdPlayerPlayer_.getVolume) return;
            if (typeof ytdPlayerPlayer_.getVolume !== 'function') console.error('ytdPlayerPlayer_.getVolume is not a function', typeof ytdPlayerPlayer_.getVolume);

            let actualVolume = null;
            try {
                actualVolume = await ytdPlayerPlayer_.getVolume();
            } catch (e) { }

            if (tid !== ktid) return;

            if (!volumeSpan_ || !lastContent || actualVolume === null) return;
            if (lastContent && lastContent !== volumeSpan_.textContent) return;
            if (volumeSpan_ !== volumeSpan || volumeSpan_.isConnected !== true) return;
            if (video.isConnected !== true) return;


            if (gainNode === null) {
                let source = video.getMediaElementSource ? video.getMediaElementSource() : null;
                if (source) {
                    gainNode = source.getGainNode ? source.getGainNode() : null;
                }
            }

            let gainValue = (((gainNode || 0).gain || 0).value || 0);
            let m = gainValue || 1.0;

            let normalized = video.volume * 100;

            if (!volumeSpan_ || !lastContent) return;
            if (lastContent && lastContent !== volumeSpan_.textContent) return;
            if (volumeSpan_ !== volumeSpan || volumeSpan_.isConnected !== true) return;

            let gainText = gainValue ? `<span class="volume-tip-gain">Gain = ${+(gainValue.toFixed(2))}</span><br>` : '';

            template.innerHTML = `
                <span class="volume-tip-offset">
                ${gainText}
                <span class="volume-tip-volume">Volume: ${(m * actualVolume).toFixed(1)}% </span><br>
                <span class="volume-tip-normalized"> Normalized: ${(m * normalized).toFixed(1)}%</span>
                </span>
            `.trim().replace(/\s*[\r\n]+\s*/g,'');
            if (volumeSpan.textContent !== template.content.textContent && lastContent === volumeSpan.textContent) {

                volumeSpan.innerHTML = template.innerHTML;
                lastContent = volumeSpan.textContent;

            }
        } catch (e) {
            console.warn(e);
        }
    }

    function addVideoEvents() {
        let video = document.querySelector('#player video[src]');
        if (!video) return;
        if (video.hasAttribute('zHbT0')) return;
        video.setAttribute('zHbT0', '');
        video.addEventListener('volumechange', changeVolumeText, false)
    }


    // let ktid = 0;
    let goChecking = false;

    const asyncNavigateFinish = async () => {
        goChecking = false;
        createCSS();
        const f = () => {
            refreshDOM();
            if (!volumeSlider) return;
            setDblTap();
            addVideoEvents();
            goChecking = true;
            return true;
        };
        f() || setTimeout(f, 300);
    }

    const onNavigateFinish = () => {
        asyncNavigateFinish();
    };
    document.addEventListener('yt-navigate-finish', onNavigateFinish, true);

    let r80Promise = null;

    setInterval(() => {
        if (r80Promise) {
            r80Promise.resolve();
            r80Promise = null;
        }
    }, 80);



    const filterFn = t => t.textContent === volumeTitle;
    // const r0Fn = r => requestAnimationFrame(r);
    const laterFn = async () => {

        // let tid = Date.now();
        // ktid = tid;
        // r80Promise = new PromiseExternal();
        // await r80Promise.then();
        if (!goChecking) return;
        // if (ktid !== tid) return;

        if (!volumeSpan) {
            let elms = [...document.querySelectorAll('#player .ytp-tooltip div.ytp-tooltip-text-wrapper span.ytp-tooltip-text')];
            if (elms.length > 0) {
                elms = elms.filter(filterFn);
            }

            if (elms[0]) {
                HTMLElement.prototype.closest.call(elms[0], '#player .ytp-tooltip').classList.add('video-tip-offseted');
                volumeSpan = elms[0];
                lastContent = volumeSpan.textContent;
            }
        }

        if (volumeSpan && (!volumeSpan.isConnected || volumeSpan.textContent !== lastContent)) {
            // volumeSpan.textContent = volumeTitle;
            let p = document.querySelector('.video-tip-offseted');
            if (p) p.classList.remove('video-tip-offseted');
            let m = document.querySelector('.volume-tip-offset');
            if (m) m.remove();
            volumeSpan = null;
            lastContent = null;
        }

        if (volumeSpan) {

            // await new Promise(r0Fn);
            // if (ktid === tid) {
                changeVolumeText();
            // }

        }

    }
    new MutationObserver(function () {

        Promise.resolve().then(laterFn);

    }).observe(document, { subtree: true, childList: true });



})();