Coding style: comments, sorting order

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

@@ -129,7 +129,8 @@ class Conference extends Component<Props> {
                 this._onHardwareBackPress);
         }
 
-        // Show the toolbox if we are the only participant.
+        // Show the toolbox if we are the only participant; otherwise, the whole
+        // UI looks too unpopulated the LargeVideo visible.
         const { _participantCount, _setToolboxVisible } = this.props;
 
         _participantCount === 1 && _setToolboxVisible(true);

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

@@ -22,7 +22,8 @@ import styles, {
 import VideoMuteButton from '../VideoMuteButton';
 
 /**
- * The number of buttons to render in {@link Toolbox}.
+ * The number of buttons other than {@link HangupButton} to render in
+ * {@link Toolbox}.
  *
  * @private
  * @type number
@@ -84,62 +85,6 @@ class Toolbox extends Component<Props, State> {
         this._onLayout = this._onLayout.bind(this);
     }
 
-    /**
-     * Renders the toolbar. It will only be rendered if the {@code Toolbox} is
-     * visible and we have already calculated the available width. This avoids
-     * a weird effect in which the toolbar is displayed and then changes size.
-     *
-     * @returns {ReactElement}
-     */
-    _renderToolbar() {
-        const { _visible } = this.props;
-        const { width } = this.state;
-
-        if (!_visible || !width) {
-            return null;
-        }
-
-        let buttonStyles = toolbarButtonStyles;
-        let toggledButtonStyles = toolbarToggledButtonStyles;
-
-        const buttonSize = this._calculateButtonSize();
-
-        if (buttonSize > 0) {
-            const extraButtonStyle = {
-                borderRadius: buttonSize / 2,
-                height: buttonSize,
-                width: buttonSize
-            };
-
-            buttonStyles = {
-                ...buttonStyles,
-                style: [ buttonStyles.style, extraButtonStyle ]
-            };
-            toggledButtonStyles = {
-                ...toggledButtonStyles,
-                style: [ toggledButtonStyles.style, extraButtonStyle ]
-            };
-        }
-
-        return (
-            <View
-                pointerEvents = 'box-none'
-                style = { styles.toolbar }>
-                <InviteButton styles = { buttonStyles } />
-                <AudioMuteButton
-                    styles = { buttonStyles }
-                    toggledStyles = { toggledButtonStyles } />
-                <HangupButton styles = { hangupButtonStyles } />
-                <VideoMuteButton
-                    styles = { buttonStyles }
-                    toggledStyles = { toggledButtonStyles } />
-                <OverflowMenuButton
-                    styles = { buttonStyles }
-                    toggledStyles = { toggledButtonStyles } />
-            </View>
-        );
-    }
-
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -151,13 +96,12 @@ class Toolbox extends Component<Props, State> {
             = isNarrowAspectRatio(this)
                 ? styles.toolboxNarrow
                 : styles.toolboxWide;
-        const { _visible } = this.props;
 
         return (
             <Container
                 onLayout = { this._onLayout }
                 style = { toolboxStyle }
-                visible = { _visible }>
+                visible = { this.props._visible }>
                 { this._renderToolbar() }
             </Container>
         );
@@ -173,22 +117,37 @@ class Toolbox extends Component<Props, State> {
      */
     _calculateButtonSize() {
         const { width } = this.state;
-        const hangupButtonSize = styles.hangupButton.width;
 
+        if (width <= 0) {
+            // We don't know how much space is allocated to the toolbar yet.
+            return width;
+        }
+
+        const hangupButtonSize = styles.hangupButton.width;
+        const { style } = toolbarButtonStyles;
         let buttonSize
             = (width
+
+                    // Account for HangupButton without its margin which is not
+                    // included in _BUTTON_COUNT:
                     - hangupButtonSize
-                    - (_BUTTON_COUNT
-                        * styles.toolbarButton.marginHorizontal * 2))
+
+                    // Account for the horizontal margins of all buttons:
+                    - ((_BUTTON_COUNT + 1) * style.marginHorizontal * 2))
                 / _BUTTON_COUNT;
 
-        // Make sure it's an even number.
-        buttonSize = 2 * Math.round(buttonSize / 2);
+        // Well, don't return a non-positive button size.
+        if (buttonSize <= 0) {
+            buttonSize = style.width;
+        }
+
+        // The button should be at most _BUTTON_SIZE_FACTOR of the hangup
+        // button's size.
+        buttonSize
+            = Math.min(buttonSize, hangupButtonSize * _BUTTON_SIZE_FACTOR);
 
-        // The button should be at most 80% of the hangup button's size.
-        return Math.min(
-            buttonSize,
-            hangupButtonSize * _BUTTON_SIZE_FACTOR);
+        // Make sure it's an even number.
+        return 2 * Math.round(buttonSize / 2);
     }
 
     _onLayout: (Object) => void;
@@ -204,6 +163,66 @@ class Toolbox extends Component<Props, State> {
     _onLayout({ nativeEvent: { layout: { width } } }) {
         this.setState({ width });
     }
+
+    /**
+     * Renders the toolbar. In order to avoid a weird visual effect in which the
+     * toolbar is (visually) rendered and then visibly changes its size, it is
+     * rendered only after we've figured out the width available to the toolbar.
+     *
+     * @returns {React$Node}
+     */
+    _renderToolbar() {
+        const buttonSize = this._calculateButtonSize();
+        let buttonStyles = toolbarButtonStyles;
+        let toggledButtonStyles = toolbarToggledButtonStyles;
+
+        if (buttonSize > 0) {
+            const extraButtonStyle = {
+                borderRadius: buttonSize / 2,
+                height: buttonSize,
+                width: buttonSize
+            };
+
+            // XXX The following width equality checks attempt to minimize
+            // unnecessary objects and possibly re-renders.
+            if (buttonStyles.style.width !== extraButtonStyle.width) {
+                buttonStyles = {
+                    ...buttonStyles,
+                    style: [ buttonStyles.style, extraButtonStyle ]
+                };
+            }
+            if (toggledButtonStyles.style.width !== extraButtonStyle.width) {
+                toggledButtonStyles = {
+                    ...toggledButtonStyles,
+                    style: [ toggledButtonStyles.style, extraButtonStyle ]
+                };
+            }
+        } else {
+            // XXX In order to avoid a weird visual effect in which the toolbar
+            // is (visually) rendered and then visibly changes its size, it is
+            // rendered only after we've figured out the width available to the
+            // toolbar.
+            return null;
+        }
+
+        return (
+            <View
+                pointerEvents = 'box-none'
+                style = { styles.toolbar }>
+                <InviteButton styles = { buttonStyles } />
+                <AudioMuteButton
+                    styles = { buttonStyles }
+                    toggledStyles = { toggledButtonStyles } />
+                <HangupButton styles = { hangupButtonStyles } />
+                <VideoMuteButton
+                    styles = { buttonStyles }
+                    toggledStyles = { toggledButtonStyles } />
+                <OverflowMenuButton
+                    styles = { buttonStyles }
+                    toggledStyles = { toggledButtonStyles } />
+            </View>
+        );
+    }
 }
 
 /**

react/features/toolbox/components/native/styles.js

@@ -15,6 +15,9 @@ const toolbarButton = {
     flexDirection: 'row',
     height: 40,
     justifyContent: 'center',
+
+    // XXX We probably tested BoxModel.margin and discovered it to be too small
+    // for our taste.
     marginHorizontal: 7,
     opacity: 0.7,
     width: 40
@@ -181,7 +184,7 @@ const overflowMenuStyles = createStyleSheet({
         flex: 1,
         fontSize: 16,
         marginLeft: 32,
-        opacity: 0.87
+        opacity: 0.90
     }
 });