Add hide recommendations button on mobile (#494)

src/components/WatchVideo.vue

@@ -122,7 +122,11 @@
             </div>
 
             <div class="uk-width-1-5@xl uk-width-1-4@s uk-width-1 uk-flex-last@s uk-flex-first" v-if="video">
+                <a class="uk-button uk-button-small uk-margin-small-bottom uk-hidden@s" style="background: #222" @click="showRecs = !showRecs">
+                    {{ showRecs ? $t("actions.minimize_recommendations") : $t("actions.show_recommendations") }}
+                </a>
                 <div
+                    v-show="showRecs || !smallView"
                     class="uk-tile-default uk-width-auto"
                     :style="[{ background: backgroundColor }]"
                     v-bind:key="related.url"
@@ -130,6 +134,7 @@
                 >
                     <VideoItem :video="related" height="94" width="168" />
                 </div>
+                <hr class="uk-hidden@s"/>
             </div>
         </div>
     </div>
@@ -144,6 +149,7 @@ import Comment from "@/components/Comment.vue";
 export default {
     name: "App",
     data() {
+        const smallViewQuery = window.matchMedia("(max-width: 640px)");
         return {
             video: {
                 title: "Loading...",
@@ -152,10 +158,13 @@ export default {
             selectedAutoLoop: false,
             selectedAutoPlay: null,
             showDesc: true,
+            showRecs: true,
             comments: null,
             subscribed: false,
             channelId: null,
             active: true,
+            smallViewQuery: smallViewQuery,
+            smallView: smallViewQuery.matches,
         };
     },
     mounted() {
@@ -180,6 +189,9 @@ export default {
         });
         this.getSponsors();
         if (!this.isEmbed && this.getPreferenceBoolean("comments", true)) this.getComments();
+        window.addEventListener("resize", () => {
+            this.smallView = this.smallViewQuery.matches;
+        });
     },
     activated() {
         this.active = true;

src/locales/bn.json

@@ -44,6 +44,8 @@
         "store_watch_history": "আপনি কি দেখার ইতিহাস মজুত রাখতে চান?",
         "language_selection": "আপনি কোন ভাষায় দেখতে চান ?",
         "instances_list": "Instances List",
-        "enabled_codecs": "Enabled Codecs (Multiple)"
+        "enabled_codecs": "Enabled Codecs (Multiple)",
+        "minimize_recommendations": "সুপারিশগুলি ছোট করুন",
+        "show_recommendations": "সুপারিশ দেখান"
     }
 }

src/locales/de.json

@@ -39,6 +39,8 @@
         "instance_selection": "Instanzauswahl",
         "show_description": "Beschreibung anzeigen",
         "minimize_description": "Beschreibung minimieren",
+        "show_recommendations": "Empfehlungen anzeigen",
+        "minimize_recommendations": "Empfehlungen minimieren",
         "donations": "Spenden",
         "auto_play_next_video": "Nächstes Video automatisch abspielen",
         "loop_this_video": "Dieses Video wiederholen",

src/locales/el.json

@@ -40,6 +40,8 @@
         "enable_lbry_proxy": "Ενεργοποίηση Proxy για το LBRY",
         "minimize_description": "Απόκρυψη περιγραφής",
         "show_description": "Εμφάνιση περιγραφής",
+        "minimize_recommendations": "Απόκρυψη συστάσεις",
+        "show_recommendations": "Εμφάνιση συστάσεις",
         "donations": "Δωρεές",
         "auto_play_next_video": "Αυτόματη αναπαραγωγή επόμενου βίντεο",
         "import_from_json": "Εισαγωγή από JSON",

src/locales/en.json

@@ -57,6 +57,8 @@
         "donations": "Donations",
         "minimize_description": "Minimize Description",
         "show_description": "Show Description",
+        "minimize_recommendations": "Minimize Recommendations",
+        "show_recommendations": "Show Recommendations",
         "disable_lbry": "Disable LBRY for Streaming",
         "enable_lbry_proxy": "Enable Proxy for LBRY",
         "view_ssl_score": "View SSL Score",

src/locales/es.json

@@ -65,7 +65,9 @@
         "loading": "Cargando…",
         "filter": "Filtrar",
         "search": "Buscar",
-        "view_ssl_score": "Ver la puntuación SSL"
+        "view_ssl_score": "Ver la puntuación SSL",
+        "minimize_recommendations": "Minimizar recomendaciones",
+        "show_recommendations": "Mostrar recomendaciones"
     },
     "titles": {
         "feed": "Feed",

src/locales/eu.json

@@ -65,7 +65,9 @@
         "loading": "Kargatzen...",
         "filter": "Iragazi",
         "search": "Bilatu",
-        "view_ssl_score": "Ikusi SSL puntuazioa"
+        "view_ssl_score": "Ikusi SSL puntuazioa",
+        "minimize_recommendations": "Gomendioak minimizatu",
+        "show_recommendations": "Erakutsi gomendioak"
     },
     "player": {
         "watch_on": "Ikusi hemen"

src/locales/fa.json

@@ -25,7 +25,9 @@
         "sort_by": "مرتب سازی بر اساس:",
         "view_subscriptions": "مشاهده اشتراک‌ها",
         "unsubscribe": "لغو اشتراک",
-        "subscribe": "مشترک شدن"
+        "subscribe": "مشترک شدن",
+        "minimize_recommendations": "توصیه ها را کم کنید",
+        "show_recommendations": "نمایش توصیه ها"
     },
     "titles": {
         "history": "سابقه",

src/locales/fi.json

@@ -49,7 +49,9 @@
         "sort_by": "Järjestä:",
         "view_subscriptions": "Näytä tilaukset",
         "unsubscribe": "Poistu tilauksesta",
-        "subscribe": "Tilaa"
+        "subscribe": "Tilaa",
+        "minimize_recommendations": "Minimoi suositukset",
+        "show_recommendations": "Näytä suositukset"
     },
     "player": {
         "watch_on": "Katso sivustolla"

src/locales/fr.json

@@ -54,6 +54,8 @@
         "show_more": "Afficher plus",
         "instance_selection": "Sélection de l'instance",
         "minimize_description": "Minimiser la description",
+        "minimize_recommendations": "Minimiser les recommandations",
+        "show_recommendations": "Afficher les recommandations",
         "no": "Non",
         "yes": "Oui",
         "loading": "Chargement…",

src/locales/hr.json

@@ -20,6 +20,8 @@
         "minimize_description_default": "Uvijek sakrij prikaz opisa",
         "minimize_description": "Sakrij opis",
         "show_description": "Prikaži opis",
+        "minimize_recommendations": "Sakrij preporuke",
+        "show_recommendations": "Prikaži preporuke",
         "donations": "Donacije",
         "auto_play_next_video": "Automatski reproduciraj idući videozapis",
         "loop_this_video": "Ponavljanje videozapisa",

src/locales/it.json

@@ -38,6 +38,8 @@
         "disable_lbry": "Disabilita LBRY per lo streaming",
         "show_description": "Mostra la descrizione",
         "minimize_description": "Minimizza la descrizione per impostazione predefinita",
+        "minimize_recommendations": "Minimizza consigli",
+        "show_recommendations": "Mostra consigli",
         "donations": "Donazioni",
         "auto_play_next_video": "Riproduci automaticamente il prossimo video",
         "loop_this_video": "Ripeti questo video",

src/locales/lt.json

@@ -42,6 +42,8 @@
         "loop_this_video": "Sukti ratu šį vaizdo įrašą",
         "show_description": "Rodyti aprašymą",
         "minimize_description": "Suskleisti aprašymą",
+        "minimize_recommendations": "Suskleisti rekomendacijas",
+        "show_recommendations": "Rodyti rekomendacijas",
         "import_from_json": "Importuoti iš JSON",
         "export_to_json": "Eksportuoti į JSON",
         "no": "Ne",

src/locales/ml.json

@@ -48,6 +48,8 @@
         "auto_play_next_video": "അടുത്ത വിഡിയോ സ്വയം പ്ലേ ചെയ്യുക",
         "loop_this_video": "വിഡിയോ ലൂപ്പ് ചെയ്യുക",
         "minimize_description": "വിവരണം ചെറുതാക്കുക",
+        "minimize_recommendations": "ശുപാർശകൾ ചുരുക്കുക",
+        "show_recommendations": "ശുപാർശകൾ കാണിക്കുക",
         "yes": "അതെ",
         "show_more": "കൂടുതൽ കാണിക്കുക",
         "buffering_goal": "ബഫറിംഗ് ലക്ഷ്യം(സെക്കൻഡുകളിൽ)",

src/locales/nb_NO.json

@@ -37,6 +37,8 @@
         "disable_lbry": "Skru av LBRY-strømming",
         "enabled_codecs": "Aktiverte forskjellige kodek",
         "show_description": "Vis beskrivelse",
+        "minimize_recommendations": "Minimere anbefalinger",
+        "show_recommendations": "Vis anbefalinger",
         "donations": "Donasjoner",
         "auto_play_next_video": "Autospill neste video",
         "loop_this_video": "Gjenta denne videoen",

src/locales/pl.json

@@ -57,6 +57,8 @@
         "donations": "Darowizny",
         "minimize_description": "Minimalizuj opis",
         "show_description": "Pokaż opis",
+        "minimize_recommendations": "Minimalizuj rekomendacje",
+        "show_recommendations": "Pokaż rekomendacje",
         "disable_lbry": "Wyłącz LBRY dla streaming-u",
         "enable_lbry_proxy": "Włącz proxy dla LBRY"
     },

src/locales/sk.json

@@ -35,7 +35,9 @@
         "sort_by": "Zoradiť podľa:",
         "view_subscriptions": "Zobraziť odbery",
         "unsubscribe": "Zrušiť odber",
-        "subscribe": "Odberať"
+        "subscribe": "Odberať",
+        "minimize_recommendations": "Minimalizujte odporúčania",
+        "show_recommendations": "Zobraziť odporúčania"
     },
     "player": {
         "watch_on": "Pozerať na"

src/locales/tr.json

@@ -50,7 +50,9 @@
         "loading": "Yükleniyor...",
         "filter": "Filtrele",
         "search": "Ara",
-        "view_ssl_score": "SSL Puanını Görüntüle"
+        "view_ssl_score": "SSL Puanını Görüntüle",
+        "minimize_recommendations": "Önerileri en aza indirin",
+        "show_recommendations": "Önerileri göster"
     },
     "player": {
         "watch_on": "İzle"

src/locales/zh_Hans.json

@@ -50,7 +50,9 @@
         "loading": "正在加载...",
         "filter": "筛选",
         "search": "搜索",
-        "view_ssl_score": "查看 SSL 得分"
+        "view_ssl_score": "查看 SSL 得分",
+        "minimize_recommendations": "最小化建议",
+        "show_recommendations": "显示推荐"
     },
     "video": {
         "sponsor_segments": "赞助商部分",