Display heart badge on loved comments (#675)

* Display heart badge on loved comments

* Change red badge to material red (#F44336)

* Fix linting issues

package-lock.json

@@ -20663,9 +20663,9 @@
       }
     },
     "yt-comment-scraper": {
-      "version": "1.3.6",
+      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/yt-comment-scraper/-/yt-comment-scraper-1.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/yt-comment-scraper/-/yt-comment-scraper-1.3.7.tgz",
-      "integrity": "sha512-5OwsFUWqZRpEqk9d0bCPHEXN52X9ZeOZZJ8suUWO6/RtCt7fJ+eHOjXPOgjRIZhYPaLS/MNHRDQ+YFdCZut99g==",
+      "integrity": "sha512-llCtL3x1sDv1AW9t3x/Zz/h8+xb85pCFapoo5q2gs13Xs+8s94L1Z3J/i1uCxjWuU7HpggF5yTvSfmru5LvN9w==",
       "requires": {
         "axios": "^0.19.2",
         "html2json": "^1.0.2"

package.json

@@ -42,7 +42,7 @@
     "youtube-chat": "^1.1.0",
     "youtube-suggest": "^1.1.0",
     "yt-channel-info": "^1.1.4",
-    "yt-comment-scraper": "^1.3.6",
+    "yt-comment-scraper": "^1.3.7",
     "yt-dash-manifest-generator": "^1.1.0",
     "yt-trending-scraper": "^1.0.3",
     "yt-xml2vtt": "^1.1.2",

src/renderer/components/watch-video-comments/watch-video-comments.css

@@ -61,6 +61,43 @@
   margin-top: 0px;
 }
 
+.commentHeartBadge {
+  display: inline-block;
+  position: relative;
+  width: 25px;
+  height: 20px;
+  margin-left: 10px;
+  margin-bottom: -7px;
+}
+
+.commentHeartBadgeImg {
+  position: absolute;
+  left: 0;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  -webkit-border-radius: 50%;
+}
+
+.commentHeartBadgeWhite {
+  position: absolute;
+  left: 9px;
+  bottom: 1px;
+  width: 11px;
+  height: 11px;
+  z-index: 1;
+}
+
+.commentHeartBadgeRed {
+  position: absolute;
+  color: var(--red-500);
+  left: 10px;
+  bottom: 2px;
+  width: 9px;
+  height: 9px;
+  z-index: 2;
+}
+
 .commentMoreReplies {
   font-size: 11px;
   margin-left: 5px;

src/renderer/components/watch-video-comments/watch-video-comments.js

@@ -19,6 +19,10 @@ export default Vue.extend({
     id: {
       type: String,
       required: true
+    },
+    channelThumbnail: {
+      type: String,
+      required: true
     }
   },
   data: function () {

src/renderer/components/watch-video-comments/watch-video-comments.vue

@@ -65,6 +65,23 @@
             icon="thumbs-up"
           />
           {{ comment.likes }}
+          <span
+            v-if="comment.isHearted"
+            class="commentHeartBadge"
+          >
+            <img
+              :src="channelThumbnail"
+              class="commentHeartBadgeImg"
+            >
+            <font-awesome-icon
+              icon="heart"
+              class="commentHeartBadgeWhite"
+            />
+            <font-awesome-icon
+              icon="heart"
+              class="commentHeartBadgeRed"
+            />
+          </span>
           <span
             v-if="comment.numReplies > 0"
             class="commentMoreReplies"

src/renderer/views/Watch/Watch.vue

@@ -94,6 +94,7 @@
         :id="videoId"
         class="watchVideo"
         :class="{ theatreWatchVideo: useTheatreMode }"
+        :channel-thumbnail="channelThumbnail"
         @timestamp-event="changeTimestamp"
       />
     </div>