Twitch, Display sidebar on theater mode

Display sidebar when mouseover player on theater mode
目前为 2023-01-09 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         Twitch, Display sidebar on theater mode
// @name:ja      Twitch, シアターモードでサイドバー表示
// @namespace    http://tampermonkey.net/
// @version      0.1.1
// @description  Display sidebar when mouseover player on theater mode
// @description:ja  シアターモードでプレイヤーへマウスオーバーしたときサイドバーを表示する
// @author       You
// @match        https://www.twitch.tv/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=twitch.tv
// @grant        GM.addStyle
// ==/UserScript==
(function() {
    'use strict';
    var classNames = {
        displaySidebar: "display-sidebar-on-theater-mode"
    }

    function isTheaterMode () {
        return !!document.querySelector(".channel-root__scroll-area--theatre-mode");
    }

    function isPlayerOverlay(e) {
        return (e.getAttribute && e.getAttribute("data-a-target") == "player-overlay-click-handler") || e.id == "root";
    }

    function isSidebar(e) {
        return e.getAttribute && e.getAttribute("data-test-selector") == "side-nav";
    }

    function isTopBar(e) {
        return e.classList && e.classList.contains && e.classList.contains("top-bar");
    }

    function setClass(active) {
        if (active == null) {
            document.body.classList.toggle(classNames.displaySidebar);
        } else if (active) {
            document.body.classList.add(classNames.displaySidebar);
        } else {
            document.body.classList.remove(classNames.displaySidebar);
        }
    }

    var timer = -1;

    function active() {
        timer = clearTimeout(timer);
        setClass(true);
        timer = setTimeout(() => {
            inactive();
        }, 5000);
    }

    function inactive() {
        timer = clearTimeout(timer);
        setClass(false);
    }

    window.addEventListener("load", () => {
        window.addEventListener("mouseover", ev => {
            if (ev.path.find(e => isPlayerOverlay(e) || isSidebar(e) || isTopBar(e))) {
                if (isTheaterMode()) {
                    active();
                } else {
                    inactive();
                }
            }
        });

        window.addEventListener("mousemove", ev => {
            if (timer > 0 && isTheaterMode()) {
                active();
            }
        });

        window.addEventListener("mouseout", ev => {
            if (ev.path.find(e => isPlayerOverlay(e) || isSidebar(e) || isTopBar(e))) {
                inactive();
            }
        });
    });

    GM.addStyle(`
.display-sidebar-on-theater-mode [data-test-selector="side-nav"] {
    position: relative;
    z-index: 10000;
}
.display-sidebar-on-theater-mode [data-a-target="top-nav-container"] {
    height: 0 !important;
}
.display-sidebar-on-theater-mode .tw-card {
    margin-left: 5em;
}
.display-sidebar-on-theater-mode #channel-player {
    padding-left: 5em;
}
    `);
    // Your code here...
})();
欢迎访问Greasy Fork镜像
