Merge pull request #3659 from antobinary/localization

HTML5: Localization of labels in audio and chat areas

bigbluebutton-html5/imports/locales/en.json

@@ -93,5 +93,9 @@
   "app.breakoutWillCloseMessage": "Time ended. Breakout Room will close soon",
   "app.calculatingBreakoutTimeRemaining": "Calculating remaining time...",
   "app.audioModal.microphoneLabel": "Microphone",
-  "app.audioModal.listenOnlyLabel": "Listen Only"
+  "app.audioModal.listenOnlyLabel": "Listen Only",
+  "app.audioModal.audioChoiceLabel": "How would you like to join the audio?",
+  "app.audioModal.audioChoiceDescription": "Select how to join the audio in this meeting",
+  "app.audio.joinAudio": "Join Audio",
+  "app.audio.leaveAudio": "Leave Audio"
 }

bigbluebutton-html5/imports/ui/components/actions-bar/audio-menu/component.jsx

@@ -1,33 +1,47 @@
 import React from 'react';
 import { createContainer } from 'meteor/react-meteor-data';
 import Button from '/imports/ui/components/button/component';
-import Users from '/imports/api/users/index';
-import Auth from '/imports/ui/services/auth/index';
+import { withRouter } from 'react-router';
+import { defineMessages, injectIntl } from 'react-intl';
 
-export default class JoinAudioOptions extends React.Component {
+const intlMessages = defineMessages({
+  joinAudio: {
+    id: 'app.audio.joinAudio',
+    defaultMessage: 'Join Audio',
+  },
+  leaveAudio: {
+    id: 'app.audio.leaveAudio',
+    defaultMessage: 'Leave Audio',
+  }
+});
 
-  renderLeaveButton() {
-    return (
+class JoinAudioOptions extends React.Component {
+  render() {
+    const {
+      close,
+      intl,
+      isInAudio,
+      isInListenOnly,
+      open,
+    } = this.props;
+
+    if (isInAudio || isInListenOnly) {
+      return (
         <Button
-          onClick={this.props.close}
-          label={'Leave Audio'}
+          onClick={close}
+          label={intl.formatMessage(intlMessages.leaveAudio)}
           color={'danger'}
           icon={'mute'}
           size={'lg'}
           circle={true}
         />
-    );
-  }
-
-  render() {
-    if (this.props.isInAudio || this.props.isInListenOnly) {
-      return this.renderLeaveButton();
+      );
     }
 
     return (
       <Button
-        onClick={this.props.open}
-        label={'Join Audio'}
+        onClick={open}
+        label={intl.formatMessage(intlMessages.joinAudio)}
         color={'primary'}
         icon={'unmute'}
         size={'lg'}
@@ -36,3 +50,5 @@ export default class JoinAudioOptions extends React.Component {
     );
   }
 }
+
+export default withRouter(injectIntl(JoinAudioOptions));

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

@@ -2,7 +2,7 @@ import React from 'react';
 import styles from '../styles.scss';
 import Button from '/imports/ui/components/button/component';
 import { clearModal } from '/imports/ui/components/app/service';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 
 const intlMessages = defineMessages({
   microphoneLabel: {
@@ -50,7 +50,11 @@ class JoinAudio extends React.Component {
             onClick={this.handleClose}
           />
           <div>
-            How would you like to join the audio?
+            <FormattedMessage
+              id="app.audioModal.audioChoiceLabel"
+              description="app.audioModal.audioChoiceDescription"
+              defaultMessage="How would you like to join the audio?"
+            />
           </div>
         </div>
         <div className={styles.center}>

bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/component.jsx

@@ -5,6 +5,14 @@ import styles from './styles.scss';
 import { withRouter } from 'react-router';
 import { Link } from 'react-router';
 import cx from 'classnames';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const intlMessages = defineMessages({
+  titlePublic: {
+    id: 'app.chat.titlePublic',
+    defaultMessage: "Public Chat",
+  },
+});
 
 const CHAT_CONFIG = Meteor.settings.public.chat;
 const PRIVATE_CHAT_PATH = CHAT_CONFIG.path_route;
@@ -26,6 +34,7 @@ class ChatListItem extends Component {
       chat,
       openChat,
       compact,
+      intl,
     } = this.props;
 
     const linkPath = [PRIVATE_CHAT_PATH, chat.id].join('');
@@ -33,6 +42,10 @@ class ChatListItem extends Component {
     let linkClasses = {};
     linkClasses[styles.active] = chat.id === openChat;
 
+    if (chat.name === 'Public Chat') {
+      chat.name = intl.formatMessage(intlMessages.titlePublic);
+    }
+
     return (
       <li className={cx(styles.chatListItem, linkClasses)}>
         <Link to={linkPath} className={styles.chatListItemLink}>
@@ -66,4 +79,4 @@ class ChatListItem extends Component {
 ChatListItem.propTypes = propTypes;
 ChatListItem.defaultProps = defaultProps;
 
-export default withRouter(ChatListItem);
+export default withRouter(injectIntl(ChatListItem));