From b4ca3adf459a2d222bd7ea77f719c7d2acea39ac Mon Sep 17 00:00:00 2001
From: Quentin Franchi <dev.quentinfranchi@protonmail.com>
Date: Sat, 4 May 2024 00:12:11 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Improved=20home=20subscriptions=20(?=
 =?UTF-8?q?#2790)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Added Show More for subscriptions

* Auto expand home subscriptions when trending videos are not shown

* Fixed subscriptions check
---
 client/components/home/Subscriptions.vue | 37 ++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/client/components/home/Subscriptions.vue b/client/components/home/Subscriptions.vue
index bf1dfbbb2..e972c9f38 100644
--- a/client/components/home/Subscriptions.vue
+++ b/client/components/home/Subscriptions.vue
@@ -1,22 +1,53 @@
 <script setup lang="ts">
+
+import BadgeButton from '@/components/buttons/BadgeButton.vue';
 import VideoEntry from '@/components/list/VideoEntry.vue';
+import { useSettingsStore } from '@/store/settings';
 
+const settingsStore = useSettingsStore();
 const { data: subscriptions, pending: subscriptionsLoading } = useGetUserSubscriptions({
-  limit: 4
+  limit: 20
+});
+
+const showMore = ref(false);
+const displayedSubscriptions = computed(() => {
+  if (subscriptions.value && subscriptions.value.videos) {
+    if (!settingsStore.showHomeTrendingVideos) {
+      return subscriptions.value.videos;
+    }
+
+    if (!showMore.value) {
+      return subscriptions.value.videos.slice(0, 4);
+    }
+
+    return subscriptions.value.videos;
+  }
+  return [];
 });
+const showMoreSubscriptions = (): void => {
+  showMore.value = true;
+};
 </script>
 
 <template>
   <SectionTitle :title="'Subscriptions'" :link="'subscriptions'" />
   <Spinner v-if="subscriptionsLoading" />
-  <div v-if="subscriptions?.videos?.length > 0" class="home-videos-container small">
+  <div v-if="displayedSubscriptions.length > 0" class="home-videos-container small">
     <VideoEntry
-      v-for="video in subscriptions.videos"
+      v-for="video in displayedSubscriptions"
       :key="video.videoId"
       :video="video"
       :lazy="true"
     />
   </div>
+  <div v-if="subscriptions?.videos?.length > 0 && settingsStore.showHomeTrendingVideos" class="home-show-more">
+    <BadgeButton
+      v-if="displayedSubscriptions.length !== subscriptions?.videos?.length"
+      :click="showMoreSubscriptions">
+      <VTIcon name="mdi:reload" />
+      <p>Show more</p>
+    </BadgeButton>
+  </div>
   <div v-if="subscriptions?.videos?.length === 0" class="no-subscriptions">
     <VTIcon name="mdi:youtube-subscription" />
     <p>No subscriptions yet. Subscribe to a channel to see their latest uploads.</p>