commit

frontend/src/pages/downloader/Downloader.tsx

@@ -0,0 +1,160 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+  getChoices,
+  submitDownload,
+  getJobStatus,
+  type Choices,
+  type DownloadJobResponse,
+} from "../../api/apps/Downloader";
+
+export default function Downloader() {
+  const [choices, setChoices] = useState<Choices>({ file_types: [], qualities: [] });
+  const [loadingChoices, setLoadingChoices] = useState(true);
+
+  const [url, setUrl] = useState("");
+  const [fileType, setFileType] = useState<string>("");
+  const [quality, setQuality] = useState<string>("");
+
+  const [submitting, setSubmitting] = useState(false);
+  const [job, setJob] = useState<DownloadJobResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  // Load dropdown choices once
+  useEffect(() => {
+    let mounted = true;
+    (async () => {
+      setLoadingChoices(true);
+      try {
+        const data = await getChoices();
+        if (!mounted) return;
+        setChoices(data);
+        // preselect first option
+        if (!fileType && data.file_types.length > 0) setFileType(data.file_types[0]);
+        if (!quality && data.qualities.length > 0) setQuality(data.qualities[0]);
+      } catch (e: any) {
+        setError(e?.message || "Failed to load choices.");
+      } finally {
+        setLoadingChoices(false);
+      }
+    })();
+    return () => {
+      mounted = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const canSubmit = useMemo(() => {
+    return !!url && !!fileType && !!quality && !submitting;
+  }, [url, fileType, quality, submitting]);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      const created = await submitDownload({ url, file_type: fileType, quality });
+      setJob(created);
+    } catch (e: any) {
+      setError(e?.response?.data?.detail || e?.message || "Submission failed.");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  async function refreshStatus() {
+    if (!job?.id) return;
+    try {
+      const updated = await getJobStatus(job.id);
+      setJob(updated);
+    } catch (e: any) {
+      setError(e?.response?.data?.detail || e?.message || "Failed to refresh status.");
+    }
+  }
+
+  return (
+    <div style={{ maxWidth: 720, margin: "0 auto", padding: "1rem" }}>
+      <h1>Downloader</h1>
+
+      {error && (
+        <div style={{ background: "#fee", color: "#900", padding: ".5rem", marginBottom: ".75rem" }}>
+          {error}
+        </div>
+      )}
+
+      <form onSubmit={onSubmit} style={{ display: "grid", gap: ".75rem" }}>
+        <label>
+          URL
+          <input
+            type="url"
+            required
+            placeholder="https://example.com/video"
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            style={{ width: "100%", padding: ".5rem" }}
+          />
+        </label>
+
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: ".75rem" }}>
+          <label>
+            File type
+            <select
+              value={fileType}
+              onChange={(e) => setFileType(e.target.value)}
+              disabled={loadingChoices}
+              style={{ width: "100%", padding: ".5rem" }}
+            >
+              {choices.file_types.map((t) => (
+                <option key={t} value={t}>
+                  {t}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label>
+            Quality
+            <select
+              value={quality}
+              onChange={(e) => setQuality(e.target.value)}
+              disabled={loadingChoices}
+              style={{ width: "100%", padding: ".5rem" }}
+            >
+              {choices.qualities.map((q) => (
+                <option key={q} value={q}>
+                  {q}
+                </option>
+              ))}
+            </select>
+          </label>
+        </div>
+
+        <div>
+          <button type="submit" disabled={!canSubmit} style={{ padding: ".5rem 1rem" }}>
+            {submitting ? "Submitting..." : "Start download"}
+          </button>
+        </div>
+      </form>
+
+      {job && (
+        <div style={{ marginTop: "1rem", borderTop: "1px solid #ddd", paddingTop: "1rem" }}>
+          <h2>Job</h2>
+          <div>ID: {job.id}</div>
+          <div>Status: {job.status}</div>
+          {typeof job.progress === "number" && <div>Progress: {job.progress}%</div>}
+          {job.detail && <div>Detail: {job.detail}</div>}
+          {job.download_url ? (
+            <div style={{ marginTop: ".5rem" }}>
+              <a href={job.download_url} target="_blank" rel="noreferrer">
+                Download file
+              </a>
+            </div>
+          ) : (
+            <button onClick={refreshStatus} style={{ marginTop: ".5rem", padding: ".5rem 1rem" }}>
+              Refresh status
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}