Remove The Overlay of the video
当前为
// ==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)
})();