Use inline watchlist download mode picker
This commit is contained in:
+26
-20
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user