rn,toolbox: simplify logic for showing Toolbox on mobile

react/features/conference/components/native/Conference.js

@@ -6,7 +6,6 @@ import LinearGradient from 'react-native-linear-gradient';
 
 import { appNavigate } from '../../../app';
 import { PIP_ENABLED, getFeatureFlag } from '../../../base/flags';
-import { getParticipantCount } from '../../../base/participants';
 import { Container, LoadingIndicator, TintedView } from '../../../base/react';
 import { connect } from '../../../base/redux';
 import {
@@ -27,7 +26,7 @@ import { LargeVideo } from '../../../large-video';
 import { BackButtonRegistry } from '../../../mobile/back-button';
 import { AddPeopleDialog, CalleeInfoContainer } from '../../../invite';
 import { Captions } from '../../../subtitles';
-import { setToolboxVisible, Toolbox } from '../../../toolbox';
+import { isToolboxVisible, setToolboxVisible, Toolbox } from '../../../toolbox';
 
 import {
     AbstractConference,
@@ -73,13 +72,6 @@ type Props = AbstractProps & {
      */
     _largeVideoParticipantId: string,
 
-    /**
-     * The number of participants in the conference.
-     *
-     * @private
-     */
-    _participantCount: number,
-
     /**
      * Whether Picture-in-Picture is enabled.
      *
@@ -147,35 +139,6 @@ class Conference extends AbstractConference<Props, *> {
      */
     componentDidMount() {
         BackButtonRegistry.addListener(this._onHardwareBackPress);
-
-        // Show the toolbox if we are the only participant; otherwise, the whole
-        // UI looks too unpopulated the LargeVideo visible.
-        this.props._participantCount === 1 && this._setToolboxVisible(true);
-    }
-
-    /**
-     * Implements React's {@link Component#componentDidUpdate()}.
-     *
-     * @inheritdoc
-     */
-    componentDidUpdate(prevProps: Props) {
-        const {
-            _participantCount: oldParticipantCount
-        } = prevProps;
-        const {
-            _participantCount: newParticipantCount,
-            _toolboxVisible
-        } = this.props;
-
-        if (oldParticipantCount === 1
-                && newParticipantCount > 1
-                && _toolboxVisible) {
-            this._setToolboxVisible(false);
-        } else if (oldParticipantCount > 1
-                && newParticipantCount === 1
-                && !_toolboxVisible) {
-            this._setToolboxVisible(true);
-        }
     }
 
     /**
@@ -418,7 +381,6 @@ function _mapStateToProps(state) {
         leaving
     } = state['features/base/conference'];
     const { reducedUI } = state['features/base/responsive-ui'];
-    const { visible } = state['features/toolbox'];
 
     // XXX There is a window of time between the successful establishment of the
     // XMPP connection and the subsequent commencement of joining the MUC during
@@ -464,14 +426,6 @@ function _mapStateToProps(state) {
          */
         _largeVideoParticipantId: state['features/large-video'].participantId,
 
-        /**
-         * The number of participants in the conference.
-         *
-         * @private
-         * @type {number}
-         */
-        _participantCount: getParticipantCount(state),
-
         /**
          * Whether Picture-in-Picture is enabled.
          *
@@ -495,7 +449,7 @@ function _mapStateToProps(state) {
          * @private
          * @type {boolean}
          */
-        _toolboxVisible: visible
+        _toolboxVisible: isToolboxVisible(state)
     };
 }
 

react/features/toolbox/functions.native.js

@@ -10,8 +10,9 @@ import { toState } from '../base/redux';
  * @returns {boolean}
  */
 export function isToolboxVisible(stateful: Object | Function) {
-    const { alwaysVisible, enabled, visible }
-        = toState(stateful)['features/toolbox'];
+    const state = toState(stateful);
+    const { alwaysVisible, enabled, visible } = state['features/toolbox'];
+    const { length: participantCount } = state['features/base/participants'];
 
-    return enabled && (alwaysVisible || visible);
+    return enabled && (alwaysVisible || visible || participantCount === 1);
 }