Add watchlist auto-download settings
This commit is contained in:
Dymas
+103
-4
@@ -551,6 +551,38 @@ WATCHLIST_HTML = r"""<!doctype html>
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
.auto-download-panel {
|
||||
display: none;
|
||||
grid-column: 1 / -1;
|
||||
gap: 10px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
padding: 12px;
|
||||
}
|
||||
.auto-download-panel.visible {
|
||||
display: grid;
|
||||
}
|
||||
.auto-download-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
.auto-download-panel label {
|
||||
font-size: 10px;
|
||||
}
|
||||
.auto-download-panel input,
|
||||
.auto-download-panel select {
|
||||
min-height: 36px;
|
||||
padding: 0 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.auto-download-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.category-editor label {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.08em;
|
||||
@@ -562,7 +594,7 @@ WATCHLIST_HTML = r"""<!doctype html>
|
||||
}
|
||||
.card-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
.card-actions button {
|
||||
@@ -613,6 +645,7 @@ WATCHLIST_HTML = r"""<!doctype html>
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.watchlist-grid { grid-template-columns: 1fr; }
|
||||
.auto-download-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -1031,6 +1064,12 @@ WATCHLIST_HTML = r"""<!doctype html>
|
||||
renderPager();
|
||||
return;
|
||||
}
|
||||
const qualityOptions = `
|
||||
<option value="best">Best</option>
|
||||
<option value="1080">1080p</option>
|
||||
<option value="720">720p</option>
|
||||
<option value="480">480p</option>
|
||||
`;
|
||||
for (const item of items) {
|
||||
const card = document.createElement("article");
|
||||
const checked = item.last_checked ? new Date(item.last_checked).toLocaleString() : "Never";
|
||||
@@ -1070,11 +1109,33 @@ WATCHLIST_HTML = r"""<!doctype html>
|
||||
<div class="card-actions">
|
||||
<button class="primary" type="button">Refresh</button>
|
||||
<button class="ghost" type="button">Download all</button>
|
||||
<button class="ghost" type="button">Auto-download</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 class="auto-download-panel">
|
||||
<div class="muted">Used only while this anime is in the Watching tab. Manual add does not trigger it; later refreshes do.</div>
|
||||
<div class="auto-download-grid">
|
||||
<label>Language
|
||||
<select class="auto-download-mode">
|
||||
<option value="dub"${item.auto_download_mode === "dub" ? " selected" : ""}>Dub</option>
|
||||
<option value="sub"${item.auto_download_mode === "sub" ? " selected" : ""}>Sub</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Quality
|
||||
<select class="auto-download-quality">${qualityOptions.replace(`value="${item.auto_download_quality}"`, `value="${item.auto_download_quality}" selected`)}</select>
|
||||
</label>
|
||||
<label>Name
|
||||
<input class="auto-download-name" type="text" list="auto-download-name-options-${item.show_id}">
|
||||
<datalist id="auto-download-name-options-${item.show_id}"></datalist>
|
||||
</label>
|
||||
</div>
|
||||
<div class="auto-download-actions">
|
||||
<button class="ghost auto-download-save" type="button">Save auto-download</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
card.querySelector(".cover-fallback").textContent = coverInitials(item.title);
|
||||
@@ -1142,10 +1203,24 @@ WATCHLIST_HTML = r"""<!doctype html>
|
||||
const actionButtons = card.querySelector(".card-actions").querySelectorAll("button");
|
||||
const refreshBtn = actionButtons[0];
|
||||
const downloadBtn = actionButtons[1];
|
||||
const removeBtn = actionButtons[2];
|
||||
const subBtn = actionButtons[3];
|
||||
const dubBtn = actionButtons[4];
|
||||
const autoDownloadBtn = actionButtons[2];
|
||||
const removeBtn = actionButtons[3];
|
||||
const subBtn = actionButtons[4];
|
||||
const dubBtn = actionButtons[5];
|
||||
const downloadPicker = card.querySelector(".download-picker");
|
||||
const autoDownloadPanel = card.querySelector(".auto-download-panel");
|
||||
const autoDownloadMode = card.querySelector(".auto-download-mode");
|
||||
const autoDownloadQuality = card.querySelector(".auto-download-quality");
|
||||
const autoDownloadName = card.querySelector(".auto-download-name");
|
||||
const autoDownloadSave = card.querySelector(".auto-download-save");
|
||||
const autoDownloadNameOptions = card.querySelector(`#auto-download-name-options-${CSS.escape(item.show_id)}`);
|
||||
autoDownloadName.value = item.auto_download_name || "";
|
||||
const nameSuggestions = [item.title, ...(Array.isArray(item.alternative_titles) ? item.alternative_titles.map((entry) => entry.value) : [])];
|
||||
for (const name of nameSuggestions) {
|
||||
const option = document.createElement("option");
|
||||
option.value = name;
|
||||
autoDownloadNameOptions.appendChild(option);
|
||||
}
|
||||
const categorySelect = card.querySelector(".category-select");
|
||||
categorySelect.addEventListener("change", async () => {
|
||||
categorySelect.disabled = true;
|
||||
@@ -1168,6 +1243,30 @@ WATCHLIST_HTML = r"""<!doctype html>
|
||||
const visible = downloadPicker.classList.toggle("visible");
|
||||
downloadBtn.textContent = visible ? "Cancel download" : "Download all";
|
||||
});
|
||||
autoDownloadBtn.addEventListener("click", () => {
|
||||
const visible = autoDownloadPanel.classList.toggle("visible");
|
||||
autoDownloadBtn.textContent = visible ? "Hide auto-download" : "Auto-download";
|
||||
});
|
||||
autoDownloadSave.addEventListener("click", async () => {
|
||||
autoDownloadSave.disabled = true;
|
||||
try {
|
||||
const data = await api("/api/watchlist/update-auto-download", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
show_id: item.show_id,
|
||||
mode: autoDownloadMode.value,
|
||||
quality: autoDownloadQuality.value,
|
||||
name: autoDownloadName.value
|
||||
})
|
||||
});
|
||||
autoDownloadName.value = (data.item || {}).auto_download_name || autoDownloadName.value;
|
||||
setNotice(data.message || "Auto-download settings saved.");
|
||||
} catch (error) {
|
||||
setNotice(error.message);
|
||||
} finally {
|
||||
autoDownloadSave.disabled = false;
|
||||
}
|
||||
});
|
||||
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));
|
||||
|
||||
Reference in New Issue
Block a user