82 lines
2.1 KiB
JavaScript
82 lines
2.1 KiB
JavaScript
|
import * as mpd from "./mpd.js";
|
||
|
|
import * as art from "./art.js";
|
||
|
|
|
||
|
|
const DELAY = 2000;
|
||
|
|
const DOM = {};
|
||
|
|
|
||
|
|
let current = {};
|
||
|
|
let node;
|
||
|
|
let idleTimeout = null;
|
||
|
|
|
||
|
|
function formatTime(sec) {
|
||
|
|
sec = Math.round(sec);
|
||
|
|
let m = Math.floor(sec / 60);
|
||
|
|
let s = sec % 60;
|
||
|
|
return `${m}:${s.toString().padStart(2, "0")}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function update(data) {
|
||
|
|
DOM.elapsed.textContent = formatTime(Number(data["elapsed"] || 0)); // changed time
|
||
|
|
|
||
|
|
if (data["file"] != current["file"]) { // changed song
|
||
|
|
DOM.duration.textContent = formatTime(Number(data["duration"] || 0));
|
||
|
|
DOM.title.textContent = data["Title"] || "";
|
||
|
|
DOM.album.textContent = data["Album"] || "";
|
||
|
|
DOM.artist.textContent = data["Artist"] || "";
|
||
|
|
}
|
||
|
|
|
||
|
|
if (data["Artist"] != current["Artist"] || data["Album"] != current["Album"]) { // changed album (art)
|
||
|
|
DOM.art.innerHTML = "";
|
||
|
|
art.get(data["Artist"], data["Album"], data["file"]).then(src => {
|
||
|
|
if (!src) { return; }
|
||
|
|
let image = document.createElement("img");
|
||
|
|
image.src = src;
|
||
|
|
DOM.art.appendChild(image);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
node.classList.toggle("random", data["random"] == "1");
|
||
|
|
node.classList.toggle("repeat", data["repeat"] == "1");
|
||
|
|
node.dataset.state = data["state"];
|
||
|
|
|
||
|
|
current = data;
|
||
|
|
}
|
||
|
|
|
||
|
|
async function sync() {
|
||
|
|
let data = await mpd.status();
|
||
|
|
update(data);
|
||
|
|
idle();
|
||
|
|
}
|
||
|
|
|
||
|
|
function idle() {
|
||
|
|
idleTimeout = setTimeout(sync, DELAY);
|
||
|
|
}
|
||
|
|
|
||
|
|
function clearIdle() {
|
||
|
|
idleTimeout && clearTimeout(idleTimeout);
|
||
|
|
idleTimeout = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
async function command(cmd) {
|
||
|
|
clearIdle();
|
||
|
|
let data = await mpd.commandAndStatus(cmd);
|
||
|
|
update(data);
|
||
|
|
idle();
|
||
|
|
}
|
||
|
|
|
||
|
|
export function init() {
|
||
|
|
node = document.querySelector("#player");
|
||
|
|
let all = node.querySelectorAll("[class]");
|
||
|
|
Array.from(all).forEach(node => DOM[node.className] = node);
|
||
|
|
|
||
|
|
DOM.play.addEventListener("click", e => command("play"));
|
||
|
|
DOM.pause.addEventListener("click", e => command("pause 1"));
|
||
|
|
DOM.prev.addEventListener("click", e => command("previous"));
|
||
|
|
DOM.next.addEventListener("click", e => command("next"));
|
||
|
|
|
||
|
|
DOM.random.addEventListener("click", e => command(`random ${current["random"] == "1" ? "0" : "1"}`));
|
||
|
|
DOM.repeat.addEventListener("click", e => command(`repeat ${current["repeat"] == "1" ? "0" : "1"}`));
|
||
|
|
|
||
|
|
sync();
|
||
|
|
}
|