Turn TranscribingLabel a self-containing component

react/features/large-video/components/AbstractLabels.js

@@ -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 (
-            return (
+            <TranscribingLabel />
-                <TranscribingLabel />
+        );
-            );
-        }
-
-        return null;
     }
 
     /**
@@ -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)
     };
 }

react/features/transcribing/components/AbstractTranscribingLabel.js

@@ -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
+    };
+}

react/features/transcribing/components/TranscribingLabel.native.js

@@ -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));

react/features/transcribing/components/TranscribingLabel.web.js

@@ -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));