Merge pull request #1218 from macks36/master

Option to minimize recommendations on desktop and by default

src/components/PreferencesPage.vue

@@ -124,6 +124,16 @@
         @change="onChange($event)"
     />
     <br />
+    <label for="chkMinimizeRecommendations"><strong v-t="'actions.minimize_recommendations_default'" /></label>
+    <br />
+    <input
+        id="chkMinimizeRecommendations"
+        v-model="minimizeRecommendations"
+        class="checkbox"
+        type="checkbox"
+        @change="onChange($event)"
+    />
+    <br />
     <label for="chkStoreWatchHistory"><strong v-t="'actions.store_watch_history'" /></label>
     <br />
     <input
@@ -250,6 +260,7 @@ export default {
             defaultHomepage: "trending",
             showComments: true,
             minimizeDescription: false,
+            minimizeRecommendations: false,
             watchHistory: false,
             selectedLanguage: "en",
             languages: [
@@ -380,6 +391,7 @@ export default {
             this.defaultHomepage = this.getPreferenceString("homepage", "trending");
             this.showComments = this.getPreferenceBoolean("comments", true);
             this.minimizeDescription = this.getPreferenceBoolean("minimizeDescription", false);
+            this.minimizeRecommendations = this.getPreferenceBoolean("minimizeRecommendations", false);
             this.watchHistory = this.getPreferenceBoolean("watchHistory", false);
             this.selectedLanguage = this.getPreferenceString("hl", await this.defaultLangage);
             this.enabledCodecs = this.getPreferenceString("enabledCodecs", "vp9,avc").split(",");
@@ -434,6 +446,7 @@ export default {
                 localStorage.setItem("homepage", this.defaultHomepage);
                 localStorage.setItem("comments", this.showComments);
                 localStorage.setItem("minimizeDescription", this.minimizeDescription);
+                localStorage.setItem("minimizeRecommendations", this.minimizeRecommendations);
                 localStorage.setItem("watchHistory", this.watchHistory);
                 localStorage.setItem("hl", this.selectedLanguage);
                 localStorage.setItem("enabledCodecs", this.enabledCodecs.join(","));

src/components/WatchVideo.vue

@@ -182,12 +182,12 @@
                     :selected-index="index"
                 />
                 <a
-                    class="btn mb-2 sm:hidden"
+                    class="btn mb-2"
                     @click="showRecs = !showRecs"
                     v-t="`actions.${showRecs ? 'minimize_recommendations' : 'show_recommendations'}`"
                 />
                 <hr v-show="showRecs" />
-                <div v-show="showRecs || !smallView">
+                <div v-show="showRecs">
                     <VideoItem
                         v-for="related in video.relatedStreams"
                         :key="related.url"
@@ -322,6 +322,7 @@ export default {
         this.active = true;
         this.selectedAutoPlay = this.getPreferenceBoolean("autoplay", false);
         this.showDesc = !this.getPreferenceBoolean("minimizeDescription", false);
+        this.showRecs = !this.getPreferenceBoolean("minimizeRecommendations", false);
         if (this.video.duration) {
             document.title = this.video.title + " - Piped";
             this.$refs.videoPlayer.loadVideo();

src/locales/en.json

@@ -82,7 +82,8 @@
         "delete_playlist_confirm": "Are you sure you want to delete this playlist?",
         "please_select_playlist": "Please select a playlist",
         "delete_account": "Delete Account",
-        "logout": "Logout"
+        "logout": "Logout",
+        "minimize_recommendations_default": "Minimize Recommendations by default"
     },
     "comment": {
         "pinned_by": "Pinned by"