feat(RN-filmtrip) stop reordering small meetings

react/features/base/responsive-ui/actionTypes.ts

@@ -7,6 +7,16 @@
  */
 export const CLIENT_RESIZED = 'CLIENT_RESIZED';
 
+/**
+ * The type of (redux) action which indicates that the insets from the SafeAreaProvider have changed.
+ *
+ * {
+ *    type: SAFE_AREA_INSETS_CHANGED,
+ *    insets: Object
+ * }
+ */
+ export const SAFE_AREA_INSETS_CHANGED = 'SAFE_AREA_INSETS_CHANGED';
+
 /**
  * The type of (redux) action which sets the aspect ratio of the app's user
  * interface.

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

@@ -7,7 +7,13 @@ import { CHAT_SIZE } from '../../chat/constants';
 import { getParticipantsPaneOpen } from '../../participants-pane/functions';
 import theme from '../components/themes/participantsPaneTheme.json';
 
-import { CLIENT_RESIZED, SET_ASPECT_RATIO, SET_CONTEXT_MENU_OPEN, SET_REDUCED_UI } from './actionTypes';
+import {
+    CLIENT_RESIZED,
+    SAFE_AREA_INSETS_CHANGED,
+    SET_ASPECT_RATIO,
+    SET_CONTEXT_MENU_OPEN,
+    SET_REDUCED_UI
+} from './actionTypes';
 import { ASPECT_RATIO_NARROW, ASPECT_RATIO_WIDE } from './constants';
 
 /**
@@ -123,3 +129,19 @@ export function setParticipantContextMenuOpen(isOpen: boolean) {
         isOpen
     };
 }
+
+/**
+ * Sets the insets from the SafeAreaProvider.
+ *
+ * @param {Object} insets - The new insets to be set.
+ * @returns {{
+ *    type: SAFE_AREA_INSETS_CHANGED,
+ *    insets: Object
+ * }}
+ */
+export function setSafeAreaInsets(insets) {
+    return {
+        type: SAFE_AREA_INSETS_CHANGED,
+        insets
+    };
+}

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

@@ -1,8 +1,8 @@
 // @flow
 
-import React, { PureComponent } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';
-
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 type Props = {
 
@@ -11,6 +11,11 @@ type Props = {
      */
     onDimensionsChanged: Function,
 
+    /**
+     * The safe are insets handler.
+     */
+    onSafeAreaInsetsChanged: Function,
+
     /**
      * Any nested components.
      */
@@ -20,21 +25,23 @@ type Props = {
 /**
  * A {@link View} which captures the 'onLayout' event and calls a prop with the
  * component size.
+ *
+ * @param {Props} props - The read-only properties with which the new
+ * instance is to be initialized.
+ * @returns {Component} - Renders the root view and it's children.
  */
-export default class DimensionsDetector extends PureComponent<Props> {
-    /**
-     * Initializes a new DimensionsDetector instance.
-     *
-     * @param {Object} props - The read-only properties with which the new
-     * instance is to be initialized.
-     */
-    constructor(props: Object) {
-        super(props);
+export default function DimensionsDetector(props: Props) {
+    const { top = 0, right = 0, bottom = 0, left = 0 } = useSafeAreaInsets();
+    const { children, onDimensionsChanged, onSafeAreaInsetsChanged } = props;
 
-        this._onLayout = this._onLayout.bind(this);
-    }
-
-    _onLayout: (Object) => void;
+    useEffect(() => {
+        onSafeAreaInsetsChanged && onSafeAreaInsetsChanged({
+            top,
+            right,
+            bottom,
+            left
+        });
+    }, [ onSafeAreaInsetsChanged, top, right, bottom, left ]);
 
     /**
      * Handles the "on layout" View's event and calls the onDimensionsChanged
@@ -45,24 +52,15 @@ export default class DimensionsDetector extends PureComponent<Props> {
      * @private
      * @returns {void}
      */
-    _onLayout({ nativeEvent: { layout: { height, width } } }) {
-        const { onDimensionsChanged } = this.props;
-
+    const onLayout = useCallback(({ nativeEvent: { layout: { height, width } } }) => {
         onDimensionsChanged && onDimensionsChanged(width, height);
-    }
+    }, [ onDimensionsChanged ]);
 
-    /**
-     * Renders the root view and it's children.
-     *
-     * @returns {Component}
-     */
-    render() {
-        return (
-            <View
-                onLayout = { this._onLayout }
-                style = { StyleSheet.absoluteFillObject } >
-                { this.props.children }
-            </View>
-        );
-    }
+    return (
+        <View
+            onLayout = { onLayout }
+            style = { StyleSheet.absoluteFillObject } >
+            { children }
+        </View>
+    );
 }

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

@@ -2,7 +2,13 @@
 
 import { ReducerRegistry, set } from '../redux';
 
-import { CLIENT_RESIZED, SET_ASPECT_RATIO, SET_CONTEXT_MENU_OPEN, SET_REDUCED_UI } from './actionTypes';
+import {
+    CLIENT_RESIZED,
+    SAFE_AREA_INSETS_CHANGED,
+    SET_ASPECT_RATIO,
+    SET_CONTEXT_MENU_OPEN,
+    SET_REDUCED_UI
+} from './actionTypes';
 import { ASPECT_RATIO_NARROW } from './constants';
 
 const {
@@ -30,6 +36,13 @@ ReducerRegistry.register('features/base/responsive-ui', (state = DEFAULT_STATE,
             clientHeight: action.clientHeight
         };
     }
+
+    case SAFE_AREA_INSETS_CHANGED:
+        return {
+            ...state,
+            safeAreaInsets: action.insets
+        };
+
     case SET_ASPECT_RATIO:
         return set(state, 'aspectRatio', action.aspectRatio);