cyp/app/js/queue.js

127 lines
2.5 KiB
JavaScript
Raw Normal View History

2019-03-22 22:35:04 +08:00
import * as html from "./lib/html.js";
2020-03-09 21:26:39 +08:00
import * as format from "./lib/format.js";
2019-03-22 22:35:04 +08:00
2020-03-09 21:26:39 +08:00
import Component, { HasApp } from "./component.js";
2019-03-22 22:35:04 +08:00
2020-03-09 05:11:46 +08:00
class Queue extends Component {
constructor() {
super();
this._currentId = null;
2020-03-09 21:26:39 +08:00
/*
2020-03-09 05:11:46 +08:00
this.querySelector(".clear").addEventListener("click", async _ => {
2020-03-09 16:26:10 +08:00
await this._mpd.command("clear");
2020-03-09 05:11:46 +08:00
this._sync();
});
2019-03-22 22:35:04 +08:00
2020-03-09 16:26:10 +08:00
this.querySelector(".save").addEventListener("click", _ => {
2020-03-09 05:11:46 +08:00
let name = prompt("Save current queue as a playlist?", "name");
if (name === null) { return; }
2020-03-09 16:26:10 +08:00
this._mpd.command(`save "${this._mpd.escape(name)}"`);
2020-03-09 05:11:46 +08:00
});
2020-03-09 21:26:39 +08:00
*/
2020-03-09 05:11:46 +08:00
}
2019-03-22 22:35:04 +08:00
2020-03-09 05:11:46 +08:00
handleEvent(e) {
switch (e.type) {
case "song-change":
this._currentId = e.detail["Id"];
this._updateCurrent();
break;
2019-03-22 22:35:04 +08:00
2020-03-09 05:11:46 +08:00
case "queue-change":
this._sync();
break;
}
}
2019-03-26 17:09:26 +08:00
2020-03-09 16:26:10 +08:00
_onAppLoad() {
this._app.addEventListener("song-change", this);
this._app.addEventListener("queue-change", this);
this._sync();
}
2020-03-09 05:11:46 +08:00
_onComponentChange(c, isThis) {
this.hidden = !isThis;
2019-03-26 17:09:26 +08:00
2020-03-09 05:11:46 +08:00
isThis && this._sync();
}
2019-03-22 22:35:04 +08:00
2020-03-09 05:11:46 +08:00
async _sync() {
2020-03-09 16:26:10 +08:00
let songs = await this._mpd.listQueue();
2020-03-09 05:11:46 +08:00
this._buildSongs(songs);
// FIXME pubsub?
document.querySelector("#queue-length").textContent = `(${songs.length})`;
}
_updateCurrent() {
2020-03-09 21:26:39 +08:00
Array.from(this.children).forEach(/** @param {HTMLElement} node */ node => {
2020-03-09 05:11:46 +08:00
node.classList.toggle("current", node.dataset.songId == this._currentId);
});
}
_buildSongs(songs) {
2020-03-09 21:26:39 +08:00
html.clear(this);
2020-03-09 05:11:46 +08:00
2020-03-09 21:26:39 +08:00
songs.forEach(song => this.appendChild(new Song(song)));
2020-03-09 05:11:46 +08:00
this._updateCurrent();
}
2019-03-22 22:35:04 +08:00
}
2020-03-09 05:11:46 +08:00
customElements.define("cyp-queue", Queue);
2020-03-09 21:26:39 +08:00
class Item extends HasApp {
constructor() {
super();
this.addEventListener("click", e => this.parentNode.selection.toggle(this));
}
}
class Song extends Item {
constructor(data) {
super();
this._data = data;
this.dataset.songId = data["Id"];
}
connectedCallback() {
let info = html.node("div", {className:"info"}, "", this);
let lines = formatSongInfo(this._data);
html.node("h2", {}, lines.shift(), info);
lines.length && html.node("div", {}, lines.shift(), info);
/*
playButton(TYPE_ID, id, node);
deleteButton(TYPE_ID, id, node);
*/
}
}
customElements.define("cyp-song", Song);
// FIXME vyfaktorovat nekam do haje
function formatSongInfo(data) {
let lines = [];
let tokens = [];
if (data["Title"]) {
tokens.push(data["Title"]);
lines.push(tokens.join(" "));
lines.push(format.subtitle(data));
} else {
lines.push(fileName(data));
lines.push("\u00A0");
}
return lines;
}
// FIXME vyfaktorovat nekam do haje
function fileName(data) {
return data["file"].split("/").pop();
}