Dymas/ani-cli-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add host path browser to config page

Browse Source
This commit is contained in:
Dymas
2026-05-25 17:20:55 +02:00
parent ece4ce0d5e
commit aef3be9d2d
7 changed files with 318 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+5
View File
@@ -1,5 +1,10 @@
# Changelog # Changelog
## 0.44.0 - 2026-05-25
- Added host filesystem browse buttons to the Config page path fields so default download and Jellyfin library folders can be selected from a built-in browser modal instead of typed manually.
- Added an authenticated `/api/fs/browse` endpoint for directory and file browsing to support the new host path picker workflow.
## 0.43.0 - 2026-05-25 ## 0.43.0 - 2026-05-25
- Added a Jellyfin section on the Config page with enable or disable control, separate TV and movie destination folders, and a manual `Run now` handoff trigger. - Added a Jellyfin section on the Config page with enable or disable control, separate TV and movie destination folders, and a manual `Run now` handoff trigger.
README.md
+3 -1
View File
@@ -2,7 +2,7 @@
Small local web UI for a system-wide `ani-cli` install. Small local web UI for a system-wide `ani-cli` install.
Current version: `0.43.0` Current version: `0.44.0`
## Project Layout ## Project Layout
@@ -130,6 +130,7 @@ Container notes:
- Cache watchlist thumbnails locally. - Cache watchlist thumbnails locally.
- Sync successful downloads back into the watchlist. - Sync successful downloads back into the watchlist.
- Keep queue and watchlist data in SQLite under `.ani-cli-web/`. - Keep queue and watchlist data in SQLite under `.ani-cli-web/`.
- Browse host folders directly from Config page path fields when choosing library locations.
## Pages ## Pages
@@ -195,6 +196,7 @@ Layout:
- `Dependencies` stays at the top as a full-width runtime status card. - `Dependencies` stays at the top as a full-width runtime status card.
- The remaining Config sections use two columns on larger screens and collapse to one column at `1080px` width and below. - The remaining Config sections use two columns on larger screens and collapse to one column at `1080px` width and below.
- Runtime info shows both the `ani-cli-web` version and the installed `ani-cli` version. - Runtime info shows both the `ani-cli-web` version and the installed `ani-cli` version.
- Path fields include `Browse` buttons that open a host-side folder picker modal in the browser.
Saved settings are written to `.ani-cli-web/config.json`. Saved settings are written to `.ani-cli-web/config.json`.
VERSION
+1 -1
View File
@@ -1 +1 @@
0.43.0 0.44.0
app_support.py
+1 -1
View File
@@ -20,7 +20,7 @@ from uuid import uuid4
PROJECT_ROOT = Path(__file__).resolve().parent PROJECT_ROOT = Path(__file__).resolve().parent
ANI_CLI = os.environ.get("ANI_CLI_BIN") or shutil.which("ani-cli") or "ani-cli" ANI_CLI = os.environ.get("ANI_CLI_BIN") or shutil.which("ani-cli") or "ani-cli"
APP_NAME = "ani-cli-web" APP_NAME = "ani-cli-web"
VERSION = "0.43.0" VERSION = "0.44.0"
ALLANIME_BASE = "allanime.day" ALLANIME_BASE = "allanime.day"
ALLANIME_API = f"https://api.{ALLANIME_BASE}" ALLANIME_API = f"https://api.{ALLANIME_BASE}"
ALLANIME_REFERER = "https://allmanga.to" ALLANIME_REFERER = "https://allmanga.to"
config_page.py
+233
View File
@@ -243,6 +243,12 @@ CONFIG_HTML = r"""<!doctype html>
color: var(--muted); color: var(--muted);
font-size: 12px; font-size: 12px;
} }
.path-input {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
}
.form-grid { .form-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -297,6 +303,79 @@ CONFIG_HTML = r"""<!doctype html>
.settings-main, .deps { .settings-main, .deps {
width: 100%; width: 100%;
} }
.overlay[hidden] {
display: none !important;
}
.overlay {
position: fixed;
inset: 0;
z-index: 40;
display: grid;
place-items: center;
padding: 22px;
background: rgba(4, 3, 10, 0.78);
backdrop-filter: blur(10px);
}
.browser-modal {
width: min(100%, 860px);
max-height: min(84vh, 760px);
overflow: hidden;
border: 1px solid var(--line);
border-radius: 22px;
background: linear-gradient(180deg, rgba(29, 22, 47, 0.96), rgba(17, 13, 29, 0.98));
box-shadow: var(--shadow);
display: grid;
grid-template-rows: auto auto auto 1fr auto;
gap: 12px;
padding: 18px;
}
.browser-header,
.browser-actions,
.browser-footer {
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.browser-path {
min-height: 42px;
border: 1px solid var(--line);
border-radius: 14px;
background: rgba(10, 7, 18, 0.82);
color: var(--text);
padding: 10px 13px;
overflow-wrap: anywhere;
}
.browser-list {
overflow: auto;
border: 1px solid var(--line);
border-radius: 18px;
background: rgba(255, 255, 255, 0.03);
padding: 8px;
display: grid;
gap: 8px;
min-height: 220px;
}
.browser-entry {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 44px;
padding: 0 14px;
border: 1px solid var(--line);
border-radius: 14px;
background: rgba(255, 255, 255, 0.03);
color: var(--text);
text-align: left;
}
.browser-entry .muted {
font-size: 12px;
}
.browser-entry-name {
overflow-wrap: anywhere;
}
@media (max-width: 900px) { @media (max-width: 900px) {
.app { grid-template-columns: 1fr; } .app { grid-template-columns: 1fr; }
aside { border-right: 0; border-bottom: 1px solid var(--line); } aside { border-right: 0; border-bottom: 1px solid var(--line); }
@@ -353,7 +432,10 @@ CONFIG_HTML = r"""<!doctype html>
</div> </div>
<div class="stack"> <div class="stack">
<label>Default folder <label>Default folder
<div class="path-input">
<input id="downloadDir" placeholder="/home/me/Downloads/Anime"> <input id="downloadDir" placeholder="/home/me/Downloads/Anime">
<button class="ghost browse-path-btn" type="button" data-target="downloadDir" data-mode="dir">Browse</button>
</div>
</label> </label>
</div> </div>
<div class="form-grid"> <div class="form-grid">
@@ -447,10 +529,16 @@ CONFIG_HTML = r"""<!doctype html>
</select> </select>
</label> </label>
<label>Jellyfin TV library <label>Jellyfin TV library
<div class="path-input">
<input id="jellyfinTvDir" placeholder="/srv/media/anime-tv"> <input id="jellyfinTvDir" placeholder="/srv/media/anime-tv">
<button class="ghost browse-path-btn" type="button" data-target="jellyfinTvDir" data-mode="dir">Browse</button>
</div>
</label> </label>
<label>Jellyfin movie library <label>Jellyfin movie library
<div class="path-input">
<input id="jellyfinMovieDir" placeholder="/srv/media/anime-movies"> <input id="jellyfinMovieDir" placeholder="/srv/media/anime-movies">
<button class="ghost browse-path-btn" type="button" data-target="jellyfinMovieDir" data-mode="dir">Browse</button>
</div>
</label> </label>
</div> </div>
<div class="field-hint">TV entries move only after the show is marked `Finished` and at least one downloaded language covers the expected episode count. Movie entries move after they are downloaded. The manual trigger scans the current watchlist and moves anything already eligible.</div> <div class="field-hint">TV entries move only after the show is marked `Finished` and at least one downloaded language covers the expected episode count. Movie entries move after they are downloaded. The manual trigger scans the current watchlist and moves anything already eligible.</div>
@@ -481,6 +569,32 @@ CONFIG_HTML = r"""<!doctype html>
</main> </main>
</div> </div>
<div class="overlay" id="pathBrowserOverlay" hidden>
<div class="browser-modal" role="dialog" aria-modal="true" aria-labelledby="pathBrowserTitle">
<div class="browser-header">
<div>
<h2 id="pathBrowserTitle">Choose path</h2>
<p class="muted" id="pathBrowserSubtitle">Browse folders on the host and select the destination path.</p>
</div>
<button class="ghost" id="pathBrowserCloseBtn" type="button" aria-label="Close path browser">&times;</button>
</div>
<div class="browser-path" id="pathBrowserCurrentPath"></div>
<div class="browser-actions">
<div class="inline-actions">
<button class="ghost" id="pathBrowserHomeBtn" type="button">Home</button>
<button class="ghost" id="pathBrowserUpBtn" type="button">Up</button>
<button class="ghost" id="pathBrowserRefreshBtn" type="button">Refresh</button>
</div>
<div class="muted" id="pathBrowserStatus"></div>
</div>
<div class="browser-list" id="pathBrowserList"></div>
<div class="browser-footer">
<button class="ghost" id="pathBrowserCancelBtn" type="button">Cancel</button>
<button class="primary" id="pathBrowserSelectBtn" type="button">Use this path</button>
</div>
</div>
</div>
<script> <script>
const state = { const state = {
config: { config: {
@@ -498,12 +612,24 @@ CONFIG_HTML = r"""<!doctype html>
jellyfin_movie_dir: "", jellyfin_movie_dir: "",
discord_webhook_url: "", discord_webhook_url: "",
discord_webhook_events: [] discord_webhook_events: []
},
pathBrowser: {
targetId: "",
mode: "dir",
path: "",
parent_path: "",
home_path: ""
} }
}; };
const $ = (id) => document.getElementById(id); const $ = (id) => document.getElementById(id);
""" + BROWSER_API_HELPER + r""" """ + BROWSER_API_HELPER + r"""
const pathBrowserOverlay = $("pathBrowserOverlay");
const pathBrowserCurrentPath = $("pathBrowserCurrentPath");
const pathBrowserList = $("pathBrowserList");
const pathBrowserStatus = $("pathBrowserStatus");
function setNotice(text) { function setNotice(text) {
$("notice").textContent = text || ""; $("notice").textContent = text || "";
} }
@@ -592,6 +718,94 @@ CONFIG_HTML = r"""<!doctype html>
} }
} }
function closePathBrowser() {
state.pathBrowser = {
targetId: "",
mode: "dir",
path: "",
parent_path: "",
home_path: ""
};
pathBrowserOverlay.hidden = true;
pathBrowserList.innerHTML = "";
pathBrowserStatus.textContent = "";
}
function renderPathBrowser(data) {
state.pathBrowser = {
...state.pathBrowser,
...data
};
pathBrowserCurrentPath.textContent = data.path || "";
pathBrowserStatus.textContent = "";
pathBrowserList.innerHTML = "";
if (!Array.isArray(data.entries) || !data.entries.length) {
const empty = document.createElement("div");
empty.className = "muted";
empty.textContent = "No entries found in this folder.";
pathBrowserList.appendChild(empty);
return;
}
for (const entry of data.entries) {
const button = document.createElement("button");
button.type = "button";
button.className = "browser-entry";
button.innerHTML = `
<span class="browser-entry-name"></span>
<span class="muted"></span>
`;
button.querySelector(".browser-entry-name").textContent = entry.name;
button.querySelector(".muted").textContent = entry.is_dir ? "Folder" : "File";
button.addEventListener("click", async () => {
if (entry.is_dir) {
await loadPathBrowser(entry.path);
return;
}
state.pathBrowser.path = entry.path;
pathBrowserCurrentPath.textContent = entry.path;
});
pathBrowserList.appendChild(button);
}
}
async function loadPathBrowser(path = "") {
try {
pathBrowserStatus.textContent = "Loading...";
const data = await api(`/api/fs/browse?path=${encodeURIComponent(path || state.pathBrowser.path || "")}&mode=${encodeURIComponent(state.pathBrowser.mode || "dir")}`);
renderPathBrowser(data);
} catch (error) {
pathBrowserStatus.textContent = error.message;
}
}
async function openPathBrowser(targetId, mode = "dir") {
state.pathBrowser = {
targetId,
mode,
path: $(targetId).value.trim() || "",
parent_path: "",
home_path: ""
};
pathBrowserOverlay.hidden = false;
await loadPathBrowser(state.pathBrowser.path);
}
async function browseParentPath() {
if (!state.pathBrowser.parent_path) return;
await loadPathBrowser(state.pathBrowser.parent_path);
}
async function browseHomePath() {
if (!state.pathBrowser.home_path) return;
await loadPathBrowser(state.pathBrowser.home_path);
}
function selectCurrentBrowserPath() {
if (!state.pathBrowser.targetId) return;
$(state.pathBrowser.targetId).value = state.pathBrowser.path || "";
closePathBrowser();
}
async function loadDeps() { async function loadDeps() {
const data = await api("/api/dependencies"); const data = await api("/api/dependencies");
const el = $("deps"); const el = $("deps");
@@ -616,6 +830,25 @@ CONFIG_HTML = r"""<!doctype html>
$("saveConfigBtn").addEventListener("click", saveConfig); $("saveConfigBtn").addEventListener("click", saveConfig);
$("testWebhookBtn").addEventListener("click", testWebhook); $("testWebhookBtn").addEventListener("click", testWebhook);
$("runJellyfinSyncBtn").addEventListener("click", runJellyfinSync); $("runJellyfinSyncBtn").addEventListener("click", runJellyfinSync);
$("pathBrowserCloseBtn").addEventListener("click", closePathBrowser);
$("pathBrowserCancelBtn").addEventListener("click", closePathBrowser);
$("pathBrowserSelectBtn").addEventListener("click", selectCurrentBrowserPath);
$("pathBrowserUpBtn").addEventListener("click", browseParentPath);
$("pathBrowserHomeBtn").addEventListener("click", browseHomePath);
$("pathBrowserRefreshBtn").addEventListener("click", () => loadPathBrowser());
pathBrowserOverlay.addEventListener("click", (event) => {
if (event.target === pathBrowserOverlay) {
closePathBrowser();
}
});
window.addEventListener("keydown", (event) => {
if (event.key === "Escape" && !pathBrowserOverlay.hidden) {
closePathBrowser();
}
});
for (const button of document.querySelectorAll(".browse-path-btn")) {
button.addEventListener("click", () => openPathBrowser(button.dataset.target || "", button.dataset.mode || "dir"));
}
(async function init() { (async function init() {
try { try {
http_handler.py
+54
View File
@@ -81,6 +81,52 @@ def dependency_status():
return result return result
def browse_filesystem(path_value="", mode="dir"):
raw_mode = str(mode or "dir").strip().lower()
browse_mode = raw_mode if raw_mode in {"dir", "file"} else "dir"
raw_path = str(path_value or "").strip()
base_path = Path(raw_path).expanduser() if raw_path else Path.home()
try:
resolved = base_path.resolve()
except OSError as exc:
raise ValueError(f"Could not access path: {exc}") from exc
if not resolved.exists():
raise ValueError("Selected path does not exist.")
if resolved.is_file():
resolved = resolved.parent
if not resolved.is_dir():
raise ValueError("Selected path is not a directory.")
entries = []
try:
for child in resolved.iterdir():
try:
is_dir = child.is_dir()
except OSError:
continue
if browse_mode == "dir" and not is_dir:
continue
entries.append(
{
"name": child.name,
"path": str(child),
"is_dir": is_dir,
}
)
except OSError as exc:
raise ValueError(f"Could not list directory: {exc}") from exc
entries.sort(key=lambda item: (not item["is_dir"], item["name"].lower(), item["name"]))
parent_path = str(resolved.parent if resolved.parent != resolved else resolved)
return {
"path": str(resolved),
"parent_path": parent_path,
"home_path": str(Path.home()),
"mode": browse_mode,
"entries": entries,
}
@lru_cache(maxsize=1) @lru_cache(maxsize=1)
def installed_ani_cli_version(): def installed_ani_cli_version():
try: try:
@@ -408,6 +454,14 @@ class Handler(BaseHTTPRequestHandler):
self.json({"name": APP_NAME, "version": VERSION, "ani_cli_version": installed_ani_cli_version()}) self.json({"name": APP_NAME, "version": VERSION, "ani_cli_version": installed_ani_cli_version()})
elif parsed.path == "/api/dependencies": elif parsed.path == "/api/dependencies":
self.json(dependency_status()) self.json(dependency_status())
elif parsed.path == "/api/fs/browse":
params = parse_qs(parsed.query)
self.json(
browse_filesystem(
(params.get("path") or [""])[0],
(params.get("mode") or ["dir"])[0],
)
)
elif parsed.path == "/api/search": elif parsed.path == "/api/search":
runtime = Handler._runtime(self) runtime = Handler._runtime(self)
config = runtime["config"] config = runtime["config"]
test_app.py
+18
View File
@@ -1892,6 +1892,19 @@ class HandlerRouteTests(unittest.TestCase):
self.assertEqual(handler.json_payload["version"], APP.VERSION) self.assertEqual(handler.json_payload["version"], APP.VERSION)
self.assertIn("ani_cli_version", handler.json_payload) self.assertIn("ani_cli_version", handler.json_payload)
def test_filesystem_browse_route_lists_directories(self):
with tempfile.TemporaryDirectory() as temp_root:
Path(temp_root, "folder-a").mkdir()
Path(temp_root, "folder-b").mkdir()
Path(temp_root, "file.txt").write_text("example", encoding="utf-8")
handler = DummyHandler(f"/api/fs/browse?path={APP.quote(temp_root)}&mode=dir")
APP.Handler.do_GET(handler)
self.assertEqual(handler.json_status, HTTPStatus.OK)
self.assertEqual(handler.json_payload["path"], temp_root)
self.assertEqual([entry["name"] for entry in handler.json_payload["entries"]], ["folder-a", "folder-b"])
self.assertTrue(all(entry["is_dir"] for entry in handler.json_payload["entries"]))
def test_config_post_accepts_discord_webhook_fields(self): def test_config_post_accepts_discord_webhook_fields(self):
body = b'{"download_dir":"/tmp/example","mode":"sub","quality":"best","discord_webhook_url":"https://discord.example/webhook","discord_webhook_events":["runtime_error","watchlist_refresh_failed","bad"]}' body = b'{"download_dir":"/tmp/example","mode":"sub","quality":"best","discord_webhook_url":"https://discord.example/webhook","discord_webhook_events":["runtime_error","watchlist_refresh_failed","bad"]}'
handler = DummyHandler("/api/config", body=body, content_length=len(body)) handler = DummyHandler("/api/config", body=body, content_length=len(body))
@@ -2160,6 +2173,11 @@ class TemplateHelperTests(unittest.TestCase):
self.assertIn('id="aniCliVersionLine"', APP.CONFIG_HTML) self.assertIn('id="aniCliVersionLine"', APP.CONFIG_HTML)
self.assertIn('ani-cli ${data.ani_cli_version || "Unavailable"}', APP.CONFIG_HTML) self.assertIn('ani-cli ${data.ani_cli_version || "Unavailable"}', APP.CONFIG_HTML)
def test_config_page_includes_host_path_browser_controls(self):
self.assertIn('class="ghost browse-path-btn"', APP.CONFIG_HTML)
self.assertIn('id="pathBrowserOverlay"', APP.CONFIG_HTML)
self.assertIn('/api/fs/browse?path=${encodeURIComponent(path || state.pathBrowser.path || "")}', APP.CONFIG_HTML)
def test_search_page_sends_watchlist_auto_download_series(self): def test_search_page_sends_watchlist_auto_download_series(self):
self.assertIn('auto_download_series: $("seasonInput").value || "1"', APP.INDEX_HTML) self.assertIn('auto_download_series: $("seasonInput").value || "1"', APP.INDEX_HTML)