Setting to alter recommended videos display

api/video.js

@@ -181,7 +181,7 @@ module.exports = [
 
 				return render(200, "pug/video.pug", {
 					url, video, formats, subscribed, instanceOrigin, mediaFragment, autoplay, continuous,
-					sessionWatched, sessionWatchedNext
+					sessionWatched, sessionWatchedNext, settings
 				})
 
 			} catch (error) {

pug/settings.pug

@@ -47,7 +47,7 @@ block content
 
         +select({
           id: "local",
-          label: "Fetch videos",
+          label: "Fetch videos from",
           description: "If remote, the instance above will be used.\nIf local, CloudTube will try to connect to an instance running on your own computer. This can bypass blocks, but requires you to run the instance software.",
           options: [
             {value: "0", text: "Remote instance"},
@@ -78,6 +78,17 @@ block content
           ]
         })
 
+        +select({
+          id: "recommended_mode",
+          label: "Recommended videos",
+          description: 'Videos are recommended by YouTube to make people waste time.\nYou can take back some control by moving them below, or hiding them entirely.\nFor precise filtering of specific content, <a href="/filters">open the filter editor.</a>',
+          options: [
+            {value: "0", text: "Sidebar"},
+            {value: "1", text: "Below"},
+            {value: "2", text: "Hidden"}
+          ]
+        })
+
       .save-settings
         button.border-look Save
 

pug/video.pug

@@ -20,7 +20,10 @@ block content
         script(type="module" src=getStaticURL("html", "/static/js/continuous.js"))
         noscript
           meta(http-equiv="refresh" content=`${video.lengthSeconds+5};url=/watch?v=${first.videoId}&continuous=1&session-watched=${sessionWatchedNext}`)
-    main.video-page
+    main.video-page(class={
+      "video-page--recommended-below": settings.recommended_mode === 1,
+      "video-page--recommended-hidden": settings.recommended_mode === 2
+    })
       .main-video-section
         .video-container
           - const format = formats[0]

sass/includes/video-page.sass

@@ -10,6 +10,12 @@
   @media screen and (min-width: 1000px)
     grid-template-columns: 1fr 400px
 
+  &--recommended-below, &--recommended-hidden
+    grid-template-columns: none
+
+  &--recommended-hidden .related-videos
+    display: none
+
 .main-video-section
   .video-container
     text-align: center

utils/constants.js

@@ -20,6 +20,10 @@ let constants = {
 		quality: {
 			type: "integer",
 			default: 0
+		},
+		recommended_mode: {
+			type: "integer",
+			default: 0
 		}
 	},
 

utils/upgradedb.js

@@ -48,6 +48,11 @@ const deltas = [
 	function() {
 		db.prepare("CREATE TABLE Filters (id INTEGER, token TEXT NOT NULL, type TEXT NOT NULL, data TEXT NOT NULL, label TEXT, PRIMARY KEY (id))")
 			.run()
+	},
+	// 7: Settings +recommended_mode
+	function() {
+		db.prepare("ALTER TABLE Settings ADD COLUMN recommended_mode INTEGER DEFAULT 0")
+			.run()
 	}
 ]