Turn TranscribingLabel a self-containing component

This commit is contained in:
Bettenbuk Zoltan 2018-09-12 17:10:12 +02:00 committed by Saúl Ibarra Corretgé
parent dc90800e50
commit d604cdfe27
4 changed files with 38 additions and 18 deletions

View File

@ -20,11 +20,6 @@ export type Props = {
*/
_filmstripVisible: boolean,
/**
* Whether the video quality label should be displayed.
*/
_showTranscribingLabel: boolean,
/**
* Whether the video quality label should be displayed.
*/
@ -71,13 +66,9 @@ export default class AbstractLabels<P: Props, S> extends Component<P, S> {
* @returns {React$Element}
*/
_renderTranscribingLabel() {
if (this.props._showTranscribingLabel) {
return (
<TranscribingLabel />
);
}
return null;
return (
<TranscribingLabel />
);
}
/**
@ -101,14 +92,12 @@ export default class AbstractLabels<P: Props, S> extends Component<P, S> {
* @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)
};
}

View File

@ -5,8 +5,29 @@
*/
export type Props = {
/**
* True if the label needs to be rendered, false otherwise.
*/
_showLabel: boolean,
/**
* Invoked to obtain translated strings.
*/
t: Function
};
/**
* Maps (parts of) the redux state to the associated props of the
* {@link AbstractTranscribingLabel} {@code Component}.
*
* @param {Object} state - The redux state.
* @private
* @returns {{
* _showLabel: boolean
* }}
*/
export function _mapStateToProps(state: Object) {
return {
_showLabel: state['features/transcribing'].isTranscribing
};
}

View File

@ -1,11 +1,12 @@
// @flow
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { translate } from '../../base/i18n';
import { CircularLabel } from '../../base/label';
import { type Props } from './AbstractTranscribingLabel';
import { _mapStateToProps, type Props } from './AbstractTranscribingLabel';
/**
* React {@code Component} for displaying a label when a transcriber is in the
@ -21,6 +22,10 @@ class TranscribingLabel extends Component<Props> {
* @inheritdoc
*/
render() {
if (!this.props._showLabel) {
return null;
}
return (
<CircularLabel
label = { this.props.t('transcribing.tr') } />
@ -28,4 +33,4 @@ class TranscribingLabel extends Component<Props> {
}
}
export default translate(TranscribingLabel);
export default translate(connect(_mapStateToProps)(TranscribingLabel));

View File

@ -2,11 +2,12 @@
import Tooltip from '@atlaskit/tooltip';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { translate } from '../../base/i18n';
import { CircularLabel } from '../../base/label';
import { type Props } from './AbstractTranscribingLabel';
import { _mapStateToProps, type Props } from './AbstractTranscribingLabel';
/**
* React {@code Component} for displaying a label when a transcriber is in the
@ -23,6 +24,10 @@ class TranscribingLabel extends Component<Props> {
* @returns {ReactElement}
*/
render() {
if (!this.props._showLabel) {
return null;
}
return (
<Tooltip
content = { this.props.t('transcribing.labelToolTip') }
@ -36,4 +41,4 @@ class TranscribingLabel extends Component<Props> {
}
export default translate(TranscribingLabel);
export default translate(connect(_mapStateToProps)(TranscribingLabel));