[RN] Adjust Conference for the reduced UI mode

This commit is contained in:
Saúl Ibarra Corretgé 2018-02-02 14:41:30 +01:00 committed by Lyubo Marinov
parent 10f72f8e40
commit 7a9ff9975a
4 changed files with 68 additions and 5 deletions

View File

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

View File

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

View File

@ -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;
});

View File

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