From 9de2323db081e8668aa9148cfbb18bf22f80b87d Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Wed, 7 Dec 2022 23:31:27 +0000
Subject: [PATCH] Rewrite comments since they now include HTML

---
 src/components/CommentItem.vue |  2 +-
 src/components/WatchVideo.vue  | 25 +++++++++++++++++++++++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/CommentItem.vue b/src/components/CommentItem.vue
index f1caec1a..160393a1 100644
--- a/src/components/CommentItem.vue
+++ b/src/components/CommentItem.vue
@@ -28,7 +28,7 @@
                 </div>
                 <div class="comment-meta text-sm mb-1.5" v-text="comment.commentedTime" />
             </div>
-            <div class="whitespace-pre-wrap" v-html="urlify(comment.commentText)" />
+            <div class="whitespace-pre-wrap" v-html="purifyHTML(comment.commentText)" />
             <div class="comment-footer mt-1 flex items-center">
                 <div class="i-fa-solid:thumbs-up" />
                 <span class="ml-1" v-text="numberFormat(comment.likeCount)" />
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index e436d4f0..4ad0bbb5 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -449,7 +449,10 @@ export default {
                 this.fetchSponsors().then(data => (this.sponsors = data));
         },
         async getComments() {
-            this.fetchComments().then(data => (this.comments = data));
+            this.fetchComments().then(data => {
+                this.rewriteComments(data.comments);
+                this.comments = data;
+            });
         },
         async fetchSubscribedStatus() {
             if (!this.channelId) return;
@@ -472,6 +475,23 @@ export default {
                 this.subscribed = json.subscribed;
             });
         },
+        rewriteComments(data) {
+            data.forEach(comment => {
+                const parser = new DOMParser();
+                const xmlDoc = parser.parseFromString(comment.commentText, "text/html");
+                xmlDoc.querySelectorAll("a").forEach(elem => {
+                    if (!elem.innerText.match(/(?:[\d]{1,2}:)?(?:[\d]{1,2}):(?:[\d]{1,2})/))
+                        elem.outerHTML = elem.getAttribute("href");
+                });
+                comment.commentText = xmlDoc
+                    .querySelector("body")
+                    .innerHTML.replaceAll(/(?:http(?:s)?:\/\/)?(?:www\.)?youtube\.com(\/[/a-zA-Z0-9_?=&-]*)/gm, "$1")
+                    .replaceAll(
+                        /(?:http(?:s)?:\/\/)?(?:www\.)?youtu\.be\/(?:watch\?v=)?([/a-zA-Z0-9_?=&-]*)/gm,
+                        "/watch?v=$1",
+                    );
+            });
+        },
         subscribeHandler() {
             if (this.authenticated) {
                 this.fetchJson(this.authApiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, {
@@ -498,7 +518,8 @@ export default {
                 }).then(json => {
                     this.comments.nextpage = json.nextpage;
                     this.loading = false;
-                    json.comments.map(comment => this.comments.comments.push(comment));
+                    this.rewriteComments(json.comments);
+                    this.comments.comments = this.comments.comments.concat(json.comments);
                 });
             }
         },