cyp/app/js/lib/ui.js

112 lines
2.6 KiB
JavaScript
Raw Normal View History

2019-03-25 22:49:23 +08:00
import * as mpd from "./mpd.js";
import * as html from "./html.js";
2019-03-26 17:09:26 +08:00
import * as pubsub from "./pubsub.js";
import * as format from "./format.js";
import * as player from "../player.js";
2019-03-25 22:49:23 +08:00
2019-03-26 17:09:26 +08:00
export const SONG_FILE = 1;
export const SONG_LIBRARY = 2;
export const SONG_QUEUE = 3;
export const GROUP_DIRECTORY = 4;
export const GROUP_LIBRARY = 5;
const SORT = "-Track";
function fileName(data) {
return data["file"].split("/").pop();
}
function formatTitle(type, data) {
switch (type) {
case SONG_FILE:
return `🎵 ${fileName(data)}`;
break;
case SONG_LIBRARY:
return data["Artist"] || fileName(data);
break;
case SONG_QUEUE:
let tokens = [];
data["Artist"] && tokens.push(data["Artist"]);
data["Title"] && tokens.push(data["Title"]);
if (!tokens.length) { tokens.push(fileName(data)); }
return tokens.join(" - ");
break;
}
}
function playButton(id, parent) {
let button = html.button({className:"play"}, "▶", parent);
button.addEventListener("click", async e => {
await mpd.command(`playid ${id}`);
player.update();
});
}
function deleteButton(id, parent) {
let button = html.button({className:"delete"}, "🗙", parent);
button.addEventListener("click", async e => {
await mpd.command(`deleteid ${id}`);
pubsub.publish("queue-change");
});
return button;
}
function addAndPlayButton(urlOrFilter, parent) {
2019-03-25 22:49:23 +08:00
let button = html.button({}, "▶", parent);
button.addEventListener("click", async e => {
e.stopPropagation();
await mpd.command("clear");
2019-03-26 17:09:26 +08:00
await mpd.enqueue(urlOrFilter, SORT);
2019-03-25 22:49:23 +08:00
await mpd.command("play");
2019-03-26 17:09:26 +08:00
pubsub.publish("queue-change");
2019-03-25 22:49:23 +08:00
player.update();
});
return button;
}
2019-03-26 17:09:26 +08:00
function addButton(urlOrFilter, parent) {
2019-03-25 22:49:23 +08:00
let button = html.button({}, "+", parent);
button.addEventListener("click", async e => {
e.stopPropagation();
2019-03-26 17:09:26 +08:00
await mpd.enqueue(urlOrFilter, SORT);
pubsub.publish("queue-change");
2019-03-25 22:49:23 +08:00
// fixme notification?
});
return button;
}
2019-03-26 17:09:26 +08:00
export function song(type, data, parent) {
2019-03-25 22:49:23 +08:00
let node = html.node("li", {}, "", parent);
2019-03-26 17:09:26 +08:00
let title = formatTitle(type, data);
html.node("h2", {}, title, node);
2019-03-25 22:49:23 +08:00
2019-03-26 17:09:26 +08:00
html.node("span", {className:"duration"}, format.time(Number(data["duration"])), node);
if (type == SONG_QUEUE) {
let id = data["Id"];
node.dataset.songId = id;
playButton(id, node);
deleteButton(id, node);
} else {
let url = data["file"];
addAndPlayButton(url, node);
addButton(url, node);
}
2019-03-25 22:49:23 +08:00
return node;
}
2019-03-26 17:09:26 +08:00
export function group(type, label, urlOrFilter, parent) {
2019-03-26 19:35:47 +08:00
let node = html.node("li", {}, "", parent);
2019-03-25 22:49:23 +08:00
2019-03-26 19:35:47 +08:00
if (type == GROUP_DIRECTORY) { label = `📁 ${label}`; }
html.node("h2", {}, label, node);
2019-03-26 17:09:26 +08:00
addAndPlayButton(urlOrFilter, node);
addButton(urlOrFilter, node);
2019-03-25 22:49:23 +08:00
return node;
}