tuning

app/css/cyp.less

@@ -54,10 +54,6 @@ button {
 	border: none;
 	line-height: 1;
 	cursor: pointer;
-
-	@media (hover: hover) {
-		&:not(:disabled):not(:hover):not(.-thumb) { opacity: 0.9; }
-	}
 }
 
 select {

app/css/elements/player.less

@@ -14,6 +14,7 @@ cyp-player {
 	}
 
 	.art {
+		flex: none;
 		width: @art-size;
 		height: @art-size;
 	}

app/css/elements/queue.less

@@ -1,3 +1,5 @@
 cyp-queue {
-	.current { color: var(--primary); }
+	.current {
+		> .icon { color: var(--primary); }
+	}
 }

app/css/elements/song.less

@@ -8,6 +8,42 @@ cyp-song {
 		.subtitle { .ellipsis; }
 	}
 
-	cyp-queue & .track { display: none; }
+	cyp-queue & {
+		> .icon {
+			width: 32px;
+			margin-right: 8px; // fixme variable
+		}
+		.track { display: none; }
+
+		&:not(.playing) > .icon-play, &.playing > .icon-music {
+			display: none;
+		}
+
+		&.playing {
+			> .icon { color: var(--primary) }
+
+			&::after {
+				content: "";
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				background-color: var(--primary);
+				width: calc(100% * var(--progress, 0));
+				height: var(--border-width);
+			}
+		}
+	}
+
+	cyp-library & {
+		padding-left: 0;
+		padding-top: 0;
+		padding-bottom: 0;
+
+		> .icon {
+			width: 64px; // fixme variable
+		}
+
+		> .icon-play { display: none; }
+	}
 }
 

app/css/mixins.less

@@ -24,7 +24,8 @@
 	position: relative; // kotva pro selected::before
 
 	&.selected {
-		xbackground-color: var(--primary-tint); // FIXME jak zvyraznovat?
+		color: var(--primary);
+		background-color: var(--primary-tint);
 
 		&::before {
 			content: "";
@@ -35,29 +36,21 @@
 			width: var(--border-width);
 			background-color: var(--primary);
 		}
-
-		&::after {
-			content: "";
-			position: absolute;
-			left: 0;
-			top: 0;
-			bottom: 0;
-			right: 0;
-			background-color: var(--primary-tint);
-		}
 	}
 }
 
 .item {
 	.flex-row;
-	.selectable;
-
-	padding: 8px;
 
 	&:nth-child(odd) {
 		background-color: var(--bg-alt);
 	}
 
+	.selectable; // az po nth-child, aby byl vyber pozdeji
+
+	padding: 8px;
+
+
 	> .icon {
 		margin-right: var(--icon-spacing);
 		filter: drop-shadow(var(--text-shadow));

app/cyp.js

@@ -674,7 +674,6 @@ class App extends HTMLElement {
 		const names = children.map(node => node.nodeName.toLowerCase())
 			.filter(name => name.startsWith("cyp-"));
 		const unique = new Set(names);
-		console.log(unique);
 
 		const promises = [...unique].map(name => customElements.whenDefined(name));
 		await Promise.all(promises);
@@ -1034,6 +1033,8 @@ class Player extends Component {
 			this._dispatchSongChange(data);
 		}
 
+		this._app.style.setProperty("--progress", DOM.progress.value/DOM.progress.max);
+
 		let artistNew = data["AlbumArtist"] || data["Artist"];
 		let artistOld = this._current["AlbumArtist"] || this._current["Artist"];
 
@@ -1094,9 +1095,16 @@ class Song extends Item {
 	get file() { return this._data["file"]; }
 	get songId() { return this._data["Id"]; }
 
+	set playing(playing) {
+		this.classList.toggle("playing", playing);
+	}
+
 	connectedCallback() {
 		const data = this._data;
 
+		icon("music", this);
+		icon("play", this);
+
 		const block = node("div", {className:"multiline"}, "", this);
 
 		const title = this._buildTitle(data);
@@ -1111,6 +1119,8 @@ class Song extends Item {
 			const subtitle$1 = subtitle(data);
 			node("span", {className:"subtitle"}, subtitle$1, block);
 		}
+
+		this.playing = false;
 	}
 
 	_buildTitle(data) {
@@ -1173,8 +1183,8 @@ class Queue extends Component {
 	}
 
 	_updateCurrent() {
-		Array.from(this.children).forEach(/** @param {HTMLElement} node */ node => {
+		Array.from(this.children).forEach(/** @param {Song} node */ node => {
-			node.classList.toggle("current", node.songId == this._currentId);
+			node.playing = (node.songId == this._currentId);
 		});
 	}
 

app/js/elements/app.js

@@ -34,7 +34,6 @@ class App extends HTMLElement {
 		const names = children.map(node => node.nodeName.toLowerCase())
 			.filter(name => name.startsWith("cyp-"));
 		const unique = new Set(names);
-		console.log(unique);
 
 		const promises = [...unique].map(name => customElements.whenDefined(name));
 		await Promise.all(promises);

app/js/elements/player.js

@@ -116,6 +116,8 @@ class Player extends Component {
 			this._dispatchSongChange(data);
 		}
 
+		this._app.style.setProperty("--progress", DOM.progress.value/DOM.progress.max);
+
 		let artistNew = data["AlbumArtist"] || data["Artist"];
 		let artistOld = this._current["AlbumArtist"] || this._current["Artist"];
 

app/js/elements/queue.js

@@ -57,8 +57,8 @@ class Queue extends Component {
 	}
 
 	_updateCurrent() {
-		Array.from(this.children).forEach(/** @param {HTMLElement} node */ node => {
+		Array.from(this.children).forEach(/** @param {Song} node */ node => {
-			node.classList.toggle("current", node.songId == this._currentId);
+			node.playing = (node.songId == this._currentId);
 		});
 	}
 

app/js/elements/song.js

@@ -11,9 +11,16 @@ export default class Song extends Item {
 	get file() { return this._data["file"]; }
 	get songId() { return this._data["Id"]; }
 
+	set playing(playing) {
+		this.classList.toggle("playing", playing);
+	}
+
 	connectedCallback() {
 		const data = this._data;
 
+		html.icon("music", this);
+		html.icon("play", this);
+
 		const block = html.node("div", {className:"multiline"}, "", this);
 
 		const title = this._buildTitle(data);
@@ -28,6 +35,8 @@ export default class Song extends Item {
 			const subtitle = format.subtitle(data);
 			html.node("span", {className:"subtitle"}, subtitle, block);
 		}
+
+		this.playing = false;
 	}
 
 	_buildTitle(data) {