cyp/app/js/player.js

131 lines
3.5 KiB
JavaScript
Raw Normal View History

2019-03-22 22:35:04 +08:00
import * as mpd from "./lib/mpd.js";
import * as art from "./lib/art.js";
import * as html from "./lib/html.js";
import * as format from "./lib/format.js";
import * as pubsub from "./lib/pubsub.js";
2019-03-21 17:32:58 +08:00
2019-04-12 19:48:00 +08:00
const DELAY = 1000;
2019-03-21 17:32:58 +08:00
const DOM = {};
let current = {};
let node;
let idleTimeout = null;
2019-04-12 19:34:28 +08:00
let toggledVolume = 0;
2019-03-21 17:32:58 +08:00
2019-03-22 22:35:04 +08:00
function sync(data) {
2019-04-12 19:34:28 +08:00
if ("volume" in data) {
data["volume"] = Number(data["volume"]);
DOM.mute.disabled = false;
DOM.volume.disabled = false;
DOM.volume.value = data["volume"];
if (data["volume"] == 0 && current["volume"] > 0) { // muted
toggledVolume = current["volume"];
html.clear(DOM.mute);
DOM.mute.appendChild(html.icon("volume-off"));
}
if (data["volume"] > 0 && current["volume"] == 0) { // restored
toggledVolume = 0;
html.clear(DOM.mute);
DOM.mute.appendChild(html.icon("volume-high"));
}
} else {
DOM.mute.disabled = true;
DOM.volume.disabled = true;
DOM.volume.value = 50;
}
2019-04-09 22:08:09 +08:00
2019-04-11 19:34:24 +08:00
// changed time
let elapsed = Number(data["elapsed"] || 0);
DOM.progress.value = elapsed;
DOM.elapsed.textContent = format.time(elapsed);
2019-03-21 17:32:58 +08:00
if (data["file"] != current["file"]) { // changed song
2019-03-30 19:57:01 +08:00
if (data["file"]) { // playing at all?
2019-04-11 19:34:24 +08:00
let duration = Number(data["duration"]);
2019-04-12 19:34:28 +08:00
DOM.duration.textContent = format.time(duration);
2019-04-11 19:34:24 +08:00
DOM.progress.max = duration;
2019-04-12 19:34:28 +08:00
DOM.progress.disabled = false;
2019-03-30 19:57:01 +08:00
DOM.title.textContent = data["Title"] || data["file"].split("/").pop();
2019-04-11 19:34:24 +08:00
DOM.subtitle.textContent = format.subtitle(data, {duration:false});
2019-03-30 19:57:01 +08:00
} else {
DOM.title.textContent = "";
2019-04-01 04:02:26 +08:00
DOM.subtitle.textContent = "";
2019-04-12 19:34:28 +08:00
DOM.progress.value = 0;
DOM.progress.disabled = true;
2019-03-30 19:57:01 +08:00
}
2019-03-22 22:35:04 +08:00
pubsub.publish("song-change", null, data);
2019-03-21 17:32:58 +08:00
}
if (data["Artist"] != current["Artist"] || data["Album"] != current["Album"]) { // changed album (art)
2019-04-09 22:08:09 +08:00
html.clear(DOM.art);
2019-03-21 17:32:58 +08:00
art.get(data["Artist"], data["Album"], data["file"]).then(src => {
2019-04-09 22:08:09 +08:00
if (src) {
html.node("img", {src}, "", DOM.art);
} else {
html.icon("music", DOM.art);
}
2019-03-21 17:32:58 +08:00
});
}
2019-03-22 22:35:04 +08:00
let flags = [];
if (data["random"] == "1") { flags.push("random"); }
if (data["repeat"] == "1") { flags.push("repeat"); }
node.dataset.flags = flags.join(" ");
2019-03-21 17:32:58 +08:00
node.dataset.state = data["state"];
current = data;
}
function idle() {
2019-03-22 22:35:04 +08:00
idleTimeout = setTimeout(update, DELAY);
2019-03-21 17:32:58 +08:00
}
function clearIdle() {
idleTimeout && clearTimeout(idleTimeout);
idleTimeout = null;
}
async function command(cmd) {
clearIdle();
let data = await mpd.commandAndStatus(cmd);
2019-03-22 22:35:04 +08:00
sync(data);
idle();
}
export async function update() {
clearIdle();
let data = await mpd.status();
sync(data);
2019-03-21 17:32:58 +08:00
idle();
}
2019-03-22 22:35:04 +08:00
export function init(n) {
node = n;
2019-03-21 17:32:58 +08:00
let all = node.querySelectorAll("[class]");
Array.from(all).forEach(node => DOM[node.className] = node);
2019-04-12 19:34:28 +08:00
DOM.progress = DOM.timeline.querySelector("[type=range]");
DOM.volume = DOM.volume.querySelector("[type=range]");
2019-04-11 19:34:24 +08:00
2019-03-21 17:32:58 +08:00
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"}`));
2019-04-10 20:37:02 +08:00
2019-04-12 19:34:28 +08:00
DOM.volume.addEventListener("input", e => command(`setvol ${e.target.valueAsNumber}`));
DOM.progress.addEventListener("input", e => command(`seekcur ${e.target.valueAsNumber}`));
DOM.mute.addEventListener("click", e => command(`setvol ${toggledVolume}`));
2019-03-21 17:32:58 +08:00
2019-03-22 22:35:04 +08:00
update();
2019-03-21 17:32:58 +08:00
}