From 1ee5a8d1e4f275c23bf924200584711bac7223b5 Mon Sep 17 00:00:00 2001
From: mauriceoegerli <maurice@oeger.li>
Date: Fri, 18 Sep 2020 17:32:38 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20limit=20shown=20videos=20o?=
 =?UTF-8?q?n=20homepage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/pages/index.vue | 20 +++++++++++++++-----
 client/pages/watch.vue |  2 +-
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/client/pages/index.vue b/client/pages/index.vue
index 8734c923d..6312ae68e 100644
--- a/client/pages/index.vue
+++ b/client/pages/index.vue
@@ -7,30 +7,36 @@
     </div>
     <SectionTitle :title="'Popular videos'" :gradient="!userAuthenticated" />
     <div class="home-videos-container small">
-      <VideoEntry v-for="video in videos" :key="video.videoId" :video="video" />
+      <VideoEntry v-for="video in displayedVideos" :key="video.videoId" :video="video" />
     </div>
-    <BottomNavigation />
+    <BadgeButton v-if="displayedVideos.length !== videos.length" :click="showMoreVideos">
+      <LoadMoreIcon />
+      <p>Show more</p>
+    </BadgeButton>
   </div>
 </template>
 
 <script>
 import Commons from '@/plugins/commons.js';
 import VideoEntry from '@/components/list/VideoEntry';
-import BottomNavigation from '@/components/BottomNavigation';
 import SectionTitle from '@/components/SectionTitle.vue';
 import GradientBackground from '@/components/GradientBackground.vue';
+import LoadMoreIcon from 'vue-material-design-icons/Reload';
 import Invidious from '@/plugins/services/invidious';
+import BadgeButton from '@/components/buttons/BadgeButton';
 
 export default {
   name: 'Home',
   components: {
     VideoEntry,
-    BottomNavigation,
     SectionTitle,
-    GradientBackground
+    GradientBackground,
+    LoadMoreIcon,
+    BadgeButton
   },
   data: () => ({
     videos: [],
+    displayedVideos: [],
     subscriptions: [],
     loading: true,
     commons: Commons
@@ -44,12 +50,16 @@ export default {
     this.loadHomepage();
   },
   methods: {
+    showMoreVideos() {
+      this.displayedVideos = this.videos;
+    },
     async loadHomepage() {
       const invidious = new Invidious(this.$store.getters['instances/currentInstanceApi']);
       await invidious.api
         .popular()
         .then(response => {
           this.videos = response.data;
+          this.displayedVideos = response.data.slice(0, 8);
         })
         .catch(error => {
           console.error(error);
diff --git a/client/pages/watch.vue b/client/pages/watch.vue
index 093a7a149..c77b3c940 100644
--- a/client/pages/watch.vue
+++ b/client/pages/watch.vue
@@ -140,7 +140,7 @@
               :loading="commentsContinuationLoading"
             >
               <LoadMoreIcon />
-              <p>show more</p>
+              <p>Show more</p>
             </BadgeButton>
           </div>
         </div>