☰

Greasy Fork is available in English.

Video Overlay Vanisher

A tool to eliminate web video player overlays with Shift+D.

// ==UserScript==
// @name         Video Overlay Vanisher
// @namespace    http://tampermonkey.net/
// @version      1.4.0
// @description  A tool to eliminate web video player overlays with Shift+D.
// @author       CY Fung
// @icon         https://na.cx/i/Hh10VGs.png
// @match        https://*/*
// @exclude      https://www.youtube.com/live_chat*
// @exclude      /^https?://\S+\.(txt|png|jpg|jpeg|gif|xml|svg|manifest|log|ini)[^\/]*$/
// @exclude      https://*.openai.com/*
// @exclude      https://jsfiddle.net/*
// @exclude      https://*.jsfiddle.net/*
// @exclude      https://fiddle.*.net/*
// @exclude      https://*.jshell.net/*
// @exclude      https://fiddle.jshell.net/*
// @exclude      https://login.*/*
// @exclude      https://account.*/*
// @grant        GM.getValue
// @run-at       document-start
// @inject-into  content
// @license      MIT
// ==/UserScript==
(function $$() {
    'use strict';

    const keyCombination = {
        key: 'KeyD',
        shift: true
    }

    if (document.documentElement == null) return window.requestAnimationFrame($$);

    console.log("userscript enabled - Don't Overlay Video Player !")

    function addStyle(styleText) {
        const styleNode = document.createElement('style');
        styleNode.textContent = styleText;
        document.documentElement.appendChild(styleNode);
        return styleNode;
    }


    // Your code here...

    addStyle(`

[userscript-no-overlay-on] [userscript-no-overlay-hoverable], [userscript-no-overlay-on] [userscript-no-overlay-hoverable] *:not([userscript-no-overlay-hoverable]){
    visibility: collapse !important;
}

`);

    var qElm_PossibleHoverByPosition = new WeakMap();
    var qElm_Cache = new WeakMap();

    let doList = [];
    // Callback function to execute when mutations are observed
    const callbackA = function (mutations, observer) {
        // Use traditional 'for loops' for IE 11
        for (const mutation of mutations) {
            const {
                addedNodes
            } = mutation;
            for (const s of addedNodes) {
                if (s.nodeType === 1) doList.push(s);
            }
        }
        if (doList.length == 0) return;
        callbackB(100);
    };


    function callbackBmicro1(qElm) {
        if (!(qElm instanceof HTMLElement)) return;
        if (qElm.isConnected === false) return;
        let qElmComputedStyle = qElm_Cache.get(qElm);
        if (!qElmComputedStyle) {
            qElmComputedStyle = getComputedStyle(qElm)
            qElm_Cache.set(qElm, qElmComputedStyle);
        }
        const {
            position
        } = qElmComputedStyle;

        if (position == 'absolute' || position == 'fixed') {
            qElm_PossibleHoverByPosition.set(qElm, position);
        } else {
            qElm_PossibleHoverByPosition.delete(qElm);
        }

    }


    const createPipeline = () => {
        let pipelineMutex = Promise.resolve();
        const pipelineExecution = fn => {
            return new Promise((resolve, reject) => {
                pipelineMutex = pipelineMutex.then(async () => {
                    let res;
                    try {
                        res = await fn();
                    } catch (e) {
                        console.log("Pipeline Error", e);
                        reject(e);
                    }
                    resolve(res);
                }).catch(console.warn);
            });
        };
        return pipelineExecution;
    }

    const pipeline = createPipeline();


    async function callbackB(delay) {

        let res;
        do {
            res = await pipeline(async () => {

                if (!doList.length) return;

                if (delay > 0) {
                    await new Promise(resolve => setTimeout(resolve, delay));
                }

                if (!doList.length) return;

                let doListCopy = doList.slice(0);
                doList.length = 0;

                function allParents(elm) {
                    let res = [];
                    while ((elm = elm.parentNode) instanceof HTMLElement) res.push(elm);
                    return res;
                }
                let possibleContainerSet = null;
                const proceeded = new Set();
                for (const addedNode of doListCopy) {
                    if (!addedNode || !addedNode.parentNode) continue;
                    if (addedNode.isConnected === false) continue;
                    if (proceeded.has(addedNode)) continue;
                    proceeded.add(addedNode);
                    const parentsSet = new Set(allParents(addedNode));
                    if (possibleContainerSet == null) {
                        possibleContainerSet = parentsSet;
                    } else {
                        for (const possibleParent of possibleContainerSet) {
                            if (!parentsSet.has(possibleParent)) possibleContainerSet.delete(possibleParent);
                        }
                        parentsSet.clear();
                    }
                    if (possibleContainerSet.size <= 1) break;
                }
                if(!possibleContainerSet) return;
                proceeded.clear();
                doListCopy.length = 0;

                const possibleContainerSetIt = possibleContainerSet.values();
                const possibleContainer = possibleContainerSetIt.next().value;

                await Promise.resolve();

                //console.log('possibleContainer',possibleContainer)

                const elements = possibleContainer ? [...possibleContainer.querySelectorAll('*')] : null;

                if (elements && elements.length >= 1) {
                    await new Promise(resolve => setTimeout(resolve, 100));
                    await Promise.all(elements.map(qElm => Promise.resolve(qElm).then(callbackBmicro1)));
                }

                //console.log('done', doList.length)

                if (doList.length > 0) {
                    delay = 100;
                    return true;
                }

            });
        } while (res === true);

    }



    // Create an observer instance linked to the callback function
    const observer = new MutationObserver(callbackA);

    doList = [document.documentElement];
    callbackB(0);

    // Start observing the target node for configured mutations
    observer.observe(document.documentElement, {
        childList: true,
        subtree: true
    });

    let overlayHoverTID = 0;

    let resizeObserver = null;

    function resizeCallback(mutations) {

        //document.documentElement.removeAttribute('userscript-no-overlay-on')
        //overlayHoverTID=(overlayHoverTID+1)%2;

        if (!document.documentElement.hasAttribute('userscript-no-overlay-on')) {

            if (resizeObserver) {
                resizeObserver.disconnect();
                resizeObserver = null;
            }
            return;
        }

        let video = mutations[0].target;
        if (!video) return;

        makeHide(video);
    }

    function makeHide(videoElm) {

        if (!videoElm) return;
        videoElm.setAttribute('ve291', '');

        let _overlayHoverTID = overlayHoverTID;
        overlayHoverTID = (overlayHoverTID + 1) % 2;

        let rElms = [];

        for (const qElm of document.querySelectorAll('*')) {
            if (qElm_PossibleHoverByPosition.has(qElm)) rElms.push(qElm);
        }

        let replacementTexts = [];

        function replaceAll(str) {

            for (const s of replacementTexts) {
                if (str.length < s.length) continue;
                str = str.replace(s, '');
            }

            return str.trim();

        }

        var finalBoundaries = [];

        function getBoundaryElm() {

            finalBoundaries.length = 0;

            let _boundaryElm = videoElm;
            let boundaryElm = videoElm;
            while (_boundaryElm && replaceAll(_boundaryElm.textContent || '') == replaceAll(videoElm.textContent || '')) {
                boundaryElm = _boundaryElm;
                finalBoundaries.push(boundaryElm);
                _boundaryElm = _boundaryElm.parentNode;
            }

            return boundaryElm;
        }

        for (const s of rElms) {
            if (s.contains(videoElm)) continue;
            let sText = s.textContent;
            if (sText && sText.length > 0) replacementTexts.push(sText);
        }
        replacementTexts.sort((b, a) => a.length > b.length ? 1 : a.length < b.length ? -1 : 0);

        getBoundaryElm();

        let breakControl = false;

        while (!breakControl) {


            // youtube: boundary element (parent container) with no size.
            // ensure boundary element is larger than the child.
            var finalBoundaries_entries = finalBoundaries.map(elm => ({
                elm,
                rect: elm.getBoundingClientRect()
            }))

            for (const entry of finalBoundaries_entries) entry.size = Math.round(entry.rect.width * entry.rect.height || 0);

            let maxSize = Math.max(...finalBoundaries_entries.map(entry => entry.size))

            if (!maxSize) continue;

            finalBoundaries_entries = finalBoundaries_entries.filter(entry => entry.size == maxSize);

            let bmElm = finalBoundaries_entries[finalBoundaries_entries.length - 1].elm; // outest largest size

            let bRect = bmElm.getBoundingClientRect();

            for (const s of rElms) {

                if (s.contains(videoElm)) continue;

                let sRect = s.getBoundingClientRect();
                if (bRect && sRect) {
                    if (sRect.width * sRect.height > 0) {
                        if (sRect.left > bRect.right) continue;
                        if (sRect.top > bRect.bottom) continue;
                        if (sRect.right < bRect.left) continue;
                        if (sRect.bottom < bRect.top) continue;
                    } else {
                        continue;
                    }
                }

                s.setAttribute('userscript-no-overlay-hoverable', overlayHoverTID);
            }

            breakControl = true;

        }


        for (const s of document.querySelectorAll(`[userscript-no-overlay-hoverable="${_overlayHoverTID}"]`)) s.removeAttribute('userscript-no-overlay-hoverable');


    }


    function getVideoState() {

        let video = null;

        let videoElms = document.querySelectorAll('video');
        if (!videoElms.length) {
            return null;
        }

        let videos = [...videoElms].map(elm => ({
            elm,
            width: elm.offsetWidth,
            height: elm.offsetHeight
        }));

        let maxWidth = Math.max(...videos.map(item => item.width));
        let maxHeight = Math.max(...videos.map(item => item.height));

        if (maxWidth > 0 && maxHeight > 0) {

            video = videos.filter(item => item.width == maxWidth && item.height == maxHeight)[0] || null;

        }

        return video;

    }

    function postMessage(target, message, origin) {
        let win = null;
        if (target instanceof HTMLIFrameElement) {
            win = target.contentWindow;
        } else if (target && 'postMessage' in target) {
            win = target;
        }
        if (!origin) origin = '*';
        if (win && typeof win.postMessage == 'function') {
            try {
                win.postMessage(message, origin);
            } catch (e) { }
        }
    }

    function spreadMessage() {

        for (const iframe of document.getElementsByTagName('iframe')) {
            if (+iframe.getAttribute('ve944') === mouseEnteredIframeIId) {
                postMessage(iframe, 'do-video-controls-hidden991');
            }
        }

    }

    function tryUnhide() {

        if (document.documentElement.hasAttribute('userscript-no-overlay-on')) {

            document.documentElement.removeAttribute('userscript-no-overlay-on')

            for (const s of document.querySelectorAll('[userscript-no-overlay-hoverable]')) {
                s.removeAttribute('userscript-no-overlay-hoverable');
            }

            const videoTarget = document.querySelector('[ve291]');

            if (videoTarget) {

                videoTarget.removeAttribute('ve291');

                /*
                    requestAnimationFrame(() => {
                        console.log(12321);

                        // Create a new mouse event
                        let event = new MouseEvent('mousemove', {
                            bubbles: true,
                            cancelable: true,
                            clientX: 100,
                            clientY: 100
                            });

                        // Dispatch the event to the element
                        videoTarget.dispatchEvent(event);
                    })
                */

                return true;

            }


        }
        return false;

    }

    function keydownAsync() {
        if (!tryUnhide()) {
            const videoState = getVideoState();
            if (videoState === null) {
                // console.log('Unable to find any video element. If it is inside Iframe, please click the video inside iframe first.')
                spreadMessage();
            } else if (videoState && videoState.elm instanceof HTMLVideoElement) {
                videoState.elm.dispatchEvent(new CustomEvent('video-controls-hidden675'))
            }
        }
    }

    document.addEventListener('keydown', function (evt) {

        if (evt && evt.code == keyCombination.key && evt.shiftKey === keyCombination.shift) {

            if (evt.isComposing) return;
            let evtTarget = evt.target;
            if (evtTarget.nodeType == 1) {
                if (evtTarget.nodeName == 'INPUT' || evtTarget.nodeName == 'TEXTAREA' || evtTarget.hasAttribute('contenteditable')) return;
            }
            evtTarget = null;
            evt.preventDefault();
            evt.stopPropagation();
            evt.stopImmediatePropagation();

            Promise.resolve().then(keydownAsync);

        }
    }, true);



    let rafPromise = null;

    const getRafPromise = () => rafPromise || (rafPromise = new Promise(resolve => {
      requestAnimationFrame(hRes => {
        rafPromise = null;
        resolve(hRes);
      });
    }));


    const controlsHidden675Async = async (targetVideo)=>{

        if (resizeObserver) {
            resizeObserver.disconnect();
            resizeObserver = null;
        }
        resizeObserver = new ResizeObserver(resizeCallback)
        resizeObserver.observe(targetVideo)

        await getRafPromise();
        makeHide(targetVideo);

        document.documentElement.setAttribute('userscript-no-overlay-on', '');

    }




    document.addEventListener('video-controls-hidden675', (evt) => {
        let targetVideo = evt.target;
        if (!(targetVideo instanceof HTMLVideoElement)) return;

        Promise.resolve(targetVideo).then(controlsHidden675Async);

    }, true);

    let mouseEnteredVideoVId = 0;
    let mouseEnteredIframeIId = 0;

    let di = 0;
    let domWeakHash = new WeakMap();
    document.addEventListener('mouseenter', (evt) => {
        if (evt && evt.target instanceof HTMLVideoElement) {
            const videoElm = evt.target;
            if (!domWeakHash.has(videoElm)) {
                let vid = ++di;
                domWeakHash.set(videoElm, vid);
                videoElm.setAttribute('ve944', vid);
            }
            mouseEnteredVideoVId = domWeakHash.get(videoElm);
        } else if (evt && evt.target instanceof HTMLIFrameElement) {
            const iframeTarget = evt.target;
            if (!domWeakHash.has(iframeTarget)) {
                let vid = ++di;
                domWeakHash.set(iframeTarget, vid);
                iframeTarget.setAttribute('ve944', vid);
            }
            mouseEnteredIframeIId = +iframeTarget.getAttribute('ve944') || 0;
            postMessage(iframeTarget, 've761-iframe-entered')
        }
    }, true)
    document.addEventListener('mouseleave', (evt) => {

        if (evt && evt.target instanceof HTMLVideoElement) {
            const videoElm = evt.target;
            if (domWeakHash.has(videoElm)) {
                mouseEnteredVideoVId = 0;
            }
        } else if (evt && evt.target instanceof HTMLIFrameElement) {

            const iframeTarget = evt.target;
            if (domWeakHash.has(iframeTarget)) {
                mouseEnteredIframeIId = 0;
            }
            postMessage(iframeTarget, 've762-iframe-leaved')
        }
    }, true)


    let isInIframeWindow = false;
    function controlsHidden991Async() {
        let videoTarget = null;
        if (mouseEnteredVideoVId > 0 && isInIframeWindow > 0) {
            videoTarget = document.querySelector(`video[ve944="${mouseEnteredVideoVId}"]`);
        }
        if (!videoTarget) {
            if (isInIframeWindow) {
                spreadMessage();
            }
        } else {
            if (!tryUnhide()) {
                videoTarget.dispatchEvent(new CustomEvent('video-controls-hidden675'));
            }
        }
    }
    function receiveMessage(event) {
        if (!event) return;
        if (event.data === 'do-video-controls-hidden991') {
            Promise.resolve().then(controlsHidden991Async);
        } else if (event.data === 've761-iframe-entered') {
            isInIframeWindow = true;
        } else if (event.data === 've761-iframe-leaved') {
            isInIframeWindow = false;
        }
    }


    window.addEventListener('message', receiveMessage, false);

    GM.getValue("dummy"); // dummy


})();