[RN] Adjust Conference for the reduced UI mode

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

@@ -66,6 +66,13 @@ type Props = {
      */
     _onHardwareBackPress: Function,
 
+    /**
+     * The indicator which determines if we are in reduced UI mode.
+     *
+     * @private
+     */
+    _reducedUI: boolean,
+
     /**
      * The handler which dispatches the (redux) action setToolboxVisible to
      * show/hide the Toolbox.
@@ -192,8 +199,9 @@ class Conference extends Component<Props> {
 
                 {/*
                   * If there is a ringing call, show the callee's info.
-                  */}
+                  */
-                <CalleeInfoContainer />
+                    !this.props._reducedUI && <CalleeInfoContainer />
+                }
 
                 {/*
                   * The activity/loading indicator goes above everything, except
@@ -223,8 +231,9 @@ class Conference extends Component<Props> {
 
                 {/*
                   * The dialogs are in the topmost stacking layers.
-                  */}
+                  */
-                <DialogContainer />
+                    !this.props._reducedUI && <DialogContainer />
+                }
             </Container>
         );
     }
@@ -367,6 +376,7 @@ function _mapDispatchToProps(dispatch) {
 function _mapStateToProps(state) {
     const { connecting, connection } = state['features/base/connection'];
     const { conference, joining, leaving } = state['features/base/conference'];
+    const { reducedUI } = state['features/base/responsive-ui'];
 
     // XXX There is a window of time between the successful establishment of the
     // XMPP connection and the subsequent commencement of joining the MUC during
@@ -392,6 +402,14 @@ function _mapStateToProps(state) {
          */
         _connecting: Boolean(connecting_),
 
+        /**
+         * The indicator which determines if we are in reduced UI mode.
+         *
+         * @private
+         * @type {boolean}
+         */
+        _reducedUI: reducedUI,
+
         /**
          * The indicator which determines whether the Toolbox is visible.
          *

react/features/conference/index.js

@@ -1,3 +1,5 @@
 import './route';
 
 export * from './components';
+
+import './middleware';

react/features/conference/middleware.js

@@ -0,0 +1,40 @@
+// @flow
+
+import {
+    CONFERENCE_JOINED,
+    VIDEO_QUALITY_LEVELS,
+    setReceiveVideoQuality
+} from '../base/conference';
+import { SET_REDUCED_UI } from '../base/responsive-ui';
+import { MiddlewareRegistry } from '../base/redux';
+import { setFilmstripEnabled } from '../filmstrip';
+import { setToolboxEnabled } from '../toolbox';
+
+MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
+    const result = next(action);
+
+    switch (action.type) {
+    case CONFERENCE_JOINED:
+    case SET_REDUCED_UI: {
+        const state = getState();
+        const { audioOnly } = state['features/base/conference'];
+        const { reducedUI } = state['features/base/responsive-ui'];
+
+        dispatch(setToolboxEnabled(!reducedUI));
+        dispatch(setFilmstripEnabled(!reducedUI));
+
+        // XXX: Currently setting the received video quality will disable
+        // audio-only mode if engaged, that's why we check for it here.
+        if (!audioOnly) {
+            dispatch(setReceiveVideoQuality(
+                    reducedUI
+                        ? VIDEO_QUALITY_LEVELS.LOW
+                        : VIDEO_QUALITY_LEVELS.HIGH));
+        }
+
+        break;
+    }
+    }
+
+    return result;
+});

react/features/mobile/full-screen/middleware.js

@@ -12,6 +12,7 @@ import {
 } from '../../base/conference';
 import { HIDE_DIALOG } from '../../base/dialog';
 import { Platform } from '../../base/react';
+import { SET_REDUCED_UI } from '../../base/responsive-ui';
 import { MiddlewareRegistry } from '../../base/redux';
 
 /**
@@ -34,7 +35,9 @@ MiddlewareRegistry.register(({ getState }) => next => action => {
     case APP_STATE_CHANGED:
     case CONFERENCE_WILL_JOIN:
     case HIDE_DIALOG:
-    case SET_AUDIO_ONLY: {
+    case SET_AUDIO_ONLY:
+    case SET_REDUCED_UI: {
+        // FIXME: Simplify this by listening to Immediate events.
         // Check if we just came back from the background and re-enable full
         // screen mode if necessary.
         const { appState } = action;