diff --git a/app/app.css b/app/app.css index 0e8f3f1..4451f80 100644 --- a/app/app.css +++ b/app/app.css @@ -141,7 +141,6 @@ nav ul li.active { display: flex; flex-direction: row; align-items: center; - padding: 0 4px; white-space: nowrap; } .component h2 { @@ -149,6 +148,7 @@ nav ul li.active { font-size: 100%; font-weight: normal; margin: 0; + margin-left: 4px; overflow: hidden; text-overflow: ellipsis; } @@ -180,7 +180,6 @@ nav ul li.active { display: flex; flex-direction: row; align-items: center; - padding: 0 4px; white-space: nowrap; } #queue h2 { @@ -188,6 +187,7 @@ nav ul li.active { font-size: 100%; font-weight: normal; margin: 0; + margin-left: 4px; overflow: hidden; text-overflow: ellipsis; } @@ -222,7 +222,6 @@ nav ul li.active { display: flex; flex-direction: row; align-items: center; - padding: 0 4px; white-space: nowrap; } #library h2 { @@ -230,6 +229,7 @@ nav ul li.active { font-size: 100%; font-weight: normal; margin: 0; + margin-left: 4px; overflow: hidden; text-overflow: ellipsis; } @@ -245,8 +245,8 @@ nav ul li.active { width: 32px; } } -#library li { - padding: 0; +#library .art img { + width: 64px; } #library .tiles { display: grid; @@ -279,7 +279,6 @@ nav ul li.active { display: flex; flex-direction: row; align-items: center; - padding: 0 4px; white-space: nowrap; } #fs h2 { @@ -287,6 +286,7 @@ nav ul li.active { font-size: 100%; font-weight: normal; margin: 0; + margin-left: 4px; overflow: hidden; text-overflow: ellipsis; } @@ -321,7 +321,6 @@ nav ul li.active { display: flex; flex-direction: row; align-items: center; - padding: 0 4px; white-space: nowrap; } #playlists h2 { @@ -329,6 +328,7 @@ nav ul li.active { font-size: 100%; font-weight: normal; margin: 0; + margin-left: 4px; overflow: hidden; text-overflow: ellipsis; } @@ -362,7 +362,6 @@ nav ul li.active { display: flex; flex-direction: row; align-items: center; - padding: 0 4px; white-space: nowrap; } #yt h2 { @@ -370,6 +369,7 @@ nav ul li.active { font-size: 100%; font-weight: normal; margin: 0; + margin-left: 4px; overflow: hidden; text-overflow: ellipsis; } diff --git a/app/css/component.less b/app/css/component.less index 55729f9..d29b9d9 100644 --- a/app/css/component.less +++ b/app/css/component.less @@ -15,7 +15,6 @@ display: flex; flex-direction: row; align-items: center; - padding: 0 4px; white-space: nowrap; } @@ -24,6 +23,7 @@ font-size: 100%; font-weight: normal; margin: 0; + margin-left: 4px; overflow: hidden; text-overflow: ellipsis; diff --git a/app/css/library.less b/app/css/library.less index 2ecac4b..8ff9bd0 100644 --- a/app/css/library.less +++ b/app/css/library.less @@ -1,8 +1,8 @@ #library { .component; - li { - padding: 0; + .art img { + width: 64px; } .tiles { diff --git a/app/icons/magnify.svg b/app/icons/magnify.svg new file mode 100644 index 0000000..eb42571 --- /dev/null +++ b/app/icons/magnify.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/js/fs.js b/app/js/fs.js index 2e9756e..1d50749 100644 --- a/app/js/fs.js +++ b/app/js/fs.js @@ -5,12 +5,16 @@ import * as player from "./player.js"; import * as format from "./lib/format.js"; import * as ui from "./lib/ui.js"; -let node; +import Search from "./lib/search.js"; + +let node, search; function buildHeader(path) { let header = node.querySelector("header"); html.clear(header); + header.appendChild(search.getNode()); + let button = html.button({}, "/", header); button.addEventListener("click", e => list("")); @@ -47,10 +51,16 @@ async function list(path) { buildHeader(path); } +function onSearch(e) { + +} + export async function activate() { list(""); } export function init(n) { node = n; + search = new Search(node.querySelector(".search")); + search.addEventListener("input", onSearch); } diff --git a/app/js/lib/icons.js b/app/js/lib/icons.js index 1796498..7003642 100644 --- a/app/js/lib/icons.js +++ b/app/js/lib/icons.js @@ -1,78 +1,81 @@ let ICONS={}; -ICONS["playlist-music"] = ` - -`; -ICONS["play-circle-outline"] = ` - -`; -ICONS["folder"] = ` - -`; -ICONS["shuffle"] = ` - -`; -ICONS["download"] = ` - -`; -ICONS["minus-circle"] = ` - -`; -ICONS["rewind"] = ` - -`; ICONS["settings"] = ` `; -ICONS["pause"] = ` - -`; -ICONS["pause-circle"] = ` - -`; -ICONS["close-circle-outline"] = ` - -`; -ICONS["close"] = ` - -`; -ICONS["music"] = ` - -`; -ICONS["minus"] = ` - -`; -ICONS["close-circle"] = ` - -`; -ICONS["repeat"] = ` - -`; -ICONS["play"] = ` - -`; -ICONS["pause-circle-outline"] = ` - -`; -ICONS["plus"] = ` - -`; -ICONS["content-save"] = ` - -`; ICONS["library-music"] = ` `; +ICONS["pause"] = ` + +`; +ICONS["rewind"] = ` + +`; +ICONS["play"] = ` + +`; +ICONS["play-circle-outline"] = ` + +`; +ICONS["plus"] = ` + +`; +ICONS["close-circle"] = ` + +`; +ICONS["minus"] = ` + +`; +ICONS["shuffle"] = ` + +`; +ICONS["content-save"] = ` + +`; ICONS["fast-forward"] = ` `; +ICONS["close"] = ` + +`; +ICONS["magnify"] = ` + +`; +ICONS["pause-circle"] = ` + +`; +ICONS["minus-circle"] = ` + +`; +ICONS["plus-circle"] = ` + +`; ICONS["minus-circle-outline"] = ` `; +ICONS["playlist-music"] = ` + +`; +ICONS["music"] = ` + +`; +ICONS["repeat"] = ` + +`; +ICONS["folder"] = ` + +`; +ICONS["close-circle-outline"] = ` + +`; +ICONS["pause-circle-outline"] = ` + +`; ICONS["plus-circle-outline"] = ` `; -ICONS["plus-circle"] = ` - +ICONS["download"] = ` + `; ICONS["play-circle"] = ` diff --git a/app/js/lib/search.js b/app/js/lib/search.js new file mode 100644 index 0000000..eee9ca0 --- /dev/null +++ b/app/js/lib/search.js @@ -0,0 +1,20 @@ +import * as html from "./html.js"; + +export function normalize(str) { + // FIXME diac/translit + return str.toLowerCase(); +} + +export default class Search extends EventTarget { + constructor(parent) { + super(); + this._node = html.node("div", {className:"search"}); + let icon = html.icon("magnify", this._node); + } + + getNode() { return this._node; } + + getValue() { return this._input.value; } + + reset() { this._input.value = ""; } +} diff --git a/app/js/library.js b/app/js/library.js index 33d9a3a..d67ccba 100644 --- a/app/js/library.js +++ b/app/js/library.js @@ -2,13 +2,19 @@ import * as mpd from "./lib/mpd.js"; import * as html from "./lib/html.js"; import * as ui from "./lib/ui.js"; -let node; +import Search from "./lib/search.js"; + +let node, search; + +function nonempty(x) { return x.length > 0; } function buildHeader(filter) { filter = filter || {}; let header = node.querySelector("header"); html.clear(header); + header.appendChild(search.getNode()); + let button = html.button({}, "Music Library", header); button.addEventListener("click", e => listArtists()); @@ -52,14 +58,14 @@ function buildAlbums(albums, filter) { let ul = node.querySelector("ul"); html.clear(ul); - albums.map(album => buildAlbum(album, filter, ul)); + albums.filter(nonempty).map(album => buildAlbum(album, filter, ul)); } function buildArtists(artists, filter) { let ul = node.querySelector("ul"); html.clear(ul); - artists.map(artist => buildArtist(artist, filter, ul)); + artists.filter(nonempty).map(artist => buildArtist(artist, filter, ul)); } async function listSongs(filter) { @@ -80,10 +86,17 @@ async function listArtists(filter) { buildHeader(filter); } +function onSearch(e) { + +} + export async function activate() { listArtists(); } export function init(n) { node = n; + + search = new Search(node.querySelector(".search")); + search.addEventListener("input", onSearch); }