Adds a button for watching YouTube videos in picture in picture mode while viewing comments and prevents the page from scrolling up if the user clicks a timestamp in the comments
// ==UserScript==
// @name Video Popout and No scroll on Click timestamps
// @namespace http://tampermonkey.net/
// @version 0.2
// @description Adds a button for watching YouTube videos in picture in picture mode while viewing comments and prevents the page from scrolling up if the user clicks a timestamp in the comments
// @author TetteDev
// @license GPLv3
// @match *://*.youtube.com/watch*
// @icon https://cdn-icons-png.flaticon.com/512/1412/1412577.png
// @grant GM_info
// @grant GM_addElement
// ==/UserScript==
(function() {
'use strict';
var seconds=0;
function timestampToSeconds(t){
let parts = t.split(':').reverse();
if (parts.length<2){ return false; }
seconds = 0;
for(let i=0; i<parts.length; i++){
switch (i) {
case 0: seconds += (+parts[i]); break;
case 1: seconds += (+parts[i])*60; break;
case 2: seconds += (+parts[i])*60*60; break;
case 3: seconds += (+parts[i])*60*60*24; break;
}
}
return Number.isInteger(seconds);
}
document.addEventListener("click", function(e){
if(e.target.tagName=="A"){
if(timestampToSeconds(e.target.innerText)){
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
movie_player.seekTo(seconds);
return;
}
} else if(e.target.closest("a#endpoint")){/*chapters*/
if(timestampToSeconds(e.target.closest("a#endpoint").querySelector("#details #time").innerText)){
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
movie_player.seekTo(seconds);
return;
}
}
}, {capture: true} );
if ('pictureInPictureEnabled' in document) {
const videoElement = document.getElementsByClassName("video-stream")[0];
const pipButtonElement = GM_addElement(document.body, "button", {
textContent: "Pip Mode",
});
pipButtonElement.style.position = "fixed";
pipButtonElement.style.right = "2rem";
pipButtonElement.style.bottom = "2rem";
pipButtonElement.style.visibility = "hidden";
pipButtonElement.style.width = "10rem";
pipButtonElement.style.height = "3.5rem";
pipButtonElement.style.borderRadius = "10px";
pipButtonElement.style.backgroundColor = "#ff0000";
pipButtonElement.style.border = `1px solid ${pipButtonElement.style.backgroundColor}`;
pipButtonElement.style.fontFamily = "Roboto,Arial,sans-serif";
pipButtonElement.style.color = "#f1f1f1";
pipButtonElement.style.cursor = "pointer";
const isVideoVisible = (element) => {
const rect = element.getBoundingClientRect();
if (rect.top + rect.height > 0 && rect.top < window.innerHeight) {
return true;
}
return false;
};
function urlIsYoutubeVideo(currentUrl) {
const regex = /(youtu.*be.*)\/(watch\?v=|embed\/|v|shorts|)(.*?((?=[&#?])|$))/;
return currentUrl.match(regex);
}
// Shows the "Pip" button if the main video is scrolled out of view but the user closed the PiP instance
videoElement.addEventListener("leavepictureinpicture", (event) => {
if (!urlIsYoutubeVideo(window.location.href) && pipButtonElement.style.visibility !== "hidden") { pipButtonElement.style.visibility = "hidden"; }
if (!isVideoVisible(videoElement)) {
pipButtonElement.style.visibility = "visible";
pipButtonElement.click = null;
pipButtonElement.addEventListener("click", async () => {
pipButtonElement.disabled = true;
try {
await videoElement.requestPictureInPicture();
pipButtonElement.style.visibility = "hidden";
} catch (err) {
console.log(err)
} finally {
pipButtonElement.disabled = false;
}
});
}
});
function shouldNotIntercept(navigationEvent) {
return (
!navigationEvent.canIntercept ||
// If this is just a hashChange,
// just let the browser handle scrolling to the content.
navigationEvent.hashChange ||
// If this is a download,
// let the browser perform the download.
navigationEvent.downloadRequest ||
// If this is a form submission,
// let that go to the server.
navigationEvent.formData
);
}
navigation.addEventListener("navigate", async e => {
// Needed only when .intercept in called on 'e' ??
if (shouldNotIntercept(e)) return;
if (!urlIsYoutubeVideo(e.destination.url) && pipButtonElement.style.visibility !== "hidden") { pipButtonElement.style.visibility = "hidden"; }
if (urlIsYoutubeVideo(e.destination.url) && isVideoVisible(videoElement) && pipButtonElement.style.visibility !== "hidden") {
pipButtonElement.style.visibility = "hidden";
}
if (videoElement === document.pictureInPictureElement && !urlIsYoutubeVideo(e.destination.url)) {
await document.exitPictureInPicture();
}
});
document.addEventListener("scroll", async () => {
if (isVideoVisible(videoElement)) {
pipButtonElement.style.visibility = "hidden";
try {
if (videoElement === document.pictureInPictureElement) {
await document.exitPictureInPicture();
}
} catch (err) {
console.log(err)
}
} else {
if (videoElement !== document.pictureInPictureElement) {
pipButtonElement.style.visibility = "visible";
pipButtonElement.addEventListener("click", async () => {
pipButtonElement.disabled = true;
try {
await videoElement.requestPictureInPicture();
pipButtonElement.style.visibility = "hidden";
} catch (err) {
console.log(err)
} finally {
pipButtonElement.disabled = false;
}
});
}
}
});
}
else {
alert(`No support of PIP in Browser, disable the userscript named '${GM_info.script.name}'`);
}
})();