Closed cristopherpds closed 2 months ago
I'll handle this bug, if anyone know anything already or want to help let me know
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.
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:
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):
Elements with 7TV Active:
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
Browser: Microsoft Edge Version: Versión 127.0.2651.86 (Compilación oficial) (64 bits)