79 lines
1.8 KiB
TypeScript
79 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
interface FilePreviewProps {
|
|
fileId: string;
|
|
fileType: string; // Pass the file type as a prop
|
|
}
|
|
|
|
export function FilePreview({ fileId, fileType }: FilePreviewProps) {
|
|
const [mediaSrc, setMediaSrc] = useState<string | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!fileId) {
|
|
setError("File ID is required.");
|
|
return;
|
|
}
|
|
|
|
let objectUrl: string | null = null;
|
|
|
|
const fetchMedia = async () => {
|
|
try {
|
|
const response = await fetch(`/api/files/serv?id=${encodeURIComponent(fileId)}`);
|
|
if (!response.ok) {
|
|
throw new Error("Failed to fetch media");
|
|
}
|
|
|
|
const blob = await response.blob();
|
|
objectUrl = URL.createObjectURL(blob);
|
|
setMediaSrc(objectUrl);
|
|
} catch (err) {
|
|
console.error(err);
|
|
setError("Failed to load media.");
|
|
}
|
|
};
|
|
|
|
fetchMedia();
|
|
|
|
return () => {
|
|
if (objectUrl) {
|
|
URL.revokeObjectURL(objectUrl);
|
|
}
|
|
};
|
|
}, [fileId]);
|
|
|
|
if (error) {
|
|
return <div className="text-red-500">{error}</div>;
|
|
}
|
|
|
|
if (!mediaSrc) {
|
|
return <div>Loading...</div>;
|
|
}
|
|
|
|
if (fileType.startsWith("video")) {
|
|
return (
|
|
<video
|
|
controls
|
|
className="max-w-full max-h-96 rounded-lg shadow-md"
|
|
src={mediaSrc}
|
|
>
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
);
|
|
}
|
|
if (fileType.startsWith("audio")) {
|
|
return (
|
|
<audio
|
|
controls
|
|
className="max-w-full max-h-96 rounded-lg shadow-md"
|
|
src={mediaSrc}
|
|
>
|
|
Your browser does not support the audio tag.
|
|
</audio>
|
|
);
|
|
}
|
|
|
|
return <img src={mediaSrc} alt="Media preview" className="max-w-full max-h-96 rounded-lg shadow-md" />;
|
|
} |