[RN] Show / hide the toolbox based on the participant count

Show it if we are the only participant, and hide it the moment someone else
joins the conference.

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

@@ -20,14 +20,6 @@ import { setToolboxVisible, Toolbox } from '../../toolbox';
 
 import styles from './styles';
 
-/**
- * The timeout in milliseconds after which the Toolbox will be hidden.
- *
- * @private
- * @type {number}
- */
-const _TOOLBOX_TIMEOUT_MS = 5000;
-
 /**
  * The type of the React {@code Component} props of {@link Conference}.
  */
@@ -68,6 +60,13 @@ type Props = {
      */
     _onHardwareBackPress: Function,
 
+    /**
+     * Number of participants in the conference.
+     *
+     * @private
+     */
+    _participantCount: number,
+
     /**
      * The indicator which determines whether the UI is reduced (to accommodate
      * smaller display areas).
@@ -98,8 +97,6 @@ type Props = {
 class Conference extends Component<Props> {
     _backHandler: ?BackHandler;
 
-    _toolboxTimeout: ?number;
-
     /**
      * Initializes a new Conference instance.
      *
@@ -109,15 +106,6 @@ class Conference extends Component<Props> {
     constructor(props) {
         super(props);
 
-        /**
-         * The numerical ID of the timeout in milliseconds after which the
-         * Toolbox will be hidden. To be used with
-         * {@link WindowTimers#clearTimeout()}.
-         *
-         * @private
-         */
-        this._toolboxTimeout = undefined;
-
         // Bind event handlers so they are only bound once per instance.
         this._onClick = this._onClick.bind(this);
         this._onHardwareBackPress = this._onHardwareBackPress.bind(this);
@@ -141,7 +129,12 @@ class Conference extends Component<Props> {
                 this._onHardwareBackPress);
         }
 
-        this._setToolboxTimeout(this.props._toolboxVisible);
+        // Show the toolbar if we are the only participant.
+        const { _participantCount, _setToolboxVisible } = this.props;
+
+        if (_participantCount === 1) {
+            _setToolboxVisible(true);
+        }
     }
 
     /**
@@ -156,6 +149,27 @@ class Conference extends Component<Props> {
         this.props._onConnect();
     }
 
+    /**
+     * Notifies this mounted React {@code Component} that it will receive new
+     * props. Check if we need to show / hide the toolbox based on the
+     * participant count.
+     *
+     * @inheritdoc
+     * @param {Object} nextProps - The read-only React {@code Component} props
+     * that this instance will receive.
+     * @returns {void}
+     */
+    componentWillReceiveProps(nextProps) {
+        const oldParticipantCount = this.props._participantCount;
+        const newParticipantCount = nextProps._participantCount;
+
+        if (oldParticipantCount === 1 && newParticipantCount > 1) {
+            this.props._setToolboxVisible(false);
+        } else if (oldParticipantCount > 1 && newParticipantCount === 1) {
+            this.props._setToolboxVisible(true);
+        }
+    }
+
     /**
      * Implements {@link Component#componentWillUnmount()}. Invoked immediately
      * before this component is unmounted and destroyed. Disconnects the
@@ -175,8 +189,6 @@ class Conference extends Component<Props> {
                 this._onHardwareBackPress);
         }
 
-        this._clearToolboxTimeout();
-
         this.props._onDisconnect();
     }
 
@@ -247,19 +259,6 @@ class Conference extends Component<Props> {
         );
     }
 
-    /**
-     * Clears {@link #_toolboxTimeout} if any.
-     *
-     * @private
-     * @returns {void}
-     */
-    _clearToolboxTimeout() {
-        if (this._toolboxTimeout) {
-            clearTimeout(this._toolboxTimeout);
-            this._toolboxTimeout = undefined;
-        }
-    }
-
     _onClick: () => void;
 
     /**
@@ -273,10 +272,6 @@ class Conference extends Component<Props> {
         const toolboxVisible = !this.props._toolboxVisible;
 
         this.props._setToolboxVisible(toolboxVisible);
-
-        // XXX If the user taps to toggle the visibility of the Toolbox, then no
-        // automatic toggling of the visibility should happen.
-        this._clearToolboxTimeout();
     }
 
     _onHardwareBackPress: () => boolean;
@@ -306,22 +301,6 @@ class Conference extends Component<Props> {
             ? <ConferenceNotification />
             : undefined;
     }
-
-    /**
-     * Triggers the default Toolbox timeout.
-     *
-     * @param {boolean} toolboxVisible - Indicates whether the Toolbox is
-     * currently visible.
-     * @private
-     * @returns {void}
-     */
-    _setToolboxTimeout(toolboxVisible) {
-        this._clearToolboxTimeout();
-        if (toolboxVisible) {
-            this._toolboxTimeout
-                = setTimeout(this._onClick, _TOOLBOX_TIMEOUT_MS);
-        }
-    }
 }
 
 /**
@@ -402,6 +381,7 @@ function _mapStateToProps(state) {
     const { connecting, connection } = state['features/base/connection'];
     const { conference, joining, leaving } = state['features/base/conference'];
     const { reducedUI } = state['features/base/responsive-ui'];
+    const participants = state['features/base/participants'];
 
     // XXX There is a window of time between the successful establishment of the
     // XMPP connection and the subsequent commencement of joining the MUC during
@@ -427,6 +407,14 @@ function _mapStateToProps(state) {
          */
         _connecting: Boolean(connecting_),
 
+        /**
+         * Number of participants in the conference.
+         *
+         * @private
+         * @type {number}
+         */
+        _participantCount: participants.length,
+
         /**
          * The indicator which determines whether the UI is reduced (to
          * accommodate smaller display areas).