cyp/app/js/elements/player.js
Ondrej Zara c266bad516 tuning
2020-03-17 11:02:38 +01:00

150 lines
4.2 KiB
JavaScript

import * as art from "../art.js";
import * as html from "../html.js";
import * as format from "../format.js";
import Component from "../component.js";
const DELAY = 1000;
class Player extends Component {
constructor() {
super();
this._current = {};
this._toggledVolume = 0;
this._idleTimeout = null;
this._dom = this._initDOM();
}
async update() {
this._clearIdle();
const data = await this._mpd.status();
this._sync(data);
this._idle();
}
_onAppLoad() {
this.update();
}
_initDOM() {
const DOM = {};
const all = this.querySelectorAll("[class]");
Array.from(all).forEach(node => DOM[node.className] = node);
DOM.progress = DOM.timeline.querySelector("x-range");
DOM.volume = DOM.volume.querySelector("x-range");
DOM.play.addEventListener("click", _ => this._command("play"));
DOM.pause.addEventListener("click", _ => this._command("pause 1"));
DOM.prev.addEventListener("click", _ => this._command("previous"));
DOM.next.addEventListener("click", _ => this._command("next"));
DOM.random.addEventListener("click", _ => this._command(`random ${this._current["random"] == "1" ? "0" : "1"}`));
DOM.repeat.addEventListener("click", _ => this._command(`repeat ${this._current["repeat"] == "1" ? "0" : "1"}`));
DOM.volume.addEventListener("input", e => this._command(`setvol ${e.target.valueAsNumber}`));
DOM.progress.addEventListener("input", e => this._command(`seekcur ${e.target.valueAsNumber}`));
DOM.mute.addEventListener("click", _ => this._command(`setvol ${this._toggledVolume}`));
return DOM;
}
async _command(cmd) {
this._clearIdle();
const data = await this._mpd.commandAndStatus(cmd);
this._sync(data);
this._idle();
}
_idle() {
this._idleTimeout = setTimeout(() => this.update(), DELAY);
}
_clearIdle() {
this._idleTimeout && clearTimeout(this._idleTimeout);
this._idleTimeout = null;
}
_sync(data) {
const DOM = this._dom;
if ("volume" in data) {
data["volume"] = Number(data["volume"]);
DOM.mute.disabled = false;
DOM.volume.disabled = false;
DOM.volume.value = data["volume"];
if (data["volume"] == 0 && this._current["volume"] > 0) { // muted
this._toggledVolume = this._current["volume"];
html.clear(DOM.mute);
DOM.mute.appendChild(html.icon("volume-off"));
}
if (data["volume"] > 0 && this._current["volume"] == 0) { // restored
this._toggledVolume = 0;
html.clear(DOM.mute);
DOM.mute.appendChild(html.icon("volume-high"));
}
} else {
DOM.mute.disabled = true;
DOM.volume.disabled = true;
DOM.volume.value = 50;
}
// changed time
let elapsed = Number(data["elapsed"] || 0);
DOM.progress.value = elapsed;
DOM.elapsed.textContent = format.time(elapsed);
if (data["file"] != this._current["file"]) { // changed song
if (data["file"]) { // playing at all?
let duration = Number(data["duration"]);
DOM.duration.textContent = format.time(duration);
DOM.progress.max = duration;
DOM.progress.disabled = false;
DOM.title.textContent = data["Title"] || format.fileName(data["file"]);
DOM.subtitle.textContent = format.subtitle(data, {duration:false});
} else {
DOM.title.textContent = "";
DOM.subtitle.textContent = "";
DOM.progress.value = 0;
DOM.progress.disabled = true;
}
this._dispatchSongChange(data);
}
this._app.style.setProperty("--progress", DOM.progress.value/DOM.progress.max);
let artistNew = data["AlbumArtist"] || data["Artist"];
let artistOld = this._current["AlbumArtist"] || this._current["Artist"];
if (artistNew != artistOld || data["Album"] != this._current["Album"]) { // changed album (art)
html.clear(DOM.art);
art.get(this._mpd, artistNew, data["Album"], data["file"]).then(src => {
if (src) {
html.node("img", {src}, "", DOM.art);
} else {
html.icon("music", DOM.art);
}
});
}
let flags = [];
if (data["random"] == "1") { flags.push("random"); }
if (data["repeat"] == "1") { flags.push("repeat"); }
this.dataset.flags = flags.join(" ");
this.dataset.state = data["state"];
this._current = data;
}
_dispatchSongChange(detail) {
const e = new CustomEvent("song-change", {detail});
this._app.dispatchEvent(e);
}
}
customElements.define("cyp-player", Player);