☰

Youtube live, Simple Chat Stylizer

Possible to change config in source code. Keep to display moderator chat in a while.

目前為 2020-10-02 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         Youtube live, Simple Chat Stylizer
// @name:ja      Youtube live, シンプルスタイル
// @description  Possible to change config in source code. Keep to display moderator chat in a while.
// @description:ja スクリプトのソース内で設定変更できます。モデレータチャットを一定時間、表示し続けます。
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  try to take over the world!
// @author       You
// @match        https://www.youtube.com/live_chat*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // ================
    // config
    // ================

    // if true, author name is hide
    var isHideAuthorName = false;
    // if true, author name is display to right side in chat window
    var isAuthorNameRightSide = true;
    var authorNameMaxWidth = 100;
    // if true, user thumbnail is hide
    var isHideThumbnail = false;
    // if true, member badge is hide
    var isHideBadge = false;
    // if true, input panel is hide (you can't post chat / super chat)
    var isHideFooter = false;
    // if true, header is hide
    var isHideHeader = true;
    // if true, show/hidden toggle button is hide
    var isHideToggleButton = false;
    // number of seconds moderator chat is display
    var moderatorChatTimeout = 20;

    // ================

    setTimeout(function () {
        var stylesheet = "";

        // bold
        stylesheet += "#message.yt-live-chat-text-message-renderer { font-weight: bold; }";

        // simple #input-panel styles
        stylesheet += "yt-live-chat-message-input-renderer { padding: 4px 16px; }";
        stylesheet += "#input-panel #container { position: relative; }";
        stylesheet += "#input-panel #container > #buttons { position: absolute; top: 0; right: 0; transform: scale(0.8); margin: 0; }";

        if (isHideAuthorName) {
            stylesheet += "#author-name.yt-live-chat-author-chip { display: none; }";
        } else if (isAuthorNameRightSide) {
            stylesheet += "#content #author-name.yt-live-chat-author-chip { position: absolute; right: 10px; top: 0px; opacity: 0.7; transform: scale(0.8); }";
        } else {
            stylesheet += "#author-name.yt-live-chat-author-chip { max-width: " + authorNameMaxWidth + "px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }";
        }
        if (isHideThumbnail) {
            stylesheet += "#author-photo { display: none !important; }";
        }
        if (isHideBadge) {
            stylesheet += "#chat-badges { display: none !important; }";
        }
        if (isHideFooter) {
            stylesheet += "#panel-pages { display: none !important; }";
        }
        if (isHideHeader) {
            stylesheet += "yt-live-chat-header-renderer { display: none !important; }";
        }
        if (isHideToggleButton) {
            stylesheet += "#show-hide-button.ytd-live-chat-frame { display: none !important; }";
        }

        // moderator chats is fixed to bottom in chat window
        stylesheet += "#moderator-chat-container { position: fixed; bottom: 0; background: #fff; left: 0; right: 0; z-index: 10000; }";

        // apply style
        var $style = document.createElement("style");
        $style.innerText = stylesheet;
        document.body.appendChild($style);

        // fix moderator chat
        var $container = document.createElement("div");
        $container.id = "moderator-chat-container";
        document.querySelector("yt-live-chat-item-list-renderer #contents").appendChild($container);

        setInterval(observeModerator, 2000);
    }, 5000);

    function appendModeratorChat($chat) {
        document.querySelector("#moderator-chat-container").appendChild($chat);
        setTimeout(function () {
            $chat.remove();
        }, moderatorChatTimeout * 1000);
    }

    function observeModerator() {
        var $chats = document.querySelectorAll("yt-live-chat-text-message-renderer[author-type='moderator']");
        for (var i = 0; i < $chats.length; i++) {
            appendModeratorChat($chats[i]);
        }
    }
})();