아프리카TV 정렬 개선

Adjust chat styles on AfreecaTV live streams for consistent alignment

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, Greasemonkey alebo Violentmonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, % alebo Violentmonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, % alebo Violentmonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey alebo Userscripts.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie, ako napríklad Tampermonkey.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie správcu používateľských skriptov.

(Už mám správcu používateľských skriptov, nechajte ma ho nainštalovať!)

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

(Už mám správcu používateľských štýlov, nechajte ma ho nainštalovať!)

// ==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();
})();