Twitch Chat User Highlight

Highlights messages by user, on username or @username click
As of 23.01.2021. See ბოლო ვერსია.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Twitch Chat User Highlight
// @namespace    1N07
// @version      0.3
// @description  Highlights messages by user, on username or @username click
// @author       1N07
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
// @include      https://www.twitch.tv*
// @grant        none
// @noframes
// ==/UserScript==

(function() {
    'use strict';


    //==================== SETTINGS START ====================//
    //========================================================//

           var AutoStopHighlightAfterXSeconds = 15; //0 = never

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


    var ChatList, MutUser, ChatGetInterval, AutoHighlightStopTimeout;
    const MutConf = {childList: true};
    const Observer = new MutationObserver(OnNewComment);

    addGlobalStyle(`
        .tcuh-highlighted {
            border: rgba(255,255,255,0.5) 2px solid;
            background: rgba(255,255,255,0.15);
        }
        .chat-line__message-mention, .mention-fragment, .mentioning
        {
            cursor: pointer;
            font-weight: 700;
        }
    `);


    var lastCheckedUrl = window.location.href;
    OnPageLoad();

    setInterval(() => {
        if(lastCheckedUrl != window.location.href)
        {
            lastCheckedUrl = window.location.href;
            OnPageLoad();
        }
    }, 200);


    function OnPageLoad()
    {
        Initialize();
        AfterChatIsAvailable(() => {
            StartClickListener();
        });
    }







    function Initialize()
    {
        if(ChatGetInterval)
            clearInterval(ChatGetInterval);

        if(ChatList && ChatList.length > 0)
            ChatList.off();

        MutUser = ChatList = ChatGetInterval = null;
        StopHighlightingUsers();
    }

    function AfterChatIsAvailable(callback)
    {
        ChatGetInterval = setInterval(() => {
            ChatList = $("div.video-chat__message-list-wrapper > div > ul");
            if(ChatList.length == 0) ChatList = $(".chat-scrollable-area__message-container");
            if(ChatList.length > 0)
            {
                callback();
                clearInterval(ChatGetInterval);
            }
        }, 50);
    }

    function StartClickListener()
    {
        ChatList.on("click", ".video-chat__message-author, .chat-line__username", function(e){
            e.preventDefault();
            e.stopPropagation();

            let user = $(this).closest(".chat-line__message[data-user]");
            if(user.length == 0) user = $(this).find(".chat-author__display-name");

            user = user.data("user") || user.data("aUser");
            StartHighlightingUser(user);
        });
        ChatList.on("click", ".chat-line__message-mention, .mention-fragment, .mentioning", function(e){
            e.preventDefault();
            e.stopPropagation();
            let user = $(this).data("login") || $(this).text().replace("@", "").toLowerCase();
            StartHighlightingUser(user);
        });
    }

    function StartHighlightingUser(user)
    {
        if(user && user.length > 0)
        {
            StopHighlightingUsers(false);
            if(user == MutUser)
                MutUser = null;
            else
            {
                MutUser = user;

                let targets = ChatList.find(".chat-line__message[data-user='"+MutUser+"']");
                if(targets.length > 0)
                {
                    targets.each(function(e){
                        $(this).addClass("tcuh-highlighted");
                    });
                }
                else
                {
                    ChatList.find(".chat-author__display-name[data-a-user='"+MutUser+"']").each(function(e){
                        let target = $(this).closest("li.tw-full-width");
                        if(target.length == 0) target = $(this).closest(".chat-line__message");
                        if(target.length > 0) target.addClass("tcuh-highlighted");
                    });
                }

                Observer.observe(ChatList[0], MutConf);

                if(AutoStopHighlightAfterXSeconds > 0)
                    StartHighlightAutoStopTimer();
            }
        }
    }

    function StartHighlightAutoStopTimer()
    {
        clearTimeout(AutoHighlightStopTimeout);
        AutoHighlightStopTimeout = setTimeout(StopHighlightingUsers, AutoStopHighlightAfterXSeconds * 1000);
    }

    function StopHighlightingUsers(alsoClearMutUser = true)
    {
        if(alsoClearMutUser)
            MutUser = null;
        $(".tcuh-highlighted").removeClass("tcuh-highlighted");
        Observer.disconnect();
    }

    function OnNewComment(mutationsList, observer)
    {
        for(let i = 0; i < mutationsList.length; i++)
        {
            if(mutationsList[i].type == 'childList' && mutationsList[i].addedNodes.length > 0)
            {
                for(let j = 0; j < mutationsList[i].addedNodes.length; j++)
                {
                    if($(mutationsList[i].addedNodes[j]).find(".chat-author__display-name[data-a-user='"+MutUser+"']").length > 0)
                        $(mutationsList[i].addedNodes[j]).addClass("tcuh-highlighted");
                    else if($(mutationsList[i].addedNodes[j]).data("user") == MutUser)
                        $(mutationsList[i].addedNodes[j]).addClass("tcuh-highlighted");
                }
            }
        }
    }

    function addGlobalStyle(css)
    {
        var head, style;
        head = document.getElementsByTagName('head')[0];
        if (!head) { return; }
        style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = css;
        head.appendChild(style);
    }

})();