diff --git a/app/app.css b/app/app.css index 8ddb565..a60ca56 100644 --- a/app/app.css +++ b/app/app.css @@ -4,14 +4,14 @@ box-sizing: inherit; } html { - background-color: #fff; + background-color: var(--fg); } body { box-sizing: border-box; font-family: lato, sans-serif; line-height: 1; - background-color: #333; - color: #fff; + background-color: var(--bg); + color: var(--fg); text-shadow: 0 1px 1px #000; max-width: 800px; margin: 0 auto; @@ -73,18 +73,18 @@ nav ul { flex-direction: row; } nav ul .icon { - margin-right: 4px; + display: block; + margin: 4px auto; } nav ul li { text-align: center; flex: 1 0 0; - line-height: 40px; cursor: pointer; border-top: 4px solid transparent; border-bottom: 4px solid transparent; } nav ul li.active { - border-top-color: dodgerblue; + border-top-color: var(--primary); } #player { display: flex; @@ -154,6 +154,7 @@ nav ul li.active { } .component .grid h2 .icon { margin-right: 4px; + color: var(--primary); } .component .grid li:nth-child(odd) { background-color: #555; @@ -192,6 +193,7 @@ nav ul li.active { } #queue .grid h2 .icon { margin-right: 4px; + color: var(--primary); } #queue .grid li:nth-child(odd) { background-color: #555; @@ -233,6 +235,7 @@ nav ul li.active { } #library .grid h2 .icon { margin-right: 4px; + color: var(--primary); } #library .grid li:nth-child(odd) { background-color: #555; @@ -271,6 +274,7 @@ nav ul li.active { } #fs .grid h2 .icon { margin-right: 4px; + color: var(--primary); } #fs .grid li:nth-child(odd) { background-color: #555; @@ -280,6 +284,9 @@ nav ul li.active { width: 32px; } } +#fs .group { + cursor: pointer; +} #playlists { height: 100%; display: flex; @@ -309,6 +316,7 @@ nav ul li.active { } #playlists .grid h2 .icon { margin-right: 4px; + color: var(--primary); } #playlists .grid li:nth-child(odd) { background-color: #555; @@ -318,3 +326,8 @@ nav ul li.active { width: 32px; } } +:root { + --primary: dodgerblue; + --fg: #fff; + --bg: #333; +} diff --git a/app/css/app.less b/app/css/app.less index 8ad08f5..c704d38 100644 --- a/app/css/app.less +++ b/app/css/app.less @@ -1,15 +1,15 @@ *, *::before, *::after { box-sizing: inherit; } html { - background-color: #fff; + background-color: var(--fg); } body { box-sizing: border-box; font-family: lato, sans-serif; line-height: 1; - background-color: #333; - color: #fff; + background-color: var(--bg); + color: var(--fg); text-shadow: 0 1px 1px #000; max-width: 800px; margin: 0 auto; @@ -50,3 +50,4 @@ button { @import "library.less"; @import "fs.less"; @import "playlists.less"; +@import "variables.less"; diff --git a/app/css/component.less b/app/css/component.less index f5f99fd..caa9fb9 100644 --- a/app/css/component.less +++ b/app/css/component.less @@ -28,7 +28,10 @@ overflow: hidden; text-overflow: ellipsis; - .icon { margin-right: 4px; } + .icon { + margin-right: 4px; + color: var(--primary); + } } li:nth-child(odd) { diff --git a/app/css/fs.less b/app/css/fs.less index dfa484f..166ba0b 100644 --- a/app/css/fs.less +++ b/app/css/fs.less @@ -1,3 +1,7 @@ #fs { .component; + + .group { + cursor: pointer; + } } diff --git a/app/css/nav.less b/app/css/nav.less index 920a488..b3de634 100644 --- a/app/css/nav.less +++ b/app/css/nav.less @@ -6,20 +6,20 @@ nav ul { flex-direction: row; .icon { - margin-right: 4px; + display: block; + margin: 4px auto; } li { text-align: center; flex: 1 0 0; - line-height: 40px; cursor: pointer; border-top: 4px solid transparent; border-bottom: 4px solid transparent; &.active { - border-top-color: dodgerblue; + border-top-color: var(--primary); } } } diff --git a/app/css/variables.less b/app/css/variables.less new file mode 100644 index 0000000..1bd6d65 --- /dev/null +++ b/app/css/variables.less @@ -0,0 +1,5 @@ +:root { + --primary: dodgerblue; + --fg: #fff; + --bg: #333; +} diff --git a/app/icons/settings.svg b/app/icons/settings.svg new file mode 100644 index 0000000..731a5a7 --- /dev/null +++ b/app/icons/settings.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/index.html b/app/index.html index c74906f..ee1bd13 100644 --- a/app/index.html +++ b/app/index.html @@ -56,13 +56,14 @@ diff --git a/app/js/app.js b/app/js/app.js index 0e2b78f..8e31084 100644 --- a/app/js/app.js +++ b/app/js/app.js @@ -33,6 +33,15 @@ function initIcons() { }); } +function fromHash() { + let hash = location.hash.substring(1); + activate(hash || "queue"); +} + +function onHashChange(e) { + fromHash(); +} + async function init() { initIcons(); await mpd.init(); @@ -44,8 +53,8 @@ async function init() { } player.init(document.querySelector("#player")); - - activate("yt"); + window.addEventListener("hashchange", onHashChange); + fromHash(); } diff --git a/app/js/lib/icons.js b/app/js/lib/icons.js index 8f18c4a..1796498 100644 --- a/app/js/lib/icons.js +++ b/app/js/lib/icons.js @@ -1,75 +1,78 @@ let ICONS={}; -ICONS["library-music"] = ` - -`; -ICONS["pause"] = ` - -`; -ICONS["rewind"] = ` - -`; -ICONS["play"] = ` - +ICONS["playlist-music"] = ` + `; ICONS["play-circle-outline"] = ` `; -ICONS["plus"] = ` - -`; -ICONS["close-circle"] = ` - -`; -ICONS["minus"] = ` - +ICONS["folder"] = ` + `; ICONS["shuffle"] = ` `; -ICONS["content-save"] = ` - -`; -ICONS["fast-forward"] = ` - -`; -ICONS["close"] = ` - -`; -ICONS["pause-circle"] = ` - +ICONS["download"] = ` + `; ICONS["minus-circle"] = ` `; -ICONS["plus-circle"] = ` - +ICONS["rewind"] = ` + `; -ICONS["minus-circle-outline"] = ` - +ICONS["settings"] = ` + `; -ICONS["playlist-music"] = ` - +ICONS["pause"] = ` + `; -ICONS["music"] = ` - -`; -ICONS["repeat"] = ` - -`; -ICONS["folder"] = ` - +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["fast-forward"] = ` + +`; +ICONS["minus-circle-outline"] = ` + +`; ICONS["plus-circle-outline"] = ` `; -ICONS["download"] = ` - +ICONS["plus-circle"] = ` + `; ICONS["play-circle"] = ` diff --git a/app/js/lib/ui.js b/app/js/lib/ui.js index 0b47ea8..43a66f7 100644 --- a/app/js/lib/ui.js +++ b/app/js/lib/ui.js @@ -104,7 +104,7 @@ function addButton(type, what, parent) { } export function song(ctx, data, parent) { - let node = html.node("li", {}, "", parent); + let node = html.node("li", {className:"song"}, "", parent); let title = formatTitle(ctx, data); @@ -134,7 +134,7 @@ export function song(ctx, data, parent) { } export function group(ctx, label, urlOrFilter, parent) { - let node = html.node("li", {}, "", parent); + let node = html.node("li", {className:"group"}, "", parent); let h2 = html.node("h2", {}, "", node); if (ctx == CTX_FS) { html.icon("folder", h2); } diff --git a/index.js b/index.js index 1f145dd..f0e6b3f 100644 --- a/index.js +++ b/index.js @@ -3,6 +3,7 @@ const app = new static.Server("./app"); const port = 8080; function downloadYoutube(url, response) { + // FIXME create directory console.log("YouTube downloading", url); let args = [ "-f", "bestaudio",