✨ Added recommended videos toggle (#2747)

client/components/Settings.vue

@@ -211,6 +211,14 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
         :right="true"
         @valuechange="val => settingsStore.setHideComments(val)"
       />
+      <SwitchButton
+        :value="settingsStore.showRecommendedVideos"
+        :label="'Show recommended videos on a video page'"
+        :small-label="'Autoplay next video will be ignored for recommended videos.'"
+        :disabled="false"
+        :right="true"
+        @valuechange="val => settingsStore.setShowRecommendedVideos(val)"
+      />
 
       <h2><VTIcon name="mdi:television" />Videoplayer</h2>
       <div class="settings-dropdown-menu">

client/pages/watch.vue

@@ -112,7 +112,7 @@ const isPlaylist = computed(() => {
 });
 
 const isAutoplaying = computed(() => {
-  return isPlaylist.value || settingsStore.autoplay || route.query.autoplay === 'true';
+  return isPlaylist.value || (settingsStore.autoplay && !settingsStore.showRecommendedVideos) || route.query.autoplay === 'true';
 });
 
 const nextUpVideo = computed(() => {
@@ -264,7 +264,7 @@ const onVideoEnded = () => {
     !videoPlayerStore.loop
   ) {
     playlistSectionRef.value.playNextVideo();
-  } else if (settingsStore.autoplayNextVideo && video.value.recommendedVideos) {
+  } else if (settingsStore.autoplayNextVideo && settingsStore.showRecommendedVideos && video.value.recommendedVideos) {
     router.push({
       path: route.fullPath,
       query: { v: video.value.recommendedVideos[0].id, autoplay: 'true' }
@@ -314,7 +314,7 @@ const watchPageTitle = computed(() => {
       @video-ended="onVideoEnded"
     />
     <div v-if="video && !videoPending" class="video-meta">
-      <div class="recommended-videos mobile">
+      <div v-if="settingsStore.showRecommendedVideos" class="recommended-videos mobile">
         <NextUpVideo v-if="nextUpVideo && settingsStore.autoplayNextVideo" :video="nextUpVideo" />
         <CollapsibleSection :label="'Recommended videos'" :opened="recommendedOpen">
           <RecommendedVideos
@@ -551,7 +551,7 @@ const watchPageTitle = computed(() => {
       width: 100%;
 
       @media screen and (min-width: $mobile-width) {
-        width: calc(100% - 340px);
+        width: 100%;
         padding: 10px;
       }
 

client/store/settings.ts

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

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

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

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

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

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

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

shared/api.schema.ts

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