☰

PIP youtube enabled

Adds a button for watching YouTube videos in picture in picture mode while viewing comments.

// ==UserScript==
// @name         PIP youtube enabled
// @namespace    none
// @version      0.1
// @description  Adds a button for watching YouTube videos in picture in picture mode while viewing comments.
// @author       Johnny Vo
// @license      GPLv3
// @match        https://youtube.com/watch*
// @match        https://m.youtube.com/watch*
// @icon         https://cdn-icons-png.flaticon.com/512/1412/1412577.png
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    if ('pictureInPictureEnabled' in document) {
        const videoElement = document.getElementsByClassName("video-stream")[0];
        const pipButtonElement = document.createElement("button");
        pipButtonElement.innerHTML = "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 = "20px";
        pipButtonElement.style.border = "1px solid";
        pipButtonElement.style.backgroundColor = "#212121";
        pipButtonElement.style.color = "#f1f1f1";
        pipButtonElement.style.cursor = "pointer";
        document.body.appendChild(pipButtonElement);

        const isVideoVisible = (element) => {
            const rect = element.getBoundingClientRect();

            if (rect.top + rect.height > 0 && rect.top < window.innerHeight) {
                return true;
            }
            return false;
        };

        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');
    }
})();