feat: capture emoji in youtube scraper

fixes #6

Emoji were not captured by the youtube scraper because they are not in the text node. They are in an image element instead. As a result, the scraper has to walk through a mix of text and image elements.

Fortunately, the actual emoji text is in the alternative text of the image.

This commit creates a private function to iterate over the elements of the comment. Whenever a text or an image element is found, it adds them to an array. It is joined at the end to build the message.

Author: kerrerain

browser-extension/src/entrypoints/youtube.content/youtube-post-native-scrapper.ts

@@ -331,14 +331,13 @@ export class YoutubePostNativeScrapper {
       HTMLElement,
     ).innerText;
 
-    // TODO review content capture to include emojis
     const commentTextHandle = selectOrThrow(
       commentContainer,
       "#content-text",
       HTMLElement,
     );
 
-    const commentText = commentTextHandle.innerText.trim();
+    const commentText = this.scrapCommentText(commentTextHandle);
 
     const boundingBox = commentContainer.getBoundingClientRect();
     const commentPre: CommentPreScreenshot = {
@@ -361,6 +360,7 @@ export class YoutubePostNativeScrapper {
     };
     return commentPre;
   }
+
   private async scrapCommentAuthor(
     commentContainer: HTMLElement,
   ): Promise<Author> {
@@ -378,4 +378,20 @@ export class YoutubePostNativeScrapper {
     };
     return author;
   }
+
+  private scrapCommentText(commentTextHandle: HTMLElement): string {
+    const iterator = document.createNodeIterator(commentTextHandle);
+    const textElements: string[] = [];
+    let node: Node | null;
+
+    while ((node = iterator.nextNode())) {
+      if (node instanceof Text && node.nodeValue) {
+        textElements.push(node.nodeValue);
+      } else if (node instanceof HTMLImageElement && node.alt) {
+        textElements.push(node.alt);
+      }
+    }
+
+    return textElements.join(" ").trim();
+  }
 }