progress

app/app.css

@@ -143,11 +143,15 @@ nav ul li.active {
 }
 #player h2 {
   font-size: 125%;
-  margin-top: 0;
+  margin: 0;
 }
 #player .info {
   flex-grow: 1;
+  align-self: stretch;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
 }
 #player .title,
 #player .subtitle {
@@ -155,18 +159,18 @@ nav ul li.active {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+#player progress {
+  width: 100%;
+}
 #player .controls {
-  white-space: nowrap;
-  text-align: center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 #player .controls .icon {
   width: 32px;
   margin: 8px;
 }
-#player .controls [type=range] {
-  width: 144px;
-  margin: 0;
-}
 #player .misc {
   display: flex;
   flex-direction: column;

app/css/player.less

@@ -15,29 +15,30 @@
 
 	h2 {
 		font-size: 125%;
-		margin-top: 0;
+		margin: 0;
 	}
 
 	.info { 
 		flex-grow: 1;
+		align-self: stretch;
+
 		overflow: hidden;
+		.flex-column;
+		justify-content: space-evenly;
 	}
 
 	.title, .subtitle { .long-line; }
 
-	.controls {
-		@icon-margin: 8px;
-		@icon-size: 32px;
-		white-space: nowrap;
-		text-align: center;
-		.icon { 
-			width: @icon-size;
-			margin: @icon-margin;
-		}
 
-		[type=range] {
-			width: 3 * (@icon-size + 2*@icon-margin);
-			margin: 0;
+	progress {
+		width: 100%;
+	}
+
+	.controls {
+		.flex-row;
+		.icon { 
+			width: 32px;
+			margin: 8px;
 		}
 	}
 

app/index.html

@@ -13,15 +13,13 @@
 				<div class="info">
 					<h2 class="title"></h2>
 					<div class="subtitle"></div>
+					<progress class="elapsed"></progress>
 				</div>
 				<div class="controls">
 					<button class="prev" data-icon="rewind"></button>
 					<button class="play" data-icon="play"></button>
 					<button class="pause" data-icon="pause"></button>
 					<button class="next" data-icon="fast-forward"></button>
-					<div>
-						<input type="range" step="any" min="0" class="elapsed" />
-					</div>
 				</div>
 				<div class="misc">
 					<button class="repeat" data-icon="repeat"></button>

app/js/player.js

@@ -19,12 +19,10 @@ function sync(data) {
 
 	if (data["file"] != current["file"]) { // changed song
 		if (data["file"]) { // playing at all?
-			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.elapsed.disabled = true;
 			DOM.title.textContent = "";
 			DOM.subtitle.textContent = "";
 		}
@@ -88,7 +86,12 @@ 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}`));
+
+	DOM.elapsed.addEventListener("click", e => {
+		let rect = e.target.getBoundingClientRect();
+		let frac = (e.clientX - rect.left) / rect.width;
+		command(`seekcur ${frac * e.target.max}`);
+	});
 
 	update();
 }