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