From e6bbcdd3c306a4017e25e693eb82d95d57dd8c4e Mon Sep 17 00:00:00 2001
From: FireMaskterK <20838718+FireMasterK@users.noreply.github.com>
Date: Thu, 4 Nov 2021 10:52:28 +0000
Subject: [PATCH] Allow hiding replies, and make strings translatable.

Closes #591
---
 src/components/Comment.vue | 37 +++++++++++++++++++++++++++----------
 src/locales/en.json        |  5 ++++-
 src/main.js                |  2 ++
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index d14cf647..4acb1ce2 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -35,14 +35,21 @@
                 &nbsp;
                 <font-awesome-icon v-if="comment.hearted" icon="heart"></font-awesome-icon>
             </div>
-            <div v-if="comment.repliesPage && notLoading">
+            <template v-if="comment.repliesPage && (!loadingReplies || !showingReplies)">
                 <div @click="loadReplies">
-                    <a class="uk-link-text">Show Replies</a>
+                    <a class="uk-link-text" v-t="'actions.show_replies'" />
                     &nbsp;
-                    <font-awesome-icon icon="level-down-alt"></font-awesome-icon>
+                    <font-awesome-icon icon="level-down-alt" />
                 </div>
-            </div>
-            <div v-if="replies" class="replies uk-width-4-5@xl uk-width-3-4@s uk-width-1">
+            </template>
+            <template v-if="showingReplies">
+                <div @click="hideReplies">
+                    <a class="uk-link-text" v-t="'actions.hide_replies'" />
+                    &nbsp;
+                    <font-awesome-icon icon="level-up-alt" />
+                </div>
+            </template>
+            <div v-show="showingReplies" 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"
@@ -52,9 +59,9 @@
                     <Comment :comment="reply" :uploader="uploader" :video-id="videoId" />
                 </div>
                 <div v-if="nextpage" @click="loadReplies">
-                    <a class="uk-link-text">Load more Replies</a>
+                    <a class="uk-link-text" v-t="'actions.load_more_replies'" />
                     &nbsp;
-                    <font-awesome-icon icon="level-down-alt"></font-awesome-icon>
+                    <font-awesome-icon icon="level-down-alt" />
                 </div>
             </div>
         </div>
@@ -75,14 +82,21 @@ export default {
     },
     data() {
         return {
-            notLoading: true,
+            loadingReplies: false,
+            showingReplies: false,
             replies: [],
             nextpage: null,
         };
     },
     methods: {
-        loadReplies() {
-            this.notLoading = false;
+        async loadReplies() {
+            if (!this.showingReplies && this.loadingReplies) {
+                this.showingReplies = true;
+                return;
+            }
+
+            this.loadingReplies = true;
+            this.showingReplies = true;
             this.fetchJson(this.apiUrl() + "/nextpage/comments/" + this.videoId, {
                 nextpage: this.nextpage || this.comment.repliesPage,
             }).then(json => {
@@ -90,6 +104,9 @@ export default {
                 this.nextpage = json.nextpage;
             });
         },
+        async hideReplies() {
+            this.showingReplies = false;
+        },
     },
 };
 </script>
diff --git a/src/locales/en.json b/src/locales/en.json
index 20ec25a4..1978b6fa 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -65,7 +65,10 @@
         "search": "Search",
         "filter": "Filter",
         "loading": "Loading...",
-        "clear_history": "Clear History"
+        "clear_history": "Clear History",
+        "show_replies": "Show Replies",
+        "hide_replies": "Hide Replies",
+        "load_more_replies": "Load more Replies"
     },
     "comment": {
         "pinned_by": "Pinned by"
diff --git a/src/main.js b/src/main.js
index 97da8fe9..96b1a5a1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,7 @@ import {
     faChevronLeft,
     faLevelDownAlt,
     faTv,
+    faLevelUpAlt,
 } from "@fortawesome/free-solid-svg-icons";
 import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -29,6 +30,7 @@ library.add(
     faRss,
     faChevronLeft,
     faLevelDownAlt,
+    faLevelUpAlt,
     faTv,
 );