Spaces:
Sleeping
Sleeping
File size: 5,330 Bytes
3196665 3713b6e 3196665 3713b6e 3196665 e5ded32 3196665 3713b6e 3196665 | 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 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | import React from 'react';
import { Clock, Users, Zap, ShieldCheck } from 'lucide-react';
interface QueueWaitingRoomProps {
position: number;
etaSeconds: number;
onCancel?: () => void;
}
const QueueWaitingRoom: React.FC<QueueWaitingRoomProps> = ({ position, etaSeconds, onCancel }) => {
// Format ETA beautifully
const minutes = Math.floor(etaSeconds / 60);
const seconds = etaSeconds % 60;
const etaText = minutes > 0 ? `~${minutes} min ${seconds} sec` : `~${seconds} sec`;
return (
<div className="w-full max-w-2xl mx-auto rounded-3xl bg-black border border-[#27272a] shadow-2xl overflow-hidden mt-8 relative group">
{/* Animated Gradient Background */}
<div className="absolute inset-0 bg-gradient-to-br from-indigo-500/10 via-purple-500/5 to-pink-500/10 opacity-50"></div>
{/* Scanning Line Animation */}
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-indigo-500 to-transparent animate-[scan_3s_ease-in-out_infinite]"></div>
<div className="relative p-10 md:p-14 flex flex-col items-center justify-center text-center space-y-8">
{/* Header */}
<div className="space-y-2">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-xs font-bold uppercase tracking-wider mb-2">
<Users className="w-4 h-4" />
Waiting Room
</div>
<h2 className="text-3xl md:text-4xl font-extrabold text-white tracking-tight">
You are in line.
</h2>
<p className="text-gray-400 text-sm max-w-md mx-auto mt-2">
Our AI models are heavy, so we process extractions one by one.
<br/><br/>
<span className="text-emerald-400 font-bold block animate-pulse">
You can safely close this tab!
</span>
<span className="text-xs text-gray-500 mt-1 block">
Your audio is processing securely in the background. You can come back later and check your <strong>History</strong> page to download the results. <br/>
<em>(Note: Tasks may be lost if the upstream server performs a hardware restart)</em>
</span>
</p>
</div>
{/* Large Number Display */}
<div className="relative w-48 h-48 md:w-56 md:h-56 rounded-full border-2 border-[#27272a] bg-[#0a0a0a] flex items-center justify-center shadow-[0_0_50px_rgba(79,70,229,0.15)] mt-4">
{/* Pulsing ring */}
<div className="absolute inset-0 rounded-full border-2 border-indigo-500/30 animate-[ping_2.5s_cubic-bezier(0,0,0.2,1)_infinite]"></div>
<div className="flex flex-col items-center justify-center">
<span className="text-gray-500 text-xs font-bold uppercase tracking-widest mb-1">Position</span>
<span className="text-6xl md:text-8xl font-black text-transparent bg-clip-text bg-gradient-to-b from-white to-gray-500">
#{position}
</span>
</div>
</div>
{/* ETA Section */}
<div className="flex flex-col items-center justify-center bg-[#111] border border-[#27272a] rounded-2xl p-4 w-full max-w-xs mt-4 relative overflow-hidden">
<div className="absolute top-0 left-0 w-1 h-full bg-pink-500"></div>
<div className="flex items-center gap-2 mb-1">
<Clock className="w-4 h-4 text-pink-500" />
<span className="text-xs text-gray-400 font-medium uppercase tracking-wider">Estimated Wait</span>
</div>
<span className="text-xl font-bold text-white">{etaText}</span>
</div>
{/* Features / Reassurance Footer */}
<div className="grid grid-cols-2 gap-4 w-full pt-6 border-t border-[#27272a]/50 mt-4">
<div className="flex flex-col items-center justify-center text-center p-3">
<ShieldCheck className="w-5 h-5 text-gray-500 mb-2" />
<span className="text-xs font-semibold text-gray-300">Secure Processing</span>
<span className="text-[10px] text-gray-600 mt-1">Files deleted after 24h</span>
</div>
<div className="flex flex-col items-center justify-center text-center p-3">
<Zap className="w-5 h-5 text-gray-500 mb-2" />
<span className="text-xs font-semibold text-gray-300">Pro Tools Active</span>
<span className="text-[10px] text-gray-600 mt-1">Highest quality output</span>
</div>
</div>
{onCancel && (
<button
onClick={onCancel}
className="mt-2 px-6 py-2 border border-red-500/50 text-red-400 hover:bg-red-500/10 rounded-full text-sm font-medium transition-colors"
>
Cancel Processing
</button>
)}
</div>
{/* Custom CSS for Scanning animation */}
<style dangerouslySetInnerHTML={{__html: `
@keyframes scan {
0%, 100% { transform: translateY(0); opacity: 0; }
10% { opacity: 1; }
50% { transform: translateY(400px); opacity: 1; }
90% { opacity: 0; }
}
`}} />
</div>
);
};
export default QueueWaitingRoom;
|