| "use client"; |
| import { useEffect, useState } from "react"; |
| import { getJSON } from "@/lib/api"; |
| type Job = { |
| id: string; |
| title: string; |
| status: string; |
| stage: string; |
| error: string | null; |
| video_id: string; |
| }; |
| export function ImportMedia() { |
| const [jobs, setJobs] = useState<Job[]>([]), |
| [message, setMessage] = useState(""), |
| [progress, setProgress] = useState<number | null>(null), |
| [transcript, setTranscript] = useState(""); |
| async function refresh() { |
| if (sessionStorage.getItem("vm-user-token")) |
| setJobs(await getJSON("/api/jobs")); |
| } |
| useEffect(() => { |
| const timer = setInterval(() => void refresh().catch(() => {}), 2000); |
| return () => clearInterval(timer); |
| }, []); |
| function upload(file: File) { |
| if (!sessionStorage.getItem("vm-user-token")) { |
| setMessage("Connect your private library before importing media."); |
| return; |
| } |
| if (file.size > 64 * 1024 * 1024) { |
| setMessage("Choose a video under 64 MiB."); |
| return; |
| } |
| const xhr = new XMLHttpRequest(); |
| xhr.open("POST", `/api/ingest?filename=${encodeURIComponent(file.name)}`); |
| xhr.setRequestHeader( |
| "Authorization", |
| `Bearer ${sessionStorage.getItem("vm-user-token")}`, |
| ); |
| xhr.upload.onprogress = (e) => { |
| if (e.lengthComputable) |
| setProgress(Math.round((100 * e.loaded) / e.total)); |
| }; |
| xhr.onerror = () => { |
| setMessage("Upload failed; retry when connected."); |
| setProgress(null); |
| }; |
| xhr.onload = () => { |
| setProgress(null); |
| setMessage( |
| xhr.status === 200 |
| ? "Upload queued. Processing continues in the background." |
| : `Upload failed (${xhr.status}).`, |
| ); |
| void refresh(); |
| }; |
| setProgress(0); |
| xhr.send(file); |
| } |
| async function action(j: Job, action: "retry" | "cancel") { |
| try { |
| await getJSON(`/api/jobs/${j.id}`, { |
| method: "POST", |
| headers: { "Content-Type": "application/json" }, |
| body: JSON.stringify({ action, ...(transcript ? { transcript } : {}) }), |
| }); |
| await refresh(); |
| } catch (e) { |
| setMessage(String(e)); |
| } |
| } |
| return ( |
| <details className="rounded-xl border border-line bg-surface p-4"> |
| <summary className="flex items-center justify-between text-sm font-medium"> |
| Import & indexing{" "} |
| <span className="text-muted"> |
| 64 MiB · 30 min · one processing worker |
| </span> |
| </summary> |
| <div className="mt-4 space-y-3"> |
| <p className="text-sm text-ink-2"> |
| Upload a video for proxy, thumbnails, 30-second segments, remote |
| transcription and text indexing. No video is sent to an inference |
| service until you import it. Transcript/audio destinations follow your |
| authorized provider profile. |
| </p> |
| <input |
| aria-label="Import video" |
| type="file" |
| accept="video/*" |
| disabled={progress !== null} |
| onChange={(e) => { |
| if (e.target.files?.[0]) upload(e.target.files[0]); |
| }} |
| /> |
| {progress !== null && ( |
| <progress aria-label="Upload progress" value={progress} max={100} /> |
| )} |
| <p role="status" className="text-sm text-muted"> |
| {message} |
| </p> |
| <label className="block text-sm"> |
| Optional transcript for retry (videos without audio) |
| <textarea |
| aria-label="Retry transcript" |
| value={transcript} |
| onChange={(e) => setTranscript(e.target.value)} |
| maxLength={64000} |
| className="mt-1 block w-full rounded-lg border border-line bg-page p-3" |
| rows={2} |
| /> |
| </label> |
| {jobs.map((j) => ( |
| <div |
| key={j.id} |
| className="flex flex-wrap items-center justify-between gap-2 border-t border-line py-3 text-sm" |
| > |
| <div> |
| <a href={`/videos/${j.video_id}`} className="text-accent"> |
| {j.title} |
| </a> |
| <p className="text-muted"> |
| {j.status} · {j.stage} |
| {j.error ? ` · ${j.error}` : ""} |
| </p> |
| </div> |
| <div className="flex gap-2"> |
| {["blocked", "failed", "cancelled"].includes(j.status) && ( |
| <button |
| className="rounded border border-line px-3 py-1" |
| onClick={() => void action(j, "retry")} |
| > |
| Retry |
| </button> |
| )} |
| {["queued", "running"].includes(j.status) && ( |
| <button |
| className="rounded border border-line px-3 py-1" |
| onClick={() => void action(j, "cancel")} |
| > |
| Cancel |
| </button> |
| )} |
| </div> |
| </div> |
| ))} |
| </div> |
| </details> |
| ); |
| } |
|
|
