From 181c988649c7348f195070bd4316597127155ed2 Mon Sep 17 00:00:00 2001 From: Ondrej Zara Date: Sat, 30 Mar 2019 12:57:01 +0100 Subject: [PATCH] library refactor --- app/app.css | 63 +++++++++++++++++++++++------------------- app/css/app.less | 2 +- app/css/component.less | 52 +++++++++++++++++----------------- app/css/library.less | 12 ++++++-- app/index.html | 6 ++-- app/js/lib/mpd.js | 6 ++-- app/js/lib/ui.js | 32 +++++++++++++++++++-- app/js/library.js | 6 ---- app/js/player.js | 13 +++++++-- 9 files changed, 118 insertions(+), 74 deletions(-) diff --git a/app/app.css b/app/app.css index 2b13e07..04c61d4 100644 --- a/app/app.css +++ b/app/app.css @@ -12,7 +12,7 @@ body { line-height: 1; background-color: var(--bg); color: var(--fg); - text-shadow: 0 1px 1px #000; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8); max-width: 800px; margin: 0 auto; overflow: hidden; @@ -137,14 +137,14 @@ nav ul li.active { margin: 0; padding: 0; } -.component .grid li { +.component li { display: flex; flex-direction: row; align-items: center; padding: 0 4px; white-space: nowrap; } -.component .grid h2 { +.component h2 { flex-grow: 1; font-size: 100%; font-weight: normal; @@ -152,15 +152,15 @@ nav ul li.active { overflow: hidden; text-overflow: ellipsis; } -.component .grid h2 .icon { +.component h2 .icon { margin-right: 4px; color: var(--primary); } -.component .grid li:nth-child(odd) { +.component li:nth-child(odd) { background-color: #555; } @media (pointer: coarse) { - .component .grid .icon { + .component .icon { width: 32px; } } @@ -176,14 +176,14 @@ nav ul li.active { margin: 0; padding: 0; } -#queue .grid li { +#queue li { display: flex; flex-direction: row; align-items: center; padding: 0 4px; white-space: nowrap; } -#queue .grid h2 { +#queue h2 { flex-grow: 1; font-size: 100%; font-weight: normal; @@ -191,15 +191,15 @@ nav ul li.active { overflow: hidden; text-overflow: ellipsis; } -#queue .grid h2 .icon { +#queue h2 .icon { margin-right: 4px; color: var(--primary); } -#queue .grid li:nth-child(odd) { +#queue li:nth-child(odd) { background-color: #555; } @media (pointer: coarse) { - #queue .grid .icon { + #queue .icon { width: 32px; } } @@ -218,14 +218,14 @@ nav ul li.active { margin: 0; padding: 0; } -#library .grid li { +#library li { display: flex; flex-direction: row; align-items: center; padding: 0 4px; white-space: nowrap; } -#library .grid h2 { +#library h2 { flex-grow: 1; font-size: 100%; font-weight: normal; @@ -233,26 +233,33 @@ nav ul li.active { overflow: hidden; text-overflow: ellipsis; } -#library .grid h2 .icon { +#library h2 .icon { margin-right: 4px; color: var(--primary); } -#library .grid li:nth-child(odd) { +#library li:nth-child(odd) { background-color: #555; } @media (pointer: coarse) { - #library .grid .icon { + #library .icon { width: 32px; } } #library .tiles { display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-gap: 2px; } #library .tiles li { - border: 3px solid lime; + text-align: center; + cursor: pointer; + background-color: rgba(255, 255, 255, 0.08); height: 200px; } +#library .tiles li h2 { + font-size: 150%; + margin: 4px 0; +} #fs { height: 100%; display: flex; @@ -265,14 +272,14 @@ nav ul li.active { margin: 0; padding: 0; } -#fs .grid li { +#fs li { display: flex; flex-direction: row; align-items: center; padding: 0 4px; white-space: nowrap; } -#fs .grid h2 { +#fs h2 { flex-grow: 1; font-size: 100%; font-weight: normal; @@ -280,15 +287,15 @@ nav ul li.active { overflow: hidden; text-overflow: ellipsis; } -#fs .grid h2 .icon { +#fs h2 .icon { margin-right: 4px; color: var(--primary); } -#fs .grid li:nth-child(odd) { +#fs li:nth-child(odd) { background-color: #555; } @media (pointer: coarse) { - #fs .grid .icon { + #fs .icon { width: 32px; } } @@ -307,14 +314,14 @@ nav ul li.active { margin: 0; padding: 0; } -#playlists .grid li { +#playlists li { display: flex; flex-direction: row; align-items: center; padding: 0 4px; white-space: nowrap; } -#playlists .grid h2 { +#playlists h2 { flex-grow: 1; font-size: 100%; font-weight: normal; @@ -322,15 +329,15 @@ nav ul li.active { overflow: hidden; text-overflow: ellipsis; } -#playlists .grid h2 .icon { +#playlists h2 .icon { margin-right: 4px; color: var(--primary); } -#playlists .grid li:nth-child(odd) { +#playlists li:nth-child(odd) { background-color: #555; } @media (pointer: coarse) { - #playlists .grid .icon { + #playlists .icon { width: 32px; } } diff --git a/app/css/app.less b/app/css/app.less index c704d38..cdbf6fe 100644 --- a/app/css/app.less +++ b/app/css/app.less @@ -10,7 +10,7 @@ body { line-height: 1; background-color: var(--bg); color: var(--fg); - text-shadow: 0 1px 1px #000; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8); max-width: 800px; margin: 0 auto; overflow: hidden; diff --git a/app/css/component.less b/app/css/component.less index caa9fb9..55729f9 100644 --- a/app/css/component.less +++ b/app/css/component.less @@ -11,35 +11,33 @@ padding: 0; } - .grid { - li { - display: flex; - flex-direction: row; - align-items: center; - padding: 0 4px; - white-space: nowrap; - } + li { + display: flex; + flex-direction: row; + align-items: center; + padding: 0 4px; + white-space: nowrap; + } - h2 { - flex-grow: 1; - font-size: 100%; - font-weight: normal; - margin: 0; - overflow: hidden; - text-overflow: ellipsis; + h2 { + flex-grow: 1; + font-size: 100%; + font-weight: normal; + margin: 0; + overflow: hidden; + text-overflow: ellipsis; - .icon { - margin-right: 4px; - color: var(--primary); - } - } - - li:nth-child(odd) { - background-color: #555; - } - - @media (pointer: coarse) { - .icon { width: 32px; } + .icon { + margin-right: 4px; + color: var(--primary); } } + + li:nth-child(odd) { + background-color: #555; + } + + @media (pointer: coarse) { + .icon { width: 32px; } + } } diff --git a/app/css/library.less b/app/css/library.less index 5b4e475..cf01e49 100644 --- a/app/css/library.less +++ b/app/css/library.less @@ -3,11 +3,19 @@ .tiles { display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-gap: 2px; li { - border: 3px solid lime; + text-align: center; + cursor: pointer; + background-color: rgba(255, 255, 255, 0.08); height: 200px; + + h2 { + font-size: 150%; + margin: 4px 0; + } } } } diff --git a/app/index.html b/app/index.html index ee1bd13..b47d941 100644 --- a/app/index.html +++ b/app/index.html @@ -35,10 +35,10 @@ - +
- +
@@ -46,7 +46,7 @@
- +
diff --git a/app/js/lib/mpd.js b/app/js/lib/mpd.js index c74606b..7a311f4 100644 --- a/app/js/lib/mpd.js +++ b/app/js/lib/mpd.js @@ -11,6 +11,7 @@ function onMessage(e) { if (last.startsWith("OK")) { current.resolve(lines); } else { + console.warn(last); current.reject(last); } current = null; @@ -108,12 +109,13 @@ export async function listTags(tag, filter = null) { } let lines = await command(tokens.join(" ")); let parsed = parser.linesToStruct(lines); - return [].concat(parsed[tag] || []); + return [].concat(tag in parsed ? parsed[tag] : []); } -export async function listSongs(filter) { +export async function listSongs(filter, window = null) { let tokens = ["find"]; tokens.push(serializeFilter(filter)); + if (window) { tokens.push("window", window.join(":")); } let lines = await command(tokens.join(" ")); return parser.songList(lines); } diff --git a/app/js/lib/ui.js b/app/js/lib/ui.js index 43a66f7..71a6cb5 100644 --- a/app/js/lib/ui.js +++ b/app/js/lib/ui.js @@ -2,6 +2,7 @@ import * as mpd from "./mpd.js"; import * as html from "./html.js"; import * as pubsub from "./pubsub.js"; import * as format from "./format.js"; +import * as art from "./art.js"; import * as player from "../player.js"; export const CTX_FS = 1; @@ -15,7 +16,7 @@ const TYPE_PLAYLIST = 4; const SORT = "-Track"; -function enqueue(type, what) { +async function enqueue(type, what) { switch (type) { case TYPE_URL: return mpd.command(`add "${mpd.escape(what)}"`); break; case TYPE_FILTER: return mpd.enqueueByFilter(what, SORT); break; @@ -23,6 +24,28 @@ function enqueue(type, what) { } } +async function fillArt(parent, filter) { + let artist = filter["Artist"]; + let album = filter["Album"]; + let src = null; + + if (artist && album) { + src = await art.get(artist, album); + if (!src) { + let songs = await mpd.listSongs(filter, [0,1]); + if (songs.length) { + src = await art.get(artist, album, songs[0]["file"]); + } + } + } + + if (src) { + html.node("img", {src}, "", parent); + } else { + html.icon("music", parent); + } +} + function fileName(data) { return data["file"].split("/").pop(); } @@ -106,7 +129,6 @@ function addButton(type, what, parent) { export function song(ctx, data, parent) { let node = html.node("li", {className:"song"}, "", parent); - let title = formatTitle(ctx, data); let h2 = html.node("h2", {}, "", node); if (ctx == CTX_FS || ctx == CTX_LIBRARY) { html.icon("music", h2); } @@ -136,10 +158,16 @@ export function song(ctx, data, parent) { export function group(ctx, label, urlOrFilter, parent) { let node = html.node("li", {className:"group"}, "", parent); + if (ctx == CTX_LIBRARY) { + 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 type = (ctx == CTX_FS ? TYPE_URL : TYPE_FILTER); playButton(type, urlOrFilter, node); diff --git a/app/js/library.js b/app/js/library.js index 4494d3e..33d9a3a 100644 --- a/app/js/library.js +++ b/app/js/library.js @@ -44,8 +44,6 @@ 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.CTX_LIBRARY, song, ul)); } @@ -53,8 +51,6 @@ 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)); } @@ -62,8 +58,6 @@ 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)); } diff --git a/app/js/player.js b/app/js/player.js index 54328eb..400ba65 100644 --- a/app/js/player.js +++ b/app/js/player.js @@ -15,9 +15,16 @@ function sync(data) { DOM.elapsed.textContent = format.time(Number(data["elapsed"] || 0)); // changed time if (data["file"] != current["file"]) { // changed song - 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"]); + 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"]); + } else { + DOM.duration.textContent = ""; + DOM.title.textContent = ""; + DOM["artist-album"].textContent = ""; + } + pubsub.publish("song-change", null, data); }