☰

优酷全屏模式

YouTube画面自动转换成100高、100宽的画面。

目前为 2023-06-29 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name:ko           유튜브 풀스크린
  3. // @name              Youtube Fullscreen Mode
  4. // @name:ru           Youtube Полный режим
  5. // @name:ja           Youtubeフルスクリーンモードの
  6. // @name:zh-CN        优酷全屏模式
  7. // @name:zh-TW        優酷全屏模式
  8.  
  9. // @description:ko    유튜브 화면을 자동으로 꽉 찬 화면으로 바꿉니다.
  10. // @description       Automatically switch YouTube screens to 100 height and 100 width screens.
  11. // @description:ru    Автоматическое переключение экрана на YouTube на экран высотой 100 и шириной 100.
  12. // @description:ja    ユーチューブ画面を高さ100、広さ100画面に自動転換。
  13. // @description:zh-CN YouTube画面自动转换成100高、100宽的画面。
  14. // @description:zh-TW YouTube畫面自動轉換成100高、100寬的畫面。
  15.  
  16. // @namespace         https://ndaesik.tistory.com/
  17. // @version           2023.06.29.13.39
  18. // @author            ndaesik
  19. // @icon              https://lh3.googleusercontent.com/iLZyxGK7l1343U4E7eAfgKbRWW6qhzCJq-Z92M60JzCMntFyaFF2GUQVRxPhfGcy6qRISLjHv4fX1vtq0TZkZMAzBjM
  20. // @match             *://*.youtube.com/*
  21. // ==/UserScript==
  22.  
  23. const suggestBoxToDarkCSS = document.createElement('style');
  24. suggestBoxToDarkCSS.innerText = `
  25. [dark] {color-scheme: dark;}
  26. [dark] .gstl_50.sbdd_a *, [dark] iframe {background-color:#121212; border-color:#303030;}
  27. [dark] .gsfs,[dark] .sbpqs_a {color:#FFF;}
  28. [dark] .sbqs_c:before {filter: invert(1);} `.replaceAll(';','!important;')
  29.  
  30. const fullscreenVideoCSS = document.createElement('style');
  31. fullscreenVideoCSS.innerText = `
  32. ytd-app:not([guide-persistent-and-visible]) [theater] #player video,
  33. :is(ytd-watch-flexy[theater],ytd-watch-flexy[fullscreen]) #player-wide-container {
  34. height: 100vh; max-height: 100vh; min-height: 100vh;}`.replaceAll(';','!important;')
  35.  
  36. const autoHideTopCSS = document.createElement('style');
  37. autoHideTopCSS.innerText = `
  38. #masthead-container.ytd-app:hover, #masthead-container.ytd-app:focus-within {width:100%;}
  39. #masthead-container.ytd-app,
  40. #masthead-container.ytd-app:not(:hover):not(:focus-within) {width:calc(50% - 150px);}
  41. #masthead-container.ytd-app:not(:hover):not(:focus-within) {transition:width 0.4s ease-out 0.4s;}
  42. ytd-app:not([guide-persistent-and-visible]) :is(#masthead-container ytd-masthead, #masthead-container.ytd-app::after) {transform: translateY(-56px); transition: transform .1s .3s ease-out;}
  43. ytd-app:not([guide-persistent-and-visible]) :is(#masthead-container:hover ytd-masthead, #masthead-container:hover.ytd-app::after, #masthead-container:focus-within ytd-masthead) {transform: translateY(0px);}
  44. ytd-app:not([guide-persistent-and-visible]) ytd-page-manager {margin-top: 0;}`.replaceAll(';','!important;')
  45. autoHideTopCSS.className = "autoHideTopCSS";
  46.  
  47. function isWatchPage() {
  48.     return !(document.URL.indexOf('watch') == -1)
  49. };
  50.  
  51. function isTheaterMode() {
  52.     let scrollbarWidth = window.innerWidth - document.querySelector('ytd-app').offsetWidth;
  53.     let playerWidth = document.querySelector('#ytd-player')?.offsetWidth;
  54.     let isWidePlayer = scrollbarWidth + playerWidth == window.innerWidth;
  55.     return ( isWatchPage() && isWidePlayer )
  56. };
  57.  
  58. function alwaysTheaterMode() {
  59.     let clickModeButtonRepeatly = setInterval( _ => {
  60.         if ( isTheaterMode() ) {
  61.             clearInterval( clickModeButtonRepeatly );
  62.         } else {
  63.             document.querySelectorAll('.ytp-size-button')?.forEach( e => e.click());
  64.             clearInterval( clickModeButtonRepeatly );
  65.         }
  66.     }, 100);
  67.     setTimeout( _ => {
  68.         clearInterval( clickModeButtonRepeatly );
  69.     }, 10000);
  70. };
  71.  
  72. ['yt-navigate-finish', 'load', 'unload', 'locationchange'].forEach( e => {
  73.     window.addEventListener( e, _ => {
  74.         isWatchPage() ? document.head.appendChild(autoHideTopCSS) : false;
  75.         document.head.appendChild(suggestBoxToDarkCSS);
  76.         document.head.appendChild(fullscreenVideoCSS);
  77.         alwaysTheaterMode();
  78.         window.scrollTo(0, 0);
  79.     });
  80. });
  81.  
  82. window.addEventListener('click', _ => {
  83.     setTimeout( _ => {
  84.         if ( !isWatchPage() || !isTheaterMode() ) {
  85.             document.querySelector('.autoHideTopCSS')?.remove()
  86.         } else if ( isTheaterMode() ) {
  87.             document.head.appendChild(autoHideTopCSS)
  88.         }
  89.     }, 100);
  90. });