feat: add submission form and status page

src/components/StatusView.tsx

@@ -0,0 +1,101 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+type DownloadData = {
+  uuid: string
+  status: 'PENDING' | 'PROCESSING' | 'DONE' | 'FAILED' | 'FILE_DELETED'
+  format: string
+  quality: string
+  fileName: string | null
+  fileSize: string | null
+  errorMsg: string | null
+  downloadToken: string | null
+  tokenExpiresAt: string | null
+}
+
+export function StatusView({ uuid }: { uuid: string }) {
+  const [data, setData] = useState<DownloadData | null>(null)
+  const [notFound, setNotFound] = useState(false)
+
+  useEffect(() => {
+    let active = true
+
+    async function poll() {
+      const res = await fetch(`/api/downloads/${uuid}`)
+      if (!active) return
+
+      if (res.status === 404) {
+        setNotFound(true)
+        return
+      }
+
+      const body = (await res.json()) as DownloadData
+      setData(body)
+
+      if (body.status === 'PENDING' || body.status === 'PROCESSING') {
+        setTimeout(poll, 5_000)
+      }
+    }
+
+    poll()
+    return () => { active = false }
+  }, [uuid])
+
+  if (notFound) return <p>Telechargement introuvable.</p>
+  if (!data) return <p>Chargement...</p>
+
+  if (data.status === 'PENDING' || data.status === 'PROCESSING') {
+    return (
+      <div>
+        <p>Statut : {data.status === 'PENDING' ? 'En attente' : 'En cours...'}</p>
+        <p>Cette page se rafraichit automatiquement toutes les 5 secondes.</p>
+      </div>
+    )
+  }
+
+  if (data.status === 'DONE' && data.downloadToken) {
+    const sizeMb = data.fileSize
+      ? `(${(Number(data.fileSize) / 1_048_576).toFixed(1)} Mo)`
+      : ''
+    return (
+      <div>
+        <p>Telechargement pret {sizeMb}</p>
+        <a
+          href={`/api/download/${data.downloadToken}`}
+          download={data.fileName ?? undefined}
+        >
+          Telecharger {data.fileName}
+        </a>
+        {data.tokenExpiresAt && (
+          <p style={{ fontSize: '0.85rem', color: '#666' }}>
+            Lien valable jusqu&apos;au{' '}
+            {new Date(data.tokenExpiresAt).toLocaleString('fr-FR')}
+          </p>
+        )}
+      </div>
+    )
+  }
+
+  if (data.status === 'FAILED') {
+    return (
+      <div>
+        <p>Echec du telechargement.</p>
+        <pre style={{ background: '#fee', padding: '0.5rem', overflowX: 'auto' }}>
+          {data.errorMsg}
+        </pre>
+      </div>
+    )
+  }
+
+  if (data.status === 'FILE_DELETED') {
+    return (
+      <p>
+        Le fichier a expire et a ete supprime. Le telechargement n&apos;est plus
+        disponible.
+      </p>
+    )
+  }
+
+  return <p>Statut inconnu : {data.status}</p>
+}