twitchmassban.user.js

// ==UserScript==
// @name          Twitch RaidHammer - Easily ban multiple accounts during hate raids
// @description   A tool for moderating Twitch easier during hate raids
// @namespace     https://github.com/victornpb/twitch-mass-ban
// @version       1.1.4
// @match         *://*.twitch.tv/*
// @run-at        document-idle
// @author        victornpb
// @homepageURL   https://github.com/victornpb/twitch-mass-ban
// @supportURL    https://github.com/victornpb/twitch-mass-ban/discussions
// @contributionURL https://www.buymeacoffee.com/vitim
// @grant         none
// @license       MIT
// ==/UserScript==

/* jshint esversion: 8 */

(function () {
    var html = /*html*/`
    <div class="raidhammer">
    <style>
        .raidhammer {
            position: fixed;
            bottom: 10px;
            right: 350px;
            z-index: 99999999;
            background-color: var(--color-background-base);
            color: var(--color-text-base);
            border: var(--border-width-default) solid var(--color-border-base);
            box-shadow: var(--shadow-elevation-2);
            padding: 5px;
            min-width: 300px;
        }


        .raidhammer .header {
            display: flex;
        }

        .raidhammer .logo {
            font-weight: var(--font-weight-semibold);
            min-height: 30px;
            line-height: 30px;
            --color: var(--color-text-link);
        }

        .raidhammer h6 {
            color: var(--color-hinted-grey-7);
        }

        .raidhammer h6 button {
            height: auto;
            background: none;
        }

        .raidhammer .list {
            padding: 8px;
            min-height: 8em;
            max-height: 500px;
            overflow-y: auto;
            background: var(--color-background-body);
        }

        .raidhammer .list span {
            font-weight: var(--font-weight-semibold);
        }

        .raidhammer .empty {
            padding: 2em;
            text-align: center;
            opacity: 0.85;
        }

        .raidhammer button {
            padding: 0 .5em;
            margin: 1px;
            font-weight: var(--font-weight-semibold);
            border-radius: var(--border-radius-medium);
            font-size: var(--button-text-default);
            height: var(--button-size-default);
            background-color: var(--color-background-button-secondary-default);
            color: var(--color-text-button-secondary);
            min-width: 30px;
            text-align: center;
        }

        .raidhammer button.ban {
            var(--color-text-button-primary);
            background: #f44336;
            min-width: 60px;
        }

        .raidhammer button.banAll {
            var(--color-text-button-primary);
            background: #f44336;
            min-width: 60px;
        }

        .raidhammer .import {
            background: var(--color-background-body);
            border: var(--border-width-default) solid var(--color-border-base);
            padding: 3px;
        }

        .raidhammer textarea {
            background: var(--color-background-base);
            color: var(--color-text-base);
            padding: .5em;
            font-size: 10pt;
            width: 100%;
            min-height: 8em;
        }

        .raidhammer .footer {
            font-size: 7pt;
            text-align: center;
        }
    </style>
    <div class="header">
        <span style="flex-grow: 1;"></span>
        <h5 class="logo">
            <a href="https://github.com/victornpb/twitch-mass-ban" target="_blank">RaidHammer</a>
            <samp>1.1.3</samp>
        </h5>
        <span style="flex-grow: 1;"></span>
        <button class="closeBtn">X</button>
    </div>
    <div class="import" style="display:none;">
        <div>Mass BAN</div>
        <textarea placeholder="Type one username per line"></textarea>
        <div style="text-align:right;">
            <button class="cancelBtn">Cancel</button>
            <button class="importBtn">Add to list</button>
        </div>
    </div>
    <div class="body">
        <h6>
            Usernames
        </h6>
        <div class="list"></div>
        <div style="display: flex; margin: 5px;">
            <span style="flex-grow: 1;"></span>
            <button class="ignoreAll">Ignore All</button>
            <button class="banAll">Ban All</button>
        </div>
    </div>
    <div class="footer"><a href="https://github.com/victornpb/twitch-mass-ban/issues" target="_blank">Issues or help</a>
    </div>
</div>
`;
    const LOGPREFIX = '[RAIDHAMMER]';

    // modal
    const d = document.createElement("div");
    d.style.display = 'none';
    d.innerHTML = html;
    const textarea = d.querySelector("textarea");

    // activation button
    const activateBtn = document.createElement('button');
    activateBtn.innerHTML = `
      <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 1280 1280" style="fill: currentcolor;">
        <path d="M517 1c-16 3-28 10-41 22l-10 10 161 160 161 161 2-2c6-4 17-19 21-25 10-19 12-44 4-64-6-14-5-13-120-129L576 17c-8-7-18-12-27-15-8-1-25-2-32-1zM249 250 77 422l161 161 161 161 74-74 74-75 18 19 18 18-2 4c-4 6-4 14-1 20a28808 28808 0 0 0 589 621c4 2 6 3 13 3 6 0 8-1 13-3 6-4 79-77 82-83 4-9 4-21-2-29l-97-93-235-223-211-200c-51-47-73-68-76-69-6-3-13-3-19 0l-5 3-18-18-18-18 74-74 74-74-161-161L422 77 249 250zM23 476a75 75 0 0 0-10 95c4 6 219 222 231 232 8 7 16 11 26 14 6 2 10 2 22 2s14 0 22-2l14-6c5-4 20-16 24-21l2-2-161-161L32 466l-9 10z"/>
      </svg>
    `;
    activateBtn.style.cssText = `
        display: inline-flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        user-select: none;
        height: var(--button-size-default);
        width: var(--button-size-default);
        border-radius: var(--border-radius-medium);
        background-color: var(--color-background-button-text-default);
        color: var(--color-fill-button-icon);
    `;
    activateBtn.setAttribute('title', 'RaidHammer');
    activateBtn.onclick = toggle;

    let enabled;
    let watchdogTimer;

    function appendActivatorBtn() {
        const modBtn = document.querySelector('[data-test-selector="mod-view-link"]');
        if (modBtn) {
            const twitchBar = modBtn.parentElement.parentElement.parentElement;
            if (twitchBar && !twitchBar.contains(activateBtn)) {
                console.log(LOGPREFIX, 'Mod tools available. Adding button...');
                twitchBar.insertBefore(activateBtn, twitchBar.firstChild);
                document.body.appendChild(d);
                if (!enabled) {
                    console.log(LOGPREFIX, 'Started chatWatchdog...');
                    watchdogTimer = setInterval(chatWatchdog, 500);
                    enabled = true;
                }
            }

        } else if (document.location.toString().includes('/moderator/')){
            const chatBtn = document.querySelector('[data-a-target="chat-send-button"]');
            const twitchBar = chatBtn.parentElement.parentElement.parentElement;
            if (twitchBar && !twitchBar.contains(activateBtn)) {
                console.log(LOGPREFIX, 'Mod tools available. Adding button...');
                twitchBar.insertBefore(activateBtn, twitchBar.firstChild);
                document.body.appendChild(d);
                if (!enabled) {
                    console.log(LOGPREFIX, 'Started chatWatchdog...');
                    watchdogTimer = setInterval(chatWatchdog, 500);
                    enabled = true;
                }
            }
        }
        else {
            if (enabled) {
                console.log(LOGPREFIX, 'Mod tools not found. Stopped chatWatchdog!');
                clearInterval(watchdogTimer);
                watchdogTimer = enabled = false;
                hide();
            }
        }
    }
    setInterval(appendActivatorBtn, 5000);


    //events
    d.querySelector(".ignoreAll").onclick = ignoreAll;
    d.querySelector(".banAll").onclick = banAll;
    d.querySelector(".closeBtn").onclick = hide;

    d.querySelector(".import button.importBtn").onclick = importList;
    d.querySelector(".import button.cancelBtn").onclick = toggleImport;

    // delegated events
    d.addEventListener('click', e => {
        const target = e.target;
        if (target.matches('.ignore')) ignoreItem(target.dataset.user);
        if (target.matches('.ban')) banItem(target.dataset.user);
        if (target.matches('.accountage')) accountage(target.dataset.user);
        if (target.matches('.toggleImport')) toggleImport();

    });

    const delay = t => new Promise(r => setTimeout(r, t));

    function show() {
        console.log(LOGPREFIX, 'Show');
        d.style.display = '';
        renderList();
    }

    function hide() {
        console.log(LOGPREFIX, 'Hide');
        d.style.display = 'none';
    }

    function toggle() {
        if (d.style.display !== 'none') hide();
        else show();
    }

    function toggleImport() {
        const importDiv = d.querySelector(".import");
        const body = d.querySelector(".body");
        if (importDiv.style.display !== 'none') {
            importDiv.style.display = 'none';
            body.style.display = '';
        }
        else {
            importDiv.style.display = '';
            body.style.display = 'none';
            d.querySelector(".import textarea").focus();
        }
    }

    function importList() {
        const textarea = d.querySelector(".import textarea");
        const lines = textarea.value.split(/\n/).map(line => line.trim()).filter(Boolean);
        for (const line of lines) {
            if (/^[\w_]+$/.test(line)) queueList.add(line);
        }
        textarea.value = '';
        toggleImport();
        renderList();
    }

    let queueList = new Set();
    let ignoredList = new Set();
    let bannedList = new Set();

    function chatWatchdog() {
        const recentNames = extractRecent();
        if (recentNames.length) {
            const newNames = recentNames
                .filter(name => !queueList.has(name))
                .filter(name => !ignoredList.has(name))
                .filter(name => !bannedList.has(name));

            if (newNames.length) {
                newNames.forEach(name => queueList.add(name));
                onFollower();
            }
        }
    }

    function parseChat() {
        return Array.from(document.querySelectorAll('[data-test-selector="chat-line-message"]')).map(chat => {
            return {
                username: chat.querySelector('[data-test-selector="message-username"]').innerText,
                message: chat.querySelector('[data-test-selector="chat-line-message-body"]').innerText,
                // timestamp: chat.querySelector('[data-test-selector="chat-timestamp"]').innerText,
            };
        });
    }

    function extractRecent() {
        let newFollowers = new Set();
        const messages = parseChat().filter(m => m.username === 'StreamElements' || m.username === 'Streamlabs');
        for (const { message } of messages) {
            const match = (
                message.match(/Thank you for following ([\w_]+)/) ||
                message.match(/Welcome! ([\w_]+) Thank you for following!/)
            );
            if (match) newFollowers.add(match[1]);
        }

        return [...newFollowers];
    }

    function onFollower() {
        console.log(LOGPREFIX, 'onFollower', queueList);
        renderList();
        show();
    }

    function ignoreAll() {
        console.log(LOGPREFIX, 'Ignoring all...', queueList);
        for (const user of queueList) {
            ignoreItem(user);
        }
    }

    async function banAll() {
        console.log(LOGPREFIX, 'Banning all...', queueList);
        for (const user of queueList) {
            banItem(user);
            await delay(250);
        }
    }

    function accountage(user) {
        console.log(LOGPREFIX, 'Accountage', user);
        sendMessage('!accountage ' + user);
    }

    function ignoreItem(user) {
        console.log(LOGPREFIX, 'Ignored user', user);
        queueList.delete(user);
        ignoredList.add(user);
        renderList();
        if (queueList.size === 0) hide(); // auto hide on the last
    }

    function banItem(user) {
        console.log(LOGPREFIX, 'Ban user', user);
        queueList.delete(user);
        bannedList.add(user);
        sendMessage('/ban ' + user);
        renderList();
    }

    function sendMessage(msg) {
        try{
            sendMessageOld(msg);
        }
        catch(_){
            sendMessageSlate(msg);
        }
    }

    function sendMessageOld(msg) {
        const textarea = document.querySelector("[data-a-target='chat-input']");
        const nativeTextAreaValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value").set;
        nativeTextAreaValueSetter.call(textarea, msg);
        const event = new Event('input', { bubbles: true });
        textarea.dispatchEvent(event);
        document.querySelector("[data-a-target='chat-send-button']").click();
    }

    function sendMessageSlate(msg) {
        function _injectInput(el, data) {
            [
                'keydown',
                'beforeinput',
                //'input',
            ].forEach((event, i) => {
                const eventObj = {
                    altKey: false,
                    charCode: 0,
                    ctrlKey: false,
                    metaKey: false,
                    shiftKey: false,
                    which: '',
                    keyCode: '',
                    data: data,
                    inputType: 'insertText',
                    key: data,
                };
                el.dispatchEvent(new InputEvent(event, eventObj));
            });
        }

        function _triggerKeyboardEvent(el, keyCode) {
            const eventObj = document.createEventObject ? document.createEventObject() : document.createEvent("Events");
            if (eventObj.initEvent) {
                eventObj.initEvent("keydown", true, true);
            }
            eventObj.keyCode = keyCode;
            eventObj.which = keyCode;
            el.dispatchEvent ? el.dispatchEvent(eventObj) : el.fireEvent("onkeydown", eventObj);
        }

        const editor = document.querySelector('[data-slate-editor="true"]');
        editor.focus();
        _injectInput(editor, msg);
        _triggerKeyboardEvent(editor, 13);
    }


    function renderList() {
        d.querySelector(".ignoreAll").style.display = queueList.size ? '' : 'none';
        d.querySelector(".banAll").style.display = queueList.size ? '' : 'none';
        const renderItem = item => `
        <li>
          <button class="accountage" data-user="${item}" title="Check account age">?</button>
          <button class="ignore" data-user="${item}">Ignore</button>
          <button class="ban" data-user="${item}">Ban</button>
          <span>${item}</span>
        </li>
      `;

        let inner = queueList.size ? [...queueList].map(user => renderItem(user)).join('') : `
          <div class="empty">
              <h4>Recent followers is empty :)</h4>
              <p>Automatically listening for new followers...</p>
              <br><br>
              <button class="toggleImport" title="Add a list of usernames">Import list</button>
          </div>`;

        d.querySelector('.list').innerHTML = `
        <ul>
          ${inner}
        </ul>
      `;
    }

})();