design

app/app.css

@@ -1,4 +1,11 @@
+html {
+  background-color: #fff;
+  font-family: lato, sans-serif;
+}
 body {
+  background-color: #888;
+  color: #fff;
+  text-shadow: 0 1px 1px #000;
   max-width: 800px;
   margin: 0 auto;
   overflow: hidden;
@@ -10,6 +17,18 @@ body > header,
 body > footer {
   box-shadow: 0 0 3px #000;
 }
+@font-face {
+  font-family: 'Lato';
+  src: url('font/LatoLatin-Regular.woff2') format('woff2');
+  font-style: normal;
+  font-weight: normal;
+}
+@font-face {
+  font-family: 'Lato';
+  src: url('font/LatoLatin-bold.woff2') format('woff2');
+  font-style: bold;
+  font-weight: normal;
+}
 main {
   flex-grow: 1;
   overflow: hidden;
@@ -23,7 +42,7 @@ nav ul {
 }
 nav ul li {
   text-align: center;
-  flex-grow: 1;
+  flex: 1 0 0;
   line-height: 40px;
 }
 nav ul li:hover {
@@ -57,6 +76,27 @@ nav ul li.active {
   display: flex;
   flex-direction: column;
 }
+.component ul {
+  flex-grow: 1;
+  overflow: auto;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.component .grid li {
+  display: flex;
+  flex-direction: row;
+}
+.component .grid li h2 {
+  flex-grow: 1;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.component .grid li:nth-child(odd) {
+  background-color: #666;
+}
 #queue {
   height: 100%;
   display: flex;
@@ -69,6 +109,20 @@ nav ul li.active {
   margin: 0;
   padding: 0;
 }
+#queue .grid li {
+  display: flex;
+  flex-direction: row;
+}
+#queue .grid li h2 {
+  flex-grow: 1;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+#queue .grid li:nth-child(odd) {
+  background-color: #666;
+}
 #queue li {
   display: flex;
   flex-direction: row;
@@ -76,9 +130,6 @@ nav ul li.active {
 #queue li + li {
   border-top: 1px solid #888;
 }
-#queue .info {
-  flex-grow: 1;
-}
 #queue .current {
   font-weight: bold;
 }
@@ -94,3 +145,43 @@ nav ul li.active {
   margin: 0;
   padding: 0;
 }
+#library .grid li {
+  display: flex;
+  flex-direction: row;
+}
+#library .grid li h2 {
+  flex-grow: 1;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+#library .grid li:nth-child(odd) {
+  background-color: #666;
+}
+#fs {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+#fs ul {
+  flex-grow: 1;
+  overflow: auto;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+#fs .grid li {
+  display: flex;
+  flex-direction: row;
+}
+#fs .grid li h2 {
+  flex-grow: 1;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+#fs .grid li:nth-child(odd) {
+  background-color: #666;
+}

app/css/app.less

@@ -1,4 +1,12 @@
+html {
+	background-color: #fff;
+	font-family: lato, sans-serif;
+}
+
 body {
+	background-color: #888;
+	color: #fff;
+	text-shadow: 0 1px 1px #000;
 	max-width: 800px;
 	margin: 0 auto;
 	overflow: hidden;
@@ -12,9 +20,11 @@ body {
 }
 
 
+@import "font.less";
 @import "main.less";
 @import "nav.less";
 @import "player.less";
 @import "component.less";
 @import "queue.less";
 @import "library.less";
+@import "fs.less";

app/css/component.less

@@ -2,4 +2,31 @@
 	height: 100%;
 	display: flex;
 	flex-direction: column;
+
+	ul {
+		flex-grow: 1;
+		overflow: auto;
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	.grid {
+		li {
+			display: flex;
+			flex-direction: row;
+
+			h2 {
+				flex-grow: 1;
+				margin: 0;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
+
+		li:nth-child(odd) {
+			background-color: #666;
+		}
+	}
 }

app/css/font.less

@@ -0,0 +1,13 @@
+@font-face {
+    font-family: 'Lato';
+    src: url('font/LatoLatin-Regular.woff2') format('woff2');
+    font-style: normal;
+    font-weight: normal;
+}
+
+@font-face {
+    font-family: 'Lato';
+    src: url('font/LatoLatin-bold.woff2') format('woff2');
+    font-style: bold;
+    font-weight: normal;
+}

app/css/fs.less

@@ -0,0 +1,3 @@
+#fs {
+	.component;
+}

app/css/library.less

@@ -1,14 +1,3 @@
 #library {
 	.component;
-
-	ul {
-		flex-grow: 1;
-		overflow: auto;
-		list-style: none;
-		margin: 0;
-		padding: 0;
-	}
-
-	li {
-	}
 }

app/css/nav.less

@@ -7,7 +7,7 @@ nav ul {
 
 	li {
 		text-align: center;
-		flex-grow: 1;
+		flex: 1 0 0;
 		line-height: 40px;
 
 		&:hover { background-color:red;}

app/css/queue.less

@@ -1,14 +1,6 @@
 #queue {
 	.component;
 
-	ul {
-		flex-grow: 1;
-		overflow: auto;
-		list-style: none;
-		margin: 0;
-		padding: 0;
-	}
-
 	li {
 		display: flex;
 		flex-direction: row;
@@ -18,6 +10,5 @@
 		}
 	}
 
-	.info { flex-grow: 1; }
 	.current { font-weight: bold; }
 }

app/index.html

@@ -26,7 +26,7 @@
 		<main>
 			<section id="queue">
 				<header></header>
-				<ul></ul>
+				<ul class="grid"></ul>
 			</section>
 			<section id="playlists"></section>
 			<section id="library">
@@ -35,14 +35,17 @@
 			</section>
 			<section id="fs">
 				<header></header>
-				<ul></ul>
+				<ul class="grid"></ul>
 			</section>
 			<section id="misc"></section>
 		</main>
 		<footer>
 			<nav>
 				<ul>
-					<li data-for="queue">Q</li>
+					<li data-for="queue">
+						Q
+						<span id="queue-length"></span>
+					</li>
 					<li data-for="playlists">Playlists</li>
 					<li data-for="library">Library</li>
 					<li data-for="fs">FS</li>

app/js/app.js

@@ -22,13 +22,14 @@ export function activate(what) {
 }
 
 async function init() {
+	await mpd.init();
+
 	nav.init(document.querySelector("nav"));
 	for (let id in components) {
 		let node = document.querySelector(`#${id}`);
 		components[id].init(node);
 	}
 
-	await mpd.init();
 	player.init(document.querySelector("#player"));
 
 	activate("fs");

app/js/fs.js

@@ -8,26 +8,17 @@ import * as ui from "./lib/ui.js";
 let node;
 
 function buildHeader(path) {
-	filter = filter || {};
 	let header = node.querySelector("header");
 	html.clear(header);
 
-	let button = html.button({}, "Music Library", header);
+	let button = html.button({}, "/", header);
-	button.addEventListener("click", e => listArtists());
+	button.addEventListener("click", e => list(""));
 
-	let artist = filter["Artist"];
+	path.split("/").filter(x => x).forEach((name, index, all) => {
-	if (artist) {
+		let button = html.button({}, name, header);
-		let artistFilter = {"Artist":artist};
+		let path = all.slice(0, index+1).join("/");
-		let button = html.button({}, artist, header);
+		button.addEventListener("click", e => list(path));
-		button.addEventListener("click", e => listAlbums(artistFilter));
+	});
-
-		let album = filter["Album"];
-		if (album) {
-			let albumFilter = Object.assign({}, artistFilter, {"Album":album});
-			let button = html.button({}, album, header);
-			button.addEventListener("click", e => listSongs(albumFilter));
-		}
-	}
 }
 
 function buildDirectory(data, parent) {
@@ -53,7 +44,7 @@ function buildResults(results) {
 async function list(path) {
 	let results = await mpd.listPath(path);
 	buildResults(results);
-//	buildHeader(path);
+	buildHeader(path);
 }
 
 export async function activate() {

app/js/lib/ui.js

@@ -100,11 +100,10 @@ export function song(type, data, parent) {
 }
 
 export function group(type, label, urlOrFilter, parent) {
-	let node = html.node("li", {}, label, parent);
+	let node = html.node("li", {}, "", parent);
 
-	if (type == GROUP_DIRECTORY) {
+	if (type == GROUP_DIRECTORY) { label = `📁 ${label}`; }
-		node.insertBefore(html.text("📁 "), node.firstChild);
+	html.node("h2", {}, label, node);
-	}
 
 	addAndPlayButton(urlOrFilter, node);
 	addButton(urlOrFilter, node);

app/js/library.js

@@ -44,6 +44,8 @@ function buildArtist(artist, filter, parent) {
 function buildSongs(songs, filter) {
 	let ul = node.querySelector("ul");
 	html.clear(ul);
+	ul.classList.remove("tiles");
+	ul.classList.add("grid");
 
 	songs.map(song => ui.song(ui.SONG_LIBRARY, song, ul));
 }
@@ -51,6 +53,8 @@ function buildSongs(songs, filter) {
 function buildAlbums(albums, filter) {
 	let ul = node.querySelector("ul");
 	html.clear(ul);
+	ul.classList.add("tiles");
+	ul.classList.remove("grid");
 
 	albums.map(album => buildAlbum(album, filter, ul));
 }
@@ -58,6 +62,8 @@ function buildAlbums(albums, filter) {
 function buildArtists(artists, filter) {
 	let ul = node.querySelector("ul");
 	html.clear(ul);
+	ul.classList.add("tiles");
+	ul.classList.remove("grid");
 
 	artists.map(artist => buildArtist(artist, filter, ul));
 }

app/js/queue.js

@@ -34,7 +34,7 @@ function onQueueChange(message, publisher, data) {
 async function syncQueue() {
 	let songs = await mpd.listQueue();
 	buildSongs(songs);
-// FIXME	updateCount(songs.length)
+	document.querySelector("#queue-length").textContent = `(${songs.length})`;
 }
 
 export async function activate() {
@@ -43,6 +43,7 @@ export async function activate() {
 
 export function init(n) {
 	node = n;
+	syncQueue();
 	pubsub.subscribe("song-change", onSongChange);
 	pubsub.subscribe("queue-change", onQueueChange);
 }