☰

YouTube Live Chat in Fullscreen

Display live chat while watching YouTube videos in fullscreen mode

// ==UserScript==
// @name         YouTube Live Chat in Fullscreen
// @namespace    https://greasyfork.org/en/users/781396
// @version      1.8
// @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';

    // Load settings from localStorage or set defaults
    let chatboxWidth = localStorage.getItem('chatboxWidth') || 350;
    let chatboxHeight = localStorage.getItem('chatboxHeight') || 600;
    let chatboxOpacity = localStorage.getItem('chatboxOpacity') || 0.65;
    let chatboxPosX = localStorage.getItem('chatboxPosX') || 420;
    let chatboxPosY = localStorage.getItem('chatboxPosY') || -320;
    let backgroundColor = localStorage.getItem('backgroundColor') || '#000000';
    let backgroundOpacity = localStorage.getItem('backgroundOpacity') || 0.5;

    // CSS styles for transparency
    function getStyles() {
        return `
            yt-live-chat-header-renderer,
            yt-live-chat-message-input-renderer,
            #container.yt-live-chat-restricted-participation-renderer,
            yt-live-chat-renderer {
                background: rgba(${hexToRgb(backgroundColor)}, ${backgroundOpacity}) !important; // Adjust background color
                overflow: hidden;
            }
            .draggable {
                cursor: move;
            }
        `;
    }

    // Convert hex color to RGB
    function hexToRgb(hex) {
        const bigint = parseInt(hex.slice(1), 16);
        const r = (bigint >> 16) & 255;
        const g = (bigint >> 8) & 255;
        const b = bigint & 255;
        return `${r}, ${g}, ${b}`;
    }

    // Function to apply styles to the iframe document
    function applyStylesToIframe(iframeDoc) {
        const styleTag = iframeDoc.createElement('style');
        styleTag.textContent = getStyles();
        iframeDoc.head.appendChild(styleTag);
    }

    // Function to apply styles to the chatbox on load and fullscreen change
    function applyStyles() {
        const iframe = document.querySelector('iframe#chatframe');
        if (iframe) {
            setTimeout(() => {
                applyStylesToIframe(iframe.contentDocument || iframe.contentWindow.document);
            }, 2000); // Adding a 2secs delay to ensure the iframe loads
        }
    }

    // Create settings modal
    const settingsModal = document.createElement('div');
    settingsModal.style.position = 'fixed';
    settingsModal.style.top = '50%';
    settingsModal.style.left = '50%';
    settingsModal.style.transform = 'translate(-50%, -50%)';
    settingsModal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
    settingsModal.style.color = 'white';
    settingsModal.style.padding = '20px';
    settingsModal.style.borderRadius = '10px';
    settingsModal.style.zIndex = '10001';
    settingsModal.style.display = 'none';

    // Create the title
    const title = document.createElement('h3');
    title.innerText = 'Chatbox Settings';
    settingsModal.appendChild(title);

    // Create width input
    const widthLabel = document.createElement('label');
    widthLabel.innerText = 'Width: ';
    const widthInput = document.createElement('input');
    widthInput.type = 'number';
    widthInput.id = 'chatWidth';
    widthInput.value = chatboxWidth;
    widthInput.style.width = '80px';
    widthLabel.appendChild(widthInput);
    widthLabel.appendChild(document.createTextNode(' px'));
    settingsModal.appendChild(widthLabel);
    settingsModal.appendChild(document.createElement('br'));

    // Create height input
    const heightLabel = document.createElement('label');
    heightLabel.innerText = 'Height: ';
    const heightInput = document.createElement('input');
    heightInput.type = 'number';
    heightInput.id = 'chatHeight';
    heightInput.value = chatboxHeight;
    heightInput.style.width = '80px';
    heightLabel.appendChild(heightInput);
    heightLabel.appendChild(document.createTextNode(' px'));
    settingsModal.appendChild(heightLabel);
    settingsModal.appendChild(document.createElement('br'));

    // Create opacity slider
    const opacityLabel = document.createElement('label');
    opacityLabel.innerText = 'Chat Opacity: ';
    const opacitySlider = document.createElement('input');
    opacitySlider.type = 'range';
    opacitySlider.id = 'chatOpacity';
    opacitySlider.min = '0';
    opacitySlider.max = '1';
    opacitySlider.step = '0.1';
    opacitySlider.value = chatboxOpacity;
    opacityLabel.appendChild(opacitySlider);
    settingsModal.appendChild(opacityLabel);
    settingsModal.appendChild(document.createElement('br'));

    // Create background color input
    const bgColorLabel = document.createElement('label');
    bgColorLabel.innerText = 'Background Color: ';
    const bgColorInput = document.createElement('input');
    bgColorInput.type = 'color';
    bgColorInput.value = backgroundColor;
    bgColorLabel.appendChild(bgColorInput);
    settingsModal.appendChild(bgColorLabel);
    settingsModal.appendChild(document.createElement('br'));

    // Create background opacity slider
    const bgOpacityLabel = document.createElement('label');
    bgOpacityLabel.innerText = 'Background Transparency: ';
    const bgOpacitySlider = document.createElement('input');
    bgOpacitySlider.type = 'range';
    bgOpacitySlider.id = 'bgOpacity';
    bgOpacitySlider.min = '0';
    bgOpacitySlider.max = '1';
    bgOpacitySlider.step = '0.1';
    bgOpacitySlider.value = backgroundOpacity;
    bgOpacityLabel.appendChild(bgOpacitySlider);
    settingsModal.appendChild(bgOpacityLabel);
    settingsModal.appendChild(document.createElement('br'));

    // Create X position slider
    const posXLabel = document.createElement('label');
    posXLabel.innerText = 'X Position: ';
    const posXSlider = document.createElement('input');
    posXSlider.type = 'range';
    posXSlider.id = 'chatPosX';
    posXSlider.min = `-${window.innerWidth}`;
    posXSlider.max = `${window.innerWidth}`;
    posXSlider.value = chatboxPosX;
    posXLabel.appendChild(posXSlider);
    settingsModal.appendChild(posXLabel);
    settingsModal.appendChild(document.createElement('br'));

    // Create Y position slider
    const posYLabel = document.createElement('label');
    posYLabel.innerText = 'Y Position: ';
    const posYSlider = document.createElement('input');
    posYSlider.type = 'range';
    posYSlider.id = 'chatPosY';
    posYSlider.min = `-${window.innerHeight}`;
    posYSlider.max = `${window.innerHeight}`;
    posYSlider.value = chatboxPosY;
    posYLabel.appendChild(posYSlider);
    settingsModal.appendChild(posYLabel);
    settingsModal.appendChild(document.createElement('br'));

    // Create apply button
    const applyButton = document.createElement('button');
    applyButton.innerText = 'Apply';
    applyButton.id = 'applySettings';
    settingsModal.appendChild(applyButton);

    // Create reset button
    const resetButton = document.createElement('button');
    resetButton.innerText = 'Reset';
    resetButton.id = 'resetSettings';
    settingsModal.appendChild(resetButton);

    document.body.appendChild(settingsModal);

    // Handle settings button click (open modal)
    const settingsButton = document.createElement('button');
    settingsButton.innerText = '⚙';
    settingsButton.style.position = 'fixed';
    settingsButton.style.top = '2%';
    settingsButton.style.right = '2%';
    settingsButton.style.zIndex = '10000';
    settingsButton.style.display = 'none';
    settingsButton.addEventListener('click', () => {
        settingsModal.style.display = 'block';
    });

    document.body.appendChild(settingsButton);

    // Update iframe settings in real-time
    function updateChatbox() {
        const iframe = document.querySelector('iframe#chatframe');
        if (iframe) {
            iframe.style.width = `${chatboxWidth}px`;
            iframe.style.height = `${chatboxHeight}px`;
            iframe.style.position = 'fixed';
            iframe.style.left = `${(window.innerWidth / 2) + parseInt(chatboxPosX)}px`;
            iframe.style.top = `${(window.innerHeight / 2) + parseInt(chatboxPosY)}px`;
            iframe.style.opacity = chatboxOpacity;
            iframe.style.borderRadius = '12px';
            applyStyles();
        }
    }

    // Handle apply button click
    applyButton.addEventListener('click', () => {
        // Update settings
        chatboxWidth = widthInput.value;
        chatboxHeight = heightInput.value;
        chatboxOpacity = opacitySlider.value;
        backgroundColor = bgColorInput.value;
        backgroundOpacity = bgOpacitySlider.value;
        chatboxPosX = posXSlider.value;
        chatboxPosY = posYSlider.value;

        // Save settings to localStorage
        localStorage.setItem('chatboxWidth', chatboxWidth);
        localStorage.setItem('chatboxHeight', chatboxHeight);
        localStorage.setItem('chatboxOpacity', chatboxOpacity);
        localStorage.setItem('backgroundColor', backgroundColor);
        localStorage.setItem('backgroundOpacity', backgroundOpacity);
        localStorage.setItem('chatboxPosX', chatboxPosX);
        localStorage.setItem('chatboxPosY', chatboxPosY);

        settingsModal.style.display = 'none';
        updateChatbox();
    });

    // Handle reset settings
    resetButton.addEventListener('click', () => {
        localStorage.removeItem('chatboxWidth');
        localStorage.removeItem('chatboxHeight');
        localStorage.removeItem('chatboxOpacity');
        localStorage.removeItem('backgroundColor');
        localStorage.removeItem('backgroundOpacity');
        localStorage.removeItem('chatboxPosX');
        localStorage.removeItem('chatboxPosY');

        // Reset to defaults
        chatboxWidth = 350;
        chatboxHeight = 600;
        chatboxOpacity = 0.65;
        backgroundColor = '#000000';
        backgroundOpacity = 0.5;
        chatboxPosX = 420;
        chatboxPosY = -320;

        // Update UI elements
        widthInput.value = chatboxWidth;
        heightInput.value = chatboxHeight;
        opacitySlider.value = chatboxOpacity;
        bgColorInput.value = backgroundColor;
        bgOpacitySlider.value = backgroundOpacity;
        posXSlider.value = chatboxPosX;
        posYSlider.value = chatboxPosY;

        updateChatbox(); // Apply reset settings
    });

    // Handle slider inputs for real-time updates
    opacitySlider.addEventListener('input', () => {
        chatboxOpacity = opacitySlider.value;
        updateChatbox();
    });

    bgOpacitySlider.addEventListener('input', () => {
        backgroundOpacity = bgOpacitySlider.value;
        updateChatbox();
    });

    bgColorInput.addEventListener('input', () => {
        backgroundColor = bgColorInput.value;
        updateChatbox();
    });

    widthInput.addEventListener('input', () => {
        chatboxWidth = widthInput.value;
        updateChatbox();
    });

    heightInput.addEventListener('input', () => {
        chatboxHeight = heightInput.value;
        updateChatbox();
    });

    posXSlider.addEventListener('input', () => {
        chatboxPosX = posXSlider.value;
        updateChatbox();
    });

    posYSlider.addEventListener('input', () => {
        chatboxPosY = posYSlider.value;
        updateChatbox();
    });

    // Function to adjust slider value with scroll wheel
    function adjustSliderValue(slider, delta) {
        const step = parseFloat(slider.step) || 10;
        const min = parseFloat(slider.min) || 0;
        const max = parseFloat(slider.max) || 100;
        let value = parseFloat(slider.value) || 0;

        value += delta * step;
        if (value < min) value = min;
        if (value > max) value = max;

        slider.value = value;
        slider.dispatchEvent(new Event('input'));
    }

    // Handle mouse scroll on sliders
    document.querySelectorAll('input[type="range"]').forEach(slider => {
        slider.addEventListener('wheel', event => {
            event.preventDefault();
            const delta = Math.sign(event.deltaY) * -1;
            adjustSliderValue(slider, delta);
        });

        // Handle arrow key controls on sliders
        slider.addEventListener('keydown', event => {
            if (event.key === 'ArrowUp' && slider.id === 'chatPosY') {
                adjustSliderValue(slider, -1);
            } else if (event.key === 'ArrowDown' && slider.id === 'chatPosY') {
                adjustSliderValue(slider, 1);
            } else if (event.key === 'ArrowLeft' && slider.id === 'chatPosX') {
                adjustSliderValue(slider, -1);
            } else if (event.key === 'ArrowRight' && slider.id === 'chatPosX') {
                adjustSliderValue(slider, 1);
            } else if ((event.key === 'ArrowUp' || event.key === 'ArrowRight') && slider.id !== 'chatPosX' && slider.id !== 'chatPosY') {
                adjustSliderValue(slider, 1);
            } else if ((event.key === 'ArrowDown' || event.key === 'ArrowLeft') && slider.id !== 'chatPosX' && slider.id !== 'chatPosY') {
                adjustSliderValue(slider, -1);
            }
        });
    });

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

        const isFullscreen = document.fullscreenElement;

        if (isFullscreen) {
            updateChatbox();
            applyStyles();
            settingsButton.style.display = 'block';
        } else {
            settingsButton.style.display = 'none';
            settingsModal.style.display = 'none';
            // Reset to default values (do not remove saved settings)
            iframe.style.width = '';
            iframe.style.height = '';
            iframe.style.position = '';
            iframe.style.left = '';
            iframe.style.top = '';
            iframe.style.opacity = '';
        }
    }

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

    // Initial chatbox update
    updateChatbox();
    applyStylesOnLoad();
})();