☰

YouTube Cross-Tab Picture-in-Picture/Miniplayer

Press Shift+P to toggle Picture-in-Picture/Miniplayer mode on YouTube videos

目前为 2025-03-21 提交的版本。查看 最新版本。

// ==UserScript==
// @name         YouTube Cross-Tab Picture-in-Picture/Miniplayer
// @namespace    http://tampermonkey.net/
// @version      0.1.2
// @description  Press Shift+P to toggle Picture-in-Picture/Miniplayer mode on YouTube videos
// @author       aspen138
// @match        https://www.youtube.com/*
// @grant        none
// @icon         https://www.youtube.com/favicon.ico
// @license      MIT
// ==/UserScript==


(function() {
    'use strict';

    // Function to toggle Picture-in-Picture
    function togglePictureInPicture(video) {
        if (document.pictureInPictureElement) {
            document.exitPictureInPicture()
                .then(() => {
                    console.log('Exited Picture-in-Picture mode');
                    // Clear the flag when exiting
                    localStorage.removeItem('pipActive');
                })
                .catch(error => {
                    console.error('Error exiting Picture-in-Picture:', error);
                });
        } else if (video) {
            video.requestPictureInPicture()
                .then(() => {
                    console.log('Entered Picture-in-Picture mode');
                    // Set a flag in localStorage
                    localStorage.setItem('pipActive', 'true');
                })
                .catch(error => {
                    console.error('Error entering Picture-in-Picture:', error);
                });
        }
    }

    // Keydown event listener
    document.addEventListener('keydown', function(e) {
        if (e.shiftKey && e.key === 'P') {
            const video = document.querySelector('video');
            togglePictureInPicture(video);
        }
    });

    // Storage event listener for cross-tab communication
    window.addEventListener('storage', function(e) {
        if (e.key === 'pipActive' && e.newValue === null) {
            // If another tab exited PiP, try to exit in this tab too
            if (document.pictureInPictureElement) {
                document.exitPictureInPicture()
                    .then(() => {
                        console.log('Cross-tab exit Picture-in-Picture mode');
                    })
                    .catch(error => {
                        console.error('Cross-tab exit error:', error);
                    });
            }
        }
    });

    // Check initial state on load
    window.addEventListener('load', function() {
        if (localStorage.getItem('pipActive') === 'true' && !document.pictureInPictureElement) {
            const video = document.querySelector('video');
            if (video) {
                togglePictureInPicture(video);
            }
        }
    });
})();