- // ==UserScript==
- // @name ACT.YouTube.DM.PiP-button
- // @name:zh-CN ACT.YouTube.DM.画中画按钮
- // @description Add a PiP button to the player to easy enter Picture-in-Picture mode.
- // @description:zh-CN 为播放器添加画中画按钮,轻松进入画中画模式。
- // @author ACTCD
- // @version 20220406.1
- // @license GPL-3.0-or-later
- // @namespace ACTCD/Userscripts
- // @supportURL https://github.com/ACTCD/Userscripts#contact
- // @homepageURL https://github.com/ACTCD/Userscripts
- // @match *://*.youtube.com/*
- // @grant none
- // @run-at document-start
- // ==/UserScript==
-
- (function () {
- 'use strict';
-
- if (!document.pictureInPictureEnabled) {
- console.log('Your browser cannot use picture-in-picture right now');
- return;
- }
-
- // Create PiP Button
- const pip_button = document.createElement("button");
- pip_button.title = "Picture-in-Picture";
- const svg = document.createElement("svg");
- svg.setAttribute('width', '100%');
- svg.setAttribute('height', '100%');
- svg.setAttribute('viewBox', '-8 -6 36 36');
- const path = document.createElement("path");
- const path1 = "M2.5,17A1.5,1.5,0,0,1,1,15.5v-9A1.5,1.5,0,0,1,2.5,5h13A1.5,1.5,0,0,1,17,6.5V10h1V6.5A2.5,2.5,0,0,0,15.5,4H2.5A2.5,2.5,0,0,0,0,6.5v9A2.5,2.5,0,0,0,2.5,18H7V17Z M18.5,11h-8A2.5,2.5,0,0,0,8,13.5v5A2.5,2.5,0,0,0,10.5,21h8A2.5,2.5,0,0,0,21,18.5v-5A2.5,2.5,0,0,0,18.5,11Z";
- const path2 = "M18.5,11H18v1h.5A1.5,1.5,0,0,1,20,13.5v5A1.5,1.5,0,0,1,18.5,20h-8A1.5,1.5,0,0,1,9,18.5V18H8v.5A2.5,2.5,0,0,0,10.5,21h8A2.5,2.5,0,0,0,21,18.5v-5A2.5,2.5,0,0,0,18.5,11Z M14.5,4H2.5A2.5,2.5,0,0,0,0,6.5v8A2.5,2.5,0,0,0,2.5,17h12A2.5,2.5,0,0,0,17,14.5v-8A2.5,2.5,0,0,0,14.5,4Z";
- path.setAttribute('fill', '#fff');
- svg.append(path);
- if (location.hostname == "m.youtube.com") {
- pip_button.style.setProperty("position", "absolute");
- pip_button.style.setProperty("z-index", "100");
- pip_button.style.setProperty("top", '0px');
- pip_button.style.setProperty("left", '4px');
- svg.setAttribute('width', '42px');
- } else {
- pip_button.className = "ytp-button";
- path.id = 'ACT_PiP_Path';
- const use = document.createElement("use");
- use.className = 'ytp-svg-shadow';
- use.setAttribute('href', '#' + path.id);
- path.before(use);
- }
- pip_button.addEventListener("click", event => {
- if (document.pictureInPictureElement) {
- document.exitPictureInPicture();
- } else {
- document.querySelector("video[src]")?.requestPictureInPicture();
- }
- event.preventDefault();
- event.stopImmediatePropagation();
- }, true);
- const pip_button_act = pathx => { path.setAttribute('d', pathx); pip_button.innerHTML = svg.outerHTML; };
- pip_button_act(path1);
-
- // Insert PiP Button (desktop) // Fixed once for unreliable @run-at document-start
- document.querySelector(".ytp-miniplayer-button")?.before(pip_button);
-
- // Video element initialization
- const PiP_Fix = e => e.stopPropagation();
- const onEnterPip = e => pip_button_act(path2);
- const onExitPip = e => pip_button_act(path1);
- const pip_init = video => {
- if (!video || video.nodeName != 'VIDEO' || !video.hasAttribute("src")) return;
- video.addEventListener('webkitpresentationmodechanged', PiP_Fix, true);
- video.addEventListener("leavepictureinpicture", onExitPip);
- video.addEventListener('enterpictureinpicture', onEnterPip);
- }
- pip_init(document.querySelector('video[src]'));
-
- // Dynamic adjustment
- new MutationObserver(mutationList => {
- mutationList.forEach((mutation) => {
- if (mutation.type == 'childList') {
- mutation.addedNodes.forEach(node => {
- if (node.nodeType != Node.ELEMENT_NODE) return;
- node.nodeName == 'VIDEO' && pip_init(node);
- node.classList.contains("ytp-miniplayer-button") && node.before(pip_button); // Insert PiP Button (desktop)
- });
- mutation.removedNodes.forEach(node => {
- if (node.nodeType != Node.ELEMENT_NODE) return;
- node.classList.contains("ytp-miniplayer-button") && pip_button.remove();
- node.id == "player-control-overlay" && pip_button.remove();
- });
- }
- if (mutation.type == 'attributes') {
- mutation.target.nodeName == 'VIDEO' && mutation.attributeName == 'src' && pip_init(mutation.target);
- if (mutation.target.id == "player-control-overlay" && mutation.attributeName == 'class') { // Insert PiP Button (mobile)
- mutation.target.classList.contains("fadein") ? document.querySelector('#player')?.append(pip_button) : pip_button.remove();
- }
- if (mutation.attributeName == 'class' && mutation.target == document.querySelector('.player-controls-top')?.parentNode) {
- mutation.target.classList.contains('player-controls-hide') ? pip_button.remove() : (
- document.querySelector('#player-control-overlay')?.classList.contains("fadein") && document.querySelector('#player')?.append(pip_button)
- );
- }
- if (mutation.target.id == "player" && mutation.attributeName == 'hidden') {
- mutation.target.hasAttribute('hidden') && (pip_button.remove(), document.exitPictureInPicture());
- }
- }
- });
- }).observe(document, { subtree: true, childList: true, attributes: true });
-
- })();