import { useState } from "react";
import { IMAGE_EXT, VIDEO_EXT, AUDIO_EXT } from "../utils/mediaTypes";
function MediaErrorPanel({ name, filePath }: { name: string; filePath: string }) {
return (
{name}
{filePath}
Couldn't load this file — it may be missing or corrupt
);
}
export function MediaPreview({ projectId, filePath }: { projectId: string; filePath: string }) {
const serveUrl = `/api/projects/${projectId}/preview/${filePath}`;
const name = filePath.split("/").pop() ?? filePath;
// Keyed by path so switching to another file clears a previous failure.
const [failedPath, setFailedPath] = useState(null);
const failed = failedPath === filePath;
const setFailed = () => setFailedPath(filePath);
if (failed) return ;
if (IMAGE_EXT.test(filePath)) {
return (
{filePath}
);
}
if (VIDEO_EXT.test(filePath)) {
return (
{filePath}
);
}
if (AUDIO_EXT.test(filePath)) {
return (
);
}
// Fonts and other binary — show info instead of binary dump
return (
{name}
{filePath}
Binary file — preview not available
);
}