styling

app/app.css

@@ -40,6 +40,9 @@ button {
   cursor: pointer;
   flex-shrink: 0;
 }
+.art img {
+  vertical-align: top;
+}
 @font-face {
   font-family: 'Lato';
   src: url('font/LatoLatin-Regular.woff2') format('woff2');
@@ -101,9 +104,6 @@ nav ul li.active {
 #player:not([data-flags~=repeat]) .repeat {
   opacity: 0.5;
 }
-#player .art img {
-  vertical-align: top;
-}
 #player .info {
   flex-grow: 1;
   white-space: nowrap;
@@ -245,6 +245,9 @@ nav ul li.active {
     width: 32px;
   }
 }
+#library li {
+  padding: 0;
+}
 #library .tiles {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@@ -341,6 +344,78 @@ nav ul li.active {
     width: 32px;
   }
 }
+#yt {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+#yt ul {
+  flex-grow: 1;
+  overflow: auto;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+#yt li {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 4px;
+  white-space: nowrap;
+}
+#yt h2 {
+  flex-grow: 1;
+  font-size: 100%;
+  font-weight: normal;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+#yt h2 .icon {
+  margin-right: 4px;
+  color: var(--primary);
+}
+#yt li:nth-child(odd) {
+  background-color: #555;
+}
+@media (pointer: coarse) {
+  #yt .icon {
+    width: 32px;
+  }
+}
+#yt .go {
+  width: 96px;
+  height: 96px;
+}
+#yt .go:disabled {
+  position: relative;
+}
+#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 p {
+  margin: 16px 8px;
+  white-space: pre-wrap;
+}
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 :root {
   --primary: dodgerblue;
   --fg: #fff;

app/css/app.less

@@ -40,6 +40,10 @@ button {
 	flex-shrink: 0;
 }
 
+.art img {
+	vertical-align: top;
+}
+
 @import "font.less";
 @import "icons.less";
 @import "main.less";
@@ -50,4 +54,5 @@ button {
 @import "library.less";
 @import "fs.less";
 @import "playlists.less";
+@import "yt.less";
 @import "variables.less";

app/css/library.less

@@ -1,6 +1,10 @@
 #library {
 	.component;
 
+	li {
+		padding: 0;
+	}
+
 	.tiles {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

app/css/player.less

@@ -7,8 +7,6 @@
 	&[data-state=play] .play { display: none; }
 	&:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; }
 
-	.art img { vertical-align: top; }
-
 	.info { 
 		flex-grow: 1;
 		white-space: nowrap;

app/css/yt.less

@@ -0,0 +1,38 @@
+#yt {
+	.component; 
+
+	align-items: center;
+	justify-content: center;
+
+	.go {
+		width: 96px;
+		height: 96px;
+
+		&: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;
+			}			
+		}
+	}
+
+	p {
+		margin: 16px 8px;
+		white-space: pre-wrap;
+	}
+}
+
+@keyframes rotate {
+	0% { transform: rotate(0deg); }
+	100% { transform: rotate(360deg); }
+}

app/index.html

@@ -50,6 +50,7 @@
 			</section>
 			<section id="yt">
 				<button class="go" data-icon="download">Go!</button>
+				<p></p>
 			</section>
 		</main>
 		<footer>

app/js/conf.js

@@ -1 +1,2 @@
 export const artSize = 96;
+export const ytPath = "_youtube";

app/js/yt.js

@@ -2,6 +2,7 @@ import * as mpd from "./lib/mpd.js";
 import * as html from "./lib/html.js";
 import * as pubsub from "./lib/pubsub.js";
 import * as ui from "./lib/ui.js";
+import * as conf from "./conf.js";
 
 let node;
 
@@ -9,12 +10,23 @@ async function onClick(e) {
 	let url = prompt("Please enter a YouTube URL:");
 	if (!url) { return; }
 
+	let button = e.target;
+	button.disabled = true;
+
+	let p = node.querySelector("p");
+	p.textContent = "";
+
 	let body = new URLSearchParams();
 	body.set("url", url);
 	let response = await fetch("/youtube", {method:"POST", body});
-	console.log(response);
 	let text = await response.text();
-	console.log(text, text.length);
+
+	button.disabled = false;
+	p.textContent = text;
+
+	if (response.status == 200) {
+		mpd.command(`update ${mpd.escape(conf.ytPath)}`);
+	}
 }
 
 export async function activate() {}