converter

frontend/src/api/apps/Downloader.ts

@@ -1,73 +1,64 @@
 import Client from "../Client";
 
-export type FormatOption = {
-  format_id: string;
-  ext: string | null;
-  vcodec: string | null;
-  acodec: string | null;
-  fps: number | null;
-  tbr: number | null;
-  abr: number | null;
-  vbr: number | null;
-  asr: number | null;
-  filesize: number | null;
-  filesize_approx: number | null;
-  estimated_size_bytes: number | null;
-  size_ok: boolean;
-  format_note: string | null;
-  resolution: string | null; // e.g. "1920x1080"
-  audio_only: boolean;
-};
+// Available output containers (must match backend)
+export const FORMAT_EXTS = ["mp4", "mkv", "webm", "flv", "mov", "avi", "ogg"] as const;
+export type FormatExt = (typeof FORMAT_EXTS)[number];
 
-export type FormatsResponse = {
+export type InfoResponse = {
   title: string | null;
   duration: number | null;
-  extractor: string | null;
-  video_id: string | null;
-  max_size_bytes: number;
-  options: FormatOption[];
+  thumbnail: string | null;
+  video_resolutions: string[];   // e.g. ["2160p", "1440p", "1080p", ...]
+  audio_resolutions: string[];   // e.g. ["320kbps", "160kbps", ...]
 };
 
-// Probe available formats for a URL (no auth required)
-export async function probeFormats(url: string): Promise<FormatsResponse> {
-  const res = await Client.public.post("/api/downloader/formats/", { url });
-  return res.data as FormatsResponse;
+// GET info for a URL
+export async function fetchInfo(url: string): Promise<InfoResponse> {
+  const res = await Client.public.get("/api/downloader/download/", {
+    params: { url },
+  });
+  return res.data as InfoResponse;
 }
 
-// Download selected format as a Blob and resolve filename from headers
-export async function downloadFormat(url: string, format_id: string): Promise<{ blob: Blob; filename: string }> {
+// POST to stream binary immediately; returns { blob, filename }
+export async function downloadImmediate(args: {
+  url: string;
+  ext: FormatExt;
+  videoResolution?: string | number; // "1080p" or 1080
+  audioResolution?: string | number; // "160kbps" or 160
+}): Promise<{ blob: Blob; filename: string }> {
+  const video_quality = toHeight(args.videoResolution);
+  const audio_quality = toKbps(args.audioResolution);
+
+  if (video_quality == null || audio_quality == null) {
+    throw new Error("Please select both video and audio quality.");
+  }
+
   const res = await Client.public.post(
     "/api/downloader/download/",
-    { url, format_id },
+    {
+      url: args.url,
+      ext: args.ext,
+      video_quality,
+      audio_quality,
+    },
     { responseType: "blob" }
   );
 
-  // Try to parse Content-Disposition filename first, then X-Filename (exposed by backend)
   const cd = res.headers?.["content-disposition"] as string | undefined;
   const xfn = res.headers?.["x-filename"] as string | undefined;
   const filename =
     parseContentDispositionFilename(cd) ||
     (xfn && xfn.trim()) ||
-    inferFilenameFromUrl(url, (res.headers?.["content-type"] as string | undefined)) ||
-    "download.bin";
+    inferFilenameFromUrl(args.url, res.headers?.["content-type"] as string | undefined) ||
+    `download.${args.ext}`;
 
   return { blob: res.data as Blob, filename };
 }
 
-// Deprecated types kept for compatibility if referenced elsewhere
-export type Choices = { file_types: string[]; qualities: string[] };
-export type DownloadJobResponse = {
-  id: string;
-  status: "pending" | "running" | "finished" | "failed";
-  detail?: string;
-  download_url?: string;
-  progress?: number;
-};
-
 // Helpers
-function parseContentDispositionFilename(cd?: string): string | null {
+export function parseContentDispositionFilename(cd?: string): string | null {
   if (!cd) return null;
-  // filename*=UTF-8''encoded or filename="plain"
   const utf8Match = cd.match(/filename\*\s*=\s*UTF-8''([^;]+)/i);
   if (utf8Match?.[1]) return decodeURIComponent(utf8Match[1]);
   const plainMatch = cd.match(/filename\s*=\s*"([^"]+)"/i) || cd.match(/filename\s*=\s*([^;]+)/i);
@@ -89,16 +80,35 @@ function inferFilenameFromUrl(url: string, contentType?: string): string {
   return "download.bin";
 }
 
-function contentTypeToExt(ct: string): string | null {
+function contentTypeToExt(ct?: string): string | null {
+  if (!ct) return null;
   const map: Record<string, string> = {
     "video/mp4": "mp4",
-    "audio/mpeg": "mp3",
-    "audio/mp4": "m4a",
-    "audio/aac": "aac",
-    "audio/ogg": "ogg",
+    "video/x-matroska": "mkv",
     "video/webm": "webm",
-    "audio/webm": "webm",
+    "video/x-flv": "flv",
+    "video/quicktime": "mov",
+    "video/x-msvideo": "avi",
+    "video/ogg": "ogg",
     "application/octet-stream": "bin",
   };
   return map[ct] || null;
 }
+
+function toHeight(v?: string | number): number | undefined {
+  if (typeof v === "number") return v || undefined;
+  if (!v) return undefined;
+  const m = /^(\d{2,4})p$/i.exec(v.trim());
+  if (m) return parseInt(m[1], 10);
+  const n = Number(v);
+  return Number.isFinite(n) ? (n as number) : undefined;
+}
+
+function toKbps(v?: string | number): number | undefined {
+  if (typeof v === "number") return v || undefined;
+  if (!v) return undefined;
+  const m = /^(\d{2,4})\s*kbps$/i.exec(v.trim());
+  if (m) return parseInt(m[1], 10);
+  const n = Number(v);
+  return Number.isFinite(n) ? (n as number) : undefined;
+}

frontend/src/pages/downloader/Downloader.tsx

@@ -1,59 +1,98 @@
-import { useState } from "react";
-import { probeFormats, downloadFormat, type FormatsResponse, type FormatOption } from "../../api/apps/Downloader";
+import { useEffect, useMemo, useState } from "react";
+import {
+  fetchInfo,
+  downloadImmediate,
+  FORMAT_EXTS,
+  type InfoResponse,
+  parseContentDispositionFilename,
+} from "../../api/apps/Downloader";
 
 export default function Downloader() {
   const [url, setUrl] = useState("");
   const [probing, setProbing] = useState(false);
-  const [downloadingId, setDownloadingId] = useState<string | null>(null);
+  const [downloading, setDownloading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [formats, setFormats] = useState<FormatsResponse | null>(null);
+  const [info, setInfo] = useState<InfoResponse | null>(null);
+
+  const [ext, setExt] = useState<typeof FORMAT_EXTS[number]>("mp4");
+  const [videoRes, setVideoRes] = useState<string | undefined>(undefined);
+  const [audioRes, setAudioRes] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (info?.video_resolutions?.length && !videoRes) {
+      setVideoRes(info.video_resolutions[0]);
+    }
+    if (info?.audio_resolutions?.length && !audioRes) {
+      setAudioRes(info.audio_resolutions[0]);
+    }
+  }, [info]);
 
   async function onProbe(e: React.FormEvent) {
     e.preventDefault();
     setError(null);
-    setFormats(null);
+    setInfo(null);
     setProbing(true);
     try {
-      const res = await probeFormats(url);
-      setFormats(res);
+      const res = await fetchInfo(url);
+      setInfo(res);
+      // reset selections from fresh info
+      setVideoRes(res.video_resolutions?.[0]);
+      setAudioRes(res.audio_resolutions?.[0]);
     } catch (e: any) {
-      setError(e?.response?.data?.detail || e?.message || "Failed to load formats.");
+      setError(
+        e?.response?.data?.error ||
+        e?.response?.data?.detail ||
+        e?.message ||
+        "Failed to get info."
+      );
     } finally {
       setProbing(false);
     }
   }
 
-  async function onDownload(fmt: FormatOption) {
+  async function onDownload() {
     setError(null);
-    setDownloadingId(fmt.format_id);
+    setDownloading(true);
     try {
-      const { blob, filename } = await downloadFormat(url, fmt.format_id);
-      const link = document.createElement("a");
+      const { blob, filename } = await downloadImmediate({
+        url,
+        ext,
+        videoResolution: videoRes,
+        audioResolution: audioRes,
+      });
+      const name = filename || parseContentDispositionFilename("") || `download.${ext}`;
       const href = URL.createObjectURL(blob);
-      link.href = href;
-      link.download = filename || "download.bin";
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
+      const a = document.createElement("a");
+      a.href = href;
+      a.download = name;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
       URL.revokeObjectURL(href);
     } catch (e: any) {
-      setError(e?.response?.data?.detail || e?.message || "Download failed.");
+      setError(
+        e?.response?.data?.error ||
+        e?.response?.data?.detail ||
+        e?.message ||
+        "Download failed."
+      );
     } finally {
-      setDownloadingId(null);
+      setDownloading(false);
     }
   }
 
+  const canDownload = useMemo(
+    () => !!url && !!ext && !!videoRes && !!audioRes,
+    [url, ext, videoRes, audioRes]
+  );
+
   return (
-    <div className="max-w-3xl mx-auto p-4">
-      <h1 className="text-2xl font-semibold mb-4">Downloader</h1>
+    <div className="max-w-3xl mx-auto p-4 space-y-4">
+      <h1 className="text-2xl font-semibold">Downloader</h1>
 
-      {error && (
-        <div className="mb-3 rounded border border-red-300 bg-red-50 text-red-700 p-2">
-          {error}
-        </div>
-      )}
+      {error && <div className="rounded border border-red-300 bg-red-50 text-red-700 p-2">{error}</div>}
 
-      <form onSubmit={onProbe} className="grid gap-3 mb-4">
+      <form onSubmit={onProbe} className="grid gap-3">
         <label className="grid gap-1">
           <span className="text-sm font-medium">URL</span>
           <input
@@ -65,76 +104,103 @@ export default function Downloader() {
             className="w-full border rounded p-2"
           />
         </label>
-        <div>
+
+        <div className="flex gap-2">
           <button
             type="submit"
             disabled={!url || probing}
             className="px-3 py-2 rounded bg-blue-600 text-white disabled:opacity-50"
           >
-            {probing ? "Probing..." : "Find formats"}
+            {probing ? "Probing..." : "Get info"}
+          </button>
+          <button
+            type="button"
+            onClick={onDownload}
+            disabled={!canDownload || downloading}
+            className="px-3 py-2 rounded bg-emerald-600 text-white disabled:opacity-50"
+          >
+            {downloading ? "Downloading..." : "Download"}
           </button>
         </div>
       </form>
 
-      {formats && (
+      {info && (
         <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>
-            <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 className="flex items-start gap-3">
+            {info.thumbnail && (
+              <img
+                src={info.thumbnail}
+                alt={info.title || "thumbnail"}
+                className="w-40 h-24 object-cover rounded border"
+              />
+            )}
+            <div className="text-sm text-gray-800 space-y-1">
+              <div>
+                <span className="font-medium">Title:</span> {info.title || "-"}
+              </div>
+              <div>
+                <span className="font-medium">Duration:</span>{" "}
+                {info.duration ? `${Math.round(info.duration)} s` : "-"}
+              </div>
             </div>
           </div>
 
-          {!formats.options.length && (
-            <div className="text-sm text-gray-600">No formats available.</div>
-          )}
+          <div className="grid md:grid-cols-3 gap-3">
+            <label className="grid gap-1">
+              <span className="text-sm font-medium">Container</span>
+              <select
+                value={ext}
+                onChange={(e) => setExt(e.target.value as any)}
+                className="border rounded p-2"
+              >
+                {FORMAT_EXTS.map((x) => (
+                  <option key={x} value={x}>
+                    {x.toUpperCase()}
+                  </option>
+                ))}
+              </select>
+            </label>
+
+            <label className="grid gap-1">
+              <span className="text-sm font-medium">Video resolution</span>
+              <select
+                value={videoRes || ""}
+                onChange={(e) => setVideoRes(e.target.value || undefined)}
+                className="border rounded p-2"
+              >
+                {info.video_resolutions?.length ? (
+                  info.video_resolutions.map((r) => (
+                    <option key={r} value={r}>
+                      {r}
+                    </option>
+                  ))
+                ) : (
+                  <option value="">-</option>
+                )}
+              </select>
+            </label>
+
+            <label className="grid gap-1">
+              <span className="text-sm font-medium">Audio bitrate</span>
+              <select
+                value={audioRes || ""}
+                onChange={(e) => setAudioRes(e.target.value || undefined)}
+                className="border rounded p-2"
+              >
+                {info.audio_resolutions?.length ? (
+                  info.audio_resolutions.map((r) => (
+                    <option key={r} value={r}>
+                      {r}
+                    </option>
+                  ))
+                ) : (
+                  <option value="">-</option>
+                )}
+              </select>
+            </label>
+          </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]}`;
 }