Adjust chat styles on AfreecaTV live streams for consistent alignment
As of
// ==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';
});
});
// 모든 username 요소를 찾음
const usernames = document.querySelectorAll('.username');
const maxUsernameWidth = 6 * 14; // 6글자 * 14px
// 각 username에 계산된 최대 너비를 적용
usernames.forEach(username => {
username.style.minWidth = `${maxUsernameWidth}px`;
});
// 모든 메시지 컨테이너 요소의 마진을 0으로 설정
document.querySelectorAll('.message-container').forEach(container => {
container.style.margin = '0px';
});
};
// MutationObserver를 사용하여 DOM 변화 감지
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; // 예시로 body를 사용했지만, 실제 채팅 메시지가 추가되는 컨테이너로 변경해야 함
// 관찰 시작
observer.observe(targetNode, config);
// 초기 레이아웃 조정
adjustLayout();
})();