diff --git a/bigbluebutton-html5/imports/ui/components/closed-captions/component.jsx b/bigbluebutton-html5/imports/ui/components/closed-captions/component.jsx
index 1a5952544e..31d7219095 100644
--- a/bigbluebutton-html5/imports/ui/components/closed-captions/component.jsx
+++ b/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 (
-
{locale}
+
+ { locale || intl.formatMessage(intlMessages.noLocaleSelected) }
+
{ 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,
};
diff --git a/bigbluebutton-html5/imports/ui/components/closed-captions/service.js b/bigbluebutton-html5/imports/ui/components/closed-captions/service.js
index da2e0e10fc..d2bd523381 100644
--- a/bigbluebutton-html5/imports/ui/components/closed-captions/service.js
+++ b/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;
diff --git a/bigbluebutton-html5/imports/ui/components/settings/component.jsx b/bigbluebutton-html5/imports/ui/components/settings/component.jsx
index fd0dc75ec8..8aeda4d68d 100644
--- a/bigbluebutton-html5/imports/ui/components/settings/component.jsx
+++ b/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 (
- {this.props.locales ? this.props.locales.map((locale, index) => (
+ {locales ? locales.map((locale, index) => (
diff --git a/bigbluebutton-html5/private/locales/en.json b/bigbluebutton-html5/private/locales/en.json
index b5c9590e16..2c8f37bfd5 100755
--- a/bigbluebutton-html5/private/locales/en.json
+++ b/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}",