Don't Overlay Video Player !

Remove The Overlay of the video
当前为 2021-07-05 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Don't Overlay Video Player !
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Remove The Overlay of the video
// @author       CY Fung
// @icon https://upload.cc/i1/2021/07/04/xVgQrq.png
// @match        https://*/*
// @grant    none
// @run-at   document-start
// ==/UserScript==
(function() {
    'use strict';

    console.log("script here")

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


    // Your code here...

     addStyle(`

[userscript-no-overlay-on] [userscript-no-overlay-hoverable]{
    visibility: collapse !important;
}

`);


/*
    addStyle(`

[userscript-no-overlay-on] [userscript-no-overlay-hoverable]{
    visibility: collapse !important;
}



    div.ytp-gradient-top{
    background:none !important;
    background-image:none !important;
    }
    .ytp-big-mode div.ytp-gradient-top{
    background:none !important;
    background-image:none !important;
    }
    div.ytp-gradient-bottom{
    background:none !important;
    background-image:none !important;
    }
    .ytp-big-mode div.ytp-gradient-bottom{
    background:none !important;
    background-image:none !important;
    }
    html body *[hide_in_video="1"]{
    opacity:0 !important;
    }
    .fp-play-now,.fp-play-now .fp-play-now-overlay,.fp-play-now .fp-play-now-overlay .fp-play-now-watermark{
    opacity:0 !important;
    }
    ytd-player#ytd-player span#volumeUI{
    opacity:0 !important;
    }
    `)*/




    var qElm_PossibleHoverByPosition = new WeakMap();


    let callbackA_cid = 0;
    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;
        if (callbackA_cid) return;
        callbackA_cid = setTimeout(callbackB, 100);
    };




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

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

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


    function callbackBmicro1(qElm) {



        const qElmComputedStyle = getComputedStyle(qElm)
        const {
            position
        } = qElmComputedStyle



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

    }




    function callbackB() {


        if (!doList.length || !callbackA_cid) return;

        let doListCopy = [...doList]
        doList.length = 0;

        let elements = null;



        function allParents(elm){
            let res=[];
            while(elm=elm.parentNode) res.push(elm)
            return res;
        }
        let possibleContainer=null;

        for(const addedNode of doListCopy){
            if(!addedNode || !addedNode.parentNode) continue;
            let parents=allParents(addedNode);
            if(possibleContainer==null){
                possibleContainer=parents;
            }else{
                possibleContainer=possibleContainer.filter(possibleParent=>parents.indexOf(possibleParent)>=0);
            }
            if(possibleContainer.length<=1) break;
        }
        doListCopy.length = 0;


        possibleContainer=(possibleContainer?possibleContainer[0]:null) || null;



        Promise.resolve().then(()=>{

            console.log('possibleContainer',possibleContainer)

            if(possibleContainer) elements=[...possibleContainer.querySelectorAll('*')]; else elements=[];

        }).then(()=>new Promise(resolve=>setTimeout(resolve,100))).then(() => {

            return Promise.all(elements.map(qElm=>Promise.resolve(qElm).then(callbackBmicro1)))

        }).then(() => {


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

                if (doList.length > 0) {
                    callbackA_cid = setTimeout(callbackB, 100);

                } else {
                    callbackA_cid = 0;
                }

            })




    }

    let overlayHoverTID=0;

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



        if (evt && evt.code =='KeyD' && evt.shiftKey) {

            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();

            function getVideo() {

                let video = null

                let videos = [...document.querySelectorAll('video')].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;

            }


            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');
                }


            } else {

                let video = getVideo();
                if (!video) return;

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

                let rElms = [];

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

                    let vRect = video.elm.getBoundingClientRect();
                for (const s of rElms) {

                    if (s.contains(video.elm)) continue;

                    let sRect= s.getBoundingClientRect();
                    if(vRect && sRect){
                        if(sRect.width*sRect.height>0){

                            if(sRect.left>vRect.right) continue;
                            if(sRect.top>vRect.bottom) continue;
                            if(sRect.right<vRect.left) continue;
                            if(sRect.bottom<vRect.top) continue;

                        }else{
                            continue;
                        }
                    }

                    s.setAttribute('userscript-no-overlay-hoverable', overlayHoverTID);
                }
                //for(const s of document.querySelectorAll(`[userscript-no-overlay-hoverable]:not([userscript-no-overlay-hoverable="${overlayHoverTID}"])`)) s.removeAttribute('userscript-no-overlay-hoverable');
                document.documentElement.setAttribute('userscript-no-overlay-on', '')
            }


        }
    }, true)




})();
欢迎访问Greasy Fork镜像
