fix(RN): show the CC button only when transcribing is available

react/features/subtitles/components/AbstractClosedCaptionButton.js

@@ -74,15 +74,24 @@ export class AbstractClosedCaptionButton
  * {@code AbstractClosedCaptionButton} component.
  *
  * @param {Object} state - The redux state.
+ * @param {Object} ownProps - The properties explicitly passed to the component
+ * instance.
  * @private
  * @returns {{
- *     __requestingSubtitles: boolean
+ *     _requestingSubtitles: boolean,
+ *     visible: boolean
  * }}
  */
-export function _abstractMapStateToProps(state: Object) {
+export function _abstractMapStateToProps(state: Object, ownProps: Object) {
     const { _requestingSubtitles } = state['features/subtitles'];
+    const { transcribingEnabled } = state['features/base/config'];
+
+    // Default 'visible' to 'transcribingEnabled' if not explicitly specified
+    // in the component's properties.
+    const { visible = transcribingEnabled } = ownProps;
 
     return {
-        _requestingSubtitles
+        _requestingSubtitles,
+        visible
     };
 }

react/features/toolbox/components/web/Toolbox.js

@@ -157,17 +157,11 @@ type Props = {
      */
     _sharingVideo: boolean,
 
-    /**
-     * Whether or not transcribing is enabled.
-     */
-    _transcribingEnabled: boolean,
-
     /**
      * Flag showing whether toolbar is visible.
      */
     _visible: boolean,
 
-
     /**
      * Set with the buttons which this Toolbox should display.
      */
@@ -323,7 +317,6 @@ class Toolbox extends Component<Props> {
             _chatOpen,
             _hideInviteButton,
             _overflowMenuVisible,
-            _transcribingEnabled,
             _raisedHand,
             _visible,
             _visibleButtons,
@@ -367,9 +360,8 @@ class Toolbox extends Component<Props> {
                             <ChatCounter />
                         </div> }
                     {
-                        _transcribingEnabled
-                        && this._shouldShowButton('closedcaptions')
-                        && <ClosedCaptionButton />
+                        this._shouldShowButton('closedcaptions')
+                            && <ClosedCaptionButton />
                     }
                 </div>
                 <div className = 'button-group-center'>
@@ -1039,9 +1031,6 @@ function _mapStateToProps(state) {
         callStatsID,
         iAmRecorder
     } = state['features/base/config'];
-    const {
-        transcribingEnabled
-    } = state['features/base/config'];
     const sharedVideoStatus = state['features/shared-video'].status;
     const { current } = state['features/side-panel'];
     const {
@@ -1094,7 +1083,6 @@ function _mapStateToProps(state) {
         _overflowMenuVisible: overflowMenuVisible,
         _raisedHand: localParticipant.raisedHand,
         _screensharing: localVideo && localVideo.videoType === 'desktop',
-        _transcribingEnabled: transcribingEnabled,
         _sharingVideo: sharedVideoStatus === 'playing'
             || sharedVideoStatus === 'start'
             || sharedVideoStatus === 'pause',