mirror of
https://codeberg.org/vlw/disneyplus-pip.git
synced 2025-09-13 18:33:40 +02:00
74 lines
2.5 KiB
JavaScript
74 lines
2.5 KiB
JavaScript
// ==UserScript==
|
|
// @name Disney+ | Picture in Picture
|
|
// @namespace https://victorwesterlund.com/
|
|
// @version 1.0
|
|
// @description Enable Picture in Picture on Disney+
|
|
// @author VictorWesterlund
|
|
// @match https://www.disneyplus.com/*
|
|
// @grant none
|
|
// ==/UserScript==
|
|
|
|
(function() {
|
|
'use strict';
|
|
// PIP SVG - Copied from Full Screen <button>
|
|
const PIPicon = '<div class="focus-hack-div" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" tabindex="-1" focusable="false"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 11h-8v6h8v-6zm4 8V4.98C23 3.88 22.1 3 21 3H3c-1.1 0-2 .88-2 1.98V19c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zm-2 .02H3V4.97h18v14.05z" fill="white"/></svg></div>';
|
|
let timeout = null;
|
|
|
|
function initPIP() {
|
|
const mediaControlsWrapper = document.getElementsByClassName("btm-media-overlays-container")[0];
|
|
const video = document.getElementsByTagName("video")[0];
|
|
video.removeAttribute("disablepictureinpicture");
|
|
|
|
function togglePIP() {
|
|
if(document.pictureInPictureElement) {
|
|
document.exitPictureInPicture();
|
|
} else {
|
|
if(document.pictureInPictureEnabled) {
|
|
video.requestPictureInPicture();
|
|
}
|
|
}
|
|
}
|
|
// Append the PIP button to target
|
|
function insertPIPtoggle(target) {
|
|
if(document.getElementById("pip-toggle") ?? false) {
|
|
return false;
|
|
}
|
|
const button = document.createElement("button");
|
|
button.setAttribute("id", "pip-toggle");
|
|
button.setAttribute("aria-label", "PIP");
|
|
button.setAttribute("role", "button");
|
|
button.classList.add("control-icon-btn");
|
|
button.addEventListener("click", () => togglePIP());
|
|
button.insertAdjacentHTML("beforeend", PIPicon);
|
|
target.appendChild(button);
|
|
}
|
|
// Attempt to locate target for PIP button
|
|
const mediaControlsMutated = (mutations, observer) => {
|
|
const target = mediaControlsWrapper.getElementsByClassName("controls__right")[0] ?? false;
|
|
if (!target || target.length < 1) {
|
|
return false;
|
|
}
|
|
insertPIPtoggle(target);
|
|
}
|
|
const mediaControls = new MutationObserver(mediaControlsMutated);
|
|
mediaControls.observe(mediaControlsWrapper, {
|
|
childList: true
|
|
});
|
|
}
|
|
// Poll document tree until video element is loaded
|
|
const init = (mutations, observer) => {
|
|
clearTimeout(timeout);
|
|
if(!window.location.href.includes("/video/")) {
|
|
return false;
|
|
}
|
|
if(document.getElementsByTagName("video")[0]) {
|
|
initPIP();
|
|
return;
|
|
}
|
|
timeout = setTimeout(init, 500);
|
|
}
|
|
const page = new MutationObserver(init);
|
|
page.observe(document.body, {
|
|
childList: true
|
|
});
|
|
})();
|