feat(transcriptions): add TranscribingLabel.native

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,11 +71,15 @@ export default class AbstractLabels<P: Props, S> extends Component<P, S> {
      * @returns {React$Element}
      */
     _renderTranscribingLabel() {
+        if (this.props._showTranscribingLabel) {
             return (
                 <TranscribingLabel />
             );
         }
 
+        return null;
+    }
+
     /**
      * Renders the {@code VideoQualityLabel} that is platform independent.
      *
@@ -92,12 +101,14 @@ 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/large-video/components/Labels.native.js

@@ -58,6 +58,9 @@ class Labels extends AbstractLabels<Props, *> {
                     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<Props, *> {
 
     _renderRecordingLabel: string => React$Element<*>;
 
+    _renderTranscribingLabel: () => React$Element<*>
+
     _renderVideoQualityLabel: () => React$Element<*>;
 }
 

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

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<Props> {
+
+    /**
+     * Renders the platform-specific label component.
+     *
+     * @inheritdoc
+     */
+    render() {
+        return (
+            <CircularLabel
+                label = { this.props.t('transcribing.tr') } />
+        );
+    }
+}
+
+export default translate(TranscribingLabel);

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<Props> {
      * @returns {ReactElement}
      */
     render() {
-        if (!this.props._transcribing) {
-            return null;
-        }
-
         return (
             <Tooltip
                 content = { this.props.t('transcribing.labelToolTip') }
@@ -55,21 +36,4 @@ class TranscribingLabel extends Component<Props> {
 
 }
 
-/**
- * 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);