cyp/app/js/lib/ui.js

157 lines
3.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-29 03:28:55 +08:00
export const CTX_FS = 1;
export const CTX_QUEUE = 2;
export const CTX_LIBRARY = 3;
const TYPE_ID = 1;
const TYPE_URL = 2;
const TYPE_FILTER = 3;
const TYPE_PLAYLIST = 4;
2019-03-26 17:09:26 +08:00
const SORT = "-Track";
2019-03-29 03:28:55 +08:00
function enqueue(type, what) {
switch (type) {
case TYPE_URL: return mpd.command(`add "${mpd.escape(what)}"`); break;
case TYPE_FILTER: return mpd.enqueueByFilter(what, SORT); break;
case TYPE_PLAYLIST: return mpd.command(`load "${mpd.escape(what)}"`); break;
}
}
2019-03-26 17:09:26 +08:00
function fileName(data) {
return data["file"].split("/").pop();
}
2019-03-29 03:28:55 +08:00
function formatTitle(ctx, data) {
switch (ctx) {
case CTX_FS:
2019-03-26 17:09:26 +08:00
return `🎵 ${fileName(data)}`;
break;
2019-03-29 03:28:55 +08:00
case CTX_LIBRARY:
2019-03-26 17:09:26 +08:00
return data["Artist"] || fileName(data);
break;
2019-03-29 03:28:55 +08:00
case CTX_QUEUE:
2019-03-26 17:09:26 +08:00
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;
}
}
2019-03-29 03:28:55 +08:00
function playButton(type, what, parent) {
2019-03-26 22:40:23 +08:00
let button = html.button({icon:"play", title:"Play"}, "", parent);
2019-03-26 17:09:26 +08:00
button.addEventListener("click", async e => {
2019-03-29 03:28:55 +08:00
if (type == TYPE_ID) {
await mpd.command(`playid ${what}`);
} else {
await mpd.command("clear");
await enqueue(type, what);
await mpd.command("play");
pubsub.publish("queue-change");
}
2019-03-26 17:09:26 +08:00
player.update();
});
return button;
2019-03-29 03:28:55 +08:00
2019-03-26 17:09:26 +08:00
}
2019-03-29 03:28:55 +08:00
function deleteButton(type, id, parent) {
let title;
switch (type) {
case TYPE_ID: title = "Delete from queue"; break;
case TYPE_PLAYLIST: title = "Delete playlist"; break;
}
let button = html.button({icon:"close", title}, "", parent);
2019-03-25 22:49:23 +08:00
button.addEventListener("click", async e => {
2019-03-29 03:28:55 +08:00
switch (type) {
case TYPE_ID:
await mpd.command(`deleteid ${id}`);
pubsub.publish("queue-change");
return;
case TYPE_PLAYLIST:
let ok = confirm(`Really delete playlist '${id}'?`);
if (!ok) { return; }
await mpd.command(`rm "${mpd.escape(id)}"`);
pubsub.publish("playlists-change");
return;
}
2019-03-25 22:49:23 +08:00
});
return button;
}
2019-03-29 03:28:55 +08:00
function addButton(type, what, parent) {
2019-03-28 22:23:28 +08:00
let button = html.button({icon:"plus", title:"Add to queue"}, "", parent);
2019-03-25 22:49:23 +08:00
button.addEventListener("click", async e => {
e.stopPropagation();
2019-03-29 03:28:55 +08:00
await enqueue(type, what);
2019-03-26 17:09:26 +08:00
pubsub.publish("queue-change");
2019-03-25 22:49:23 +08:00
// fixme notification?
});
return button;
}
2019-03-29 03:28:55 +08:00
export function song(ctx, data, parent) {
2019-03-25 22:49:23 +08:00
let node = html.node("li", {}, "", parent);
2019-03-29 03:28:55 +08:00
let title = formatTitle(ctx, data);
2019-03-26 17:09:26 +08:00
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);
2019-03-29 03:28:55 +08:00
switch (ctx) {
case CTX_QUEUE:
let id = data["Id"];
node.dataset.songId = id;
playButton(TYPE_ID, id, node);
deleteButton(TYPE_ID, id, node);
break;
case CTX_FS:
let url = data["file"];
playButton(TYPE_URL, url, node);
addButton(TYPE_URL, url, node);
break;
2019-03-26 17:09:26 +08:00
}
2019-03-25 22:49:23 +08:00
return node;
}
2019-03-29 03:28:55 +08:00
export function group(ctx, 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-29 03:28:55 +08:00
if (ctx == CTX_FS) { label = `📁 ${label}`; }
2019-03-26 19:35:47 +08:00
html.node("h2", {}, label, node);
2019-03-26 17:09:26 +08:00
2019-03-29 03:28:55 +08:00
let type = (ctx == CTX_FS ? TYPE_URL : TYPE_FILTER);
playButton(type, urlOrFilter, node);
addButton(type, urlOrFilter, node);
2019-03-25 22:49:23 +08:00
return node;
2019-03-28 22:23:28 +08:00
}
export function playlist(name, parent) {
let node = html.node("li", {}, "", parent);
html.icon("playlist-music", node)
html.node("h2", {}, name, node);
2019-03-29 03:28:55 +08:00
playButton(TYPE_PLAYLIST, name, node);
addButton(TYPE_PLAYLIST, name, node);
deleteButton(TYPE_PLAYLIST, name, node);
2019-03-28 22:23:28 +08:00
return node;
}