Spaces:
Running
Running
File size: 4,174 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 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
import PropTypes from 'prop-types';
import React from 'react';
import {defineMessages, injectIntl, intlShape} from 'react-intl';
import Box from '../box/box.jsx';
import Meter from '../meter/meter.jsx';
import Waveform from '../waveform/waveform.jsx';
import styles from './record-modal.css';
import stopIcon from './icon--stop-recording.svg';
const messages = defineMessages({
beginRecord: {
defaultMessage: 'Begin recording by clicking the button below',
description: 'Message for recording sound modal',
id: 'gui.recordingStep.beginRecord'
},
permission: {
defaultMessage: '{arrow}We need your permission to use your microphone',
description: 'Permission required notice in recording sound modal. Do not translate {arrow}',
id: 'gui.recordingStep.permission'
},
stop: {
defaultMessage: 'Stop recording',
description: 'Stop recording button label',
id: 'gui.recordingStep.stop'
},
record: {
defaultMessage: 'Record',
description: 'Record button label',
id: 'gui.recordingStep.record'
}
});
const RecordingStep = props => (
<Box>
<Box className={styles.visualizationContainer}>
<Box className={styles.meterContainer}>
<Meter
height={172}
level={props.level}
width={20}
/>
</Box>
<Box className={styles.waveformContainer}>
{props.levels ? (
<Waveform
data={props.levels}
height={150}
level={0}
width={440}
/>
) : (
<span className={styles.helpText}>
{props.listening ? props.intl.formatMessage(messages.beginRecord) :
props.intl.formatMessage(messages.permission,
{arrow: props.isRtl ? '↗️ \u00A0' : '↖️ \u00A0'}
)
}
</span>
)}
</Box>
</Box>
<Box className={styles.mainButtonRow}>
<button
className={styles.mainButton}
disabled={!props.listening}
onClick={props.recording ? props.onStopRecording : props.onRecord}
>
{props.recording ? (
<img
draggable={false}
src={stopIcon}
/>
) : (
<svg
className={styles.recordButton}
height="52"
width="52"
>
<circle
className={styles.recordButtonCircle}
cx="26"
cy="26"
r="25"
/>
<circle
className={styles.recordButtonCircleOutline}
cx="26"
cy="26"
r={27 + (props.level * 5)}
/>
</svg>
)}
<div className={styles.helpText}>
<span className={styles.recordingText}>
{
props.recording ?
props.intl.formatMessage(messages.stop) :
props.intl.formatMessage(messages.record)
}
</span>
</div>
</button>
</Box>
</Box>
);
RecordingStep.propTypes = {
intl: intlShape.isRequired,
isRtl: PropTypes.bool,
level: PropTypes.number,
levels: PropTypes.arrayOf(PropTypes.number),
listening: PropTypes.bool,
onRecord: PropTypes.func.isRequired,
onStopRecording: PropTypes.func.isRequired,
recording: PropTypes.bool
};
export default injectIntl(RecordingStep);
|