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

@@ -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",

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;

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
       })

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>

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

yarn.lock

@@ -1332,10 +1332,10 @@
     axios "^0.21.1"
     tslib "^1.11.1"
 
-"@freetube/yt-comment-scraper@^6.0.0":
+"@freetube/yt-comment-scraper@^6.1.0":
-  version "6.0.0"
+  version "6.1.0"
-  resolved "https://registry.npmjs.org/@freetube/yt-comment-scraper/-/yt-comment-scraper-6.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/@freetube/yt-comment-scraper/-/yt-comment-scraper-6.1.0.tgz#13583dedf5cf0cff6d42d155ef5f2474c64fd4ee"
-  integrity sha512-QZbfuuhjT1ZmEUd15CQ9rvBiNfW9BCtciaB06qW9z7xC22ViC9NmRTlwSXTS/a5OxUH8app13O05xgGhZbxnmA==
+  integrity sha512-Cj6Of7DPkTH1ax1AcaOn0xul179YsnfaNNoH11lQ4xUxUrmtf70Qj04+FDI+7/O/qsOR3RMq1mreCvM6BQI6Aw==
   dependencies:
     axios "^0.21.1"