Better Youtube Theatre Mode

Enlarges the media player to fill the entire screen with theatre mode.

目前為 2023-06-29 提交的版本,檢視 最新版本

// ==UserScript==
// @name         Better Youtube Theatre Mode
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  Enlarges the media player to fill the entire screen with theatre mode.
// @author       PA#5576
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?domain=youtube.com
// @grant        none
// @run-at       document-start
// ==/UserScript==


/**

A simple script to fix youtube's CSS to set the containers height to 100vh - navbar height

**/

// Injects CSS into the header of the document.
function addStyle(styleText){
    let s = document.createElement('style')
    s.setAttribute("id", "youtubetheater");
    s.appendChild(document.createTextNode(styleText))
    document.getElementsByTagName('head')[0].appendChild(s)
}
// Todo: turn this into a config.
// This shirnks the video a bit to include the video title in theatre mode.
// It feels more like the original theatre mode but not so small.
var showVideoTitle = false;
setInterval(
loadCss,1000)

function loadCss() {
    'use strict';
    if(document.getElementById("youtubetheater")){return;}
    if(showVideoTitle){
        // Applys css to the page to resize the media player to the entire screen minus 60px for the title to show. 
        addStyle(`
        ytd-watch-flexy[theater-requested_] #player-wide-container{
            min-height:calc(100vh - 57px - 60px)!important;
        }`)
    }else{
        // Applys css to the page to resize the media player to the entire screen.
        addStyle(`
        ytd-watch-flexy[theater-requested_] #player-wide-container{
            min-height:calc(100vh - 57px)!important;
        }
        `)
    }
};