localize labels for AudioSettings component

bigbluebutton-html5/imports/locales/en.json

@@ -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"
 }

bigbluebutton-html5/imports/ui/components/audio-modal/audio-settings/component.jsx

@@ -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,33 +60,64 @@ 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>
-          <AudioStreamVolume
+          <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>
-          <DeviceSelector
-            className={styles.item}
-            kind="audiooutput"
-            onChange={this.handleOutputChange} />
-          <AudioTestContainer />
+          <span className={styles.heading}>
+            <FormattedMessage
+              id="app.audio.audioSettings.speakerSourceLabel"
+              defaultMessage="Speaker source"
+            />
+          </span>
+          <DeviceSelector
+            className={styles.item}
+            kind="audiooutput"
+            onChange={this.handleOutputChange} />
+          <AudioTestContainer />
           <EnterAudioContainer isFullAudio={true}/>
         </div>
       </div>
     );
   }
 };
+
+const intlMessages = defineMessages({
+  backLabel: {
+    id: 'app.audio.backLabel',
+    defaultMessage: 'Back',
+  },
+});
+
+export default injectIntl(AudioSettings);