diff --git a/react/features/app/components/App.native.js b/react/features/app/components/App.native.js
index d311fd93b1..ef793e93dc 100644
--- a/react/features/app/components/App.native.js
+++ b/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 (
- {super._createElement(component, props)}
- );
+ { super._createElement(component, props) }
+
+ );
}
/**
diff --git a/react/features/base/aspect-ratio/actionTypes.js b/react/features/base/aspect-ratio/actionTypes.js
index f634474f85..da7dabff65 100644
--- a/react/features/base/aspect-ratio/actionTypes.js
+++ b/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');
diff --git a/react/features/base/aspect-ratio/actions.js b/react/features/base/aspect-ratio/actions.js
index 6d95c87abe..a80018abf5 100644
--- a/react/features/base/aspect-ratio/actions.js
+++ b/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
};
}
diff --git a/react/features/base/aspect-ratio/components/AspectRatioAware.js b/react/features/base/aspect-ratio/components/AspectRatioAware.js
index a81d18e04d..8bf596c1c4 100644
--- a/react/features/base/aspect-ratio/components/AspectRatioAware.js
+++ b/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 aspectRation 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 {
diff --git a/react/features/base/aspect-ratio/components/AspectRatioDetector.native.js b/react/features/base/aspect-ratio/components/AspectRatioDetector.native.js
index f5f73b8659..c81fcd0e5a 100644
--- a/react/features/base/aspect-ratio/components/AspectRatioDetector.native.js
+++ b/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 (
- {this.props.children}
- );
+ style = { styles.aspectRatioDetector } >
+ { this.props.children }
+
+ );
}
}
@@ -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));
}
};
}
diff --git a/react/features/base/aspect-ratio/components/styles.js b/react/features/base/aspect-ratio/components/styles.js
index 199ef0aa3f..b377cbb1a1 100644
--- a/react/features/base/aspect-ratio/components/styles.js
+++ b/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
- })
+ }
});
diff --git a/react/features/base/aspect-ratio/constants.js b/react/features/base/aspect-ratio/constants.js
index 8930425002..59718bf6f5 100644
--- a/react/features/base/aspect-ratio/constants.js
+++ b/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}
*/
diff --git a/react/features/base/aspect-ratio/reducer.js b/react/features/base/aspect-ratio/reducer.js
index 440d5f130e..69cb4b2e8e 100644
--- a/react/features/base/aspect-ratio/reducer.js
+++ b/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;
+ });
diff --git a/react/features/conference/components/Conference.native.js b/react/features/conference/components/Conference.native.js
index 1b3645d2db..e0ba655e89 100644
--- a/react/features/conference/components/Conference.native.js
+++ b/react/features/conference/components/Conference.native.js
@@ -202,16 +202,15 @@ class Conference extends Component {
{/*
- * The Toolbox is in a stacking layer above the Filmstrip.
+ * The Toolbox is in a stacking layer bellow the Filmstrip.
*/}
{/*
- * 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.
*/}
diff --git a/react/features/conference/components/styles.js b/react/features/conference/components/styles.js
index d96c99eb56..87e7151d95 100644
--- a/react/features/conference/components/styles.js
+++ b/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
diff --git a/react/features/filmstrip/components/Filmstrip.native.js b/react/features/filmstrip/components/Filmstrip.native.js
index 60cce801a1..9913e1df2f 100644
--- a/react/features/filmstrip/components/Filmstrip.native.js
+++ b/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 (
+ visible = { this.props._visible }>
{
-
/* 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}
diff --git a/react/features/filmstrip/components/styles.js b/react/features/filmstrip/components/styles.js
index 832cdc8e53..5e6a1bb75d 100644
--- a/react/features/filmstrip/components/styles.js
+++ b/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',
diff --git a/react/features/toolbox/components/Toolbox.native.js b/react/features/toolbox/components/Toolbox.native.js
index 9add00e206..cefddda31e 100644
--- a/react/features/toolbox/components/Toolbox.native.js
+++ b/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 (
{ this._renderToolbars() }
@@ -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()
+ ];
}
-
}
/**
diff --git a/react/features/toolbox/components/styles.js b/react/features/toolbox/components/styles.js
index 5f239da500..06273f5580 100644
--- a/react/features/toolbox/components/styles.js
+++ b/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',