diff --git a/app/js/lib/format.js b/app/js/lib/format.js
index 499508f..b9fb645 100644
--- a/app/js/lib/format.js
+++ b/app/js/lib/format.js
@@ -1,3 +1,5 @@
+const SEPARATOR = " · ";
+
export function time(sec) {
sec = Math.round(sec);
let m = Math.floor(sec / 60);
@@ -5,9 +7,10 @@ export function time(sec) {
return `${m}:${s.toString().padStart(2, "0")}`;
}
-export function artistAlbum(artist, album) {
+export function subtitle(data) {
let tokens = [];
- artist && tokens.push(artist);
- album && tokens.push(album);
- return tokens.join(" – ");
+ data["Artist"] && tokens.push(data["Artist"]);
+ data["Album"] && tokens.push(data["Album"]);
+ data["duration"] && tokens.push(time(Number(data["duration"])));
+ return tokens.join(SEPARATOR);
}
\ No newline at end of file
diff --git a/app/js/lib/icons.js b/app/js/lib/icons.js
index 7003642..8fda23a 100644
--- a/app/js/lib/icons.js
+++ b/app/js/lib/icons.js
@@ -17,6 +17,9 @@ ICONS["play"] = `
`;
+ICONS["album"] = `
`;
ICONS["plus"] = `
`;
@@ -32,6 +35,9 @@ ICONS["shuffle"] = `
`;
+ICONS["account-multiple"] = `
`;
ICONS["fast-forward"] = `
`;
@@ -77,6 +83,9 @@ ICONS["plus-circle-outline"] = `
`;
+ICONS["artist"] = `
`;
ICONS["play-circle"] = `
`;
diff --git a/app/js/lib/search.js b/app/js/lib/search.js
index eee9ca0..a57d08b 100644
--- a/app/js/lib/search.js
+++ b/app/js/lib/search.js
@@ -1,5 +1,7 @@
import * as html from "./html.js";
+const OPEN = "open";
+
export function normalize(str) {
// FIXME diac/translit
return str.toLowerCase();
@@ -8,13 +10,27 @@ export function normalize(str) {
export default class Search extends EventTarget {
constructor(parent) {
super();
- this._node = html.node("div", {className:"search"});
- let icon = html.icon("magnify", this._node);
+ this._node = html.node("label", {className:"search"});
+
+ this._input = html.node("input", {type:"text"}, "", this._node);
+ html.icon("magnify", this._node);
+
+ this._node.addEventListener("click", e => {
+ if (e.target == this._input) { return; }
+ if (this._node.classList.contains(OPEN)) {
+ this.reset()
+ } else {
+ this._node.classList.add(OPEN);
+ }
+ });
}
getNode() { return this._node; }
getValue() { return this._input.value; }
- reset() { this._input.value = ""; }
+ reset() {
+ this._input.value = "";
+ this._node.classList.remove(OPEN);
+ }
}
diff --git a/app/js/lib/ui.js b/app/js/lib/ui.js
index 71a6cb5..f89398f 100644
--- a/app/js/lib/ui.js
+++ b/app/js/lib/ui.js
@@ -42,7 +42,7 @@ async function fillArt(parent, filter) {
if (src) {
html.node("img", {src}, "", parent);
} else {
- html.icon("music", parent);
+ html.icon(album ? "album" : "artist", parent);
}
}
@@ -50,25 +50,29 @@ function fileName(data) {
return data["file"].split("/").pop();
}
-function formatTitle(ctx, data) {
+function formatSongInfo(ctx, data) {
+ let lines = [];
let tokens = [];
switch (ctx) {
- case CTX_FS: return fileName(data); break;
+ case CTX_FS: lines.push(fileName(data)); break;
case CTX_LIBRARY:
- data["Track"] && tokens.push(data["Track"].padStart(2, "0"));
- data["Title"] && tokens.push(data["Title"]);
- if (!tokens.length) {tokens.push(fileName(data)); }
- return tokens.join(" ");
- break;
-
case CTX_QUEUE:
- data["Artist"] && tokens.push(data["Artist"]);
- data["Title"] && tokens.push(data["Title"]);
- if (!tokens.length) { tokens.push(fileName(data)); }
- return tokens.join(" - ");
+ if (data["Title"]) {
+ if (ctx == CTX_LIBRARY && data["Track"]) {
+ tokens.push(data["Track"].padStart(2, "0"));
+ }
+ tokens.push(data["Title"]);
+ lines.push(tokens.join(" "));
+ lines.push(format.subtitle(data));
+ } else {
+ lines.push(fileName(data));
+ lines.push("\u00A0");
+ }
break;
}
+
+ return lines;
}
function playButton(type, what, parent) {
@@ -128,13 +132,14 @@ function addButton(type, what, parent) {
export function song(ctx, data, parent) {
let node = html.node("li", {className:"song"}, "", parent);
+ let info = html.node("div", {className:"info"}, "", node);
- let title = formatTitle(ctx, data);
- let h2 = html.node("h2", {}, "", node);
- if (ctx == CTX_FS || ctx == CTX_LIBRARY) { html.icon("music", h2); }
- html.text(title, h2);
+ if (ctx == CTX_FS) { html.icon("music", info); }
+
+ let lines = formatSongInfo(ctx, data);
+ html.node("h2", {}, lines.shift(), info);
+ lines.length && html.node("div", {}, lines.shift(), info);
- html.node("span", {className:"duration"}, format.time(Number(data["duration"])), node);
switch (ctx) {
case CTX_QUEUE:
@@ -159,14 +164,14 @@ export function group(ctx, label, urlOrFilter, parent) {
let node = html.node("li", {className:"group"}, "", parent);
if (ctx == CTX_LIBRARY) {
+ node.classList.add("has-art");
let art = html.node("span", {className:"art"}, "", node);
fillArt(art, urlOrFilter);
}
- let h2 = html.node("h2", {}, "", node);
- if (ctx == CTX_FS) { html.icon("folder", h2); }
- html.text(label, h2);
-
+ let info = html.node("span", {className:"info"}, "", node);
+ if (ctx == CTX_FS) { html.icon("folder", info); }
+ html.node("h2", {}, label, info);
let type = (ctx == CTX_FS ? TYPE_URL : TYPE_FILTER);
@@ -179,9 +184,9 @@ export function group(ctx, label, urlOrFilter, parent) {
export function playlist(name, parent) {
let node = html.node("li", {}, "", parent);
- let h2 = html.node("h2", {}, "", node);
- html.icon("playlist-music", h2)
- html.text(name, h2);
+ let info = html.node("span", {className:"info"}, "", node);
+ html.icon("playlist-music", info)
+ html.node("h2", {}, name, info);
playButton(TYPE_PLAYLIST, name, node);
addButton(TYPE_PLAYLIST, name, node);
diff --git a/app/js/player.js b/app/js/player.js
index 400ba65..0cc59f5 100644
--- a/app/js/player.js
+++ b/app/js/player.js
@@ -18,11 +18,11 @@ function sync(data) {
if (data["file"]) { // playing at all?
DOM.duration.textContent = format.time(Number(data["duration"] || 0));
DOM.title.textContent = data["Title"] || data["file"].split("/").pop();
- DOM["artist-album"].textContent = format.artistAlbum(data["Artist"], data["Album"]);
+ DOM.subtitle.textContent = format.subtitle(data);
} else {
DOM.duration.textContent = "";
DOM.title.textContent = "";
- DOM["artist-album"].textContent = "";
+ DOM.subtitle.textContent = "";
}
pubsub.publish("song-change", null, data);