volume

app/app.css

@@ -135,7 +135,11 @@ nav ul li.active {
   opacity: 0.5;
 }
 #player .art {
-  margin-right: var(--icon-spacing);
+  height: 96px;
+}
+#player .art img,
+#player .art .icon {
+  width: 96px;
 }
 #player h2 {
   font-size: 125%;
@@ -159,6 +163,10 @@ nav ul li.active {
   width: 32px;
   margin: 8px;
 }
+#player .controls [type=range] {
+  width: 144px;
+  margin: 0;
+}
 #player .misc {
   display: flex;
   flex-direction: column;
@@ -617,6 +625,9 @@ nav ul li.active {
     transform: rotate(360deg);
   }
 }
+#settings {
+  font-size: var(--font-size-large);
+}
 #settings dl {
   margin: 8px;
   display: grid;

app/css/art.less

@@ -3,5 +3,4 @@
 	.icon, img {
 		vertical-align: top;
 	}
-
 }

app/css/player.less

@@ -6,7 +6,11 @@
 	&:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; }
 
 	.art {
-		margin-right: var(--icon-spacing);
+		@size: 96px;
+		height: @size;
+		img, .icon {
+			width: @size;
+		}
 	}
 
 	h2 {
@@ -22,11 +26,18 @@
 	.title, .subtitle { .long-line; }
 
 	.controls {
+		@icon-margin: 8px;
+		@icon-size: 32px;
 		white-space: nowrap;
 		text-align: center;
 		.icon { 
-			width: 32px;
-			margin: 8px;
+			width: @icon-size;
+			margin: @icon-margin;
+		}
+
+		[type=range] {
+			width: 3 * (@icon-size + 2*@icon-margin);
+			margin: 0;
 		}
 	}
 
@@ -37,5 +48,4 @@
 		justify-content: space-around;
 		.icon { width: 32px; }
 	}
-
 }

app/css/settings.less

@@ -1,4 +1,6 @@
 #settings {
+	font-size: var(--font-size-large);
+
 	dl {
 		margin: 8px;
 		display: grid;

app/index.html

@@ -20,7 +20,7 @@
 					<button class="pause" data-icon="pause"></button>
 					<button class="next" data-icon="fast-forward"></button>
 					<div>
-						<span class="elapsed"></span>/<span class="duration"></span>
+						<input type="range" step="any" min="0" class="elapsed" />
 					</div>
 				</div>
 				<div class="misc">
@@ -54,6 +54,10 @@
 			</section>
 			<section id="settings">
 				<dl>
+					<dt>Volume</dt>
+					<dd>
+						<input type="range" name="volume" min="0" max="100" step="1" />
+					</dd>
 					<dt>Theme</dt>
 					<dd>
 						<select name="theme">

app/js/player.js

@@ -3,6 +3,7 @@ import * as art from "./lib/art.js";
 import * as html from "./lib/html.js";
 import * as format from "./lib/format.js";
 import * as pubsub from "./lib/pubsub.js";
+import * as settings from "./settings.js";
 
 const DELAY = 2000;
 const DOM = {};
@@ -12,15 +13,18 @@ let node;
 let idleTimeout = null;
 
 function sync(data) {
-	DOM.elapsed.textContent = format.time(Number(data["elapsed"] || 0)); // changed time
+	settings.notifyVolume(data["volume"]);
+
+	DOM.elapsed.value = Number(data["elapsed"] || 0); // changed time
 
 	if (data["file"] != current["file"]) { // changed song
 		if (data["file"]) { // playing at all?
-			DOM.duration.textContent = format.time(Number(data["duration"] || 0));
+			DOM.elapsed.disabled = false;
+			DOM.elapsed.max = Number(data["duration"]);
 			DOM.title.textContent = data["Title"] || data["file"].split("/").pop();
 			DOM.subtitle.textContent = format.subtitle(data);
 		} else {
-			DOM.duration.textContent = "";
+			DOM.elapsed.disabled = true;
 			DOM.title.textContent = "";
 			DOM.subtitle.textContent = "";
 		}
@@ -29,11 +33,13 @@ function sync(data) {
 	}
 
 	if (data["Artist"] != current["Artist"] || data["Album"] != current["Album"]) { // changed album (art)
-		DOM.art.innerHTML = "";
+		html.clear(DOM.art);
 		art.get(data["Artist"], data["Album"], data["file"]).then(src => {
-			if (!src) { return; }
-			let image = html.node("img", {src});
-			DOM.art.appendChild(image);
+			if (src) {
+				html.node("img", {src}, "", DOM.art);
+			} else {
+				html.icon("music", DOM.art);
+			}
 		});
 	}
 
@@ -82,6 +88,7 @@ export function init(n) {
 
 	DOM.random.addEventListener("click", e => command(`random ${current["random"] == "1" ? "0" : "1"}`));
 	DOM.repeat.addEventListener("click", e => command(`repeat ${current["repeat"] == "1" ? "0" : "1"}`));
+	DOM.elapsed.addEventListener("input", e => command(`seekcur ${e.target.value}`));
 
 	update();
 }

app/js/settings.js

@@ -1,3 +1,5 @@
+import * as mpd from "./lib/mpd.js";
+
 let node;
 let inputs = {};
 const prefix = "cyp";
@@ -33,6 +35,14 @@ function setColor(color) {
 	document.documentElement.dataset.color = color;
 }
 
+async function setVolume(volume) {
+	mpd.command(`setvol ${volume}`);
+}
+
+export async function notifyVolume(volume) {
+	inputs.volume.value = volume;
+}
+
 export async function activate() {}
 
 export function init(n) {
@@ -40,6 +50,7 @@ export function init(n) {
 
 	inputs.theme = n.querySelector("[name=theme]");
 	inputs.color = Array.from(n.querySelectorAll("[name=color]"));
+	inputs.volume = n.querySelector("[name=volume]");
 
 	load();
 
@@ -47,4 +58,6 @@ export function init(n) {
 	inputs.color.forEach(input => {
 		input.addEventListener("click", e => setColor(e.target.value));
 	});
+
+	inputs.volume.addEventListener("input", e => setVolume(e.target.valueAsNumber));
 }