☰

YouTube transparent

More transparent in youtube

  1. // ==UserScript==
  2. // @license MIT
  3. // @name         YouTube transparent
  4. // @name:ru      Прозрачность на ютубе
  5. // @namespace    http://tampermonkey.net/
  6. // @version      0.2_alpha
  7. // @description  More transparent in youtube
  8. // @description:ru  Прозрачность комментариев и другой информации
  9. // @match        https://www.youtube.com/*
  10. // @grant        GM_addStyle
  11. // @run-at       document-start
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     const CSS = `
  18.         /* Основные стили */
  19.         ytd-watch-flexy {
  20.             max-width: 100% !important;
  21.             padding: 0 !important;
  22.         }
  23.  
  24.         #secondary {
  25.             display: inline !important;
  26.             z-index: 4;
  27.             margin-top: calc(25vh - 145px) !important;
  28.         }
  29.  
  30.         /* Видео-контейнер */
  31.         #movie_player.ultrawide-active {
  32.             position: fixed !important;
  33.             left: 0 !important;
  34.             width: 100% !important;
  35.             height: calc(100vh - 60px) !important;
  36.             z-index: 1 !important;
  37.         }
  38.  
  39.         /* Затемнение и контент */
  40.         .ultrawide-overlay {
  41.             position: fixed;
  42.             top: 0;
  43.             left: 0;
  44.             width: 100%;
  45.             height: 100vh;
  46.             background: rgba(0,0,0,0);
  47.  
  48.             backdrop-filter: blur(0px); /* Добавлено размытие */
  49.  
  50.             z-index: 2;
  51.             pointer-events: none;
  52.             transition: background 0.3s ease;
  53.         }
  54.  
  55.         .ultrawide-content-container {
  56.             position: relative !important;
  57.             z-index: 3 !important;
  58.             padding: 5px 5% 5px 5% !important;
  59.             margin-top: calc(25vh - 160px) !important;
  60.             background: transparent !important;
  61.             max-height: 60vh !important;
  62.             overflow-y: none !important;
  63.             box-sizing: border-box !important;
  64.         }
  65.  
  66.         /* Оптимизация заголовка */
  67.         #title.ytd-watch-metadata {
  68.             margin: 15px 0 !important;
  69.         }
  70.  
  71.         /* Адаптация для мобильных */
  72.         @media (max-width: 600px) {
  73.             .ultrawide-content-container {
  74.                 padding: 10px !important;
  75.                 margin-top: 70vh !important;
  76.             }
  77.         }
  78.     `;
  79.  
  80.     let overlay = null;
  81.     let scrollHandler = null;
  82.  
  83.     const isVideoPage = () => {
  84.         return window.location.pathname.includes('/watch');
  85.     };
  86.  
  87.     const init = () => {
  88.         if (!isVideoPage()) {
  89.             cleanup();
  90.             return;
  91.         }
  92.  
  93.         const player = document.getElementById('movie_player');
  94.         if (!player) return;
  95.  
  96.         if (!overlay) {
  97.             overlay = document.createElement('div');
  98.             overlay.className = 'ultrawide-overlay';
  99.             document.body.prepend(overlay);
  100.         }
  101.  
  102.         player.classList.add('ultrawide-active');
  103.         const contentContainer = document.querySelector('#primary-inner');
  104.         if (contentContainer) {
  105.             contentContainer.classList.add('ultrawide-content-container');
  106.         }
  107.  
  108.         const updateLayout = () => {
  109.             const playerHeight = player.offsetHeight;
  110.             if (contentContainer) {
  111.                 contentContainer.style.marginTop = `${playerHeight * 0.85}px`;
  112.             }
  113.         };
  114.  
  115.         scrollHandler = () => {
  116.             const scrollY = window.scrollY;
  117.             const playerHeight = player.offsetHeight;
  118.             const opacity = Math.min(scrollY / (playerHeight * 0.5), 0.7);
  119.             const bluramount = (Math.min(scrollY / (playerHeight * 0.5), 0.7)*3);
  120.             overlay.style.background = `rgba(0,0,0,${opacity})`;
  121.             overlay.style.backdropFilter = `blur(${bluramount}px)`;
  122.             updateLayout();
  123.         };
  124.  
  125.         window.addEventListener('scroll', scrollHandler);
  126.         updateLayout();
  127.     };
  128.  
  129.     const cleanup = () => {
  130.         if (overlay) {
  131.             overlay.remove();
  132.             overlay = null;
  133.         }
  134.         if (scrollHandler) {
  135.             window.removeEventListener('scroll', scrollHandler);
  136.             scrollHandler = null;
  137.         }
  138.         document.querySelector('#movie_player')?.classList.remove('ultrawide-active');
  139.         document.querySelector('#primary-inner')?.classList.remove('ultrawide-content-container');
  140.     };
  141.  
  142.     GM_addStyle(CSS);
  143.  
  144.     new MutationObserver((mutations) => {
  145.         if (!isVideoPage()) {
  146.             cleanup();
  147.             return;
  148.         }
  149.         const player = document.getElementById('movie_player');
  150.         if (player && !player.classList.contains('ultrawide-active')) {
  151.             cleanup();
  152.             setTimeout(init, 300);
  153.  
  154.         }
  155.     }).observe(document.documentElement, {
  156.         childList: true,
  157.         subtree: true
  158.     });
  159.  
  160.     window.addEventListener('yt-navigate-finish', () => {
  161.         if (isVideoPage()) {
  162.             setTimeout(init, 500);
  163.         } else {
  164.             cleanup();
  165.         }
  166.     });
  167.  
  168.     window.addEventListener('beforeunload', cleanup);
  169. })();