rn,responsive-ui: refactor dimensions detection

Use a dimensions detecting root component. The Dimensions module does not
measure the app's view size, but the Window, which may not be the same, for
example on iOS when PiP is used.

Also refactor the aspect ratio wrap component since it can be taken directly
from the store.

Last, remove the use of DimensionsDetector on LargeVideo and TileView since they
occupy the full-screen anyway.

Fixes PiP mode on iOS.

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

@@ -9,7 +9,7 @@ import { DialogContainer } from '../../base/dialog';
 import { CALL_INTEGRATION_ENABLED, updateFlags } from '../../base/flags';
 import '../../base/jwt';
 import { Platform } from '../../base/react';
-import '../../base/responsive-ui';
+import { DimensionsDetector, clientResized } from '../../base/responsive-ui';
 import { updateSettings } from '../../base/settings';
 import '../../google-api';
 import '../../mobile/audio-mode';
@@ -78,6 +78,9 @@ export class App extends AbstractApp {
         // This will effectively kill the app. In accord with the Web, do not
         // kill the app.
         this._maybeDisableExceptionsManager();
+
+        // Bind event handler so it is only bound once per instance.
+        this._onDimensionsChanged = this._onDimensionsChanged.bind(this);
     }
 
     /**
@@ -107,6 +110,21 @@ export class App extends AbstractApp {
         });
     }
 
+    /**
+     * Overrides the parent method to inject {@link DimensionsDetector} as
+     * the top most component.
+     *
+     * @override
+     */
+    _createMainElement(component, props) {
+        return (
+            <DimensionsDetector
+                onDimensionsChanged = { this._onDimensionsChanged }>
+                { super._createMainElement(component, props) }
+            </DimensionsDetector>
+        );
+    }
+
     /**
      * Attempts to disable the use of React Native
      * {@link ExceptionsManager#handleException} on platforms and in
@@ -144,6 +162,22 @@ export class App extends AbstractApp {
         }
     }
 
+    _onDimensionsChanged: (width: number, height: number) => void;
+
+    /**
+     * Updates the known available size for the app to occupy.
+     *
+     * @param {number} width - The component's current width.
+     * @param {number} height - The component's current height.
+     * @private
+     * @returns {void}
+     */
+    _onDimensionsChanged(width: number, height: number) {
+        const { dispatch } = this.state.store;
+
+        dispatch(clientResized(width, height));
+    }
+
     /**
      * Renders the platform specific dialog container.
      *

react/features/base/responsive-ui/components/DimensionsDetector.native.js

@@ -1,13 +1,9 @@
 // @flow
 
 import React, { PureComponent } from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
-import styles from './styles';
 
-/**
- * AspectRatioDetector component's property types.
- */
 type Props = {
 
     /**
@@ -64,7 +60,7 @@ export default class DimensionsDetector extends PureComponent<Props> {
         return (
             <View
                 onLayout = { this._onLayout }
-                style = { styles.dimensionsDetector } >
+                style = { StyleSheet.absoluteFillObject } >
                 { this.props.children }
             </View>
         );

react/features/base/responsive-ui/components/index.js

@@ -1,2 +1 @@
-export * from './AspectRatioAware';
 export { default as DimensionsDetector } from './DimensionsDetector';

react/features/base/responsive-ui/middleware.native.js

@@ -1,16 +1,10 @@
 // @flow
 
-import { Dimensions } from 'react-native';
-
-import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../../base/app';
 import { MiddlewareRegistry } from '../../base/redux';
 
+import { CLIENT_RESIZED } from './actionTypes';
 import { setAspectRatio, setReducedUI } from './actions';
 
-/**
- * Dimensions change handler.
- */
-let handler;
 
 /**
  * Middleware that handles widnow dimension changes and updates the aspect ratio and
@@ -19,65 +13,19 @@ let handler;
  * @param {Store} store - The redux store.
  * @returns {Function}
  */
-MiddlewareRegistry.register(store => next => action => {
+MiddlewareRegistry.register(({ dispatch }) => next => action => {
     const result = next(action);
 
     switch (action.type) {
-    case APP_WILL_UNMOUNT: {
-        _appWillUnmount();
+    case CLIENT_RESIZED: {
+        const { clientWidth: width, clientHeight: height } = action;
+
+        dispatch(setAspectRatio(width, height));
+        dispatch(setReducedUI(width, height));
         break;
     }
-    case APP_WILL_MOUNT:
-        _appWillMount(store);
-        break;
 
     }
 
     return result;
 });
-
-/**
- * Notifies this feature that the action {@link APP_WILL_MOUNT} is being
- * dispatched within a specific redux {@code store}.
- *
- * @param {Store} store - The redux store in which the specified {@code action}
- * is being dispatched.
- * @private
- * @returns {void}
- */
-function _appWillMount(store) {
-    handler = dim => {
-        _onDimensionsChange(dim, store);
-    };
-
-    Dimensions.addEventListener('change', handler);
-}
-
-/**
- * Notifies this feature that the action {@link APP_WILL_UNMOUNT} is being
- * dispatched within a specific redux {@code store}.
- *
- * @private
- * @returns {void}
- */
-function _appWillUnmount() {
-    Dimensions.removeEventListener('change', handler);
-
-    handler = undefined;
-}
-
-/**
- * Handles window dimension changes.
- *
- * @param {Object} dimensions - The new dimensions.
- * @param {Store} store - The redux store.
- * @private
- * @returns {void}
- */
-function _onDimensionsChange(dimensions, store) {
-    const { width, height } = dimensions.window;
-    const { dispatch } = store;
-
-    dispatch(setAspectRatio(width, height));
-    dispatch(setReducedUI(width, height));
-}

react/features/base/responsive-ui/reducer.js

@@ -23,7 +23,6 @@ const DEFAULT_STATE = {
 ReducerRegistry.register('features/base/responsive-ui', (state = DEFAULT_STATE, action) => {
     switch (action.type) {
     case CLIENT_RESIZED: {
-
         return {
             ...state,
             clientWidth: action.clientWidth,