2019-03-28 22:23:28 +08:00
|
|
|
import * as html from "./lib/html.js";
|
|
|
|
import * as ui from "./lib/ui.js";
|
|
|
|
|
2020-03-09 16:26:10 +08:00
|
|
|
import Component from "./component.js";
|
2019-03-28 22:23:28 +08:00
|
|
|
|
|
|
|
|
2020-03-09 16:26:10 +08:00
|
|
|
class Playlists extends Component {
|
|
|
|
handleEvent(e) {
|
|
|
|
switch (e.type) {
|
|
|
|
case "playlists-change":
|
|
|
|
this._sync();
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
2019-03-28 22:23:28 +08:00
|
|
|
|
2020-03-09 16:26:10 +08:00
|
|
|
_onAppLoad() {
|
|
|
|
this._app.addEventListener("playlists-change", this);
|
|
|
|
}
|
2019-03-28 22:23:28 +08:00
|
|
|
|
2020-03-09 16:26:10 +08:00
|
|
|
_onComponentChange(c, isThis) {
|
|
|
|
this.hidden = !isThis;
|
|
|
|
if (isThis) { this._sync(); }
|
|
|
|
}
|
2019-03-29 03:28:55 +08:00
|
|
|
|
2020-03-09 16:26:10 +08:00
|
|
|
async _sync() {
|
|
|
|
let lists = await this._mpd.listPlaylists();
|
|
|
|
this._buildLists(lists);
|
|
|
|
}
|
|
|
|
|
|
|
|
_buildLists(lists) {
|
|
|
|
let ul = this.querySelector("ul");
|
|
|
|
html.clear(ul);
|
2019-03-28 22:23:28 +08:00
|
|
|
|
2020-03-09 16:26:10 +08:00
|
|
|
lists.map(list => ui.playlist(list, ul));
|
|
|
|
}
|
2019-03-28 22:23:28 +08:00
|
|
|
}
|
2020-03-09 16:26:10 +08:00
|
|
|
|
|
|
|
customElements.define("cyp-playlists", Playlists);
|