changed observer callback

update names based on the element from the mutation event rather than checking the chatbox for unchecked messages each mutation

scripts/ttv-obfuscated-names/dom.ts

@@ -1,13 +1,8 @@
 import { obfuscator } from './obfuscator'
-import { NameConfigInstance, nameImages } from './options'
-import {
-    ChatMessage,
-    innermostElement,
-    usernameImageTemplateSuffix,
-    usernameTemplateSuffix,
-} from './util'
+import { NameConfigInstance, nameImages, usernameExtraSuffix } from './options'
+import { ChatMessage, elementTreeFind, innermostElement } from './util'
 
-export function loadChatMessage(chatboxMessage: Element) {
+function loadChatMessage(chatboxMessage: Element) {
     // only chat messages
     const chatboxMessageInner = chatboxMessage.querySelector(
         '.chat-line__message'
@@ -20,10 +15,6 @@ export function loadChatMessage(chatboxMessage: Element) {
     const chatboxBadgeContainer = chatboxMessage.querySelector<HTMLSpanElement>(
         '.chat-line__message--badges'
     )
-    if (!chatboxBadgeContainer) {
-        console.error("found message, couldn't find badges")
-        return
-    }
 
     const chatboxUser = chatboxMessage.querySelector<HTMLSpanElement>(
         '.chat-line__username'
@@ -33,6 +24,11 @@ export function loadChatMessage(chatboxMessage: Element) {
         return
     }
 
+    // already applied username
+    if (chatboxUser.querySelector('.obf-name')) {
+        return
+    }
+
     const chatboxUserInner = chatboxUser.querySelector<HTMLSpanElement>(
         '.chat-author__display-name'
     )
@@ -41,24 +37,18 @@ export function loadChatMessage(chatboxMessage: Element) {
         return
     }
 
-    // got the data, so we're loaded
-    chatboxMessage.classList.add('obf-loaded')
-
-    // hide 7tv extra colors
-    if (chatboxUser.classList.contains('seventv-paint')) {
-        chatboxUser.classList.remove('seventv-paint')
-    }
-
     // check if mod
     let isMod = false
-    for (const badge of chatboxBadgeContainer.children) {
-        if (
-            badge.hasAttribute('data-badge') &&
-            (badge.getAttribute('data-badge') === 'moderator' ||
-                badge.getAttribute('data-badge') === 'broadcaster')
-        ) {
-            isMod = true
-            chatboxMessage.classList.add('ismod')
+    if (chatboxBadgeContainer) {
+        for (const badge of chatboxBadgeContainer.children) {
+            if (
+                badge.hasAttribute('data-badge') &&
+                (badge.getAttribute('data-badge') === 'moderator' ||
+                    badge.getAttribute('data-badge') === 'broadcaster')
+            ) {
+                isMod = true
+                chatboxMessage.classList.add('ismod')
+            }
         }
     }
 
@@ -72,7 +62,7 @@ export function loadChatMessage(chatboxMessage: Element) {
     const newChatMessage = obfuscator(chatMessage)
 
     if (newChatMessage !== null) {
-        setUsernameDetails(newChatMessage, chatboxUserInner, chatboxUser)
+        setUsernameDetails(newChatMessage, chatboxUserInner, true)
     }
 
     loadReplyLine(chatboxMessage)
@@ -89,6 +79,11 @@ function loadReplyLine(chatboxMessage: Element) {
         return
     }
 
+    // already applied username
+    if (replyUsername.querySelector('.obf-name')) {
+        return
+    }
+
     const chatMessage: ChatMessage = {
         username: replyUsername.textContent.replace(/^@/, ''),
         isMod: false,
@@ -98,12 +93,17 @@ function loadReplyLine(chatboxMessage: Element) {
     const newChatMessage = obfuscator(chatMessage)
 
     if (newChatMessage !== null) {
-        setUsernameDetails(newChatMessage, replyUsername, undefined, '@')
+        setUsernameDetails(newChatMessage, replyUsername, false, '@')
     }
 }
 
 function loadMessageMentions(chatboxMessage: Element) {
     function eachMention(messageMention: HTMLElement) {
+        // already applied username
+        if (messageMention.querySelector('.obf-name')) {
+            return
+        }
+
         const chatMessage: ChatMessage = {
             username: messageMention.textContent.replace(/^@/, ''),
             isMod: false,
@@ -113,7 +113,7 @@ function loadMessageMentions(chatboxMessage: Element) {
         const newChatMessage = obfuscator(chatMessage)
 
         if (newChatMessage !== null) {
-            setUsernameDetails(newChatMessage, messageMention, undefined, '@')
+            setUsernameDetails(newChatMessage, messageMention, false, '@')
         }
     }
 
@@ -126,15 +126,21 @@ function loadMessageMentions(chatboxMessage: Element) {
     }
 }
 
-export function loadAdditionalUserNames(chatboxMessage: Element) {
+function loadAdditionalUserNames(chatboxMessage: Element) {
     // look for additional chat member names
     const chatterNames =
         chatboxMessage.querySelectorAll<HTMLElement>('.chatter-name')
 
     for (const chatterName of chatterNames) {
-        chatboxMessage.classList.add('obf-loaded')
+        const chatterNameBox = innermostElement<HTMLElement, HTMLElement>(
+            chatterName
+        )
+
+        // already applied username
+        if (chatterNameBox.querySelector('.obf-name')) {
+            continue
+        }
 
-        const chatterNameBox = innermostElement(chatterName)
         const username = chatterNameBox.textContent
         if (!username) {
             continue
@@ -157,37 +163,69 @@ export function loadAdditionalUserNames(chatboxMessage: Element) {
 
 function setUsernameDetails(
     newChatMessage: NameConfigInstance,
-    textbox: HTMLElement,
-    colorbox?: HTMLElement,
-    prefixStr: string = ''
+    usernamebox: HTMLElement,
+    doColor = false,
+    prefix: string = ''
 ) {
-    const username = `${newChatMessage.username}${usernameTemplateSuffix(newChatMessage)}`
+    const suffix = usernameExtraSuffix(newChatMessage)
+    const username = `${newChatMessage.username}${suffix}`
+
+    const container = document.createElement('span')
+    container.classList.add('obf-name')
 
     const imageName = newChatMessage.image
     if (imageName) {
         // image name
         const image = nameImages[imageName]
 
-        const img = document.createElement('img')
-        img.classList.add('obf-image', 'ffz--pointer-events', 'ffz-tooltip')
-        img.setAttribute('data-tooltip-type', 'html')
-        img.setAttribute('data-title', username)
-        img.setAttribute('alt', username)
-        img.setAttribute('src', image)
+        const imgElem = document.createElement('img')
+        imgElem.classList.add('obf-image', 'ffz--pointer-events', 'ffz-tooltip')
+        imgElem.setAttribute('data-tooltip-type', 'html')
+        imgElem.setAttribute('data-title', username)
+        imgElem.setAttribute('alt', username)
+        imgElem.setAttribute('src', image)
 
-        const prefix = document.createElement('span')
-        prefix.textContent = prefixStr
+        const prefixElem = document.createElement('span')
+        prefixElem.textContent = prefix
 
-        const suffix = document.createElement('span')
-        suffix.textContent = usernameImageTemplateSuffix(newChatMessage)
+        const suffixElem = document.createElement('span')
+        suffixElem.textContent = suffix
 
-        textbox.replaceChildren(prefix, img, suffix)
+        container.replaceChildren(prefixElem, imgElem, suffixElem)
     } else {
         // text name only
-        textbox.textContent = `${prefixStr}${username}`
+        container.textContent = `${prefix}${username}`
     }
 
-    if (colorbox) {
-        colorbox.style.color = newChatMessage.color
+    if (doColor) {
+        container.style.color = newChatMessage.color
+    }
+
+    usernamebox.replaceChildren(container)
+}
+
+export function eachMutation(record: MutationRecord) {
+    const target = record.target as HTMLElement
+    if (target.classList.contains('chat-scrollable-area__message-container')) {
+        for (const target of record.addedNodes) {
+            eachMutationTarget(record, target as HTMLElement)
+        }
+    } else {
+        eachMutationTarget(record, record.target as HTMLElement)
+    }
+}
+
+function eachMutationTarget(record: MutationRecord, target: HTMLElement) {
+    const chatboxMessage = elementTreeFind<HTMLElement, HTMLElement>(
+        target,
+        elem =>
+            elem.parentElement?.classList.contains(
+                'chat-scrollable-area__message-container'
+            ) || false
+    )
+    if (chatboxMessage) {
+        console.warn('[OBFUSCATOR] mutated message', chatboxMessage, record)
+        loadChatMessage(chatboxMessage)
+        loadAdditionalUserNames(chatboxMessage)
     }
 }