Merge pull request #6644 from antobinary/issue-6625

Localize "No locale selected; fix locales fetch

bigbluebutton-html5/imports/ui/components/closed-captions/component.jsx

@@ -1,9 +1,17 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
 import injectWbResizeEvent from '/imports/ui/components/presentation/resize-wrapper/component';
 import { styles } from './styles.scss';
 
-class ClosedCaptions extends Component {
+const intlMessages = defineMessages({
+  noLocaleSelected: {
+    id: 'app.submenu.closedCaptions.noLocaleSelected',
+    description: 'label for selected language for closed captions',
+  },
+});
+
+class ClosedCaptions extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -25,13 +33,14 @@ class ClosedCaptions extends Component {
   }
 
   renderCaptions(caption) {
+    const { fontFamily, fontSize, fontColor } = this.props;
     const text = caption.captions;
     const captionStyles = {
       whiteSpace: 'pre-wrap',
       wordWrap: 'break-word',
-      fontFamily: this.props.fontFamily,
-      fontSize: this.props.fontSize,
-      color: this.props.fontColor,
+      fontFamily,
+      fontSize,
+      color: fontColor,
     };
 
     return (
@@ -48,12 +57,15 @@ class ClosedCaptions extends Component {
       locale,
       captions,
       backgroundColor,
+      intl,
     } = this.props;
 
     return (
       <div disabled className={styles.ccbox}>
         <div className={styles.title}>
-          <p> {locale} </p>
+          <p>
+            { locale || intl.formatMessage(intlMessages.noLocaleSelected) }
+          </p>
         </div>
         <div
           ref={(ref) => { this.refCCScrollArea = ref; }}
@@ -69,7 +81,7 @@ class ClosedCaptions extends Component {
   }
 }
 
-export default injectWbResizeEvent(ClosedCaptions);
+export default injectIntl(injectWbResizeEvent(ClosedCaptions));
 
 ClosedCaptions.propTypes = {
   backgroundColor: PropTypes.string.isRequired,
@@ -83,12 +95,15 @@ ClosedCaptions.propTypes = {
       ).isRequired,
     }).isRequired,
   ).isRequired,
-  locale: PropTypes.string.isRequired,
+  locale: PropTypes.string,
   fontColor: PropTypes.string.isRequired,
   fontSize: PropTypes.string.isRequired,
   fontFamily: PropTypes.string.isRequired,
+  intl: PropTypes.shape({
+    formatMessage: PropTypes.func.isRequired,
+  }).isRequired,
 };
 
 ClosedCaptions.defaultProps = {
-  locale: 'Locale is not selected',
+  locale: undefined,
 };

bigbluebutton-html5/imports/ui/components/closed-captions/service.js

@@ -4,7 +4,7 @@ import Settings from '/imports/ui/services/settings';
 import _ from 'lodash';
 
 const getCCData = () => {
-  const meetingID = Auth.meetingID;
+  const { meetingID } = Auth;
 
   const ccSettings = Settings.cc;
 

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

@@ -148,13 +148,17 @@ class Settings extends Component {
   }
 
   renderModalContent() {
-    const { intl } = this.props;
+    const {
+      intl,
+      locales,
+    } = this.props;
+
     const {
       selectedTab,
       availableLocales,
       current,
-      locales,
     } = this.state;
+
     return (
       <Tabs
         className={styles.tabs}

bigbluebutton-html5/imports/ui/components/settings/submenus/closed-captions/component.jsx

@@ -198,15 +198,15 @@ class ClosedCaptionsMenu extends BaseMenu {
                       <select
                         defaultValue={locales ? locales.indexOf(this.state.settings.locale) : -1}
                         className={styles.select}
-                        onChange={this.handleSelectChange.bind(this, 'locale', this.props.locales)}
+                        onChange={this.handleSelectChange.bind(this, 'locale', locales)}
                       >
                         <option>
-                          { this.props.locales
-                          && this.props.locales.length
+                          { locales
+                          && locales.length
                             ? intl.formatMessage(intlMessages.localeOptionLabel)
                             : intl.formatMessage(intlMessages.noLocaleOptionLabel) }
                         </option>
-                        {this.props.locales ? this.props.locales.map((locale, index) => (
+                        {locales ? locales.map((locale, index) => (
                           <option key={index} value={index}>
                             {locale}
                           </option>

bigbluebutton-html5/private/locales/en.json

@@ -202,6 +202,7 @@
     "app.submenu.closedCaptions.fontSizeOptionLabel": "Choose Font size",
     "app.submenu.closedCaptions.backgroundColorLabel": "Background color",
     "app.submenu.closedCaptions.fontColorLabel": "Font color",
+    "app.submenu.closedCaptions.noLocaleSelected": "Locale is not selected",
     "app.submenu.participants.muteAllLabel": "Mute all except the presenter",
     "app.submenu.participants.lockAllLabel": "Lock all participants",
     "app.submenu.participants.lockItemLabel": "Participants {0}",