File size: 1,275 Bytes
0a0a57b | 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 | function ProgressBar({ status, progress, duration, resolution }) {
const formatDuration = (seconds) => {
if (!seconds) return null
const mins = Math.floor(seconds / 60)
const secs = Math.floor(seconds % 60)
return `${mins}:${secs.toString().padStart(2, '0')}`
}
return (
<div className="progress-container">
<div className="progress-header">
<div className="progress-status">
<span className={`status-dot ${status}`} />
<span className="status-text">{status || 'Waiting'}</span>
</div>
<span className="progress-percent">{progress.toFixed(1)}%</span>
</div>
<div className="progress-bar-track">
<div
className="progress-bar-fill"
style={{ width: `${progress}%` }}
/>
</div>
{(duration || resolution) && (
<div className="progress-meta">
{duration && <span>Duration: {formatDuration(duration)}</span>}
{resolution && <span>Resolution: {resolution}</span>}
</div>
)}
</div>
)
}
export default ProgressBar
|