albumart

app/css/font.less

@@ -8,6 +8,6 @@
 @font-face {
     font-family: "Lato";
     src: url("font/LatoLatin-Bold.woff2") format("woff2");
-    font-style: bold;
-    font-weight: normal;
+    font-style: normal;
+    font-weight: bold;
 }

app/js/art.js

@@ -1,4 +1,3 @@
-import * as mpd from "./mpd.js";
 import * as html from "./html.js";
 import * as conf from "./conf.js";
 
@@ -30,7 +29,7 @@ function resize(image) {
 	return canvas;
 }
 
-export async function get(artist, album, songUrl = null) {
+export async function get(mpd, artist, album, songUrl = null) {
 	let key = `${artist}-${album}`;
 	if (key in cache) { return cache[key]; }
 

app/js/elements/tag.js

@@ -1,6 +1,8 @@
 import * as html from "../html.js";
+import * as art from "../art.js";
 import Item from "../item.js";
 
+
 const ICONS = {
 	"AlbumArtist": "artist",
 	"Album": "album"
@@ -16,14 +18,40 @@ export default class Tag extends Item {
 	}
 
 	connectedCallback() {
-		const icon = ICONS[this._type];
-		html.icon(icon, this);
+		const art = html.node("span", {className:"art"}, "", this);
+		this._fillArt(art);
+
 		this._buildTitle(this._value);
 	}
 
 	createChildFilter() {
 		return Object.assign({[this._type]:this._value}, this._filter);
 	}
+
+	async _fillArt(parent) {
+		const filter = this.createChildFilter();
+
+		let artist = filter["AlbumArtist"];
+		let album = filter["Album"];
+		let src = null;
+
+		if (artist && album) {
+			src = await art.get(this._mpd, artist, album);
+			if (!src) {
+				let songs = await this._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 {
+			const icon = ICONS[this._type];
+			html.icon(icon, parent);
+		}
+	}
 }
 
 customElements.define("cyp-tag", Tag);

app/js/item.js

@@ -1,6 +1,7 @@
 import * as html from "./html.js";
+import { HasApp } from "./component.js";
 
-export default class Item extends HTMLElement {
+export default class Item extends HasApp {
 	constructor() {
 		super();
 		this.addEventListener("click", _ => this.onClick());