Greasy Fork

// ==UserScript==// @name:ko           유튜브 풀스크린// @name              Youtube Fullscreen Mode// @name:ru           Youtube Полный режим// @name:ja           Youtubeフルスクリーンモードの// @name:zh-CN        优#全屏模式// @name:zh-TW        優#全屏模式// @description:ko    유튜브 화면을 자동으로 꽉 찬 화면으로 바꿉니다.// @description       Automatically switch YouTube screens to 100 height and 100 width screens.// @description:ru    Автоматическое переключение экрана на YouTube на экран высотой 100 и шириной 100.// @description:ja    ユーチューブ画面を高さ100、広さ100画面に自動転換。// @description:zh-CN YouTube画面自动转换成100高、100宽的画面。// @description:zh-TW YouTube畫面自動轉換成100高、100寬的畫面。// @namespace         https://ndaesik.tistory.com/// @version           2025.01.01.1000// @author            ndaesik// @icon              https://lh3.googleusercontent.com/iLZyxGK7l1343U4E7eAfgKbRWW6qhzCJq-Z92M60JzCMntFyaFF2GUQVRxPhfGcy6qRISLjHv4fX1vtq0TZkZMAzBjM// @match             *://*.youtube.com/*// @grant             window.focus// ==/UserScript==const suggestBoxToDarkCSS = document.createElement('style');suggestBoxToDarkCSS.innerText = `body{overflow-y:auto;}[dark] {color-scheme: dark;}`.replaceAll(';','!important;')const fullscreenVideoCSS = document.createElement('style');fullscreenVideoCSS.innerText = `ytd-app:not([guide-persistent-and-visible]) [theater] #player video,:is(ytd-watch-flexy[theater],ytd-watch-flexy[fullscreen]) #full-bleed-container {height: 100vh; max-height: 100vh; min-height: 100vh;}ytd-watch-flexy[theater] {scrollbar-width: none;}ytd-watch-flexy[theater]::-webkit-scrollbar {display: none;}ytd-watch-flexy[theater] ~ body {scrollbar-width: none;-ms-overflow-style: none;}ytd-watch-flexy[theater] ~ body::-webkit-scrollbar {display: none;}`.replaceAll(';','!important;')const autoHideTopCSS = document.createElement('style');autoHideTopCSS.innerText = `#masthead-container.ytd-app:hover, #masthead-container.ytd-app:focus-within {width:100%;}#masthead-container.ytd-app,#masthead-container.ytd-app:not(:hover):not(:focus-within) {width:calc(50% - 150px);}#masthead-container.ytd-app:not(:hover):not(:focus-within) {transition:width 0.4s ease-out 0.4s;}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;}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);}ytd-app:not([guide-persistent-and-visible]) ytd-page-manager {margin-top: 0;}`.replaceAll(';','!important;')autoHideTopCSS.className = "autoHideTopCSS";const $ = {elements: { ytdApp: null, player: null, chatFrame: null },update() {this.elements.ytdApp = document.querySelector('ytd-app');this.elements.player = document.querySelector('#ytd-player');this.elements.chatFrame = document.querySelector('ytd-live-chat-frame');}};let scrollTimer = null, isContentHidden = false;const isWatchPage = () => document.URL.includes('/watch?');const isTheaterMode = () => {$.update();const { ytdApp, player, chatFrame } = $.elements;return ytdApp && player && isWatchPage() &&(window.innerWidth - ytdApp.offsetWidth + player.offsetWidth +(chatFrame && !chatFrame.attributes.collapsed ? chatFrame.offsetWidth : 0)) === window.innerWidth;};const shouldShowAutoHideCSS = () => {const scrollPosition = window.scrollY;const viewportHeight = window.innerHeight + 56;return isWatchPage() && isTheaterMode() && scrollPosition <= viewportHeight;};const updateAutoHideCSS = () => {const existingCSS = document.querySelector('.autoHideTopCSS');shouldShowAutoHideCSS() ? !existingCSS && document.head.appendChild(autoHideTopCSS) : existingCSS?.remove();};const checkConditions = () => {const watchFlexy = document.querySelector('ytd-watch-flexy');const primaryContent = document.querySelector('#primary');const secondaryContent = document.querySelector('#secondary');const isTheater = watchFlexy?.hasAttribute('theater');const isScrollTop = window.scrollY === 0;if (!primaryContent || !secondaryContent || !isTheater) return;if (isScrollTop && !isContentHidden) {if (scrollTimer) clearTimeout(scrollTimer);scrollTimer = setTimeout(() => {primaryContent.style.display = 'none';secondaryContent.style.display = 'none';isContentHidden = true;}, 2000);} else if (!isScrollTop && scrollTimer) {clearTimeout(scrollTimer);scrollTimer = null;isContentHidden && (primaryContent.style.display = '', secondaryContent.style.display = '', isContentHidden = false);}};const showContent = () => {const primaryContent = document.querySelector('#primary');const secondaryContent = document.querySelector('#secondary');if (isContentHidden && primaryContent && secondaryContent) {primaryContent.style.display = '';secondaryContent.style.display = '';isContentHidden = false;scrollTimer && (clearTimeout(scrollTimer), scrollTimer = null);setTimeout(() => checkConditions(), 1000);}};const alwaysTheaterMode = () => {const interval = setInterval(() => isTheaterMode() ? clearInterval(interval) :document.querySelectorAll('.ytp-size-button')?.forEach(e => e.click()), 100);setTimeout(() => clearInterval(interval), 10000);};const setupEventListeners = () => {window.addEventListener('scroll', () => requestAnimationFrame(checkConditions));document.addEventListener('click', () => requestAnimationFrame(showContent));document.addEventListener('wheel', () => requestAnimationFrame(showContent));const observer = new MutationObserver(() => requestAnimationFrame(checkConditions));const watchFlexy = document.querySelector('ytd-watch-flexy');watchFlexy && observer.observe(watchFlexy, { attributes: true, attributeFilter: ['theater'] });};let previousUrl = window.location.href;window.addEventListener('yt-navigate-start', () => {const currentUrl = window.location.href;currentUrl !== previousUrl && !previousUrl.includes('/watch') && currentUrl.includes('/watch') && window.location.reload();previousUrl = currentUrl;});['yt-navigate-finish', 'load', 'unload', 'locationchange'].forEach(event =>window.addEventListener(event, () => {document.head.appendChild(suggestBoxToDarkCSS);document.head.appendChild(fullscreenVideoCSS);alwaysTheaterMode();window.scrollTo(0, 0);updateAutoHideCSS();setupEventListeners();checkConditions();}));window.addEventListener('click', () => setTimeout(updateAutoHideCSS, 100));window.addEventListener('scroll', () => requestAnimationFrame(updateAutoHideCSS));