Jerry/cyp
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fixed x-range, seekcur optimization

Browse source
This commit is contained in:
Ondřej Žára 2020-05-06 13:27:44 +02:00
parent 2b33e39169
commit ac40ec8f2c
4 changed files with 18 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/cyp.js
View file

@ -61,6 +61,8 @@ class Range extends HTMLElement {
} }
attributeChangedCallback(name, oldValue, newValue) { attributeChangedCallback(name, oldValue, newValue) {
if (!this.firstChild) { return; }
switch (name) { switch (name) {
case "min": case "min":
case "max": case "max":
@ -957,7 +959,6 @@ class Player extends Component {
const all = this.querySelectorAll("[class]"); const all = this.querySelectorAll("[class]");
[...all].forEach(node => DOM[node.className] = node); [...all].forEach(node => DOM[node.className] = node);
DOM.progress = DOM.timeline.querySelector("x-range"); DOM.progress = DOM.timeline.querySelector("x-range");
DOM.progress.step = "0.1"; // FIXME
DOM.volume = DOM.volume.querySelector("x-range"); DOM.volume = DOM.volume.querySelector("x-range");
this._dom = DOM; this._dom = DOM;
@ -1107,9 +1108,14 @@ class Player extends Component {
this._app.mpd.command(`repeat ${isRepeat ? "0" : "1"}`); 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 => {
DOM.progress.addEventListener("input", e => this._app.mpd.command(`seekcur ${e.target.valueAsNumber}`)); 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}`)); DOM.mute.addEventListener("click", _ => this._app.mpd.command(`setvol ${this._toggledVolume}`));
} }

2
app/index.html
View file

@ -16,7 +16,7 @@
<span class="subtitle"></span> <span class="subtitle"></span>
<div class="timeline"> <div class="timeline">
<span class="elapsed"></span> <span class="elapsed"></span>
<x-range></x-range> <x-range step="0.1"></x-range>
<span class="duration"></span> <span class="duration"></span>
</div> </div>
</div> </div>

10
app/js/elements/player.js
View file

@ -21,7 +21,6 @@ class Player extends Component {
const all = this.querySelectorAll("[class]"); const all = this.querySelectorAll("[class]");
[...all].forEach(node => DOM[node.className] = node); [...all].forEach(node => DOM[node.className] = node);
DOM.progress = DOM.timeline.querySelector("x-range"); DOM.progress = DOM.timeline.querySelector("x-range");
DOM.progress.step = "0.1"; // FIXME
DOM.volume = DOM.volume.querySelector("x-range"); DOM.volume = DOM.volume.querySelector("x-range");
this._dom = DOM; this._dom = DOM;
@ -171,9 +170,14 @@ class Player extends Component {
this._app.mpd.command(`repeat ${isRepeat ? "0" : "1"}`); 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 => {
DOM.progress.addEventListener("input", e => this._app.mpd.command(`seekcur ${e.target.valueAsNumber}`)); 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}`)); DOM.mute.addEventListener("click", _ => this._app.mpd.command(`setvol ${this._toggledVolume}`));
} }

2
package.json
View file

@ -4,7 +4,7 @@
"description": "", "description": "",
"main": "index.js", "main": "index.js",
"dependencies": { "dependencies": {
"custom-range": "^1.0.3", "custom-range": "^1.1.0",
"node-static": "^0.7.11", "node-static": "^0.7.11",
"ws2mpd": "^2.2.0" "ws2mpd": "^2.2.0"
}, },