Merge pull request #1616 from alemoreau/feature-minimize_comments

Feature minimize comments

src/components/PreferencesPage.vue

@@ -66,11 +66,11 @@
             @change="onChange($event)"
         />
     </label>
-    <label class="pref" for="chkShowComments">
-        <strong v-t="'actions.show_comments'" />
+    <label class="pref" for="chkMinimizeComments">
+        <strong v-t="'actions.minimize_comments_default'" />
         <input
-            id="chkShowComments"
-            v-model="showComments"
+            id="chkMinimizeComments"
+            v-model="minimizeComments"
             class="checkbox"
             type="checkbox"
             @change="onChange($event)"
@@ -365,7 +365,7 @@ export default {
             countryMap: CountryMap,
             countrySelected: "US",
             defaultHomepage: "trending",
-            showComments: true,
+            minimizeComments: false,
             minimizeDescription: false,
             minimizeRecommendations: false,
             watchHistory: false,
@@ -501,7 +501,7 @@ export default {
             this.bufferingGoal = Math.max(Number(localStorage.getItem("bufferGoal")), 10);
             this.countrySelected = this.getPreferenceString("region", "US");
             this.defaultHomepage = this.getPreferenceString("homepage", "trending");
-            this.showComments = this.getPreferenceBoolean("comments", true);
+            this.minimizeComments = this.getPreferenceBoolean("minimizeComments", false);
             this.minimizeDescription = this.getPreferenceBoolean("minimizeDescription", false);
             this.minimizeRecommendations = this.getPreferenceBoolean("minimizeRecommendations", false);
             this.watchHistory = this.getPreferenceBoolean("watchHistory", false);
@@ -560,7 +560,7 @@ export default {
                 localStorage.setItem("bufferGoal", this.bufferingGoal);
                 localStorage.setItem("region", this.countrySelected);
                 localStorage.setItem("homepage", this.defaultHomepage);
-                localStorage.setItem("comments", this.showComments);
+                localStorage.setItem("minimizeComments", this.minimizeComments);
                 localStorage.setItem("minimizeDescription", this.minimizeDescription);
                 localStorage.setItem("minimizeRecommendations", this.minimizeRecommendations);
                 localStorage.setItem("watchHistory", this.watchHistory);

src/components/WatchVideo.vue

@@ -162,9 +162,14 @@
         <hr />
 
         <div class="grid xl:grid-cols-5 sm:grid-cols-4 grid-cols-1">
-            <div v-if="!commentsEnabled" class="xl:col-span-4 sm:col-span-3">
-                <p class="text-center mt-8" v-t="'comment.user_disabled'"></p>
+            <div class="xl:col-span-4 sm:col-span-3">
+                <button
+                    class="btn mb-2"
+                    @click="toggleComments"
+                    v-t="`actions.${showComments ? 'minimize_comments' : 'show_comments'}`"
+                />
             </div>
+            <div v-if="!showComments" class="xl:col-span-4 sm:col-span-3"></div>
             <div v-else-if="!comments" class="xl:col-span-4 sm:col-span-3">
                 <p class="text-center mt-8" v-t="'comment.loading'"></p>
             </div>
@@ -243,6 +248,7 @@ export default {
             sponsors: null,
             selectedAutoLoop: false,
             selectedAutoPlay: null,
+            showComments: true,
             showDesc: true,
             showRecs: true,
             showChapters: true,
@@ -277,9 +283,6 @@ export default {
                 year: "numeric",
             });
         },
-        commentsEnabled() {
-            return this.getPreferenceBoolean("comments", true);
-        },
     },
     mounted() {
         // check screen size
@@ -327,7 +330,7 @@ export default {
         this.index = Number(this.$route.query.index);
         this.getPlaylistData();
         this.getSponsors();
-        if (!this.isEmbed && this.commentsEnabled) this.getComments();
+        if (!this.isEmbed && this.showComments) this.getComments();
         window.addEventListener("resize", () => {
             this.smallView = this.smallViewQuery.matches;
         });
@@ -335,6 +338,7 @@ export default {
     activated() {
         this.active = true;
         this.selectedAutoPlay = this.getPreferenceBoolean("autoplay", false);
+        this.showComments = !this.getPreferenceBoolean("minimizeComments", false);
         this.showDesc = !this.getPreferenceBoolean("minimizeDescription", false);
         this.showRecs = !this.getPreferenceBoolean("minimizeRecommendations", false);
         if (this.video.duration) {
@@ -365,6 +369,12 @@ export default {
                     '"]',
             });
         },
+        toggleComments() {
+            this.showComments = !this.showComments;
+            if (this.showComments && this.comments === null) {
+                this.fetchComments();
+            }
+        },
         fetchComments() {
             return this.fetchJson(this.apiUrl() + "/comments/" + this.getVideoId());
         },
@@ -477,7 +487,7 @@ export default {
         },
         handleScroll() {
             if (this.loading || !this.comments || !this.comments.nextpage) return;
-            if (window.innerHeight + window.scrollY >= this.$refs.comments.offsetHeight - window.innerHeight) {
+            if (window.innerHeight + window.scrollY >= this.$refs.comments?.offsetHeight - window.innerHeight) {
                 this.loading = true;
                 this.fetchJson(this.apiUrl() + "/nextpage/comments/" + this.getVideoId(), {
                     nextpage: this.comments.nextpage,

src/locales/en.json

@@ -47,7 +47,7 @@
         "buffering_goal": "Buffering Goal (in seconds)",
         "country_selection": "Country Selection",
         "default_homepage": "Default Homepage",
-        "show_comments": "Show Comments",
+        "minimize_comments_default": "Minimize Comments by default",
         "minimize_description_default": "Minimize Description by default",
         "store_watch_history": "Store Watch History",
         "language_selection": "Language Selection",
@@ -62,6 +62,8 @@
         "loop_this_video": "Loop this Video",
         "auto_play_next_video": "Auto Play next Video",
         "donations": "Development donations",
+        "minimize_comments": "Minimize Comments",
+        "show_comments": "Show Comments",
         "minimize_description": "Minimize Description",
         "show_description": "Show Description",
         "minimize_recommendations": "Minimize Recommendations",