fix: compatibility issues with 7TV

[cristopherpds]

Description: Currently, our application has styling conflicts when the 7TV extension is active. The extension modifies CSS classes, which affects the display and behavior of messages in the chat. Specific issues are listed below:

Steps to reproduce:

1. Install the 7TV extension.
2. Open our application.
3. Observe the errors and unexpected behaviors caused by changes in CSS classes.

Expected behavior: The application should work normally without conflicts in CSS classes, even when the 7TV extension is installed.

7TV disabled

Actual behavior: The application experiences unexpected behaviors due to 7TV changing the CSS classes of elements.

7TV enable

Original Elements (without 7TV):

<div class="chat-line__message" ...>
    <span class="chat-line__timestamp">12:03</span>
    <div class="chat-line__username">VitorSerigati</div>
    <span class="chat-line__message-body">Aew, baixei aqui dan!</span>
</div>

Elements with 7TV Active:

<span class="seventv-chat-message-timestamp">12:02</span>
<div class="seventv-chat-user" style="color: rgb(0, 179, 0);">
    <span class="seventv-chat-user-username">VitorSerigati</span>
</div>
<span class="seventv-chat-message-body">Tô no firefox, mas ainda n baixei o plugin. Tô no meio do trampo também. kkk</span>

Impact:

Styles applied to chat elements are overwritten or altered due to changes in 7TV classes. This affects the visual and functional consistency of messages in the chat.

Proposed solution: Using MutationObserver for Dynamic Adjustment:

Implement a MutationObserver to adjust classes dynamically if 7TV changes classes in real time. Example: Note: No tested

const observer = new MutationObserver(mutationsList => {
    for (const mutation of mutationsList) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
            const element = mutation.target;
            if (element.classList.contains('seventv-chat-message-timestamp')) {
                element.classList.remove('seventv-chat-message-timestamp');
                element.classList.add('twitch-profliler-chat-line__timestamp');
            }
        }
    }
});

observer.observe(document.body, { attributes: true, subtree: true });

Browser: Microsoft Edge Version: Versión 127.0.2651.86 (Compilación oficial) (64 bits)

[henrique-leme]

I'll handle this bug, if anyone know anything already or want to help let me know

[DanielHe4rt]

At the end, our partial solution was to listen to both possibilities. 7TV overwrite completely the default twitch chat and uses theirs instead.

The model is pretty similar (since it's just a chat), so:

const TWITCH_BADGES_CONTAINER = ".chat-line__username-container";
const SEVEN_TV_BADGES_CONTAINER = ".seventv-chat-user-badge-list";

const TWITCH_USERNAME_CONTAINER = ".chat-line__username";
const SEVEN_TV_USERNAME_CONTAINER = ".seventv-chat-user-username";
const USERNAME_CONTAINER = `${TWITCH_USERNAME_CONTAINER},${SEVEN_TV_USERNAME_CONTAINER}`;

I'll be opening the pull request in advance.