File size: 3,387 Bytes
a0fcd39 | 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 | import React from 'react'
function ProcessingOverlay({ stems, progress }) {
// Include mixing step in the progress display
const allSteps = [...stems, '_mix']
const doneCount = Object.values(progress).filter(s => s === 'done').length
const totalSteps = allSteps.length
// Check if currently processing any stem
const currentlyProcessing = Object.entries(progress).find(([_, status]) => status === 'processing')?.[0]
return (
<div className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 animate-fade-in">
<div className="glass rounded-2xl p-8 max-w-md w-full mx-4">
<div className="text-center mb-6">
<div className="inline-block animate-spin-slow text-5xl mb-4">
⚙️
</div>
<h2 className="text-xl font-semibold text-white">Processing Audio</h2>
<p className="text-gray-400 text-sm mt-1">
{currentlyProcessing === '_mix'
? 'Mixing stems together...'
: currentlyProcessing
? `Processing ${currentlyProcessing.replace(/_/g, ' ')}...`
: 'Please wait while we shift the pitch and tempo...'}
</p>
</div>
{/* Progress list */}
<div className="space-y-3">
{allSteps.map((stem) => {
const status = progress[stem] || 'waiting'
const displayName = stem === '_mix' ? 'Final Mix' : stem.replace(/_/g, ' ')
return (
<div
key={stem}
className={`flex items-center justify-between py-2 px-3 rounded-lg transition-all ${
status === 'processing'
? 'bg-yellow-500/10 border border-yellow-500/30'
: 'bg-white/5'
}`}
>
<span className="capitalize text-sm flex items-center gap-2">
{stem === '_mix' && <span>🎵</span>}
{displayName}
</span>
<span className={`text-xs px-2 py-1 rounded ${
status === 'done'
? 'bg-green-500/20 text-green-400'
: status === 'processing'
? 'bg-yellow-500/20 text-yellow-400 animate-pulse'
: status.startsWith('error')
? 'bg-red-500/20 text-red-400'
: 'bg-gray-500/20 text-gray-400'
}`}>
{status === 'done' && '✓ Done'}
{status === 'processing' && '⏳ Processing...'}
{status === 'waiting' && '○ Waiting'}
{status.startsWith('error') && '✗ Error'}
</span>
</div>
)
})}
</div>
{/* Progress bar */}
<div className="mt-6">
<div className="h-2 bg-gray-700 rounded-full overflow-hidden">
<div
className="h-full bg-gradient-to-r from-primary-500 to-accent-500 transition-all duration-300"
style={{
width: `${(doneCount / Math.max(totalSteps, 1)) * 100}%`
}}
/>
</div>
<p className="text-center text-xs text-gray-500 mt-2">
{doneCount} of {totalSteps} complete
</p>
</div>
</div>
</div>
)
}
export default ProcessingOverlay
|