From ac40ec8f2c858292d97b46b0f8a9cd5503c974c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20=C5=BD=C3=A1ra?= 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 @@
- +
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" },