Emoji in YouTube Live Chat could not be rendered

[cyfung1031]

Issue

With BetterStreamChat

Without BetterStreamChat

( Example Video: https://www.youtube.com/watch?v=MSSKKntjOEU )

Cause

This is due to the following code in your script.

        let message = node.querySelector('#message');
        if (message) {
            message.innerHTML = Helper.BTTV.replaceText(message.innerText);
        }

message.innerHTML = replacer(message.innerText) could only work for plan text node. However, #message can have element children like img.emoji.

You might better check that message.innerText===message.innerHTML first before the replacement. BTW, I do not believe setting innerText directly to the innerHTML is a good idea.

Please find the solution from ChatGPT for your reference. https://chat.openai.com/share/e5c14192-32bd-4f07-b9cf-e8d0b7d8dbdd

let message = node.querySelector('#message');
if (message) {
    replaceTextNodes(message);
}

function replaceTextNodes(element) {
    for (let child of element.childNodes) {
        if (child.nodeType === 3) {  // Text node
            child.nodeValue = Helper.BTTV.replaceText(child.nodeValue);
        } else if (child.childNodes.length > 0) {
            replaceTextNodes(child);  // Recursively process child nodes
        }
    }
}

[cyfung1031]

Withdraw due to overlooked.