☰

YouTube Live Chat in Fullscreen

Display live chat while watching YouTube videos in fullscreen mode

目前為 2024-10-21 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         YouTube Live Chat in Fullscreen
// @namespace    https://greasyfork.org/en/users/781396
// @version      1.4
// @description  Display live chat while watching YouTube videos in fullscreen mode
// @author       YAD
// @license      MIT
// @icon         https://www.iconpacks.net/icons/1/free-icon-video-837.png
// @match        *://*.youtube.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // CSS styles for transparency
    const style = `
        yt-live-chat-header-renderer,
        yt-live-chat-message-input-renderer,
        #container.yt-live-chat-restricted-participation-renderer,
        yt-live-chat-renderer {
            background-color: rgba(0, 0, 0, 0.2) !important; // Adjust the transparency
            overflow: hidden;
        }
        .draggable {
            cursor: move;
        }
        .resizable {
            resize: both;
            overflow: auto;
        }
        yt-live-chat-message-input-renderer {
            z-index: 999999;
        }
    `;

    // Function to apply styles to the document
    function applyStyles(doc) {
        const styleTag = doc.createElement('style');
        styleTag.textContent = style;
        doc.head.appendChild(styleTag);
    }

    // Make an element draggable
    function makeDraggable(elm) {
        let startX, startY, initialX, initialY;

        elm.addEventListener('mousedown', (e) => {
            e.preventDefault();
            startX = e.clientX;
            startY = e.clientY;
            initialX = elm.offsetLeft;
            initialY = elm.offsetTop;

            const onMouseMove = (e) => {
                const dx = e.clientX - startX;
                const dy = e.clientY - startY;
                elm.style.left = `${initialX + dx}px`;
                elm.style.top = `${initialY + dy}px`;
            };

            const onMouseUp = () => {
                document.removeEventListener('mousemove', onMouseMove);
                document.removeEventListener('mouseup', onMouseUp);
            };

            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);
        });
    }

    // Apply styles initially
    applyStyles(document);

    // Handle fullscreen changes
    function handleFullscreenChange() {
        const iframe = document.querySelector('iframe#chatframe'); // Correct chat iframe selector
        if (!iframe) return;

        const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
        const isFullscreen = document.fullscreenElement;

        iframe.style.position = isFullscreen ? 'fixed' : '';
        iframe.style.top = isFullscreen ? '0' : '';
        iframe.style.right = isFullscreen ? '0' : '';
        iframe.style.width = isFullscreen ? '350px' : ''; // Adjust the width of chat
        iframe.style.height = isFullscreen ? '600px' : ''; // Adjust the height of chat
        iframe.style.zIndex = isFullscreen ? '9999' : '';
        iframe.style.overflow = isFullscreen ? 'hidden' : '';
        iframe.style.background = isFullscreen ? 'rgba(0, 0, 0, 0.1)' : '';
        
        iframe.classList.toggle('draggable', isFullscreen);
        iframe.classList.toggle('resizable', isFullscreen);

        if (isFullscreen) {
            applyStyles(iframeDocument);
            makeDraggable(iframe);
        }
    }

    // Listen for fullscreen changes
    document.addEventListener('fullscreenchange', handleFullscreenChange);

})();