This commit is contained in:
gbrochar 2020-11-21 18:03:59 +01:00
parent a5c7f120a8
commit fa60bb9b63
2 changed files with 10 additions and 4 deletions

View File

@ -9,7 +9,8 @@ interface ClickMeProps {
/** /**
* @return {jsx} a presentation of me * @return {jsx} a presentation of me
*/ */
export default function ClickMe({windowSize, setTrigger, setBusy}: ClickMeProps) { export default function ClickMe(
{windowSize, setTrigger, setBusy}: ClickMeProps) {
const [buttonClass, setButtonClass] = useState(''); const [buttonClass, setButtonClass] = useState('');
useEffect(() => { useEffect(() => {

View File

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