okay
This commit is contained in:
@@ -1,160 +1,140 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
getChoices,
|
||||
submitDownload,
|
||||
getJobStatus,
|
||||
type Choices,
|
||||
type DownloadJobResponse,
|
||||
} from "../../api/apps/Downloader";
|
||||
import { useState } from "react";
|
||||
import { probeFormats, downloadFormat, type FormatsResponse, type FormatOption } 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 [probing, setProbing] = useState(false);
|
||||
const [downloadingId, setDownloadingId] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [formats, setFormats] = useState<FormatsResponse | 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) {
|
||||
async function onProbe(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setSubmitting(true);
|
||||
setFormats(null);
|
||||
setProbing(true);
|
||||
try {
|
||||
const created = await submitDownload({ url, file_type: fileType, quality });
|
||||
setJob(created);
|
||||
const res = await probeFormats(url);
|
||||
setFormats(res);
|
||||
} catch (e: any) {
|
||||
setError(e?.response?.data?.detail || e?.message || "Submission failed.");
|
||||
setError(e?.response?.data?.detail || e?.message || "Failed to load formats.");
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
setProbing(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshStatus() {
|
||||
if (!job?.id) return;
|
||||
async function onDownload(fmt: FormatOption) {
|
||||
setError(null);
|
||||
setDownloadingId(fmt.format_id);
|
||||
try {
|
||||
const updated = await getJobStatus(job.id);
|
||||
setJob(updated);
|
||||
const { blob, filename } = await downloadFormat(url, fmt.format_id);
|
||||
const link = document.createElement("a");
|
||||
const href = URL.createObjectURL(blob);
|
||||
link.href = href;
|
||||
link.download = filename || "download.bin";
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(href);
|
||||
} catch (e: any) {
|
||||
setError(e?.response?.data?.detail || e?.message || "Failed to refresh status.");
|
||||
setError(e?.response?.data?.detail || e?.message || "Download failed.");
|
||||
} finally {
|
||||
setDownloadingId(null);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 720, margin: "0 auto", padding: "1rem" }}>
|
||||
<h1>Downloader</h1>
|
||||
<div className="max-w-3xl mx-auto p-4">
|
||||
<h1 className="text-2xl font-semibold mb-4">Downloader</h1>
|
||||
|
||||
{error && (
|
||||
<div style={{ background: "#fee", color: "#900", padding: ".5rem", marginBottom: ".75rem" }}>
|
||||
<div className="mb-3 rounded border border-red-300 bg-red-50 text-red-700 p-2">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={onSubmit} style={{ display: "grid", gap: ".75rem" }}>
|
||||
<label>
|
||||
URL
|
||||
<form onSubmit={onProbe} className="grid gap-3 mb-4">
|
||||
<label className="grid gap-1">
|
||||
<span className="text-sm font-medium">URL</span>
|
||||
<input
|
||||
type="url"
|
||||
required
|
||||
placeholder="https://example.com/video"
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
style={{ width: "100%", padding: ".5rem" }}
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</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
|
||||
type="submit"
|
||||
disabled={!url || probing}
|
||||
className="px-3 py-2 rounded bg-blue-600 text-white disabled:opacity-50"
|
||||
>
|
||||
{probing ? "Probing..." : "Find formats"}
|
||||
</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>
|
||||
{formats && (
|
||||
<div className="space-y-3">
|
||||
<div className="text-sm text-gray-700">
|
||||
<div><span className="font-medium">Title:</span> {formats.title || "-"}</div>
|
||||
<div><span className="font-medium">Duration:</span> {formats.duration ? `${Math.round(formats.duration)} s` : "-"}</div>
|
||||
<div><span className="font-medium">Max size:</span> {formatBytes(formats.max_size_bytes)}</div>
|
||||
</div>
|
||||
|
||||
<div className="border rounded overflow-hidden">
|
||||
<div className="grid grid-cols-6 gap-2 p-2 bg-gray-50 text-sm font-medium">
|
||||
<div>Format</div>
|
||||
<div>Resolution</div>
|
||||
<div>Type</div>
|
||||
<div>Note</div>
|
||||
<div>Est. size</div>
|
||||
<div></div>
|
||||
</div>
|
||||
) : (
|
||||
<button onClick={refreshStatus} style={{ marginTop: ".5rem", padding: ".5rem 1rem" }}>
|
||||
Refresh status
|
||||
</button>
|
||||
<div className="divide-y">
|
||||
{formats.options.map((o) => (
|
||||
<div key={o.format_id} className="grid grid-cols-6 gap-2 p-2 items-center text-sm">
|
||||
<div className="truncate">{o.format_id}{o.ext ? `.${o.ext}` : ""}</div>
|
||||
<div>{o.resolution || (o.audio_only ? "audio" : "-")}</div>
|
||||
<div>{o.audio_only ? "Audio" : "Video"}</div>
|
||||
<div className="truncate">{o.format_note || "-"}</div>
|
||||
<div className={o.size_ok ? "text-gray-800" : "text-red-600"}>
|
||||
{o.estimated_size_bytes ? formatBytes(o.estimated_size_bytes) : (o.filesize || o.filesize_approx) ? "~" + formatBytes((o.filesize || o.filesize_approx)!) : "?"}
|
||||
{!o.size_ok && " (too big)"}
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<button
|
||||
onClick={() => onDownload(o)}
|
||||
disabled={!o.size_ok || downloadingId === o.format_id}
|
||||
className="px-2 py-1 rounded bg-emerald-600 text-white disabled:opacity-50"
|
||||
>
|
||||
{downloadingId === o.format_id ? "Downloading..." : "Download"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!formats.options.length && (
|
||||
<div className="text-sm text-gray-600">No formats available.</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatBytes(bytes?: number | null): string {
|
||||
if (!bytes || bytes <= 0) return "-";
|
||||
const units = ["B", "KB", "MB", "GB"];
|
||||
let i = 0;
|
||||
let n = bytes;
|
||||
while (n >= 1024 && i < units.length - 1) {
|
||||
n /= 1024;
|
||||
i++;
|
||||
}
|
||||
return `${n.toFixed(n < 10 && i > 0 ? 1 : 0)} ${units[i]}`;
|
||||
}
|
||||
Reference in New Issue
Block a user