cyp/app/js/queue.js

61 lines
1.4 KiB
JavaScript
Raw Normal View History

2019-03-22 22:35:04 +08:00
import * as mpd from "./lib/mpd.js";
import * as html from "./lib/html.js";
import * as pubsub from "./lib/pubsub.js";
2019-03-26 17:09:26 +08:00
import * as ui from "./lib/ui.js";
2019-03-22 22:35:04 +08:00
let node;
let currentId;
function updateCurrent() {
let all = Array.from(node.querySelectorAll("[data-song-id]"));
all.forEach(node => {
node.classList.toggle("current", node.dataset.songId == currentId);
});
}
function buildSongs(songs) {
2019-03-25 22:49:23 +08:00
let ul = node.querySelector("ul");
html.clear(ul);
2019-03-22 22:35:04 +08:00
2019-03-29 03:28:55 +08:00
songs.map(song => ui.song(ui.CTX_QUEUE, song, ul));
2019-03-22 22:35:04 +08:00
updateCurrent();
}
function onSongChange(message, publisher, data) {
currentId = data["Id"];
updateCurrent();
}
2019-03-26 17:09:26 +08:00
function onQueueChange(message, publisher, data) {
syncQueue();
}
async function syncQueue() {
2019-03-22 22:35:04 +08:00
let songs = await mpd.listQueue();
buildSongs(songs);
2019-03-26 19:35:47 +08:00
document.querySelector("#queue-length").textContent = `(${songs.length})`;
2019-03-26 17:09:26 +08:00
}
export async function activate() {
syncQueue();
2019-03-22 22:35:04 +08:00
}
export function init(n) {
node = n;
2019-03-26 19:35:47 +08:00
syncQueue();
2019-03-22 22:35:04 +08:00
pubsub.subscribe("song-change", onSongChange);
2019-03-26 17:09:26 +08:00
pubsub.subscribe("queue-change", onQueueChange);
2019-03-28 22:23:28 +08:00
2019-03-29 05:52:57 +08:00
node.querySelector(".clear").addEventListener("click", async e => {
2019-03-28 22:23:28 +08:00
await mpd.command("clear");
syncQueue();
});
2019-03-29 05:52:57 +08:00
node.querySelector(".save").addEventListener("click", e => {
2019-03-28 22:23:28 +08:00
let name = prompt("Save current queue as a playlist?", "name");
if (name === null) { return; }
2019-03-29 03:28:55 +08:00
mpd.command(`save "${mpd.escape(name)}"`);
2019-03-28 22:23:28 +08:00
});
2019-03-22 22:35:04 +08:00
}