yt limit

app/css/cyp.less

@@ -36,6 +36,10 @@ select {
 	color: inherit;
 }
 
+option {
+	color: initial;
+}
+
 button {
 	color: inherit;
 	font: inherit;

app/cyp.js

@@ -840,6 +840,9 @@ customElements.define("cyp-menu", Menu);
 
 const artSize = 96;
 const ytPath = "_youtube";
+let ytLimit = 3;
+
+function setYtLimit(limit) { ytLimit = limit; }
 
 const cache = {};
 const MIME = "image/jpeg";
@@ -1332,6 +1335,7 @@ class Settings extends Component {
 		super();
 		this._inputs = {
 			theme: this.querySelector("[name=theme]"),
+			ytLimit: this.querySelector("[name=yt-limit]"),
 			color: Array.from(this.querySelectorAll("[name=color]"))
 		};
 	}
@@ -1343,6 +1347,7 @@ class Settings extends Component {
 		mo.observe(this._app, {attributes:true});
 
 		this._inputs.theme.addEventListener("change", e => this._setTheme(e.target.value));
+		this._inputs.ytLimit.addEventListener("change", e => this._setYtLimit(e.target.value));
 		this._inputs.color.forEach(input => {
 			input.addEventListener("click", e => this._setColor(e.target.value));
 		});
@@ -1352,6 +1357,9 @@ class Settings extends Component {
 
 		const color = loadFromStorage("color");
 		(color ? this._app.setAttribute("color", color) : this._syncColor());
+
+		const ytLimit$1 = loadFromStorage("ytLimit") || ytLimit;
+		this._setYtLimit(ytLimit$1);
 	}
 
 	_onAppAttributeChange(mr) {
@@ -1380,6 +1388,11 @@ class Settings extends Component {
 		this._app.setAttribute("color", color);
 	}
 
+	_setYtLimit(limit) {
+		saveToStorage("color", color);
+		setYtLimit(limit);
+	}
+
 	_onComponentChange(c, isThis) {
 		this.hidden = !isThis;
 	}
@@ -1468,7 +1481,8 @@ class YT extends Component {
 		this._clear();
 		this._search.pending(true);
 
-		let response = await fetch(`/youtube?q=${encodeURIComponent(query)}`);
+		let url = `/youtube?q=${encodeURIComponent(query)}&limit=${encodeURIComponent(ytLimit)}`;
+		let response = await fetch(url);
 		let results = await response.json();
 
 		this._search.pending(false);

app/index.html

@@ -68,6 +68,15 @@
 							Green
 						</label>
 					</dd>
+					<dt>YouTube results</dt>
+					<dd>
+						<select name="yt-limit">
+							<option value="1">1</option>
+							<option value="3">3</option>
+							<option value="5">5</option>
+							<option value="10">10</option>
+						</select>
+					</dd>
 				</dl>
 			</cyp-settings>
 		</main>

app/js/conf.js

@@ -1,2 +1,5 @@
 export const artSize = 96;
 export const ytPath = "_youtube";
+export let ytLimit = 3;
+
+export function setYtLimit(limit) { ytLimit = limit; }

app/js/elements/settings.js

@@ -1,4 +1,6 @@
 import Component from "../component.js";
+import * as conf from "../conf.js";
+
 
 const prefix = "cyp";
 
@@ -15,6 +17,7 @@ class Settings extends Component {
 		super();
 		this._inputs = {
 			theme: this.querySelector("[name=theme]"),
+			ytLimit: this.querySelector("[name=yt-limit]"),
 			color: Array.from(this.querySelectorAll("[name=color]"))
 		};
 	}
@@ -26,6 +29,7 @@ class Settings extends Component {
 		mo.observe(this._app, {attributes:true});
 
 		this._inputs.theme.addEventListener("change", e => this._setTheme(e.target.value));
+		this._inputs.ytLimit.addEventListener("change", e => this._setYtLimit(e.target.value));
 		this._inputs.color.forEach(input => {
 			input.addEventListener("click", e => this._setColor(e.target.value));
 		});
@@ -35,6 +39,9 @@ class Settings extends Component {
 
 		const color = loadFromStorage("color");
 		(color ? this._app.setAttribute("color", color) : this._syncColor());
+
+		const ytLimit = loadFromStorage("ytLimit") || conf.ytLimit;
+		this._setYtLimit(ytLimit);
 	}
 
 	_onAppAttributeChange(mr) {
@@ -63,6 +70,11 @@ class Settings extends Component {
 		this._app.setAttribute("color", color);
 	}
 
+	_setYtLimit(limit) {
+		saveToStorage("color", color);
+		conf.setYtLimit(limit);
+	}
+
 	_onComponentChange(c, isThis) {
 		this.hidden = !isThis;
 	}

app/js/elements/yt.js

@@ -39,7 +39,8 @@ class YT extends Component {
 		this._clear();
 		this._search.pending(true);
 
-		let response = await fetch(`/youtube?q=${encodeURIComponent(query)}`);
+		let url = `/youtube?q=${encodeURIComponent(query)}&limit=${encodeURIComponent(conf.ytLimit)}`;
+		let response = await fetch(url);
 		let results = await response.json();
 
 		this._search.pending(false);

index.js

@@ -10,11 +10,11 @@ function escape(arg) {
     return `'${arg.replace(/'/g, `'\\''`)}'`;
 }
 
-function searchYoutube(q, response) {
+function searchYoutube(q, limit, response) {
 	response.setHeader("Content-Type", "text/plain"); // necessary for firefox to read by chunks
 
-	console.log("YouTube searching", q);
+	console.log("YouTube searching", q, limit);
-	q = escape(`ytsearch3:${q}`);
+	q = escape(`ytsearch${limit}:${q}`);
 	const command = `${cmd} -j ${q} | jq "{id,title}" | jq -s .`;
 
 	require("child_process").exec(command, {}, (error, stdout, stderr) => {
@@ -58,8 +58,9 @@ function downloadYoutube(id, response) {
 
 function handleYoutubeSearch(url, response) {
 	let q = url.searchParams.get("q");
+	let limit = url.searchParams.get("limit") || "";
 	if (q) {
-		searchYoutube(q, response);
+		searchYoutube(q, limit, response);
 	} else {
 		response.writeHead(404);
 		response.end();