|
|
@@ -6,12 +6,15 @@ interface PlayerProps { |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* @return {jsx} The root component |
|
|
|
* @return {jsx} a simple audio player |
|
|
|
*/ |
|
|
|
export default function Player({src}: PlayerProps) { |
|
|
|
const [play, setPlay] = useState(false); |
|
|
|
const [playText, setPlayText] = useState('Play'); |
|
|
|
|
|
|
|
/** |
|
|
|
* change play state |
|
|
|
*/ |
|
|
|
function handlePlay() { |
|
|
|
setPlay(!play); |
|
|
|
if (play) { |
|
|
@@ -33,12 +36,14 @@ export default function Player({src}: PlayerProps) { |
|
|
|
align-items-center |
|
|
|
justify-content-center' |
|
|
|
id='clickme'> |
|
|
|
<div className='lead player-text mb-4'>{src.split('/')[3].split('.')[0]}</div> |
|
|
|
<div className='lead player-text mb-4'> |
|
|
|
{src.split('/')[3].split('.')[0]} |
|
|
|
</div> |
|
|
|
<button |
|
|
|
type='button' |
|
|
|
onClick={() => handlePlay()} |
|
|
|
className={'d-inline btn btn-clickme btn-lg'}> |
|
|
|
{playText} |
|
|
|
{playText} |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</React.Fragment> |
|
|
|