From 8ea56aa0b9de5344217038006127c91f10a432ac Mon Sep 17 00:00:00 2001
From: FireMaskterK <20838718+FireMasterK@users.noreply.github.com>
Date: Mon, 1 Nov 2021 20:23:04 +0000
Subject: [PATCH] Implement comment replies.

---
 src/components/Comment.vue    | 43 +++++++++++++++++++++++++++++++++++
 src/components/WatchVideo.vue |  2 +-
 src/main.js                   |  2 ++
 3 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 45cf557e..d14cf647 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -3,6 +3,8 @@
         <img
             :src="comment.thumbnail"
             class="comment-avatar uk-border-circle uk-margin-right"
+            height="48"
+            width="48"
             style="width: 48px; height: 48px"
             loading="lazy"
             alt="Avatar"
@@ -33,6 +35,28 @@
                 &nbsp;
                 <font-awesome-icon v-if="comment.hearted" icon="heart"></font-awesome-icon>
             </div>
+            <div v-if="comment.repliesPage && notLoading">
+                <div @click="loadReplies">
+                    <a class="uk-link-text">Show Replies</a>
+                    &nbsp;
+                    <font-awesome-icon icon="level-down-alt"></font-awesome-icon>
+                </div>
+            </div>
+            <div v-if="replies" class="replies uk-width-4-5@xl uk-width-3-4@s uk-width-1">
+                <div
+                    v-for="reply in replies"
+                    :key="reply.commentId"
+                    class="uk-tile-default uk-align-left uk-width-expand"
+                    :style="[{ background: backgroundColor }]"
+                >
+                    <Comment :comment="reply" :uploader="uploader" :video-id="videoId" />
+                </div>
+                <div v-if="nextpage" @click="loadReplies">
+                    <a class="uk-link-text">Load more Replies</a>
+                    &nbsp;
+                    <font-awesome-icon icon="level-down-alt"></font-awesome-icon>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -47,6 +71,25 @@ export default {
             },
         },
         uploader: { type: String, default: null },
+        videoId: { type: String, default: null },
+    },
+    data() {
+        return {
+            notLoading: true,
+            replies: [],
+            nextpage: null,
+        };
+    },
+    methods: {
+        loadReplies() {
+            this.notLoading = false;
+            this.fetchJson(this.apiUrl() + "/nextpage/comments/" + this.videoId, {
+                nextpage: this.nextpage || this.comment.repliesPage,
+            }).then(json => {
+                this.replies = this.replies.concat(json.comments);
+                this.nextpage = json.nextpage;
+            });
+        },
     },
 };
 </script>
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index c16d05b8..dd62672b 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -123,7 +123,7 @@
                     class="uk-tile-default uk-align-left uk-width-expand"
                     :style="[{ background: backgroundColor }]"
                 >
-                    <Comment :comment="comment" :uploader="video.uploader" />
+                    <Comment :comment="comment" :uploader="video.uploader" :video-id="getVideoId()" />
                 </div>
             </div>
 
diff --git a/src/main.js b/src/main.js
index f885b13d..97da8fe9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,7 @@ import {
     faHeadphones,
     faRss,
     faChevronLeft,
+    faLevelDownAlt,
     faTv,
 } from "@fortawesome/free-solid-svg-icons";
 import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
@@ -27,6 +28,7 @@ library.add(
     faYoutube,
     faRss,
     faChevronLeft,
+    faLevelDownAlt,
     faTv,
 );