From ac40ec8f2c858292d97b46b0f8a9cd5503c974c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20=C5=BD=C3=A1ra?= <ondrej.zara@gmail.com>
Date: Wed, 6 May 2020 13:27:44 +0200
Subject: [PATCH] fixed x-range, seekcur optimization

---
 app/cyp.js                | 12 +++++++++---
 app/index.html            |  2 +-
 app/js/elements/player.js | 10 +++++++---
 package.json              |  2 +-
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/app/cyp.js b/app/cyp.js
index 360b1dc..26bd90f 100644
--- a/app/cyp.js
+++ b/app/cyp.js
@@ -61,6 +61,8 @@ class Range extends HTMLElement {
 	}
 
 	attributeChangedCallback(name, oldValue, newValue) {
+		if (!this.firstChild) { return; }
+
 		switch (name) {
 			case "min":
 			case "max":
@@ -957,7 +959,6 @@ class Player extends Component {
 		const all = this.querySelectorAll("[class]");
 		[...all].forEach(node => DOM[node.className] = node);
 		DOM.progress = DOM.timeline.querySelector("x-range");
-		DOM.progress.step = "0.1"; // FIXME
 		DOM.volume = DOM.volume.querySelector("x-range");
 
 		this._dom = DOM;
@@ -1107,9 +1108,14 @@ class Player extends Component {
 			this._app.mpd.command(`repeat ${isRepeat ? "0" : "1"}`);
 		});
 
-		DOM.volume.addEventListener("input", e => this._app.mpd.command(`setvol ${e.target.valueAsNumber}`));
-		DOM.progress.addEventListener("input", e => this._app.mpd.command(`seekcur ${e.target.valueAsNumber}`));
+		DOM.progress.addEventListener("input", e => {
+			let elapsed = e.target.valueAsNumber;
+			this._current.elapsed = elapsed;
+			this._current.at = performance.now();
+			this._app.mpd.command(`seekcur ${elapsed}`);
+		});
 
+		DOM.volume.addEventListener("input", e => this._app.mpd.command(`setvol ${e.target.valueAsNumber}`));
 		DOM.mute.addEventListener("click", _ => this._app.mpd.command(`setvol ${this._toggledVolume}`));
 	}
 
diff --git a/app/index.html b/app/index.html
index d3ff283..d0cc7c0 100644
--- a/app/index.html
+++ b/app/index.html
@@ -16,7 +16,7 @@
 					<span class="subtitle"></span>
 					<div class="timeline">
 						<span class="elapsed"></span>
-						<x-range></x-range>
+						<x-range step="0.1"></x-range>
 						<span class="duration"></span>
 					</div>
 				</div>
diff --git a/app/js/elements/player.js b/app/js/elements/player.js
index 6ee22ea..b1b266d 100644
--- a/app/js/elements/player.js
+++ b/app/js/elements/player.js
@@ -21,7 +21,6 @@ class Player extends Component {
 		const all = this.querySelectorAll("[class]");
 		[...all].forEach(node => DOM[node.className] = node);
 		DOM.progress = DOM.timeline.querySelector("x-range");
-		DOM.progress.step = "0.1"; // FIXME
 		DOM.volume = DOM.volume.querySelector("x-range");
 
 		this._dom = DOM;
@@ -171,9 +170,14 @@ class Player extends Component {
 			this._app.mpd.command(`repeat ${isRepeat ? "0" : "1"}`);
 		});
 
-		DOM.volume.addEventListener("input", e => this._app.mpd.command(`setvol ${e.target.valueAsNumber}`));
-		DOM.progress.addEventListener("input", e => this._app.mpd.command(`seekcur ${e.target.valueAsNumber}`));
+		DOM.progress.addEventListener("input", e => {
+			let elapsed = e.target.valueAsNumber;
+			this._current.elapsed = elapsed;
+			this._current.at = performance.now();
+			this._app.mpd.command(`seekcur ${elapsed}`);
+		});
 
+		DOM.volume.addEventListener("input", e => this._app.mpd.command(`setvol ${e.target.valueAsNumber}`));
 		DOM.mute.addEventListener("click", _ => this._app.mpd.command(`setvol ${this._toggledVolume}`));
 	}
 
diff --git a/package.json b/package.json
index 69ff67e..ad48e35 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "dependencies": {
-    "custom-range": "^1.0.3",
+    "custom-range": "^1.1.0",
     "node-static": "^0.7.11",
     "ws2mpd": "^2.2.0"
   },