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.2
// @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 active(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);
        }
    }

    window.addEventListener("load", () => {
        var timer = 0;
        var target = document.querySelector('[data-test-selector="video-player__video-container"]');

        target.addEventListener("mouseover", ev => {
            if (isTheaterMode()) {
                active(true);
                timer = setTimeout(() => {
                    timer = clearTimeout(timer);
                    active(false);
                }, 5000);
            } else {
                active(false);
                timer = clearTimeout(timer);
            }
        });

        target.addEventListener("mouseout", ev => {
            active(false);
            timer = clearTimeout(timer);
        });
    });

    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;
}
    `);
    // Your code here...
})();
欢迎访问Greasy Fork镜像
