Use inline watchlist download mode picker

This commit is contained in:
Dymas
2026-05-23 19:19:31 +02:00
parent 2ff4e390c4
commit 93446c5e92
6 changed files with 38 additions and 25 deletions
+26 -20
View File
@@ -523,6 +523,15 @@ WATCHLIST_HTML = r"""<!doctype html>
min-height: 34px;
padding: 0 10px;
}
.download-picker {
display: none;
grid-column: 1 / -1;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.download-picker.visible {
display: grid;
}
.pager {
display: flex;
justify-content: space-between;
@@ -1009,6 +1018,10 @@ WATCHLIST_HTML = r"""<!doctype html>
<button class="primary" type="button">Refresh</button>
<button class="ghost" type="button">Download all</button>
<button class="danger" type="button">Remove</button>
<div class="download-picker">
<button class="ghost" type="button">Sub</button>
<button class="ghost" type="button">Dub</button>
</div>
</div>
`;
card.querySelector(".cover-fallback").textContent = coverInitials(item.title);
@@ -1051,8 +1064,11 @@ WATCHLIST_HTML = r"""<!doctype html>
});
const actionButtons = card.querySelector(".card-actions").querySelectorAll("button");
const refreshBtn = actionButtons[0];
const searchBtn = actionButtons[1];
const downloadBtn = actionButtons[1];
const removeBtn = actionButtons[2];
const subBtn = actionButtons[3];
const dubBtn = actionButtons[4];
const downloadPicker = card.querySelector(".download-picker");
const categorySelect = card.querySelector(".category-select");
categorySelect.addEventListener("change", async () => {
categorySelect.disabled = true;
@@ -1071,7 +1087,12 @@ WATCHLIST_HTML = r"""<!doctype html>
}
});
refreshBtn.addEventListener("click", () => refreshWatchlistItem(item.show_id));
searchBtn.addEventListener("click", () => downloadWatchlistItem(item));
downloadBtn.addEventListener("click", () => {
const visible = downloadPicker.classList.toggle("visible");
downloadBtn.textContent = visible ? "Cancel download" : "Download all";
});
subBtn.addEventListener("click", () => downloadWatchlistItem(item, "sub", downloadPicker, downloadBtn));
dubBtn.addEventListener("click", () => downloadWatchlistItem(item, "dub", downloadPicker, downloadBtn));
removeBtn.addEventListener("click", () => removeWatchlistItem(item.show_id, item.title));
container.appendChild(card);
applyThumbnail(card, item, false);
@@ -1166,30 +1187,15 @@ WATCHLIST_HTML = r"""<!doctype html>
}
}
function chooseWatchlistDownloadMode(item) {
const fallback = item.dub_count > 0 && item.sub_count < 1 ? "dub" : "sub";
const answer = window.prompt(
`Download all available episodes for ${item.title || "this anime"}.\nEnter sub or dub:`,
fallback,
);
if (answer === null) return "";
const mode = String(answer || "").trim().toLowerCase();
if (mode === "sub" || mode === "dub") {
return mode;
}
setNotice("Enter sub or dub to queue a watchlist download.");
return "";
}
async function downloadWatchlistItem(item) {
const mode = chooseWatchlistDownloadMode(item);
if (!mode) return;
async function downloadWatchlistItem(item, mode, picker = null, toggleBtn = null) {
setNotice(`Queueing ${item.title || "selected anime"} for ${mode} download...`);
try {
const data = await api("/api/watchlist/download-all", {
method: "POST",
body: JSON.stringify({ show_id: item.show_id, mode })
});
if (picker) picker.classList.remove("visible");
if (toggleBtn) toggleBtn.textContent = "Download all";
setNotice(data.message || "Added to queue.");
} catch (error) {
setNotice(error.message);