Twitch fullscreen with comments

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

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

You will need to install an extension such as Tampermonkey to install this script.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name         Twitch fullscreen with comments
// @namespace    @ngokimphu
// @version      1.0.0
// @description  Enter fullscreen mode with comments UI overlayed on the side with opacity
// @author       SirMrDexter, NgoKimPhu
// @match        https://www.twitch.tv/*
// @grant        GM_addStyle
// @license      GPL-3.0-or-later
// ==/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});
        }
        return pushState.apply(history, arguments);
    };

    GM_addStyle(`
        .video-player__container .chat-room {
            position: absolute;
            right: 0;
            top: 15%;
            width: 300px !important;
            height: 50%;
            opacity: .4;
            transition: opacity .25s ease-in-out;
        }
        .video-player__container .chat-room:hover {
            opacity: 1;
        }
    `);

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

    let checkInterval = 0;
    let videoContainer, videoRef, chatRoomPanel, chatRoomOrigParent;

    function initialize() {
        if ((videoContainer = document.querySelector('.persistent-player .video-player div.video-player__container')) &&
              videoContainer.querySelector('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');

        videoRef = videoContainer.querySelector('video').parentElement;
        chatRoomPanel = document.querySelector('.chat-room');
        chatRoomOrigParent = chatRoomPanel.parentElement;
    }

    // swap chat panel on full screen
    document.addEventListener('fullscreenchange', (event) => {
        if (event.target == videoContainer) {
            (document.fullscreenElement ? videoRef : chatRoomOrigParent).appendChild(chatRoomPanel);
        } else {
            console.log('unexpected fullscreen element, event:', event);
        }
    });

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