From 62bdf5e4d62eec10d077c99b2353f610d6a1fea4 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Sat, 14 May 2022 13:33:00 -0400
Subject: [PATCH] Feat: Channel Member Icons + Load Custom Channel Emojis in
 Comments (#1819)

* channel member + custom channel emojis

* accessibility improvements

* show member icon for comment replies

* update yt-comment-scraper. make member icon more accessible.
---
 package.json                                       |  2 +-
 .../watch-video-comments/watch-video-comments.css  |  6 ++++++
 .../watch-video-comments/watch-video-comments.js   |  5 +++++
 .../watch-video-comments/watch-video-comments.vue  | 14 ++++++++++++++
 static/locales/en-US.yaml                          |  1 +
 yarn.lock                                          |  8 ++++----
 6 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index d2ea0416..46bf9374 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "^2.0.2",
     "@freetube/youtube-chat": "^1.1.2",
-    "@freetube/yt-comment-scraper": "^6.0.0",
+    "@freetube/yt-comment-scraper": "^6.1.0",
     "@silvermine/videojs-quality-selector": "^1.2.5",
     "autolinker": "^3.15.0",
     "bulma-pro": "^0.2.0",
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css
index 2d5a8f0a..32c62187 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.css
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -78,6 +78,12 @@
   font-size: 12px;
 }
 
+.commentMemberIcon {
+  margin-left: 5px;
+  width: 14px;
+  height: 14px;
+}
+
 .commentLikeCount {
   font-size: 11px;
   margin-left: 70px;
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.js b/src/renderer/components/watch-video-comments/watch-video-comments.js
index 7cfa0f3e..02228c79 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.js
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.js
@@ -269,6 +269,11 @@ export default Vue.extend({
           comment.likes = null
         }
         comment.text = autolinker.link(comment.text.replace(/(<(?!br>)([^>]+)>)/ig, ''))
+        if (comment.customEmojis.length > 0) {
+          comment.customEmojis.forEach(emoji => {
+            comment.text = comment.text.replace(emoji.text, `<img width="14" height="14" class="commentCustomEmoji" alt="${emoji.text.substring(2, emoji.text.length - 1)}" src="${emoji.emojiThumbnails[0].url}">`)
+          })
+        }
 
         return comment
       })
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.vue b/src/renderer/components/watch-video-comments/watch-video-comments.vue
index 2f24f340..447d6146 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.vue
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.vue
@@ -68,6 +68,14 @@
           >
             {{ comment.author }}
           </span>
+          <img
+            v-if="comment.isMember"
+            :src="comment.memberIconUrl"
+            :title="$t('Comments.Member')"
+            :aria-label="$t('Comments.Member')"
+            class="commentMemberIcon"
+            alt=""
+          >
           <span class="commentDate">
             {{ comment.time }}
           </span>
@@ -137,6 +145,12 @@
               >
                 {{ reply.author }}
               </span>
+              <img
+                v-if="reply.isMember"
+                :src="reply.memberIconUrl"
+                class="commentMemberIcon"
+                alt=""
+              >
               <span class="commentDate">
                 {{ reply.time }}
               </span>
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 0e883b12..510ae4f8 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -646,6 +646,7 @@ Comments:
   Load More Comments: Load More Comments
   No more comments available: No more comments available
   Pinned by: Pinned by
+  Member: Member
 Up Next: Up Next
 
 #Tooltips
diff --git a/yarn.lock b/yarn.lock
index 9f28c942..54f8d39d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1332,10 +1332,10 @@
     axios "^0.21.1"
     tslib "^1.11.1"
 
-"@freetube/yt-comment-scraper@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.npmjs.org/@freetube/yt-comment-scraper/-/yt-comment-scraper-6.0.0.tgz"
-  integrity sha512-QZbfuuhjT1ZmEUd15CQ9rvBiNfW9BCtciaB06qW9z7xC22ViC9NmRTlwSXTS/a5OxUH8app13O05xgGhZbxnmA==
+"@freetube/yt-comment-scraper@^6.1.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@freetube/yt-comment-scraper/-/yt-comment-scraper-6.1.0.tgz#13583dedf5cf0cff6d42d155ef5f2474c64fd4ee"
+  integrity sha512-Cj6Of7DPkTH1ax1AcaOn0xul179YsnfaNNoH11lQ4xUxUrmtf70Qj04+FDI+7/O/qsOR3RMq1mreCvM6BQI6Aw==
   dependencies:
     axios "^0.21.1"