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