☰

优酷全屏模式

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

当前为 2024-12-31 提交的版本，查看 最新版本。

  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           2024.12.31.2121
  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. body{overflow-y:auto;}
  26. [dark] {color-scheme: dark;}`.replaceAll(';','!important;')
  27.  
  28. const fullscreenVideoCSS = document.createElement('style');
  29. fullscreenVideoCSS.innerText = `
  30. ytd-app:not([guide-persistent-and-visible]) [theater] #player video,
  31. :is(ytd-watch-flexy[theater],ytd-watch-flexy[fullscreen]) #full-bleed-container {
  32. height: 100vh; max-height: 100vh; min-height: 100vh;}
  33. ytd-watch-flexy[theater] {scrollbar-width: none;}
  34. ytd-watch-flexy[theater]::-webkit-scrollbar {display: none;}
  35. ytd-watch-flexy[theater] ~ body {scrollbar-width: none;-ms-overflow-style: none;}
  36. ytd-watch-flexy[theater] ~ body::-webkit-scrollbar {display: none;}`.replaceAll(';','!important;')
  37.  
  38. const autoHideTopCSS = document.createElement('style');
  39. autoHideTopCSS.innerText = `
  40. #masthead-container.ytd-app:hover, #masthead-container.ytd-app:focus-within {width:100%;}
  41. #masthead-container.ytd-app,
  42. #masthead-container.ytd-app:not(:hover):not(:focus-within) {width:calc(50% - 150px);}
  43. #masthead-container.ytd-app:not(:hover):not(:focus-within) {transition:width 0.4s ease-out 0.4s;}
  44. 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;}
  45. 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);}
  46. ytd-app:not([guide-persistent-and-visible]) ytd-page-manager {margin-top: 0;}`.replaceAll(';','!important;')
  47. autoHideTopCSS.className = "autoHideTopCSS";
  48.  
  49. const $ = {
  50.     elements: { ytdApp: null, player: null, chatFrame: null },
  51.     update() {
  52.         this.elements.ytdApp = document.querySelector('ytd-app');
  53.         this.elements.player = document.querySelector('#ytd-player');
  54.         this.elements.chatFrame = document.querySelector('ytd-live-chat-frame');
  55.     }
  56. };
  57.  
  58. let scrollTimer = null, isContentHidden = false;
  59.  
  60. const isWatchPage = () => document.URL.includes('watch');
  61.  
  62. const isTheaterMode = () => {
  63.     $.update();
  64.     const { ytdApp, player, chatFrame } = $.elements;
  65.     return ytdApp && player && isWatchPage() &&
  66.         (window.innerWidth - ytdApp.offsetWidth + player.offsetWidth +
  67.         (chatFrame && !chatFrame.attributes.collapsed ? chatFrame.offsetWidth : 0)) === window.innerWidth;
  68. };
  69.  
  70. const shouldShowAutoHideCSS = () => {
  71.     const scrollPosition = window.scrollY;
  72.     const viewportHeight = window.innerHeight + 56;
  73.     return isWatchPage() && isTheaterMode() && scrollPosition <= viewportHeight;
  74. };
  75.  
  76. const updateAutoHideCSS = () => {
  77.     const existingCSS = document.querySelector('.autoHideTopCSS');
  78.     shouldShowAutoHideCSS() ? !existingCSS && document.head.appendChild(autoHideTopCSS) : existingCSS?.remove();
  79. };
  80.  
  81. const checkConditions = () => {
  82.     const watchFlexy = document.querySelector('ytd-watch-flexy');
  83.     const primaryContent = document.querySelector('#primary');
  84.     const secondaryContent = document.querySelector('#secondary');
  85.     const isTheater = watchFlexy?.hasAttribute('theater');
  86.     const isScrollTop = window.scrollY === 0;
  87.  
  88.     if (!primaryContent || !secondaryContent || !isTheater) return;
  89.  
  90.     if (isScrollTop && !isContentHidden) {
  91.         if (scrollTimer) clearTimeout(scrollTimer);
  92.         scrollTimer = setTimeout(() => {
  93.             primaryContent.style.display = 'none';
  94.             secondaryContent.style.display = 'none';
  95.             isContentHidden = true;
  96.         }, 2000);
  97.     } else if (!isScrollTop && scrollTimer) {
  98.         clearTimeout(scrollTimer);
  99.         scrollTimer = null;
  100.         isContentHidden && (primaryContent.style.display = '', secondaryContent.style.display = '', isContentHidden = false);
  101.     }
  102. };
  103.  
  104. const showContent = () => {
  105.     const primaryContent = document.querySelector('#primary');
  106.     const secondaryContent = document.querySelector('#secondary');
  107.     if (isContentHidden && primaryContent && secondaryContent) {
  108.         primaryContent.style.display = '';
  109.         secondaryContent.style.display = '';
  110.         isContentHidden = false;
  111.         scrollTimer && (clearTimeout(scrollTimer), scrollTimer = null);
  112.         setTimeout(() => checkConditions(), 1000);
  113.     }
  114. };
  115.  
  116. const alwaysTheaterMode = () => {
  117.     const interval = setInterval(() => isTheaterMode() ? clearInterval(interval) :
  118.         document.querySelectorAll('.ytp-size-button')?.forEach(e => e.click()), 100);
  119.     setTimeout(() => clearInterval(interval), 10000);
  120. };
  121.  
  122. ['yt-navigate-finish', 'load', 'unload', 'locationchange'].forEach(event =>
  123.     window.addEventListener(event, () => {
  124.         document.head.appendChild(suggestBoxToDarkCSS);
  125.         document.head.appendChild(fullscreenVideoCSS);
  126.         alwaysTheaterMode();
  127.         window.scrollTo(0, 0);
  128.         updateAutoHideCSS();
  129.         setupEventListeners();
  130.         checkConditions();
  131.     }));
  132.  
  133. window.addEventListener('click', () => setTimeout(updateAutoHideCSS, 100));
  134. window.addEventListener('scroll', () => requestAnimationFrame(updateAutoHideCSS));
  135.  
  136. const setupEventListeners = () => {
  137.     window.addEventListener('scroll', () => requestAnimationFrame(checkConditions));
  138.     document.addEventListener('click', () => requestAnimationFrame(showContent));
  139.     document.addEventListener('wheel', () => requestAnimationFrame(showContent));
  140.     const observer = new MutationObserver(() => requestAnimationFrame(checkConditions));
  141.     const watchFlexy = document.querySelector('ytd-watch-flexy');
  142.     watchFlexy && observer.observe(watchFlexy, { attributes: true, attributeFilter: ['theater'] });
  143. };