cyp/app/js/queue.js

70 lines
1.6 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 player from "./player.js";
import * as pubsub from "./lib/pubsub.js";
2019-03-22 23:17:10 +08:00
import * as format from "./lib/format.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);
});
}
async function playSong(id) {
await mpd.command(`playid ${id}`);
player.update();
}
2019-03-22 23:17:10 +08:00
async function deleteSong(id) {
await mpd.command(`deleteid ${id}`);
activate();
}
2019-03-22 22:35:04 +08:00
function buildSong(song) {
let id = Number(song["Id"]);
let node = html.node("li");
node.dataset.songId = id;
2019-03-22 23:17:10 +08:00
html.button({className:"play"}, "▶", node).addEventListener("click", e => playSong(id));
let info = html.node("div", {className:"info"}, "", node);
html.node("h2", {className:"title"}, song["Title"], info);
html.node("span", {className:"artist-album"}, format.artistAlbum(song["Artist"], song["Album"]), info);
html.node("span", {className:"duration"}, format.time(Number(song["duration"])), info);
html.button({className:"delete"}, "🗙", node).addEventListener("click", e => deleteSong(id));
2019-03-22 22:35:04 +08:00
return node;
}
function buildSongs(songs) {
html.clear(node);
let ul = html.node("ul");
songs.map(buildSong).forEach(li => ul.appendChild(li));
node.appendChild(ul);
updateCurrent();
}
function onSongChange(message, publisher, data) {
currentId = data["Id"];
updateCurrent();
}
export async function activate() {
let songs = await mpd.listQueue();
buildSongs(songs);
}
export function init(n) {
node = n;
pubsub.subscribe("song-change", onSongChange);
}