replace system emojis with twemoji

package.json

@@ -24,6 +24,7 @@
   "homepage": "https://github.com/webosbrew/youtube-webos#readme",
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
+    "@twemoji/api": "^15.1.0",
     "core-js-pure": "^3.39.0",
     "regenerator-runtime": "^0.14.1",
     "tiny-sha256": "^1.0.2",

src/emoji-font.css

@@ -0,0 +1,6 @@
+img.emoji {
+  height: 1em;
+  width: 1em;
+  margin: 0 0.05em 0 0.1em;
+  vertical-align: -0.1em;
+}

src/emoji-font.ts

@@ -0,0 +1,24 @@
+import twemoji from '@twemoji/api';
+
+import './emoji-font.css';
+
+const YT_FORMATTED_STR_TAG = 'yt-formatted-string';
+
+const emojiObs = new MutationObserver((mutations) => {
+  mutations
+    .flatMap((mut) => Array.from(mut.addedNodes))
+    .filter((node) => node instanceof HTMLElement)
+    .flatMap((elem) =>
+      Array.from(
+        elem.querySelectorAll(YT_FORMATTED_STR_TAG) as NodeListOf<HTMLElement>
+      )
+    )
+    .forEach((elem) => void twemoji.parse(elem, { size: '72x72' }));
+});
+
+// twemoji expects the charset to be UTF-8
+if (document.characterSet === 'UTF-8') {
+  emojiObs.observe(document.body, { childList: true, subtree: true });
+} else {
+  console.warn('document charset not utf-8. Emoji replacement disabled.');
+}

src/userScript.js

@@ -20,3 +20,4 @@ import './font-fix.css';
 import './thumbnail-quality';
 import './screensaver-fix';
 import './yt-fixes.css';
+import './emoji-font.ts';