From 07312ec16ae89e0bafc49f811318df1da17f41b0 Mon Sep 17 00:00:00 2001
From: Synkky <41585298+Synkky@users.noreply.github.com>
Date: Mon, 19 Oct 2020 14:01:24 +0000
Subject: [PATCH] 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                             |  6 +--
 package.json                                  |  2 +-
 .../watch-video-comments.css                  | 37 +++++++++++++++++++
 .../watch-video-comments.js                   |  4 ++
 .../watch-video-comments.vue                  | 17 +++++++++
 src/renderer/views/Watch/Watch.vue            |  1 +
 6 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d460f962..352faa54 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20663,9 +20663,9 @@
       }
     },
     "yt-comment-scraper": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/yt-comment-scraper/-/yt-comment-scraper-1.3.6.tgz",
-      "integrity": "sha512-5OwsFUWqZRpEqk9d0bCPHEXN52X9ZeOZZJ8suUWO6/RtCt7fJ+eHOjXPOgjRIZhYPaLS/MNHRDQ+YFdCZut99g==",
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/yt-comment-scraper/-/yt-comment-scraper-1.3.7.tgz",
+      "integrity": "sha512-llCtL3x1sDv1AW9t3x/Zz/h8+xb85pCFapoo5q2gs13Xs+8s94L1Z3J/i1uCxjWuU7HpggF5yTvSfmru5LvN9w==",
       "requires": {
         "axios": "^0.19.2",
         "html2json": "^1.0.2"
diff --git a/package.json b/package.json
index dfe4f470..a200a387 100644
--- a/package.json
+++ b/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",
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 ddb33846..faf51649 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.css
+++ b/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;
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 3364f028..9b3281a9 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.js
+++ b/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 () {
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 abebf4a2..bb2ff828 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.vue
+++ b/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"
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index e75a5799..949cf4ec 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/src/renderer/views/Watch/Watch.vue
@@ -94,6 +94,7 @@
         :id="videoId"
         class="watchVideo"
         :class="{ theatreWatchVideo: useTheatreMode }"
+        :channel-thumbnail="channelThumbnail"
         @timestamp-event="changeTimestamp"
       />
     </div>