styling

app/css/elements/player.less

@@ -1,5 +1,6 @@
 cyp-player {
 	@art-size: 96px;
+
 	.flex-row;
 	align-items: stretch;
 
@@ -8,7 +9,7 @@ cyp-player {
 	&:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; }
 
 	x-range {
-		flex-grow: 1;
+		flex: auto;
 		--elapsed-color: var(--primary);
 	}
 
@@ -21,60 +22,66 @@ cyp-player {
 	}
 
 	.info {
-		flex-grow: 2;
-		flex-basis: 0;
-		padding: 0 var(--icon-spacing);
-		overflow: hidden; // FIXME asi tu ma byt min-width
+		flex: auto;
+		min-width: 0;
 
 		.flex-column;
-		justify-content: space-around;
+		justify-content: space-between;
 
-		h2 {
-			font-size: 125%;
-			margin: 0;
+		padding: 0 var(--icon-spacing);
+
+		.title {
+			margin-top: 8px;
+			.font-large;
+			font-weight: bold;
 		}
-
 		.title, .subtitle { .ellipsis; }
 	}
 
 	.timeline {
+		flex: none;
+		height: 24px;
+		margin-bottom: 4px;
 		.flex-row;
 
 		.duration, .elapsed {
-			flex-basis: 5ch;
+			flex: none;
+			width: 5ch;
 			text-align: center;
 		}
 	}
 
 	.controls {
-		flex-grow: 1;
-		flex-basis: 0;
-		max-width: 220px;
+		width: 220px;
+		min-width: 0;
 
 		.flex-column;
-		justify-content: space-around;
 
 		.playback {
+			flex: auto;
+
 			.flex-row;
 			justify-content: space-around;
 
 			.icon { width: 40px; }
-
 			.icon-play, .icon-pause { width: 64px; }
 		}
 
 		.volume {
-			.flex-row;
+			flex: none;
+			margin-bottom: 4px;
 
-			.mute { margin-right: 4px; }
+			.flex-row;
+			.mute { margin-right: var(--icon-spacing); }
 		}
 	}
 
 	.misc {
-		display: flex;
-		flex-direction: column;
-		align-self: stretch;
+		flex: none;
+
+		.flex-column;
 		justify-content: space-around;
+
 		.icon { width: 32px; }
 	}
 

app/css/elements/tag.less

@@ -1,7 +1,9 @@
 cyp-tag {
 	.item;
 
-	padding: 0;
+	padding-left: 0;
+	padding-top: 0;
+	padding-bottom: 0;
 
 	.art {
 		img, .icon {

app/index.html

@@ -12,8 +12,8 @@
 			<cyp-player>
 				<span class="art"></span>
 				<div class="info">
-					<h2 class="title"></h2>
-					<div class="subtitle"></div>
+					<span class="title"></span>
+					<span class="subtitle"></span>
 					<div class="timeline">
 						<span class="elapsed"></span>
 						<x-range></x-range>

app/js/elements/library.js

@@ -181,6 +181,7 @@ class Library extends Component {
 				node.addButton("chevron-double-right", _ => this._pushState({type:"songs", filter:node.createChildFilter()}));
 			break;
 		}
+		node.fillArt(this._mpd);
 	}
 
 	_buildBack() {

app/js/elements/tag.js

@@ -17,9 +17,7 @@ export default class Tag extends Item {
 	}
 
 	connectedCallback() {
-		const art = html.node("span", {className:"art"}, "", this);
-		this._fillArt(art);
-
+		html.node("span", {className:"art"}, "", this);
 		this._buildTitle(this._value);
 	}
 
@@ -27,7 +25,8 @@ export default class Tag extends Item {
 		return Object.assign({[this._type]:this._value}, this._filter);
 	}
 
-	async _fillArt(parent) {
+	async fillArt(mpd) {
+		const parent = this.firstChild;
 		const filter = this.createChildFilter();
 
 		let artist = filter["AlbumArtist"];
@@ -35,9 +34,9 @@ export default class Tag extends Item {
 		let src = null;
 
 		if (artist && album) {
-			src = await art.get(this._mpd, artist, album);
+			src = await art.get(mpd, artist, album);
 			if (!src) {
-				let songs = await this._mpd.listSongs(filter, [0,1]);
+				let songs = await mpd.listSongs(filter, [0,1]);
 				if (songs.length) {
 					src = await art.get(artist, album, songs[0]["file"]);
 				}