☰

YouTube True Theater Mode

Apply a custom css when you enter theater mode in YouTube, hiding everything except the video.

目前为 2024-02-13 提交的版本。查看 最新版本。

// ==UserScript==
// @name         YouTube True Theater Mode
// @namespace    azb-truetheater
// @version      0.1
// @description  Apply a custom css when you enter theater mode in YouTube, hiding everything except the video.
// @author       Azb
// @match        https://www.youtube.com/*
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    function applyCustomStyles() {
        const customCSS = `
            ytd-watch-flexy[theater] #player-full-bleed-container.ytd-watch-flexy,
            ytd-watch-flexy[theater] #full-bleed-container.ytd-watch-flexy {
                height: 100vh;
                max-height: none;
            }
            #masthead-container.ytd-app {
                margin-top: 1px;
                padding-bottom: 5px;
                opacity: 0;
                transition: margin 2000ms, padding 2000ms, opacity 400ms;
            }
            #masthead-container.ytd-app:hover {
                margin-top: 0;
                padding-bottom: 0;
                opacity: 1;
                background: #0f0f0f;
            }
            #page-manager.ytd-app {
                margin-top: -6px;
            }
            ytd-feed-filter-chip-bar-renderer[fluid-width] #chips-content.ytd-feed-filter-chip-bar-renderer {
                display: none;
            }
        `;
        const styleElement = document.createElement('style');
        styleElement.textContent = customCSS;
        styleElement.id = 'custom-youtube-styles';
        document.head.appendChild(styleElement);
    }

    function removeCustomStyles() {
        const styleElement = document.querySelector('#custom-youtube-styles');
        if (styleElement) {
            styleElement.remove();
        }
    }

    function toggleCustomStyles() {
        const styleElement = document.querySelector('#custom-youtube-styles');
        if (styleElement) {
            removeCustomStyles();
        } else {
            applyCustomStyles();
        }
    }

    const theaterButton = document.querySelector('.ytp-size-button');
    if (theaterButton) {
        theaterButton.addEventListener('click', toggleCustomStyles);
    }
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.type === 'attributes' && mutation.attributeName === 'theater') {
                if (!mutation.target.hasAttribute('theater')) {
                    removeCustomStyles();
                }
            }
        });
    });

    const targetNode = document.querySelector('ytd-watch-flexy');
    if (targetNode) {
        observer.observe(targetNode, {
            attributes: true
        });
    }
})();