☰

ACT.Youtube.DM.PiP-button

Add a PiP button to the player to easy enter Picture-in-Picture mode.

当前为 2022-03-25 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name               ACT.Youtube.DM.PiP-button
  3. // @description        Add a PiP button to the player to easy enter Picture-in-Picture mode.
  4. // @author             ACTCD
  5. // @version            20220325.1
  6. // @license            GPL-3.0-or-later
  7. // @namespace          ACTCD/Userscripts
  8. // @supportURL         https://github.com/ACTCD/Userscripts#contact
  9. // @homepageURL        https://github.com/ACTCD/Userscripts
  10. // @match              *://*.youtube.com/*
  11. // @grant              none
  12. // @run-at             document-start
  13. // ==/UserScript==
  14.  
  15. (function () {
  16.     'use strict';
  17.  
  18.     // Create PiP Button
  19.     const i1 = 'url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2221%22%20height%3D%2225%22%3E%3Ctitle%3Epip_reduced%401x%3C%2Ftitle%3E%3Crect%20width%3D%2221%22%20height%3D%2225%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M2.5%2C17A1.5%2C1.5%2C0%2C0%2C1%2C1%2C15.5v-9A1.5%2C1.5%2C0%2C0%2C1%2C2.5%2C5h13A1.5%2C1.5%2C0%2C0%2C1%2C17%2C6.5V10h1V6.5A2.5%2C2.5%2C0%2C0%2C0%2C15.5%2C4H2.5A2.5%2C2.5%2C0%2C0%2C0%2C0%2C6.5v9A2.5%2C2.5%2C0%2C0%2C0%2C2.5%2C18H7V17Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M18.5%2C11h-8A2.5%2C2.5%2C0%2C0%2C0%2C8%2C13.5v5A2.5%2C2.5%2C0%2C0%2C0%2C10.5%2C21h8A2.5%2C2.5%2C0%2C0%2C0%2C21%2C18.5v-5A2.5%2C2.5%2C0%2C0%2C0%2C18.5%2C11Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E")';
  20.     const i2 = 'url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2221%22%20height%3D%2225%22%3E%3Ctitle%3Epip.fill_reduced%401x%3C%2Ftitle%3E%3Crect%20width%3D%2221%22%20height%3D%2225%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M18.5%2C11H18v1h.5A1.5%2C1.5%2C0%2C0%2C1%2C20%2C13.5v5A1.5%2C1.5%2C0%2C0%2C1%2C18.5%2C20h-8A1.5%2C1.5%2C0%2C0%2C1%2C9%2C18.5V18H8v.5A2.5%2C2.5%2C0%2C0%2C0%2C10.5%2C21h8A2.5%2C2.5%2C0%2C0%2C0%2C21%2C18.5v-5A2.5%2C2.5%2C0%2C0%2C0%2C18.5%2C11Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M14.5%2C4H2.5A2.5%2C2.5%2C0%2C0%2C0%2C0%2C6.5v8A2.5%2C2.5%2C0%2C0%2C0%2C2.5%2C17h12A2.5%2C2.5%2C0%2C0%2C0%2C17%2C14.5v-8A2.5%2C2.5%2C0%2C0%2C0%2C14.5%2C4Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E")';
  21.     const pip_button = document.createElement("button");
  22.     pip_button.title = "Picture-in-Picture";
  23.     pip_button.style.width = "50px";
  24.     pip_button.style.height = "50px";
  25.     if (location.hostname == "m.youtube.com") {
  26.         pip_button.style.setProperty("position", "absolute");
  27.         pip_button.style.setProperty("z-index", "100");
  28.     } else {
  29.         pip_button.className = "ytp-button";
  30.     }
  31.     pip_button.style.setProperty("background-repeat", "no-repeat");
  32.     pip_button.style.setProperty("background-position", "50% 50%");
  33.     pip_button.style.setProperty("background-image", i1);
  34.     const onEnterPip = e => pip_button.style.setProperty("background-image", i2);
  35.     const onExitPip = e => pip_button.style.setProperty("background-image", i1);
  36.     if (document.pictureInPictureEnabled) {
  37.         pip_button.addEventListener("click", event => {
  38.             if (document.pictureInPictureElement) {
  39.                 document.exitPictureInPicture();
  40.             } else {
  41.                 document.querySelector("video[src]")?.requestPictureInPicture();
  42.             }
  43.             event.preventDefault();
  44.             event.stopImmediatePropagation();
  45.         });
  46.     } else {
  47.         pip_button.style.setProperty("opacity", "0.5");
  48.         console.log('Your browser cannot use picture-in-picture right now');
  49.     }
  50.  
  51.     // Insert PiP Button (desktop) // Fixed once for unreliable @run-at document-start
  52.     document.querySelector(".ytp-miniplayer-button")?.before(pip_button);
  53.  
  54.     // Video element initialization
  55.     const pip_init = video => {
  56.         if (!video || video.nodeName != 'VIDEO' || !video.hasAttribute("src")) return;
  57.         video.addEventListener('webkitpresentationmodechanged', e => e.stopPropagation(), true); // PiP Fix
  58.         video.addEventListener("leavepictureinpicture", onExitPip);
  59.         video.addEventListener('enterpictureinpicture', onEnterPip);
  60.     }
  61.     pip_init(document.querySelector('video[src]')); // Fixed once for unreliable @run-at document-start
  62.  
  63.     // Dynamic adjustment
  64.     new MutationObserver(mutationList => {
  65.         mutationList.forEach((mutation) => {
  66.             if (mutation.type == 'childList') {
  67.                 mutation.addedNodes.forEach(node => {
  68.                     if (node.nodeType != Node.ELEMENT_NODE) return;
  69.                     node.nodeName == 'VIDEO' && pip_init(node);
  70.                     if (node.id == "player-control-overlay") { // Insert PiP Button (mobile)
  71.                         new MutationObserver(() => {
  72.                             node.classList.contains("fadein") && node.append(pip_button);
  73.                         }).observe(node, { attributes: true });
  74.                     }
  75.                     node.classList.contains("ytp-miniplayer-button") && node.before(pip_button); // Insert PiP Button (desktop)
  76.                 })
  77.             }
  78.             if (mutation.type == 'attributes') { // Enter video from the homepage
  79.                 mutation.target.nodeName == 'VIDEO' && mutation.attributeName == 'src' && pip_init(mutation.target);
  80.             }
  81.         });
  82.     }).observe(document, { subtree: true, childList: true, attributes: true });
  83.  
  84. })();