103 lines
3.5 KiB
TypeScript
103 lines
3.5 KiB
TypeScript
import { useEffect, useRef, useState, type FormEvent } from "react";
|
|
import { apiFetch, apiUpload } from "../../api/client";
|
|
import type { Media } from "../../api/types";
|
|
|
|
export default function MediaPage() {
|
|
const [media, setMedia] = useState<Media[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [uploading, setUploading] = useState(false);
|
|
const [altText, setAltText] = useState("");
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
function load() {
|
|
setLoading(true);
|
|
apiFetch<{ media: Media[] }>("/api/admin/media")
|
|
.then((data) => setMedia(data.media))
|
|
.catch(() => setError("Failed to load media."))
|
|
.finally(() => setLoading(false));
|
|
}
|
|
|
|
useEffect(load, []);
|
|
|
|
async function handleUpload(e: FormEvent) {
|
|
e.preventDefault();
|
|
const file = fileInputRef.current?.files?.[0];
|
|
if (!file) return;
|
|
|
|
setUploading(true);
|
|
setError(null);
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append("file", file);
|
|
formData.append("alt_text", altText);
|
|
await apiUpload("/api/admin/media", formData);
|
|
setAltText("");
|
|
if (fileInputRef.current) fileInputRef.current.value = "";
|
|
load();
|
|
} catch {
|
|
setError("Upload failed (check file type/size).");
|
|
} finally {
|
|
setUploading(false);
|
|
}
|
|
}
|
|
|
|
async function handleDelete(id: string) {
|
|
if (!confirm("Delete this media file?")) return;
|
|
try {
|
|
await apiFetch(`/api/admin/media/${id}`, { method: "DELETE" });
|
|
load();
|
|
} catch {
|
|
setError("Failed to delete media.");
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<h1>Media</h1>
|
|
{error && <div className="alert alert-error">{error}</div>}
|
|
|
|
<div className="panel">
|
|
<h2>Upload</h2>
|
|
<form onSubmit={handleUpload}>
|
|
<div className="field">
|
|
<label htmlFor="file">File (image or video)</label>
|
|
<input id="file" type="file" ref={fileInputRef} accept="image/*,video/mp4,video/webm" required />
|
|
</div>
|
|
<div className="field">
|
|
<label htmlFor="alt-text">Alt text</label>
|
|
<input id="alt-text" value={altText} onChange={(e) => setAltText(e.target.value)} />
|
|
</div>
|
|
<div className="form-actions">
|
|
<button type="submit" className="btn btn-primary" disabled={uploading}>
|
|
{uploading ? "Uploading…" : "Upload"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="page-loading">Loading…</div>
|
|
) : (
|
|
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))", gap: "1rem" }}>
|
|
{media.map((m) => (
|
|
<div key={m.id} className="panel" style={{ padding: "0.75rem", marginBottom: 0 }}>
|
|
{m.mime_type.startsWith("image/") ? (
|
|
<img src={m.url} alt={m.alt_text} style={{ width: "100%", height: 100, objectFit: "cover", borderRadius: 4 }} />
|
|
) : (
|
|
<div style={{ height: 100, display: "flex", alignItems: "center", justifyContent: "center", background: "#f3f4f6" }}>
|
|
{m.mime_type}
|
|
</div>
|
|
)}
|
|
<p style={{ fontSize: "0.75rem", margin: "0.4rem 0", wordBreak: "break-all" }}>{m.filename}</p>
|
|
<button className="btn btn-danger" style={{ width: "100%" }} onClick={() => handleDelete(m.id)}>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|