☰

Twitch fullscreen with comments

Enter fullscreen mode with comments UI overlayed on the side with opacity

// ==UserScript==
// @name         Twitch fullscreen with comments
// @version      0.1
// @description  Enter fullscreen mode with comments UI overlayed on the side with opacity
// @author       SirMrDexter
// @match        https://www.twitch.tv/*
// @grant        none
// @namespace    https://greasyfork.org/en/users/445070-sirmrdexter
// ==/UserScript==

/*jshint esversion: 6 */

(function(history) {
    'use strict';
    // override history to fire event
    const pushState = history.pushState;
    history.pushState = function(state) {
        if (typeof history.onpushstate == "function") {
            history.onpushstate({state: state});
        }
        // ... whatever else you want to do
        // maybe call onhashchange e.handler
        return pushState.apply(history, arguments);
    };

    const appendCss = () => {
        const css = `.fullscreen-video-wrapper{
position: relative;
width: 100%;
height: 100%;
}
.fullscreen-video-wrapper .chat-room {
position: absolute;
right:0;
top:15%;
width: 300px !important;
opacity: 0.4;
height:50%;
transition: opacity .25s ease-in-out;
}
.fullscreen-video-wrapper .chat-room:hover {
opacity: 1;
}
`,
            head = document.head || document.getElementsByTagName('head')[0],
            style = document.createElement('style');

        head.appendChild(style);

        style.type = 'text/css';
        if (style.styleSheet){
            // This is required for IE8 and below.
            style.styleSheet.cssText = css;
        } else {
            style.appendChild(document.createTextNode(css));
        }
    };
    appendCss();

    let maxTries = 10;
    console.log('Twitch fullscreen with comments - enabled');

    let checkInterval = 0;
    const myWrapperDiv = document.createElement('div');
    myWrapperDiv.id = 'myWrapperDiv';
    myWrapperDiv.className = 'fullscreen-video-wrapper';
    let chatRoomPanel, chatRoomOrigParent;

    function initialize() {
        const videoContainer = document.querySelector('.persistent-player .video-player div.video-player__container');
        if (videoContainer && videoContainer.firstElementChild && (myWrapperDiv === videoContainer.firstElementChild || videoContainer.firstElementChild.tagName == 'VIDEO')) {
            clearInterval(checkInterval);
        } else {
            console.log('Stream not found!!!');
            if (maxTries-- === 0) {
                console.log('Done with retrying.');
                clearInterval(checkInterval);
            }
            // If elements don't match do nothing and wait.
            return;
        }
        console.log('Found stream applying mods');
        const videoEle = videoContainer.querySelector('video');
        const playerControls = document.querySelector('.tw-justify-content-end');
        const originalFullScreenButton = document.querySelector('.player-controls .tw-justify-content-end [data-a-target="player-fullscreen-button"]');
        var clonedFullScreenButton = originalFullScreenButton.cloneNode(true);
        originalFullScreenButton.parentElement.insertBefore(clonedFullScreenButton, originalFullScreenButton);
        clonedFullScreenButton.parentElement.removeChild(originalFullScreenButton);
        if (myWrapperDiv.parentElement !== videoContainer) {
            videoContainer.insertBefore(myWrapperDiv, videoEle);
        }
        myWrapperDiv.appendChild(videoEle);
        // Add fullscreen event
        clonedFullScreenButton.addEventListener('click', (event) => {
            myWrapperDiv.requestFullscreen().then((success)=> {
                console.log('Fullscreen activated');
            });
        });
        // swap chat panel on full screen
        chatRoomPanel = document.querySelector('.chat-room');
        chatRoomOrigParent = chatRoomPanel.parentElement;
    }

    document.addEventListener('fullscreenchange', (event) => {
        if (document.fullscreenElement) {
            myWrapperDiv.appendChild(chatRoomPanel);
            console.log('Moved chat into fullscreen');
        } else {
            chatRoomOrigParent.appendChild(chatRoomPanel);
            console.log('Moved chat out of fullscreen');
        }
    });

    checkInterval = setInterval(initialize, 1000);
    history.onpushstate = () => {
        clearInterval(checkInterval);
        maxTries = 10;
        checkInterval = setInterval(initialize, 1000);
    };
})(window.history);