Implement comment replies.

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>

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>
 

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,
 );