This is to toggle annoying Youtube CE Element near the end of the video
Version au
// ==UserScript==
// @name Shift Space Toggle Youtube CE Element
// @namespace http://tampermonkey.net/
// @version 0.1
// @description This is to toggle annoying Youtube CE Element near the end of the video
// @author CY Fung
// @match https://www.youtube.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant none
// @license MIT
// ==/UserScript==
/* jshint esversion:6 */
(function() {
'use strict';
let videoElm = null;
const ceElems = [];
let isPassiveAvailable = null
let earliestShown = -1;
let endTime = -1;
const WeakRef = window?.WeakRef;
let videoReady = false
let lastPress = -1
let allowList = [
'DIV', 'SPAN', 'BODY', 'HTML', 'VIDEO', 'A',
'YTD-PLAYER', 'YTD-WATCH-FLEXY', 'YTD-PAGE-MANAGER', 'YTD-MINIPLAYER'
];
function videoTimeUpdate(evt) {
//passive = true
//capture = false
if (!videoReady) {
if (evt?.target?.matches('ytd-player#ytd-player video')) {
videoReady = true
console.log(341)
setTimeout(function() {
ceElems.length = 0;
for (const elm of document.querySelectorAll('ytd-player#ytd-player .ytp-ce-element')) {
ceElems.push(new WeakRef(elm))
}
console.log(342, ceElems.length)
}, 180)
}
return;
}
if (ceElems.length === 0) return;
const video = evt.target;
const anyShown = ceElems.some((elmRef) => elmRef.deref()?.classList?.contains('ytp-ce-element-show') === true)
console.log(135, anyShown, video.currentTime)
if (anyShown) {
if (earliestShown > 0 && -earliestShown < -video.currentTime) {
earliestShown = video.currentTime
endTime = video.duration
} else if (earliestShown < 0) {
videoElm = new WeakRef(video);
earliestShown = video.currentTime
endTime = video.duration
}
}
}
function initialForVideoDetection(evt) {
//passive = true
//capture = true
new Promise(function() {
const video = evt?.target;
if (video?.nodeName === 'VIDEO' && typeof video.src == 'string') {} else return;
if (video.hasAttribute('usr-video-cem')) return;
video.setAttribute('usr-video-cem', '');
videoReady = false;
if (isPassiveAvailable === null) isPassiveAvailable = checkPassive();
video.addEventListener('timeupdate', videoTimeUpdate, optCapture(true, false));
})
}
function pageKeyDownfunction(evt) {
//passive = false
//capture = true
if (evt.code === 'Space' && evt.shiftKey) {
if (!allowList.includes(evt.target.nodeName)) return;
if (endTime > earliestShown && earliestShown > 0) {
let video = videoElm?.deref();
if (!video) return;
let p = (video.currentTime - earliestShown) / (endTime - earliestShown);
if (p > 0) {
evt.preventDefault();
evt.stopPropagation();
evt.stopImmediatePropagation();
for (const ceElem of ceElems) {
ceElem?.deref()?.classList.toggle('ytp-ce-element-show');
}
}
}
}
}
function checkPassive() {
let passiveSupported = false;
try {
const options = {
get passive() { // This function will be called when the browser
// attempts to access the passive property.
passiveSupported = true;
return false;
}
};
window.addEventListener("test", null, options);
window.removeEventListener("test", null, options);
} catch (err) {
passiveSupported = false;
}
return passiveSupported
}
const optCapture = (passive, capture) => isPassiveAvailable ? { passive, capture } : capture;
new Promise(function() {
if (isPassiveAvailable === null) isPassiveAvailable = checkPassive();
document.addEventListener('canplay', initialForVideoDetection, optCapture(true, true));
})
document.addEventListener('keydown', pageKeyDownfunction, true)
//ytp-ce-video ytp-ce-top-left-quad ytp-ce-size-853 ytp-ce-element-show
// Your code here...
})();