Allow hiding replies, and make strings translatable.

Closes #591

src/components/Comment.vue

@@ -35,14 +35,21 @@
                  
                 <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>

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"

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