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"] || data["file"].split("/").pop(); 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); } 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);