☰

Greasy Fork is available in English.

아프리카TV 정렬 개선

Adjust chat styles on AfreecaTV live streams for consistent alignment

// ==UserScript==
// @name         아프리카TV 정렬 개선
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Adjust chat styles on AfreecaTV live streams for consistent alignment
// @author       You
// @match        https://play.afreecatv.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const adjustLayout = () => {
        const classesToHide = ['grade-badge-fan', 'thumb', 'grade-badge-vip'];

        classesToHide.forEach(className => {
            document.querySelectorAll(`.${className}`).forEach(element => {
                element.style.display = 'none';
            });
        });

        const usernames = document.querySelectorAll('.username');
        const maxUsernameWidth = 6 * 14; // 6글자 * 14px

        usernames.forEach(username => {
            username.style.minWidth = `${maxUsernameWidth}px`;
        });

        document.querySelectorAll('.message-container').forEach(container => {
            container.style.margin = '0px';
        });
    };

    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                adjustLayout();
            }
        });
    });

    const config = { childList: true, subtree: true };
    const targetNode = document.body;

    observer.observe(targetNode, config);

    adjustLayout();
})();