257 lines
9.4 KiB
JavaScript
257 lines
9.4 KiB
JavaScript
"use strict";
|
|
|
|
/*
|
|
* Media archive and slopbot views.
|
|
*
|
|
* Self-contained: this file owns its overlay, so app.js does not change except
|
|
* for the two scope buttons in index.html. See docs/media.md.
|
|
*/
|
|
|
|
(() => {
|
|
const KINDS = ["all", "image", "gif", "video", "audio"];
|
|
const KIND_LABELS = { all: "All", image: "Images", gif: "GIFs", video: "Videos", audio: "Audio" };
|
|
|
|
const state = {
|
|
view: null,
|
|
kind: "all",
|
|
offset: 0,
|
|
items: [],
|
|
scrapes: [],
|
|
channels: [],
|
|
loadedChannels: false
|
|
};
|
|
|
|
const overlay = document.createElement("div");
|
|
overlay.className = "vk-media-overlay";
|
|
overlay.hidden = true;
|
|
overlay.innerHTML = `
|
|
<div class="vk-media-panel">
|
|
<div class="vk-media-head">
|
|
<span id="media-title" class="vk-media-title">Media archive</span>
|
|
<span id="media-refresh" class="btn btn-secondary vk-small-btn">Refresh</span>
|
|
<span id="media-close" class="btn btn-secondary vk-small-btn">Close</span>
|
|
</div>
|
|
<div id="media-toolbar" class="vk-media-toolbar"></div>
|
|
<div id="media-status" class="vk-media-status"></div>
|
|
<div id="media-scrapes" class="vk-media-scrapes"></div>
|
|
<div id="media-grid" class="vk-media-grid"></div>
|
|
</div>
|
|
`;
|
|
document.body.append(overlay);
|
|
|
|
const title = overlay.querySelector("#media-title");
|
|
const toolbar = overlay.querySelector("#media-toolbar");
|
|
const statusLine = overlay.querySelector("#media-status");
|
|
const scrapeList = overlay.querySelector("#media-scrapes");
|
|
const grid = overlay.querySelector("#media-grid");
|
|
|
|
function setStatus(text) {
|
|
statusLine.textContent = text;
|
|
}
|
|
|
|
function el(tag, className, text) {
|
|
const node = document.createElement(tag);
|
|
if (className) node.className = className;
|
|
if (text !== undefined) node.textContent = text;
|
|
return node;
|
|
}
|
|
|
|
function button(label, handler) {
|
|
const node = el("button", "btn btn-secondary vk-small-btn", label);
|
|
node.type = "button";
|
|
node.addEventListener("click", handler);
|
|
return node;
|
|
}
|
|
|
|
function show(view) {
|
|
state.view = view;
|
|
overlay.hidden = false;
|
|
document.querySelector("#scope-media")?.classList.toggle("active", view === "media");
|
|
document.querySelector("#scope-bot")?.classList.toggle("active", view === "bot");
|
|
document.querySelector("#scope-guild")?.classList.remove("active");
|
|
document.querySelector("#scope-dm")?.classList.remove("active");
|
|
render();
|
|
}
|
|
|
|
function hide() {
|
|
state.view = null;
|
|
overlay.hidden = true;
|
|
document.querySelector("#scope-media")?.classList.remove("active");
|
|
document.querySelector("#scope-bot")?.classList.remove("active");
|
|
}
|
|
|
|
async function loadChannels() {
|
|
if (state.loadedChannels) return;
|
|
try {
|
|
const data = await window.VK.api.get("/api/state");
|
|
state.channels = [];
|
|
for (const guild of data?.guilds ?? []) {
|
|
for (const channel of guild.channels ?? []) {
|
|
if (channel.type !== 0 && channel.type !== 5) continue;
|
|
state.channels.push({
|
|
id: channel.id,
|
|
guildId: guild.id,
|
|
label: `${guild.name} / #${channel.name}`
|
|
});
|
|
}
|
|
}
|
|
state.loadedChannels = true;
|
|
} catch {
|
|
state.channels = [];
|
|
}
|
|
}
|
|
|
|
async function loadScrapes() {
|
|
try {
|
|
state.scrapes = await window.VK.api.get("/api/media/scrapes");
|
|
state.status = await window.VK.api.get("/api/media/status");
|
|
} catch (error) {
|
|
setStatus(`media status failed: ${error.message}`);
|
|
}
|
|
renderScrapes();
|
|
}
|
|
|
|
async function loadMedia(reset) {
|
|
if (reset) {
|
|
state.items = [];
|
|
state.offset = 0;
|
|
}
|
|
try {
|
|
const kind = state.kind === "all" ? "" : `&kind=${state.kind}`;
|
|
const items = await window.VK.api.get(`/api/media?limit=60&offset=${state.offset}${kind}`);
|
|
state.items = state.items.concat(items);
|
|
state.offset += items.length;
|
|
setStatus(`${state.items.length} items loaded`);
|
|
} catch (error) {
|
|
setStatus(`media load failed: ${error.message}`);
|
|
}
|
|
renderGrid();
|
|
}
|
|
|
|
async function startScrape(mode) {
|
|
const select = overlay.querySelector("#media-channel");
|
|
if (!select?.value) {
|
|
setStatus("no text channel available to scrape");
|
|
return;
|
|
}
|
|
const channel = state.channels.find(entry => entry.id === select.value);
|
|
try {
|
|
const scrape = await window.VK.api.post("/api/media/scrape", {
|
|
channelId: select.value,
|
|
guildId: channel?.guildId ?? null,
|
|
mode
|
|
});
|
|
setStatus(`started ${scrape.id} (${mode})`);
|
|
} catch (error) {
|
|
setStatus(`start failed: ${error.message}`);
|
|
}
|
|
void loadScrapes();
|
|
}
|
|
|
|
function renderScrapes() {
|
|
scrapeList.replaceChildren();
|
|
const active = state.scrapes.filter(scrape => ["queued", "running", "paused"].includes(scrape.state));
|
|
const rows = active.length ? active : state.scrapes.slice(0, 5);
|
|
for (const scrape of rows) {
|
|
const row = el("div", "vk-media-scrape");
|
|
row.append(el("span", null, `${scrape.channelId} · ${scrape.state} · ${scrape.pages}p · ${scrape.messages}m`));
|
|
if (active.includes(scrape)) {
|
|
row.append(
|
|
button("Stop", async () => {
|
|
await window.VK.api.post("/api/media/scrape/stop", { id: scrape.id });
|
|
void loadScrapes();
|
|
})
|
|
);
|
|
}
|
|
scrapeList.append(row);
|
|
}
|
|
}
|
|
|
|
function renderGrid() {
|
|
grid.replaceChildren();
|
|
for (const item of state.items) {
|
|
const card = el("a", "vk-media-card");
|
|
card.href = item.url;
|
|
card.target = "_blank";
|
|
card.rel = "noreferrer";
|
|
|
|
if ((item.kind === "image" || item.kind === "gif") && /^https?:/.test(item.url)) {
|
|
const img = document.createElement("img");
|
|
img.loading = "lazy";
|
|
img.src = item.url;
|
|
img.alt = item.kind;
|
|
card.append(img);
|
|
} else {
|
|
card.append(el("span", "vk-media-card-kind", item.kind.toUpperCase()));
|
|
card.append(el("span", "vk-media-card-name", item.provider || new URL(item.url).hostname));
|
|
}
|
|
grid.append(card);
|
|
}
|
|
}
|
|
|
|
function renderToolbar() {
|
|
toolbar.replaceChildren();
|
|
if (state.view === "media") {
|
|
for (const kind of KINDS) {
|
|
const chip = el("button", `vk-chip ${state.kind === kind ? "vk-chip-on" : "vk-chip-off"}`, KIND_LABELS[kind]);
|
|
chip.type = "button";
|
|
chip.addEventListener("click", () => {
|
|
state.kind = kind;
|
|
void loadMedia(true);
|
|
renderToolbar();
|
|
});
|
|
toolbar.append(chip);
|
|
}
|
|
|
|
const select = document.createElement("select");
|
|
select.id = "media-channel";
|
|
select.className = "vk-chip vk-chip-off";
|
|
for (const channel of state.channels) {
|
|
const option = document.createElement("option");
|
|
option.value = channel.id;
|
|
option.textContent = channel.label;
|
|
select.append(option);
|
|
}
|
|
toolbar.append(select);
|
|
|
|
toolbar.append(button("Start links", () => void startScrape("links")));
|
|
toolbar.append(button("Start download", () => void startScrape("download")));
|
|
} else {
|
|
toolbar.append(el("span", null, "Slopbot is the dedicated bot core. Setup: docs/slopbot.md."));
|
|
}
|
|
}
|
|
|
|
function render() {
|
|
title.textContent = state.view === "bot" ? "Slopbot" : "Media archive";
|
|
toolbar.hidden = false;
|
|
grid.hidden = state.view === "bot";
|
|
renderToolbar();
|
|
|
|
if (state.view === "bot") {
|
|
const bot = state.status?.slopbot;
|
|
statusLine.textContent = bot?.connected
|
|
? `connected as ${bot.user} in ${bot.guilds.length} guild(s)`
|
|
: "slopbot is disabled or not logged in (VESKSLOP_SLOPBOT_ENABLED=1 and a token)";
|
|
} else {
|
|
void loadChannels().then(renderToolbar);
|
|
void loadMedia(true);
|
|
}
|
|
void loadScrapes();
|
|
}
|
|
|
|
overlay.querySelector("#media-close").addEventListener("click", hide);
|
|
overlay.querySelector("#media-refresh").addEventListener("click", () => {
|
|
void loadScrapes();
|
|
if (state.view === "media") void loadMedia(true);
|
|
});
|
|
|
|
const scopeMedia = document.querySelector("#scope-media");
|
|
const scopeBot = document.querySelector("#scope-bot");
|
|
scopeMedia?.addEventListener("click", () => show("media"));
|
|
scopeBot?.addEventListener("click", () => show("bot"));
|
|
document.querySelector("#scope-guild")?.addEventListener("click", hide);
|
|
document.querySelector("#scope-dm")?.addEventListener("click", hide);
|
|
|
|
window.VK.media = { show, hide };
|
|
})();
|