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;