Fix the (visual) style of toggle camera facing mode

react/features/toolbar/components/Toolbar.native.js

@@ -2,17 +2,11 @@ import React from 'react';
 import { View } from 'react-native';
 import { connect } from 'react-redux';
 
-import {
+import { MEDIA_TYPE, toggleCameraFacingMode } from '../../base/media';
-    MEDIA_TYPE,
-    toggleCameraFacingMode
-} from '../../base/media';
 import { Container } from '../../base/react';
 import { ColorPalette } from '../../base/styles';
 
-import {
+import { AbstractToolbar, mapStateToProps } from './AbstractToolbar';
-    AbstractToolbar,
-    mapStateToProps
-} from './AbstractToolbar';
 import { styles } from './styles';
 import ToolbarButton from './ToolbarButton';
 
@@ -50,50 +44,81 @@ class Toolbar extends AbstractToolbar {
      * @returns {ReactElement}
      */
     render() {
-        const audioButtonStyles = this._getMuteButtonStyles(MEDIA_TYPE.AUDIO);
-        const videoButtonStyles = this._getMuteButtonStyles(MEDIA_TYPE.VIDEO);
-        const underlayColor = ColorPalette.buttonUnderlay;
-
-        // TODO Use correct Jitsi icon for camera switch button when available.
-
-        /* eslint-disable react/jsx-handler-names */
-
         return (
             <Container
                 style = { styles.toolbarContainer }
                 visible = { this.props.visible }>
-
+                {
-                <View style = { styles.toggleCameraFacingModeContainer }>
+                    this._renderPrimaryToolbar()
-                    <ToolbarButton
+                }
-                        iconName = 'reload'
+                {
-                        iconstyle = { styles.whiteIcon }
+                    this._renderSecondaryToolbar()
-                        onClick = { this._toggleCameraFacingMode }
+                }
-                        style = { styles.toggleCameraFacingModeButton }
-                        underlayColor = 'transparent' />
-                </View>
-                <View style = { styles.toolbarButtonsContainer }>
-                    <ToolbarButton
-                        iconName = { audioButtonStyles.iconName }
-                        iconStyle = { audioButtonStyles.iconStyle }
-                        onClick = { this._toggleAudio }
-                        style = { audioButtonStyles.buttonStyle } />
-                    <ToolbarButton
-                        iconName = 'hangup'
-                        iconStyle = { styles.whiteIcon }
-                        onClick = { this._onHangup }
-                        style = {{
-                            ...styles.toolbarButton,
-                            backgroundColor: ColorPalette.red
-                        }}
-                        underlayColor = { underlayColor } />
-                    <ToolbarButton
-                        iconName = { videoButtonStyles.iconName }
-                        iconStyle = { videoButtonStyles.iconStyle }
-                        onClick = { this._toggleVideo }
-                        style = { videoButtonStyles.buttonStyle } />
-                </View>
             </Container>
         );
+    }
+
+    /**
+     * Renders the toolbar which contains the primary buttons such as hangup,
+     * audio and video mute.
+     *
+     * @private
+     * @returns {ReactElement}
+     */
+    _renderPrimaryToolbar() {
+        const audioButtonStyles = this._getMuteButtonStyles(MEDIA_TYPE.AUDIO);
+        const videoButtonStyles = this._getMuteButtonStyles(MEDIA_TYPE.VIDEO);
+
+        /* eslint-disable react/jsx-handler-names */
+
+        return (
+            <View style = { styles.primaryToolbar }>
+                <ToolbarButton
+                    iconName = { audioButtonStyles.iconName }
+                    iconStyle = { audioButtonStyles.iconStyle }
+                    onClick = { this._toggleAudio }
+                    style = { audioButtonStyles.buttonStyle } />
+                <ToolbarButton
+                    iconName = 'hangup'
+                    iconStyle = { styles.whiteIcon }
+                    onClick = { this._onHangup }
+                    style = {{
+                        ...styles.toolbarButton,
+                        backgroundColor: ColorPalette.red
+                    }}
+                    underlayColor = { ColorPalette.buttonUnderlay } />
+                <ToolbarButton
+                    iconName = { videoButtonStyles.iconName }
+                    iconStyle = { videoButtonStyles.iconStyle }
+                    onClick = { this._toggleVideo }
+                    style = { videoButtonStyles.buttonStyle } />
+            </View>
+        );
+
+        /* eslint-enable react/jsx-handler-names */
+    }
+
+    /**
+     * Renders the toolbar which contains the secondary buttons such as toggle
+     * camera facing mode.
+     *
+     * @private
+     * @returns {ReactElement}
+     */
+    _renderSecondaryToolbar() {
+        /* eslint-disable react/jsx-handler-names */
+
+        // TODO Use an appropriate icon for toggle camera facing mode.
+        return (
+            <View style = { styles.secondaryToolbar }>
+                <ToolbarButton
+                    iconName = 'reload'
+                    iconStyle = { styles.whiteIcon }
+                    onClick = { this._toggleCameraFacingMode }
+                    style = { styles.toggleCameraFacingModeButton }
+                    underlayColor = 'transparent' />
+            </View>
+        );
 
         /* eslint-enable react/jsx-handler-names */
     }

react/features/toolbar/components/styles.js

@@ -52,6 +52,27 @@ export const styles = createStyleSheet({
         color: ColorPalette.darkGrey
     },
 
+    /**
+     * The style of the toolbar which contains the primary buttons such as
+     * hangup, audio and video mute.
+     */
+    primaryToolbar: {
+        ...container,
+        bottom: 30,
+        height: 60,
+        justifyContent: 'center'
+    },
+
+    /**
+     * The style of the toolbar which contains the secondary buttons such as
+     * toggle camera facing mode.
+     */
+    secondaryToolbar: {
+        ...container,
+        height: 60,
+        justifyContent: 'flex-end'
+    },
+
     /**
      * The toggle camera facing mode button style.
      */
@@ -60,15 +81,6 @@ export const styles = createStyleSheet({
         backgroundColor: 'transparent'
     },
 
-    /**
-     * Container for toggle camera facing mode button.
-     */
-    toggleCameraFacingModeContainer: {
-        ...container,
-        height: 60,
-        justifyContent: 'flex-end'
-    },
-
     /**
      * The toolbar button style.
      */
@@ -80,16 +92,6 @@ export const styles = createStyleSheet({
         opacity: 0.8
     },
 
-    /**
-     * The toolbar buttons container style.
-     */
-    toolbarButtonsContainer: {
-        ...container,
-        bottom: 30,
-        height: 60,
-        justifyContent: 'center'
-    },
-
     /**
      * The toolbar container style.
      */