Spaces:
Build error
Build error
File size: 3,253 Bytes
f1b66b5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
import React from 'react';
const VideoResult = ({ result }) => {
if (result.status === 'idle') {
return (
<div className="h-96 flex items-center justify-center bg-gray-800 border-2 border-dashed border-gray-700 rounded-xl text-gray-400">
Enter a prompt and click "Generate" to see your video result here.
</div>
);
}
if (result.status === 'loading') {
return (
<div className="h-96 flex flex-col items-center justify-center bg-gray-900 rounded-xl">
<svg className="animate-spin h-10 w-10 text-purple-400 mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<p className="text-lg text-purple-400 font-medium">Processing Sora 2 model...</p>
<p className="text-sm text-gray-500 mt-1">This simulation takes a few seconds.</p>
<p className="text-xs text-gray-600 mt-4">Prompt: "{result.data?.prompt || '...'}"</p>
</div>
);
}
if (result.status === 'error') {
return (
<div className="h-96 flex flex-col items-center justify-center bg-red-900/30 border border-red-700 rounded-xl p-4">
<h3 className="text-xl font-semibold text-red-400 mb-2">Error during Generation</h3>
<p className="text-red-300 text-center">
{result.error}
</p>
<p className="text-sm text-red-500 mt-4">
(This is a mock error for demonstration purposes.)
</p>
</div>
);
}
if (result.status === 'success' && result.data) {
const { videoUrl, prompt, duration } = result.data;
return (
<div className="bg-gray-900 rounded-xl shadow-2xl overflow-hidden p-6">
<h3 className="text-xl font-semibold text-white mb-4 border-b border-gray-700 pb-2">Generation Complete</h3>
{/* Mock Video Player */}
<div className="w-full aspect-video bg-black rounded-lg mb-4 flex items-center justify-center relative">
<video
src={videoUrl}
controls
loop
autoPlay
muted
className="w-full h-full object-contain rounded-lg border border-purple-500/50"
aria-label={`Generated video for prompt: ${prompt}`}
>
Your browser does not support the video tag.
</video>
<div className="absolute top-2 right-2 bg-purple-600 text-white text-xs font-bold px-2 py-1 rounded">
{duration}s
</div>
</div>
{/* Details */}
<div className="space-y-2">
<p className="text-sm text-gray-400">
<span className="font-medium text-white">Prompt:</span> {prompt}
</p>
<p className="text-sm text-gray-400">
<span className="font-medium text-white">Model Status:</span> Sora 2 (Simulated Success)
</p>
</div>
</div>
);
}
return null;
};
export default VideoResult; |