diff --git a/react/features/large-video/components/AbstractLabels.js b/react/features/large-video/components/AbstractLabels.js index a23df84a0..75b660e52 100644 --- a/react/features/large-video/components/AbstractLabels.js +++ b/react/features/large-video/components/AbstractLabels.js @@ -20,6 +20,11 @@ export type Props = { */ _filmstripVisible: boolean, + /** + * Whether the video quality label should be displayed. + */ + _showTranscribingLabel: boolean, + /** * Whether the video quality label should be displayed. */ @@ -66,9 +71,13 @@ export default class AbstractLabels extends Component { * @returns {React$Element} */ _renderTranscribingLabel() { - return ( - - ); + if (this.props._showTranscribingLabel) { + return ( + + ); + } + + return null; } /** @@ -92,12 +101,14 @@ export default class AbstractLabels extends Component { * @private * @returns {{ * _filmstripVisible: boolean, + * _showTranscribingLabel: boolean, * _showVideoQualityLabel: boolean * }} */ export function _abstractMapStateToProps(state: Object) { return { _filmstripVisible: isFilmstripVisible(state), + _showTranscribingLabel: state['features/transcribing'].isTranscribing, _showVideoQualityLabel: !shouldDisplayTileView(state) }; } diff --git a/react/features/large-video/components/Labels.native.js b/react/features/large-video/components/Labels.native.js index d476cfa08..330517756 100644 --- a/react/features/large-video/components/Labels.native.js +++ b/react/features/large-video/components/Labels.native.js @@ -58,6 +58,9 @@ class Labels extends AbstractLabels { this._renderRecordingLabel( JitsiRecordingConstants.mode.STREAM) } + { + this._renderTranscribingLabel() + } {/* * Emil, Lyubomir, Nichole, and Zoli said that the Labels * should not be rendered in Picture-in-Picture. Saul argued @@ -73,6 +76,8 @@ class Labels extends AbstractLabels { _renderRecordingLabel: string => React$Element<*>; + _renderTranscribingLabel: () => React$Element<*> + _renderVideoQualityLabel: () => React$Element<*>; } diff --git a/react/features/transcribing/components/AbstractTranscribingLabel.js b/react/features/transcribing/components/AbstractTranscribingLabel.js new file mode 100644 index 000000000..0f3680df8 --- /dev/null +++ b/react/features/transcribing/components/AbstractTranscribingLabel.js @@ -0,0 +1,12 @@ +// @flow + +/** + * The type of the React {@code Component} props of {@link TranscribingLabel}. + */ +export type Props = { + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; diff --git a/react/features/transcribing/components/TranscribingLabel.native.js b/react/features/transcribing/components/TranscribingLabel.native.js index e69de29bb..6fa3254f8 100644 --- a/react/features/transcribing/components/TranscribingLabel.native.js +++ b/react/features/transcribing/components/TranscribingLabel.native.js @@ -0,0 +1,31 @@ +// @flow + +import React, { Component } from 'react'; + +import { translate } from '../../base/i18n'; +import { CircularLabel } from '../../base/label'; + +import { type Props } from './AbstractTranscribingLabel'; + +/** + * React {@code Component} for displaying a label when a transcriber is in the + * conference. + * + * @extends Component + */ +class TranscribingLabel extends Component { + + /** + * Renders the platform-specific label component. + * + * @inheritdoc + */ + render() { + return ( + + ); + } +} + +export default translate(TranscribingLabel); diff --git a/react/features/transcribing/components/TranscribingLabel.web.js b/react/features/transcribing/components/TranscribingLabel.web.js index b220827e1..7296f840f 100644 --- a/react/features/transcribing/components/TranscribingLabel.web.js +++ b/react/features/transcribing/components/TranscribingLabel.web.js @@ -1,30 +1,15 @@ // @flow -import React, { Component } from 'react'; -import { connect } from 'react-redux'; -import { translate } from '../../base/i18n/index'; - -import { CircularLabel } from '../../base/label/index'; import Tooltip from '@atlaskit/tooltip'; +import React, { Component } from 'react'; + +import { translate } from '../../base/i18n'; +import { CircularLabel } from '../../base/label'; + +import { type Props } from './AbstractTranscribingLabel'; /** - * The type of the React {@code Component} props of {@link TranscribingLabel}. - */ -type Props = { - - /** - * Invoked to obtain translated strings. - */ - t: Function, - - /** - * Boolean value indicating current transcribing status - */ - _transcribing: boolean -}; - -/** - * React Component for displaying a label when a transcriber is in the + * React {@code Component} for displaying a label when a transcriber is in the * conference. * * @extends Component @@ -38,10 +23,6 @@ class TranscribingLabel extends Component { * @returns {ReactElement} */ render() { - if (!this.props._transcribing) { - return null; - } - return ( { } -/** - * Maps (parts of) the Redux state to the associated props for the - * {@code TranscribingLabel} component. - * - * @param {Object} state - The Redux state. - * @private - * @returns {{ - * }} - */ -function _mapStateToProps(state) { - const { isTranscribing } = state['features/transcribing']; - - return { - _transcribing: isTranscribing - }; -} - -export default translate(connect(_mapStateToProps)(TranscribingLabel)); +export default translate(TranscribingLabel);