Youtube Theater Fill Up Window

讓劇院模式填滿視窗
目前為 2022-11-01 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name               Youtube Theater Fill Up Window
// @name:zh-TW         Youtube Theater Fill Up Window
// @namespace          https://greasyfork.org/scripts/454092
// @version            1.0.1
// @description        make theater mode fill up window
// @description:zh-TW  讓劇院模式填滿視窗
// @author             Derek
// @match              *://www.youtube.com/*
// @grant              none
// @noframes
// ==/UserScript==

let $ = (element) => document.querySelector(element)
let getScrollbarWidth = () => {
  let dummy = document.createElement('div')
  $('body').appendChild(dummy)
  dummy.style.overflowY = 'scroll'
  let clientWidth = dummy.clientWidth
  let offsetWidth = dummy.offsetWidth
  document.body.removeChild(dummy)
  return offsetWidth - clientWidth
}

let css = `
  #masthead-container {
    display: none !important;
  }
  ytd-watch-flexy {
    position: absolute !important;
    top: 0 !important;
  }
  #player-theater-container {
    min-height: 100vh !important;
    min-width: calc(100vw - ${getScrollbarWidth()}px) !important;
  }
`

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

let main = () => {
  if (window.location.href.includes('/watch?v=')) {
    if ($('#player-theater-container').hasChildNodes()) theaterMode()
    let observer = new MutationObserver(theaterMode)
    observer.observe($('#player-theater-container'), { childList: true })
  } else if ($('#theater-mode')) $('head').removeChild($('#theater-mode'))
}

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