rn,toolbox: simplify logic for showing Toolbox on mobile

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

 
 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 {
 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,
      */
     _largeVideoParticipantId: string,
 
-    /**
-     * The number of participants in the conference.
-     *
-     * @private
-     */
-    _participantCount: number,
-
     /**
      * Whether Picture-in-Picture is enabled.
      *
      */
     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);
-        }
     }
 
     /**
         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
          */
         _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.
          *
          * @private
          * @type {boolean}
          */
-        _toolboxVisible: visible
+        _toolboxVisible: isToolboxVisible(state)
     };
 }
 

react/features/toolbox/functions.native.js

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