From e75ce14ec0d6ed272936045d513fdcbc06132e86 Mon Sep 17 00:00:00 2001
From: Ondrej Zara <ondrej.zara@gmail.com>
Date: Wed, 10 Apr 2019 14:37:02 +0200
Subject: [PATCH] progress

---
 app/app.css         | 18 +++++++++++-------
 app/css/player.less | 27 ++++++++++++++-------------
 app/index.html      |  4 +---
 app/js/player.js    |  9 ++++++---
 4 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/app/app.css b/app/app.css
index d1a655b..7f3b4d6 100644
--- a/app/app.css
+++ b/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;
diff --git a/app/css/player.less b/app/css/player.less
index 1cc833b..f31a029 100644
--- a/app/css/player.less
+++ b/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;
 		}
 	}
 
diff --git a/app/index.html b/app/index.html
index 4f58fd1..0a43bfa 100644
--- a/app/index.html
+++ b/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>
diff --git a/app/js/player.js b/app/js/player.js
index 49cbf47..34ffcdf 100644
--- a/app/js/player.js
+++ b/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();
 }