localize labels for AudioSettings component

This commit is contained in:
Anton Georgiev 2017-02-16 15:57:57 -05:00
parent b1f0282c52
commit 216f494346
2 changed files with 56 additions and 14 deletions

View File

@ -98,5 +98,11 @@
"app.audioModal.audioChoiceDescription": "Select how to join the audio in this meeting",
"app.audio.joinAudio": "Join Audio",
"app.audio.leaveAudio": "Leave Audio",
"app.audio.playSoundLabel": "Play Sound"
"app.audio.playSoundLabel": "Play Sound",
"app.audio.backLabel": "Back",
"app.audio.audioSettings.titleLabel": "Choose your audio settings",
"app.audio.audioSettings.descriptionLabel": "Please note, a dialog will appear in your browser, requiring you to accept sharing your microphone.",
"app.audio.audioSettings.microphoneSourceLabel": "Microphone source",
"app.audio.audioSettings.speakerSourceLabel": "Speaker source",
"app.audio.audioSettings.microphoneStreamLabel": "Your audio stream volume"
}

View File

@ -1,4 +1,5 @@
import React from 'react';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import Button from '/imports/ui/components/button/component';
import { clearModal } from '/imports/ui/components/app/service';
import styles from '../styles.scss';
@ -8,7 +9,7 @@ import AudioStreamVolume from '/imports/ui/components/audio/audio-stream-volume/
import EnterAudioContainer from '/imports/ui/components/enter-audio/container';
import AudioTestContainer from '/imports/ui/components/audio-test/container';
export default class AudioSettings extends React.Component {
class AudioSettings extends React.Component {
constructor(props) {
super(props);
@ -43,11 +44,15 @@ export default class AudioSettings extends React.Component {
}
render() {
const {
intl,
} = this.props;
return (
<div>
<div className={styles.center}>
<Button className={styles.backBtn}
label={'Back'}
label={intl.formatMessage(intlMessages.backLabel)}
icon={'left-arrow'}
size={'md'}
color={'primary'}
@ -55,25 +60,47 @@ export default class AudioSettings extends React.Component {
onClick={this.chooseAudio}
/>
<div className={styles.title}>
Choose your audio settings
<FormattedMessage
id="app.audio.audioSettings.titleLabel"
defaultMessage="Choose your audio settings"
/>
</div>
</div>
<div className={styles.audioNote}>
Please note, a dialog will appear in your browser, requiring you to accept sharing your microphone.
<FormattedMessage
id="app.audio.audioSettings.descriptionLabel"
defaultMessage="Please note, a dialog will appear in your browser,
requiring you to accept sharing your microphone."
/>
</div>
<div className={styles.containerLeftHalfContent}>
<span className={styles.heading}>Microphone source</span>
<span className={styles.heading}>
<FormattedMessage
id="app.audio.audioSettings.microphoneSourceLabel"
defaultMessage="Microphone source"
/>
</span>
<DeviceSelector
className={styles.item}
kind="audioinput"
onChange={this.handleInputChange} />
<span className={styles.heading}>Your audio stream volume</span>
<span className={styles.heading}>
<FormattedMessage
id="app.audio.audioSettings.microphoneStreamLabel"
defaultMessage="Your audio stream volume"
/>
</span>
<AudioStreamVolume
className={styles.item}
deviceId={this.state.inputDeviceId} />
</div>
<div className={styles.containerRightHalfContent}>
<span className={styles.heading}>Speaker source</span>
<span className={styles.heading}>
<FormattedMessage
id="app.audio.audioSettings.speakerSourceLabel"
defaultMessage="Speaker source"
/>
</span>
<DeviceSelector
className={styles.item}
kind="audiooutput"
@ -85,3 +112,12 @@ export default class AudioSettings extends React.Component {
);
}
};
const intlMessages = defineMessages({
backLabel: {
id: 'app.audio.backLabel',
defaultMessage: 'Back',
},
});
export default injectIntl(AudioSettings);