Youtube Theater Fill Up Window

make theater mode fill up window
当前为 2023-03-25 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name               Youtube Theater Fill Up Window
// @name:zh-TW         Youtube Theater Fill Up Window
// @namespace          https://greasyfork.org/scripts/454092
// @version            1.0.5
// @description        make theater mode fill up window
// @description:zh-TW  讓劇院模式填滿視窗
// @author             Derek
// @match              *://www.youtube.com/*
// @grant              none
// @noframes
// ==/UserScript==

const $ = (element) => document.querySelector(element)

const getScrollbarWidth = () => {
  const dummy = document.createElement('div')
  document.body.insertAdjacentElement('beforeend', dummy)
  dummy.style.overflowY = 'scroll'
  let clientWidth = dummy.clientWidth
  let offsetWidth = dummy.offsetWidth
  dummy.remove()
  return offsetWidth - clientWidth + 1
}

const css = `
  #masthead-container {
    display: none !important;
  }
  ytd-page-manager {
    margin: 0 !important;
  }
  #player-theater-container {
    min-height: 100vh !important;
    min-width: calc(100vw - ${getScrollbarWidth()}px) !important;
  }
`

const theaterMode = () => {
  if ($('#player-theater-container > #player-container') && !$('#theater-mode')) {
    const theaterStyle = document.createElement('style')
    theaterStyle.setAttribute('id', 'theater-mode')
    theaterStyle.appendChild(document.createTextNode(css))
    $('head').insertAdjacentElement('beforeend', theaterStyle)
  } else if (!$('#player-theater-container > #player-container') && $('#theater-mode')) $('#theater-mode').remove()
}

const main = () => {
  if (window.location.href.includes('/watch?v=')) {
    if ($('ytd-watch-flexy').isTheater_()) theaterMode()
    const observer = new MutationObserver(theaterMode)
    observer.observe($('#player-theater-container'), { childList: true })
  } else if ($('#theater-mode')) $('#theater-mode').remove()
}

document.addEventListener('yt-navigate-finish', main)