47 lines
933 B
TypeScript
47 lines
933 B
TypeScript
import React, {useState} from 'react';
|
|
import ReactHowler from 'react-howler';
|
|
|
|
interface PlayerProps {
|
|
src: string;
|
|
}
|
|
|
|
/**
|
|
* @return {jsx} The root component
|
|
*/
|
|
export default function Player({src}: PlayerProps) {
|
|
const [play, setPlay] = useState(false);
|
|
const [playText, setPlayText] = useState('Play');
|
|
|
|
function handlePlay() {
|
|
setPlay(!play);
|
|
if (play) {
|
|
setPlayText('Play');
|
|
} else {
|
|
setPlayText('Pause');
|
|
}
|
|
}
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<ReactHowler
|
|
src={[src]}
|
|
playing={play}/>
|
|
<div
|
|
className='
|
|
tile-child tile-player d-flex
|
|
flex-column
|
|
align-items-center
|
|
justify-content-center'
|
|
id='clickme'>
|
|
<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}
|
|
</button>
|
|
</div>
|
|
</React.Fragment>
|
|
);
|
|
}
|