☰

YT Theatermode

Auto and full screeded Theater mode.

目前為 2021-10-25 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name        YT Theatermode
  3. // @description Auto and full screeded Theater mode.
  4.  
  5. // @name:ko     유튜브 극장모드
  6. // @description:ko 유튜브 화면을 자동으로 꽉 찬 화면으로 바꿉니다.
  7.  
  8. // @namespace   https://ndaesik.tistory.com/
  9. // @version     2021.10.25.13:16
  10. // @author      ndaesik
  11. // @icon        https://lh3.googleusercontent.com/iLZyxGK7l1343U4E7eAfgKbRWW6qhzCJq-Z92M60JzCMntFyaFF2GUQVRxPhfGcy6qRISLjHv4fX1vtq0TZkZMAzBjM
  12. // @match       https://www.youtube.com/*
  13. // ==/UserScript==
  14.  
  15. window.addEventListener("yt-navigate-finish", function(event) {
  16.   var timer = setTimeout(function() {
  17.       if ((document.querySelector('ytd-player').offsetWidth + 100) < window.innerWidth) {
  18.           document.querySelector('.ytp-size-button').click();
  19.           console.log("hello");
  20.     }
  21.   }, 500)
  22. })
  23.  
  24. var styles = `
  25. [dark] .gstl_50.sbdd_a *{background-color:#232323!important;border-color:#282828!important}
  26. [dark] .gsfs,[dark] .sbpqs_a{color:#FFF!important}
  27.  
  28. ytd-app:not([guide-persistent-and-visible]) ytd-page-manager {
  29.   margin-top: 0!important;
  30. }
  31.  
  32. ytd-app:not([guide-persistent-and-visible]) #player-theater-container:empty~#columns #primary,
  33. ytd-app:not([guide-persistent-and-visible]) #player-theater-container:empty~#columns #secondary{
  34.     padding-top: 56px;
  35. }
  36.  
  37. ytd-app:not([guide-persistent-and-visible]) ytd-masthead,
  38. ytd-app:not([guide-persistent-and-visible]) #masthead-container.ytd-app::after {
  39.   transform: translateY(-56px);
  40.   transition: transform .1s .5s ease-out;
  41. }
  42. ytd-app:not([guide-persistent-and-visible]) #masthead-container:hover ytd-masthead,
  43. ytd-app:not([guide-persistent-and-visible]) #masthead-container:hover.ytd-app::after {
  44.   transform: translateY(0px);
  45. }
  46.  
  47. ytd-app:not([guide-persistent-and-visible]) [theater] #player.ytd-watch {
  48.   height: 100vh!important;
  49.   max-height: 100vh!important;
  50. }
  51.  
  52. ytd-watch-flexy[theater] #player-theater-container.ytd-watch-flexy,
  53. ytd-watch-flexy[fullscreen] #player-theater-container.ytd-watch-flexy,
  54. ytd-app:not([guide-persistent-and-visible]) [theater] #player video {
  55.   width: 100%!important;
  56.   height: 100vh!important;
  57.   max-height: 100vh!important;
  58.   max-width: 100%!important;
  59.   left: 0!important;
  60. }
  61.  
  62. ytd-app:not([guide-persistent-and-visible]) .ytp-chrome-top.ytp-share-button-visible,
  63. ytd-app:not([guide-persistent-and-visible]) #iv-drawer .iv-drawer-header,
  64. ytd-app:not([guide-persistent-and-visible]) #iv-drawer .iv-drawer-content {
  65.   margin-top: 30px;
  66. }
  67.  
  68. ytd-app:not([guide-persistent-and-visible]) [theater] .ytp-chrome-top.ytp-share-button-visible,
  69. ytd-app:not([guide-persistent-and-visible]) [theater] #iv-drawer .iv-drawer-header,
  70. ytd-app:not([guide-persistent-and-visible]) [theater] #iv-drawer .iv-drawer-content,
  71. ytd-app:not([guide-persistent-and-visible]) [theater] .ytp-multicam-menu-header,
  72. ytd-app:not([guide-persistent-and-visible]) [theater] .ytp-multicam-menu-items,
  73. ytd-app:not([guide-persistent-and-visible]) [theater] .ytp-playlist-menu-header,
  74. ytd-app:not([guide-persistent-and-visible]) [theater] .ytp-playlist-menu-items,
  75. ytd-app:not([guide-persistent-and-visible]) [theater] .ytp-share-panel-close {
  76.   margin-top: 56px;
  77. }
  78.  
  79. ytd-app:not([guide-persistent-and-visible]) .ytp-tooltip.ytp-tooltip-opaque.ytp-bottom {
  80.   right: 60px!important;
  81.   top: 35px!important;
  82. }
  83.  
  84. ytd-app:not([guide-persistent-and-visible]) [theater] .ytp-tooltip.ytp-tooltip-opaque.ytp-bottom {
  85.   right: 60px!important;
  86.   top: 60px!important;
  87. }
  88. `
  89.  
  90. var styleSheet = document.createElement("style")
  91. styleSheet.type = "text/css"
  92. styleSheet.innerText = styles
  93. document.head.appendChild(styleSheet)