YouTube transparent

Прозрачность комментариев и другой информации
当前为 2025-03-30 提交的版本，查看最新版本。
换行
// ==UserScript==
// @license MIT
// @name         YouTube transparent
// @namespace    http://tampermonkey.net/
// @version      0.1_alpha
// @description  Прозрачность комментариев и другой информации
// @match        https://www.youtube.com/*
// @grant        GM_addStyle
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    const CSS = `
        /* Основные стили */
        ytd-watch-flexy {
            max-width: 100% !important;
            padding: 0 !important;
        }

        #secondary {
            display: inline !important;
            z-index: 4;
            margin-top: calc(25vh - 145px) !important;
        }

        /* Видео-контейнер */
        #movie_player.ultrawide-active {
            position: fixed !important;
            left: 0 !important;
            width: 100% !important;
            height: calc(100vh - 60px) !important;
            z-index: 1 !important;
        }

        /* Затемнение и контент */
        .ultrawide-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(0,0,0,0);

            backdrop-filter: blur(0px); /* Добавлено размытие */

            z-index: 2;
            pointer-events: none;
            transition: background 0.3s ease;
        }

        .ultrawide-content-container {
            position: relative !important;
            z-index: 3 !important;
            padding: 5px 5% 5px 5% !important;
            margin-top: calc(25vh - 160px) !important;
            background: transparent !important;
            max-height: 60vh !important;
            overflow-y: none !important;
            box-sizing: border-box !important;
        }

        /* Оптимизация заголовка */
        #title.ytd-watch-metadata {
            margin: 15px 0 !important;
        }

        /* Адаптация для мобильных */
        @media (max-width: 600px) {
            .ultrawide-content-container {
                padding: 10px !important;
                margin-top: 70vh !important;
            }
        }
    `;

    let overlay = null;
    let scrollHandler = null;

    const isVideoPage = () => {
        return window.location.pathname.includes('/watch');
    };

    const init = () => {
        if (!isVideoPage()) {
            cleanup();
            return;
        }

        const player = document.getElementById('movie_player');
        if (!player) return;

        if (!overlay) {
            overlay = document.createElement('div');
            overlay.className = 'ultrawide-overlay';
            document.body.prepend(overlay);
        }

        player.classList.add('ultrawide-active');
        const contentContainer = document.querySelector('#primary-inner');
        if (contentContainer) {
            contentContainer.classList.add('ultrawide-content-container');
        }

        const updateLayout = () => {
            const playerHeight = player.offsetHeight;
            if (contentContainer) {
                contentContainer.style.marginTop = `${playerHeight * 0.85}px`;
            }
        };

        scrollHandler = () => {
            const scrollY = window.scrollY;
            const playerHeight = player.offsetHeight;
            const opacity = Math.min(scrollY / (playerHeight * 0.5), 0.7);
            const bluramount = (Math.min(scrollY / (playerHeight * 0.5), 0.7)*3);
            overlay.style.background = `rgba(0,0,0,${opacity})`;
            overlay.style.backdropFilter = `blur(${bluramount}px)`;
            updateLayout();
        };

        window.addEventListener('scroll', scrollHandler);
        updateLayout();
    };

    const cleanup = () => {
        if (overlay) {
            overlay.remove();
            overlay = null;
        }
        if (scrollHandler) {
            window.removeEventListener('scroll', scrollHandler);
            scrollHandler = null;
        }
        document.querySelector('#movie_player')?.classList.remove('ultrawide-active');
        document.querySelector('#primary-inner')?.classList.remove('ultrawide-content-container');
    };

    GM_addStyle(CSS);

    new MutationObserver((mutations) => {
        if (!isVideoPage()) {
            cleanup();
            return;
        }
        const player = document.getElementById('movie_player');
        if (player && !player.classList.contains('ultrawide-active')) {
            cleanup();
            setTimeout(init, 300);

        }
    }).observe(document.documentElement, {
        childList: true,
        subtree: true
    });

    window.addEventListener('yt-navigate-finish', () => {
        if (isVideoPage()) {
            setTimeout(init, 500);
        } else {
            cleanup();
        }
    });

    window.addEventListener('beforeunload', cleanup);
})();