From e8013c0ea1f7c45b5a5a9c05fe49c69f65d5ea63 Mon Sep 17 00:00:00 2001
From: Victor Westerlund <victor.vesterlund@gmail.com>
Date: Sun, 31 Jan 2021 19:10:50 +0100
Subject: [PATCH] Create disneyplus_pip.js

Initial code commit.
---
 disneyplus_pip.js | 74 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 disneyplus_pip.js

diff --git a/disneyplus_pip.js b/disneyplus_pip.js
new file mode 100644
index 0000000..9c252f5
--- /dev/null
+++ b/disneyplus_pip.js
@@ -0,0 +1,74 @@
+// ==UserScript==
+// @name         Disney+ | Picture in Picture
+// @namespace    https://disneyplus.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
+	});
+})();
\ No newline at end of file