From e0ab191d7209aeedbdc685d91503ca4c105eb928 Mon Sep 17 00:00:00 2001
From: Ondrej Zara <ondrej.zara@gmail.com>
Date: Sun, 14 Apr 2019 21:02:21 +0200
Subject: [PATCH] yt tuning

---
 app/app.css      | 43 ++++++++++++++++++-----------------------
 app/css/app.less |  1 +
 app/css/yt.less  | 50 +++++++++++++++++++++---------------------------
 app/index.html   |  8 ++++++--
 app/js/yt.js     | 45 +++++++++++++++++++++++++++++--------------
 index.js         | 12 ++++++------
 6 files changed, 85 insertions(+), 74 deletions(-)

diff --git a/app/app.css b/app/app.css
index cc85feb..1b63dcc 100644
--- a/app/app.css
+++ b/app/app.css
@@ -38,6 +38,7 @@ button {
   flex-direction: row;
   align-items: center;
   display: inline-flex;
+  white-space: nowrap;
   background-color: transparent;
   padding: 0;
   border: none;
@@ -576,8 +577,6 @@ nav ul li.active {
   height: 100%;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
 }
 #yt header {
   display: flex;
@@ -632,36 +631,32 @@ nav ul li.active {
 #yt li:nth-child(odd) {
   background-color: var(--bg-alt);
 }
-#yt .go {
-  width: 96px;
-  height: 96px;
-  justify-content: center;
+#yt header {
+  border-bottom: 1px solid var(--fg);
 }
-#yt .go:disabled {
-  position: relative;
+#yt header button + button {
+  margin-left: 16px;
 }
-#yt .go:disabled::before {
-  content: "";
-  display: block;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  border-top: 3px solid var(--primary);
-  border-radius: 50%;
-  animation: rotate linear 3s infinite;
+#yt .clear {
+  margin-left: auto;
 }
-#yt p {
-  margin: 16px 8px;
+#yt pre {
+  flex-grow: 1;
+  overflow: auto;
   white-space: pre-wrap;
 }
-@keyframes rotate {
+#yt.pending header {
+  background-image: linear-gradient(var(--primary), var(--primary));
+  background-repeat: no-repeat;
+  background-size: 25% 4px;
+  animation: bar ease-in-out 3s alternate infinite;
+}
+@keyframes bar {
   0% {
-    transform: rotate(0deg);
+    background-position: 0 100%;
   }
   100% {
-    transform: rotate(360deg);
+    background-position: 100% 100%;
   }
 }
 #settings {
diff --git a/app/css/app.less b/app/css/app.less
index 36ec2e6..8a8dd48 100644
--- a/app/css/app.less
+++ b/app/css/app.less
@@ -35,6 +35,7 @@ button {
 
 	.flex-row;
 	display: inline-flex;
+	white-space: nowrap;
 
 	background-color: transparent;
 	padding: 0;
diff --git a/app/css/yt.less b/app/css/yt.less
index 4a5b4c6..929acb5 100644
--- a/app/css/yt.less
+++ b/app/css/yt.less
@@ -1,39 +1,33 @@
 #yt {
-	.component; 
+	.component;
 
-	align-items: center;
-	justify-content: center;
+	header {
+		border-bottom: 1px solid var(--fg);
 
-	.go {
-		width: 96px;
-		height: 96px;
-		justify-content: center;
-
-		&:disabled {
-			position: relative;
-
-			&::before {
-				content: "";
-				display: block;
-				position: absolute;
-				left: 0;
-				right: 0;
-				top: 0;
-				bottom: 0;
-				border-top: 3px solid var(--primary);
-				border-radius: 50%;
-				animation: rotate linear 3s infinite;
-			}			
+		button + button {
+			margin-left: 16px;
 		}
 	}
 
-	p {
-		margin: 16px 8px;
+	.clear {
+		margin-left: auto;
+	}
+
+	pre {
+		flex-grow: 1;
+		overflow: auto;
 		white-space: pre-wrap;
 	}
+
+	&.pending header {
+		background-image: linear-gradient(var(--primary), var(--primary));
+		background-repeat: no-repeat;
+		background-size: 25% 4px;
+		animation: bar ease-in-out 3s alternate infinite;
+	}
 }
 
-@keyframes rotate {
-	0% { transform: rotate(0deg); }
-	100% { transform: rotate(360deg); }
+@keyframes bar {
+	0% { background-position: 0 100%; }
+	100% { background-position: 100% 100%; }
 }
diff --git a/app/index.html b/app/index.html
index 901f1ca..1d3d79b 100644
--- a/app/index.html
+++ b/app/index.html
@@ -57,8 +57,12 @@
 				<ul></ul>
 			</section>
 			<section id="yt">
-				<button class="go" data-icon="download">Go!</button>
-				<p></p>
+				<header>
+					<button class="download" data-icon="download">Download</button>
+					<button class="search-download" data-icon="magnify">Search &amp; Download</button>
+					<button class="clear" data-icon="close">Clear</button>
+				</header>
+				<pre></pre>
 			</section>
 			<section id="settings">
 				<dl>
diff --git a/app/js/yt.js b/app/js/yt.js
index a15eb04..ec598c3 100644
--- a/app/js/yt.js
+++ b/app/js/yt.js
@@ -8,41 +8,58 @@ let node;
 const decoder = new TextDecoder("utf-8");
 
 function decodeChunk(byteArray) {
-	return decoder.decode(byteArray);
+	// \r => \n
+	return decoder.decode(byteArray).replace(/\u000d/g, "\n");
 }
 
-async function onClick(e) {
-	let url = prompt("Please enter a YouTube URL:");
-	if (!url) { return; }
+async function post(q) {
+	let pre = node.querySelector("pre");
+	html.clear(pre);
 
-	let button = e.target;
-	button.disabled = true;
-
-	let p = node.querySelector("p");
-	p.textContent = "";
+	node.classList.add("pending");
 
 	let body = new URLSearchParams();
-	body.set("url", url);
+	body.set("q", q);
 	let response = await fetch("/youtube", {method:"POST", body});
 
 	let reader = response.body.getReader();
 	while (true) {
 		let { done, value } = await reader.read();
 		if (done) { break; }
-		p.textContent += decodeChunk(value);
+		pre.textContent += decodeChunk(value);
+		pre.scrollTop = pre.scrollHeight;
 	}
 	reader.releaseLock();
 
-	button.disabled = false;
+	node.classList.remove("pending");
+
 	if (response.status == 200) {
 		mpd.command(`update ${mpd.escape(conf.ytPath)}`);
 	}
 }
 
+function download() {
+	let url = prompt("Please enter a YouTube URL:");
+	if (!url) { return; }
+
+	post(url);
+}
+
+function search() {
+	let q = prompt("Please enter a search string:");
+	if (!q) { return; }
+	post(`ytsearch:${q}`);
+}
+
+function clear() {
+	html.clear(node.querySelector("pre"));
+}
+
 export async function activate() {}
 
 export function init(n) {
 	node = n;
-
-	let button = node.querySelector(".go").addEventListener("click", onClick);
+	node.querySelector(".download").addEventListener("click", e => download());
+	node.querySelector(".search-download").addEventListener("click", e => search());
+	node.querySelector(".clear").addEventListener("click", e => clear());
 }
diff --git a/index.js b/index.js
index 7db577c..4e67a0f 100644
--- a/index.js
+++ b/index.js
@@ -5,16 +5,16 @@ const port = Number(process.argv[2]) || 8080;
 const cmd = "youtube-dl";
 //const cmd = "./test.sh";
 
-function downloadYoutube(url, response) {
+function downloadYoutube(q, response) {
 	response.setHeader("Content-Type", "text/plain"); // necessary for firefox to read by chunks
 //	response.setHeader("Content-Type", "text/plain; charset=utf-8");
 
 	// FIXME create directory
-	console.log("YouTube downloading", url);
+	console.log("YouTube downloading", q);
 	let args = [
 		"-f", "bestaudio",
 		"-o", `${__dirname}/_youtube/%(title)s-%(id)s.%(ext)s`,
-		url
+		q
 	]
 	let child = require("child_process").spawn(cmd, args);
 
@@ -39,9 +39,9 @@ function handleYoutube(request, response) {
 	request.setEncoding("utf8");
 	request.on("data", chunk => str += chunk);
 	request.on("end", () => {
-		let url = require("querystring").parse(str)["url"];
-		if (url) {
-			downloadYoutube(url, response);
+		let q = require("querystring").parse(str)["q"];
+		if (q) {
+			downloadYoutube(q, response);
 		} else {
 			response.writeHead(404);
 			response.end();