✨ Added trending toggle in settings (#2735)

client/components/Logo.vue

@@ -0,0 +1,52 @@
+<template>
+  <nuxt-link class="logo-link" to="/">
+    <h1 class="logo">
+      <span>View</span>
+      <span class="logo-colored">Tube</span>
+    </h1>
+    <img class="logo-small" src="@/assets/icon.svg" alt="ViewTube" />
+  </nuxt-link>
+</template>
+
+<style lang="scss">
+.logo-link {
+  text-decoration: none;
+  margin: auto 10px auto 10px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  position: relative;
+  z-index: +1;
+
+  .logo {
+    font-family: $header-font;
+    font-size: 1.5rem;
+    color: var(--title-color);
+    width: auto;
+    overflow: hidden;
+    white-space: nowrap;
+    transition: width 300ms linear;
+    display: flex;
+    margin: 4px 0 0 0;
+
+    span {
+      display: block;
+    }
+
+    .logo-colored {
+      color: transparent;
+      background-image: var(--theme-color-gradient);
+      background-clip: text;
+      -webkit-background-clip: text;
+    }
+  }
+
+  .logo-small {
+    margin: auto;
+    height: calc(#{$header-height} - 20px);
+    transform: scale(0.8) translateY(-2px);
+    transition: clip-path 300ms $intro-easing, transform 300ms linear;
+  }
+}
+</style>

client/components/Settings.vue

@@ -186,6 +186,14 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
         @valuechange="val => settingsStore.setShowHomeSubscriptions(val)"
       />
 
+      <SwitchButton
+        :value="settingsStore.showHomeTrendingVideos"
+        :label="'Show trending videos on home screen'"
+        :disabled="false"
+        :right="true"
+        @valuechange="val => settingsStore.setShowHomeTrendingVideos(val)"
+      />
+
       <h2><VTIcon name="mdi:auto-fix" />Enhancements</h2>
       <SwitchButton
         :value="settingsStore.rewriteYouTubeURLs"

client/components/header/MainHeader.vue

@@ -1,20 +1,19 @@
 <script setup lang="ts">
+import Logo from '@/components/Logo.vue';
 import MainSearchBox from '@/components/MainSearchBox.vue';
 import UserMenu from '@/components/header/UserMenu.vue';
-
+import { useSettingsStore } from '@/store/settings';
+import { useUserStore } from '@/store/user';
+const settingsStore = useSettingsStore();
+const userStore = useUserStore();
+const route = useRoute();
 const { posAbsolute, topPositionPx } = useHeaderScroll();
 </script>
 
 <template>
   <div class="header" :class="{ absolute: posAbsolute }">
-    <nuxt-link class="logo-link" to="/">
-      <h1 class="logo">
-        <span>View</span>
-        <span class="logo-colored">Tube</span>
-      </h1>
-      <img class="logo-small" src="@/assets/icon.svg" alt="ViewTube" />
-    </nuxt-link>
-    <MainSearchBox />
+    <Logo v-if="route.fullPath !== '/' || ((userStore.isLoggedIn && settingsStore.showHomeSubscriptions) || settingsStore.showHomeTrendingVideos)" />
+    <MainSearchBox v-if="route.fullPath !== '/' || ((userStore.isLoggedIn && settingsStore.showHomeSubscriptions) || settingsStore.showHomeTrendingVideos)" />
     <UserMenu />
   </div>
 </template>
@@ -28,7 +27,7 @@ const { posAbsolute, topPositionPx } = useHeaderScroll();
   left: 0;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: right;
   z-index: 800;
   background-color: var(--header-transparent);
   backdrop-filter: blur(10px);
@@ -51,49 +50,10 @@ const { posAbsolute, topPositionPx } = useHeaderScroll();
     position: absolute;
   }
 
-  .logo-link {
-    text-decoration: none;
-    margin: auto 10px auto 10px;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: center;
-    position: relative;
-    z-index: +1;
-
-    .logo {
-      font-family: $header-font;
-      font-size: 1.5rem;
-      color: var(--title-color);
-      width: auto;
-      overflow: hidden;
-      white-space: nowrap;
-      transition: width 300ms linear;
-      display: flex;
-      margin: 4px 0 0 0;
-
-      span {
-        display: block;
-      }
-
-      .logo-colored {
-        color: transparent;
-        background-image: var(--theme-color-gradient);
-        background-clip: text;
-        -webkit-background-clip: text;
-      }
-    }
-
-    .logo-small {
-      margin: auto;
-      height: calc(#{$header-height} - 20px);
-      transform: scale(0.8) translateY(-2px);
-      transition: clip-path 300ms $intro-easing, transform 300ms linear;
-    }
-
-    @media screen and (max-width: $mobile-width) {
+  @media screen and (max-width: $mobile-width) {
+    .logo-link {
       width: 40px;
-
+    
       .logo {
         width: 0;
       }

client/pages/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useUserStore } from '@/store/user';
 import { useSettingsStore } from '@/store/settings';
+import Logo from '@/components/Logo.vue';
 
 const settingsStore = useSettingsStore();
 const userStore = useUserStore();
@@ -19,10 +20,18 @@ const { data: homeFeedData, error: homeFeedError, pending: homeFeedLoading } = u
     <ErrorPage v-if="homeFeedError" text="Error loading homepage. The API may not be reachable." />
     <HomeSubscriptions v-if="userStore.isLoggedIn && settingsStore.showHomeSubscriptions" />
     <HomeVideosContainer
-      v-if="homeFeedData?.videos"
+      v-if="settingsStore.showHomeTrendingVideos && homeFeedData?.videos"
       :videos="homeFeedData?.videos"
       :short="settingsStore.showHomeSubscriptions"
     />
+
+    <div
+      v-if="!(userStore.isLoggedIn && settingsStore.showHomeSubscriptions) && !settingsStore.showHomeTrendingVideos"
+      class="home-search-container centered">
+
+      <Logo />
+      <MainSearchBox />
+    </div>
   </div>
 </template>
 
@@ -67,5 +76,23 @@ const { data: homeFeedData, error: homeFeedError, pending: homeFeedLoading } = u
     display: grid;
     justify-items: center;
   }
+
+  .home-search-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    width: calc(100% - 50px);
+    max-width: $search-box-width;
+
+    &.centered {
+      top: calc(50% - $header-height);
+    }
+    
+    .logo-link {
+      justify-content: center;
+      margin: 10px auto;
+    }
+  }
 }
 </style>

client/store/settings.ts

@@ -41,6 +41,7 @@ export const useSettingsStore = defineStore(
         saveVideoHistory: true,
         settingsSaving: false,
         showHomeSubscriptions: true,
+        showHomeTrendingVideos: true,
         sponsorblockEnabled: true,
         sponsorblockSegmentInteraction: 'ask' as SegmentOption,
         sponsorblockSegmentIntro: 'ask' as SegmentOption,

server/src/user/settings/dto/settings.dto.ts

@@ -27,6 +27,8 @@ export class SettingsDto {
 
   showHomeSubscriptions: boolean;
 
+  showHomeTrendingVideos: boolean;
+
   alwaysLoopVideo: boolean;
 
   hideComments: boolean;

server/src/user/settings/schemas/settings.schema.ts

@@ -47,6 +47,9 @@ export class Settings extends Document implements SettingsDto {
   @Prop()
   showHomeSubscriptions: boolean;
 
+  @Prop()
+  showHomeTrendingVideos: boolean;
+
   @Prop()
   alwaysLoopVideo: boolean;
 

server/src/user/settings/settings.service.ts

@@ -26,6 +26,7 @@ export class SettingsService {
     defaultVideoSpeed: 1,
     saveVideoHistory: true,
     showHomeSubscriptions: true,
+    showHomeTrendingVideos: true,
     sponsorblockEnabled: true,
     sponsorblockSegmentInteraction: 'ask',
     sponsorblockSegmentIntro: 'ask',

shared/api.schema.ts

@@ -231,6 +231,7 @@ export interface components {
       autoplay: boolean;
       saveVideoHistory: boolean;
       showHomeSubscriptions: boolean;
+      showHomeTrendingVideos: boolean;
       alwaysLoopVideo: boolean;
       hideComments: boolean;
       autoplayNextVideo: boolean;