import React from 'react' ; import PlayerButton from '../PlayerButton' ; import styles from './styles.scss' ; export type PlayerControlsProps = { goForward ? : ( ) => void ; goBack ? : ( ) => void ; togglePlay ? : ( ) => void ; isPlaying ? : boolean ; isLoading ? : boolean ; goBackDisabled ? : boolean ; goForwardDisabled ? : boolean ; playDisabled ? : boolean ; } ; const PlayerControls = ( { goForward , goBack , togglePlay , isPlaying , isLoading , goBackDisabled = false , goForwardDisabled = false , playDisabled = false } ) => ( < div className = { styles . player_controls } > < PlayerButton data - testid = 'player-controls-back' icon = 'step backward' size = 'large' onClick = { goBack } disabled = { goBackDisabled } / > < PlayerButton data - testid = 'player-controls-play' loading = { isLoading } icon = { isLoading ? 'circle notch' : isPlaying ? 'pause' : 'play' } onClick = { togglePlay } disabled = { playDisabled } / > < PlayerButton data - testid = 'player-controls-forward' icon = 'step forward' size = 'large' onClick = { goForward } disabled = { goForwardDisabled } / > < /div>); export default PlayerControls ;