Spaces:
Running
Running
File size: 1,912 Bytes
6bcb42f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
import PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
import {defineMessages, injectIntl, intlShape} from 'react-intl';
import styles from './play-button.css';
import playIcon from './icon--play.svg';
import stopIcon from './icon--stop.svg';
const messages = defineMessages({
play: {
id: 'gui.playButton.play',
description: 'Title of the button to start playing the sound',
defaultMessage: 'Play'
},
stop: {
id: 'gui.playButton.stop',
description: 'Title of the button to stop the sound',
defaultMessage: 'Stop'
}
});
const PlayButtonComponent = ({
className,
intl,
isPlaying,
onClick,
onMouseDown,
onMouseEnter,
onMouseLeave,
setButtonRef,
...props
}) => {
const label = isPlaying ?
intl.formatMessage(messages.stop) :
intl.formatMessage(messages.play);
return (
<div
aria-label={label}
className={classNames(styles.playButton, className, {
[styles.playing]: isPlaying
})}
onClick={onClick}
onMouseDown={onMouseDown}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
ref={setButtonRef}
{...props}
>
<img
className={styles.playIcon}
draggable={false}
src={isPlaying ? stopIcon : playIcon}
/>
</div>
);
};
PlayButtonComponent.propTypes = {
className: PropTypes.string,
intl: intlShape,
isPlaying: PropTypes.bool.isRequired,
onClick: PropTypes.func.isRequired,
onMouseDown: PropTypes.func.isRequired,
onMouseEnter: PropTypes.func.isRequired,
onMouseLeave: PropTypes.func.isRequired,
setButtonRef: PropTypes.func.isRequired
};
export default injectIntl(PlayButtonComponent);
|