☰

PIP youtube enabled

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

  1. // ==UserScript==
  2. // @name         PIP youtube enabled
  3. // @namespace    none
  4. // @version      0.1
  5. // @description  Adds a button for watching YouTube videos in picture in picture mode while viewing comments.
  6. // @author       Johnny Vo
  7. // @license      GPLv3
  8. // @match        https://youtube.com/watch*
  9. // @match        https://m.youtube.com/watch*
  10. // @icon         https://cdn-icons-png.flaticon.com/512/1412/1412577.png
  11. // @grant        none
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     if ('pictureInPictureEnabled' in document) {
  18.         const videoElement = document.getElementsByClassName("video-stream")[0];
  19.         const pipButtonElement = document.createElement("button");
  20.         pipButtonElement.innerHTML = "Pip Mode";
  21.         pipButtonElement.style.position = "fixed";
  22.         pipButtonElement.style.right = "2rem";
  23.         pipButtonElement.style.bottom = "2rem";
  24.         pipButtonElement.style.visibility = "hidden";
  25.         pipButtonElement.style.width = "10rem";
  26.         pipButtonElement.style.height = "3.5rem";
  27.         pipButtonElement.style.borderRadius = "20px";
  28.         pipButtonElement.style.border = "1px solid";
  29.         pipButtonElement.style.backgroundColor = "#212121";
  30.         pipButtonElement.style.color = "#f1f1f1";
  31.         pipButtonElement.style.cursor = "pointer";
  32.         document.body.appendChild(pipButtonElement);
  33.  
  34.         const isVideoVisible = (element) => {
  35.             const rect = element.getBoundingClientRect();
  36.  
  37.             if (rect.top + rect.height > 0 && rect.top < window.innerHeight) {
  38.                 return true;
  39.             }
  40.             return false;
  41.         };
  42.  
  43.         document.addEventListener("scroll", async () => {
  44.             if (isVideoVisible(videoElement)) {
  45.                 pipButtonElement.style.visibility = "hidden";
  46.                 try {
  47.                     if (videoElement === document.pictureInPictureElement) {
  48.                         await document.exitPictureInPicture();
  49.                     }
  50.                 } catch (err) {
  51.                     console.log(err)
  52.                 }
  53.             } else {
  54.                 if (videoElement !== document.pictureInPictureElement) {
  55.                     pipButtonElement.style.visibility = "visible";
  56.                     pipButtonElement.addEventListener("click", async () => {
  57.                         pipButtonElement.disabled = true;
  58.  
  59.                         try {
  60.                             await videoElement.requestPictureInPicture();
  61.                             pipButtonElement.style.visibility = "hidden";
  62.                         } catch (err) {
  63.                             console.log(err)
  64.                         } finally {
  65.                             pipButtonElement.disabled = false;
  66.                         }
  67.                     });
  68.                 }
  69.             }
  70.         });
  71.     } else {
  72.         alert('No support of PIP in Browser');
  73.     }
  74. })();