Spaces:
Running
Running
File size: 1,211 Bytes
19abe39 | 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 | export default function PlayerControls({
playing,
onPlay,
onPause,
onNext,
onPrev,
onReset,
currentStep,
totalSteps,
disabled,
}) {
const atStart = currentStep === 0;
const atEnd = currentStep >= totalSteps;
return (
<div className="player-controls">
<button
className="ctrl-btn"
onClick={onReset}
disabled={disabled || atStart}
title="Reset to start"
>
⏮ RST
</button>
<button
className="ctrl-btn"
onClick={onPrev}
disabled={disabled || atStart}
title="Previous step"
>
◀ PREV
</button>
<span className="ctrl-step-display">
{disabled ? '—/—' : `${currentStep} / ${totalSteps}`}
</span>
<button
className="ctrl-btn"
onClick={onNext}
disabled={disabled || atEnd}
title="Next step"
>
NEXT ▶
</button>
<button
className={`ctrl-btn play`}
onClick={playing ? onPause : onPlay}
disabled={disabled || (!playing && atEnd)}
title={playing ? 'Pause' : 'Play'}
>
{playing ? '⏸ PAUSE' : '▶▶ PLAY'}
</button>
</div>
);
}
|