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>
|
||
|
);
|
||
|
}
|