Coding style

react/features/app/components/App.native.js

@@ -89,16 +89,17 @@ export class App extends AbstractApp {
     }
 
     /**
-     * Overrides the super method to inject {@link AspectRatioDetector} as
-     * the top most component.
+     * Injects {@link AspectRatioDetector} in order to detect the aspect ratio
+     * of this {@code App}'s user interface and afford {@link AspectRatioAware}.
      *
      * @override
      */
     _createElement(component, props) {
         return (
             <AspectRatioDetector>
-                {super._createElement(component, props)}
-            </AspectRatioDetector>);
+                { super._createElement(component, props) }
+            </AspectRatioDetector>
+        );
     }
 
     /**

react/features/base/aspect-ratio/actionTypes.js

@@ -1,9 +1,10 @@
 /**
- * The type of (redux) action which signals that a new aspect ratio has been
- * detected by the app.
+ * The type of (redux) action which sets the aspect ratio of the app's user
+ * interface.
+ *
  * {
- *      type: SET_ASPECT_RATIO,
- *      aspectRatio: Symbol
+ *     type: SET_ASPECT_RATIO,
+ *     aspectRatio: Symbol
  * }
  */
 export const SET_ASPECT_RATIO = Symbol('SET_ASPECT_RATIO');

react/features/base/aspect-ratio/actions.js

@@ -1,22 +1,22 @@
-/* @flow */
+// @flow
 
 import { SET_ASPECT_RATIO } from './actionTypes';
 import { ASPECT_RATIO_NARROW, ASPECT_RATIO_WIDE } from './constants';
 
 /**
- * Calculates new aspect ratio for the app based on provided width and height
- * values.
+ * Sets the aspect ratio of the app's user interface based on specific width and
+ * height.
  *
- * @param {number} width - The width of the app's area used on the screen.
- * @param {number} height - The height of the app's area used on the screen.
+ * @param {number} width - The width of the app's user interface.
+ * @param {number} height - The height of the app's user interface.
  * @returns {{
  *      type: SET_ASPECT_RATIO,
  *      aspectRatio: Symbol
  * }}
  */
-export function calculateNewAspectRatio(width: number, height: number): Object {
+export function setAspectRatio(width: number, height: number): Object {
     return {
         type: SET_ASPECT_RATIO,
-        aspectRatio: width > height ? ASPECT_RATIO_WIDE : ASPECT_RATIO_NARROW
+        aspectRatio: width < height ? ASPECT_RATIO_NARROW : ASPECT_RATIO_WIDE
     };
 }

react/features/base/aspect-ratio/components/AspectRatioAware.js

@@ -7,12 +7,12 @@ import { connect } from 'react-redux';
 import { ASPECT_RATIO_NARROW, ASPECT_RATIO_WIDE } from '../constants';
 
 /**
- * Checks if given React component decorated in {@link AspectRatioAwareWrapper}
- * has currently the {@link ASPECT_RATIO_NARROW} set in the aspect ratio
- * property.
+ * Determines whether a specific React {@code Component} decorated into an
+ * {@link AspectRatioAware} has {@link ASPECT_RATIO_NARROW} as the value of its
+ * {@code aspectRatio} React prop.
  *
- * @param {AspectRatioAwareWrapper} component - A
- * {@link AspectRatioAwareWrapper} which has <tt>aspectRation</tt> property.
+ * @param {AspectRatioAware} component - An {@link AspectRatioAware} which may
+ * have an {@code aspectRatio} React prop.
  * @returns {boolean}
  */
 export function isNarrowAspectRatio(component: React$Component<*>) {
@@ -62,13 +62,13 @@ export function makeAspectRatioAware(
 }
 
 /**
- * Maps Redux state to {@link AspectRatioAwareWrapper} properties.
+ * Maps (parts of) the redux state to {@link AspectRatioAware} props.
  *
- * @param {Object} state - The Redux whole state.
+ * @param {Object} state - The whole redux state.
+ * @private
  * @returns {{
  *      aspectRatio: Symbol
  * }}
- * @private
  */
 function _mapStateToProps(state) {
     return {

react/features/base/aspect-ratio/components/AspectRatioDetector.native.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { View } from 'react-native';
 import { connect } from 'react-redux';
 
-import { calculateNewAspectRatio } from '../actions';
+import { setAspectRatio } from '../actions';
 import styles from './styles';
 
 /**
@@ -25,7 +25,7 @@ class AspectRatioDetector extends Component {
         /**
          * Any nested components.
          */
-        children: PropTypes.object
+        children: PropTypes.node
     };
 
     /**
@@ -37,9 +37,10 @@ class AspectRatioDetector extends Component {
         return (
             <View
                 onLayout = { this.props._onLayout }
-                style = { styles.aspectRatioDetectorStyle } >
-                {this.props.children}
-            </View>);
+                style = { styles.aspectRatioDetector } >
+                { this.props.children }
+            </View>
+        );
     }
 }
 
@@ -58,15 +59,13 @@ function _mapDispatchToProps(dispatch) {
          * Handles the "on layout" View's event and dispatches aspect ratio
          * changed action.
          *
-         * @param {{ width: number, height: number }} event - The "on layout"
-         * event structure passed by react-native.
-         * @returns {void}
+         * @param {Object} event - The "on layout" event object/structure passed
+         * by react-native.
          * @private
+         * @returns {void}
          */
-        _onLayout(event) {
-            const { width, height } = event.nativeEvent.layout;
-
-            dispatch(calculateNewAspectRatio(width, height));
+        _onLayout({ nativeEvent: { layout: { height, width } } }) {
+            dispatch(setAspectRatio(width, height));
         }
     };
 }

react/features/base/aspect-ratio/components/styles.js

@@ -1,14 +1,14 @@
-import { createStyleSheet, fixAndroidViewClipping } from '../../styles/index';
+import { createStyleSheet } from '../../styles';
 
 /**
- * The styles of the feature app.
+ * The styles of the feature base/aspect-ratio.
  */
 export default createStyleSheet({
     /**
-     * The style for {@link AspectRatioDetector} root view used on react-native.
+     * The style of {@link AspectRatioDetector} used on react-native.
      */
-    aspectRatioDetectorStyle: fixAndroidViewClipping({
+    aspectRatioDetector: {
         alignSelf: 'stretch',
         flex: 1
-    })
+    }
 });

react/features/base/aspect-ratio/constants.js

@@ -1,14 +1,14 @@
 /**
- * The aspect ratio constant indicates that the app area's width is smaller than
- * the height.
+ * The aspect ratio constant which indicates that the width (of whatever the
+ * aspect ratio constant is used for) is smaller than the height.
  *
  * @type {Symbol}
  */
 export const ASPECT_RATIO_NARROW = Symbol('ASPECT_RATIO_NARROW');
 
 /**
- * Aspect ratio constant indicates that the app area's width is larger than
- * the height.
+ * The aspect ratio constant which indicates that the width (of whatever the
+ * aspect ratio constant is used for) is larger than the height.
  *
  * @type {Symbol}
  */

react/features/base/aspect-ratio/reducer.js

@@ -3,17 +3,20 @@ import { ReducerRegistry, set } from '../redux';
 import { SET_ASPECT_RATIO } from './actionTypes';
 import { ASPECT_RATIO_NARROW } from './constants';
 
-const INITIAL_STATE = {
+/**
+ * The initial redux state of the feature base/aspect-ratio.
+ */
+const _INITIAL_STATE = {
     aspectRatio: ASPECT_RATIO_NARROW
 };
 
 ReducerRegistry.register(
-'features/base/aspect-ratio',
-(state = INITIAL_STATE, action) => {
-    switch (action.type) {
-    case SET_ASPECT_RATIO:
-        return set(state, 'aspectRatio', action.aspectRatio);
-    }
+    'features/base/aspect-ratio',
+    (state = _INITIAL_STATE, action) => {
+        switch (action.type) {
+        case SET_ASPECT_RATIO:
+            return set(state, 'aspectRatio', action.aspectRatio);
+        }
 
-    return state;
-});
+        return state;
+    });

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

@@ -202,16 +202,15 @@ class Conference extends Component {
 
                 <View style = { styles.toolboxAndFilmstripContainer } >
                     {/*
-                      * The Toolbox is in a stacking layer above the Filmstrip.
+                      * The Toolbox is in a stacking layer bellow the Filmstrip.
                       */}
                     <Toolbox />
                     {/*
-                      * The Filmstrip is in a stacking layer above
-                      * the LargeVideo.
-                      * The LargeVideo and the Filmstrip form what the Web/React
-                      * app calls "videospace". Presumably, the name and
-                      * grouping stem from the fact that these two React
-                      * Components depict the videos of the conference's
+                      * The Filmstrip is in a stacking layer above the
+                      * LargeVideo. The LargeVideo and the Filmstrip form what
+                      * the Web/React app calls "videospace". Presumably, the
+                      * name and grouping stem from the fact that these two
+                      * React Components depict the videos of the conference's
                       * participants.
                       */}
                     <Filmstrip />

react/features/conference/components/styles.js

@@ -47,8 +47,8 @@ export default createStyleSheet({
     toolboxAndFilmstripContainer: {
         bottom: 0,
         flexDirection: 'column',
-        left: 0,
         justifyContent: 'flex-end',
+        left: 0,
         position: 'absolute',
         right: 0,
         top: 0

react/features/filmstrip/components/Filmstrip.native.js

@@ -51,20 +51,21 @@ class Filmstrip extends Component<*> {
      * @returns {ReactElement}
      */
     render() {
+        const isNarrowAspectRatio_ = isNarrowAspectRatio(this);
         const filmstripStyle
-            = isNarrowAspectRatio(this)
-                ? styles.filmstripNarrow : styles.filmstripWide;
+            = isNarrowAspectRatio_
+                ? styles.filmstripNarrow
+                : styles.filmstripWide;
 
         return (
             <Container
                 style = { filmstripStyle }
-                visible = { this.props._visible } >
+                visible = { this.props._visible }>
                 <ScrollView
-                    horizontal = { isNarrowAspectRatio(this) }
+                    horizontal = { isNarrowAspectRatio_ }
                     showsHorizontalScrollIndicator = { false }
                     showsVerticalScrollIndicator = { false }>
                     {
-
                         /* eslint-disable react/jsx-wrap-multilines */
 
                         this._sort(this.props._participants)
@@ -138,11 +139,9 @@ function _mapStateToProps(state) {
         _participants: participants,
 
         /**
-         * The indicator which determines whether the filmstrip is visible.
-         *
-         * XXX The React Component Filmstrip is used on mobile only at the time
-         * of this writing and on mobile the filmstrip is when there are at
-         * least 2 participants in the conference (including the local one).
+         * The indicator which determines whether the filmstrip is visible. The
+         * mobile/react-native Filmstrip is visible when there are at least 2
+         * participants in the conference (including the local one).
          *
          * @private
          * @type {boolean}

react/features/filmstrip/components/styles.js

@@ -2,11 +2,11 @@ import { Platform } from '../../base/react';
 import { BoxModel, ColorPalette } from '../../base/styles';
 
 /**
- * The base filmstrip style shared between narrow and wide versions.
+ * The base style of {@link Filmstrip} shared between narrow and wide versions.
  */
-const filmstripBaseStyle = {
-    flexGrow: 0,
-    flexDirection: 'column'
+const filmstrip = {
+    flexDirection: 'column',
+    flexGrow: 0
 };
 
 /**
@@ -48,11 +48,11 @@ export default {
     },
 
     /**
-     * The style of the narrow filmstrip version which displays thumbnails
-     * in a row at the bottom of the screen.
+     * The style of the narrow {@link Filmstrip} version which displays
+     * thumbnails in a row at the bottom of the screen.
      */
     filmstripNarrow: {
-        ...filmstripBaseStyle,
+        ...filmstrip,
         alignItems: 'flex-end',
         height: 90,
         marginBottom: BoxModel.margin,
@@ -61,11 +61,11 @@ export default {
     },
 
     /**
-     * The style of the wide version of the filmstrip which appears as a column
-     * on the short side of the screen.
+     * The style of the wide {@link Filmstrip} version which displays thumbnails
+     * in a column on the short size of the screen.
      */
     filmstripWide: {
-        ...filmstripBaseStyle,
+        ...filmstrip,
         bottom: BoxModel.margin,
         left: BoxModel.margin,
         position: 'absolute',

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

@@ -123,12 +123,14 @@ class Toolbox extends Component {
      * @returns {ReactElement}
      */
     render() {
+        const toolboxStyle
+            = isNarrowAspectRatio(this)
+                ? styles.toolboxNarrow
+                : styles.toolboxWide;
+
         return (
             <Container
-                style = {
-                    isNarrowAspectRatio(this)
-                        ? styles.toolbarContainerNarrow
-                        : styles.toolbarContainerWide }
+                style = { toolboxStyle }
                 visible = { this.props._visible } >
                 { this._renderToolbars() }
             </Container>
@@ -311,23 +313,17 @@ class Toolbox extends Component {
     }
 
     /**
-     * Renders the primary and the secondary toolbars in the order depending on
-     * the current aspect ratio.
+     * Renders the primary and the secondary toolbars.
      *
-     * @returns {[ReactElement, ReactElement]}
      * @private
+     * @returns {[ReactElement, ReactElement]}
      */
     _renderToolbars() {
-        if (isNarrowAspectRatio(this)) {
-            return [
-                this._renderSecondaryToolbar(),
-                this._renderPrimaryToolbar()
-            ];
-        }
-
-        return [ this._renderPrimaryToolbar(), this._renderSecondaryToolbar() ];
+        return [
+            this._renderSecondaryToolbar(),
+            this._renderPrimaryToolbar()
+        ];
     }
-
 }
 
 /**

react/features/toolbox/components/styles.js

@@ -139,19 +139,19 @@ export default createStyleSheet({
      * spans from the top of the screen to the top of the filmstrip located at
      * the bottom of the screen.
      */
-    toolbarContainerNarrow: {
+    toolboxNarrow: {
         flexDirection: 'column',
         flexGrow: 1
     },
 
     /**
      * The style of the root/top-level {@link Container} of {@link Toolbox}
-     * which contains {@link Toolbar}s. This is wide layout version which
-     * spans from the top to the bottom of the screen and is located to
-     * the right of the filmstrip which is displayed as a column on the left
-     * side of the screen.
+     * which contains {@link Toolbar}s. This is wide layout version which spans
+     * from the top to the bottom of the screen and is located to the right of
+     * the filmstrip which is displayed as a column on the left side of the
+     * screen.
      */
-    toolbarContainerWide: {
+    toolboxWide: {
         bottom: 0,
         left: 0,
         position: 'absolute',