Greasy Fork

// ==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});}})();