☰

Twitch Move Stream Info and Title

Move the stream information, the stream title below the video player.

// ==UserScript==
// @name         Twitch Move Stream Info and Title
// @namespace    https://www.twitch.tv/
// @version      1.0
// @description  Move the stream information, the stream title below the video player.
// @author       elanis
// @match        https://www.twitch.tv/*
// @grant        none
// @icon         https://www.google.com/s2/favicons?sz=64&domain=twitch.tv
// @license      Ns
// ==/UserScript==

(function () {
    'use strict';

    // Function to move the element to the desired location
    const moveStreamInfo = () => {
        const streamInfo = document.querySelector('#live-channel-stream-information-upper');
        const channelPlayer = document.querySelector('#channel-player');
        const layoutElement = document.querySelector('.Layout-sc-1xcs6mc-0.haGrcr');

        if (streamInfo && channelPlayer && layoutElement) {
            // Move the element to the desired location
            layoutElement.parentNode.insertBefore(streamInfo, layoutElement);
            console.log('Element successfully moved.');
        } else {
            console.warn('Not all the necessary elements were found.');
        }
    };

    // Wait until the DOM is fully loaded and the target element exists
    const observer = new MutationObserver(() => {
        if (
            document.querySelector('#live-channel-stream-information-upper') &&
            document.querySelector('#channel-player') &&
            document.querySelector('.Layout-sc-1xcs6mc-0.haGrcr') &&
            document.querySelector('.Layout-sc-1xcs6mc-0.ScChannelStatusTextIndicatorMask-sc-qtgrnb-1.bTYBPF.gwpTZy')
        ) {
            observer.disconnect(); // Stop the observer once the elements are available
            moveStreamInfo(); // Call function to move the element
        }
    });

    // Starts the observer
    observer.observe(document, { childList: true, subtree: true });
})();