☰

Live Chat on YouTube Mobile

Integrates the live chat into the mobile version of YouTube

// ==UserScript==
// @name         Live Chat on YouTube Mobile
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Integrates the live chat into the mobile version of YouTube
// @match        https://m.youtube.com/*
// @grant        none
// @license       MIT
// ==/UserScript==

(function() {
    'use strict';

    // Create a button to show/hide the chat
    const button = document.createElement('button');
    button.innerText = 'Show Live Chat';
    button.style.position = 'fixed';
    button.style.bottom = '64px'; // Adjust the position
    button.style.right = '20px';
    button.style.zIndex = '9999'; // Ensures the button is always on top
    button.style.padding = '10px';
    button.style.backgroundColor = '#ff0000';
    button.style.color = '#fff';
    button.style.border = 'none';
    button.style.borderRadius = '5px';
    button.style.cursor = 'pointer';

    // Add the button to the document body
    document.body.appendChild(button);

    // Create a container for the chat
    const chatContainer = document.createElement('div');
    chatContainer.style.display = 'none'; // Hidden by default
    chatContainer.style.position = 'absolute'; // Use absolute positioning to place it below the video
    chatContainer.style.width = 'calc(100% - 4px)'; // Adjust width to fill the screen minus the margin
    chatContainer.style.height = '400px'; // Adjust height
    chatContainer.style.border = '1px solid #ccc';
    chatContainer.style.backgroundColor = '#fff';
    chatContainer.style.zIndex = '1000'; // Ensure the chat is below the button
    chatContainer.style.overflow = 'auto'; // Allow scrolling if the chat is long
    chatContainer.style.marginLeft = '2px'; // 2px margin on the left
    chatContainer.style.marginRight = '2px'; // 2px margin on the right

    // Create the iframe for the chat
    const chatIframe = document.createElement('iframe');
    chatIframe.style.width = '100%';
    chatIframe.style.height = '100%';
    chatIframe.style.border = 'none';
    chatIframe.style.maxWidth = '100%'; // Ensure the iframe doesn't overflow the container

    // Function to toggle the chat visibility
    button.onclick = function() {
        if (chatContainer.style.display === 'none') {
            const videoIdMatch = window.location.search.match(/v=([^&]+)/);
            if (videoIdMatch) {
                const videoId = videoIdMatch[1];
                chatIframe.src = `https://www.youtube.com/live_chat?v=${videoId}&embed_domain=${window.location.hostname}`;
                chatContainer.appendChild(chatIframe);
                document.body.appendChild(chatContainer); // Append the chat container to the body

                // Position the chat below the video player
                const videoPlayer = document.querySelector('video');
                if (videoPlayer) {
                    const videoRect = videoPlayer.getBoundingClientRect();
                    chatContainer.style.top = `${videoRect.bottom + window.scrollY}px`; // Position the chat just below the video
                }

                chatContainer.style.display = 'block'; // Show the chat container
                button.innerText = 'Hide Live Chat'; // Change the button text to "Hide Live Chat"

                // Adjust the text size of the chat messages
                chatIframe.onload = function() {
                    const iframeDocument = chatIframe.contentWindow.document;
                    const style = iframeDocument.createElement('style');
                    style.textContent = `
                        .style-scope.yt-live-chat-text-message-renderer {
                            font-size: 12px !important; /* Reduce the text size */
                        }
                        .style-scope.yt-live-chat-text-message-renderer #author-name {
                            font-size: 12px !important; /* Reduce the author name size */
                        }
                    `;
                    iframeDocument.head.appendChild(style);
                };
            } else {
                alert('Could not find the video ID.');
            }
        } else {
            chatContainer.style.display = 'none'; // Hide the chat container
            button.innerText = 'Show Live Chat'; 
        }
    };

})();