☰

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.3
// @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
// @license MIT
// ==/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], [userscript-no-overlay-on] [userscript-no-overlay-hoverable] *:not([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;
/*
            function overlapArea(rect1, rect2) {

                let l1 = {
                    x: rect1.left,
                    y: rect1.top
                }

                let r1 = {
                    x: rect1.right,
                    y: rect1.bottom
                }
                let l2 = {
                    x: rect2.left,
                    y: rect2.top
                }

                let r2 = {
                    x: rect2.right,
                    y: rect2.bottom
                }

                // Area of 1st Rectangle
                let area1 = Math.abs(l1.x - r1.x) * Math.abs(l1.y - r1.y);

                // Area of 2nd Rectangle
                let area2 = Math.abs(l2.x - r2.x) * Math.abs(l2.y - r2.y);

                // Length of intersecting part i.e
                // start from max(l1.x, l2.x) of
                // x-coordinate and end at min(r1.x,
                // r2.x) x-coordinate by subtracting
                // start from end we get required
                // lengths
                let x_dist = Math.min(r1.x, r2.x) - Math.max(l1.x, l2.x);
                let y_dist = Math.min(r1.y, r2.y) - Math.max(l1.y, l2.y);
                let areaI = 0;
                if (x_dist > 0 && y_dist > 0) {
                    areaI = x_dist * y_dist;
                }

                return {
                    area1,
                    area2,
                    areaI
                };


            }
*/

    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;

        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==0)break;
                    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()

        while(true){


            // 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;
                        /*
                            let overlap = overlapArea(sRect,vRect)
                            if(overlap.areaI>0) continue;*/
                    }else{
                        continue;
                    }
                }

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

            break;

        }


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


    }

    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;

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

                requestAnimationFrame(()=>makeHide(video.elm))


                //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)




})();

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址