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

150 lines
4.6 KiB
JavaScript

// @flow
import { StatusBar } from 'react-native';
import { Immersive } from 'react-native-immersive';
import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../../app';
import {
CONFERENCE_FAILED,
CONFERENCE_JOINED,
CONFERENCE_LEFT,
CONFERENCE_WILL_JOIN,
SET_AUDIO_ONLY
} from '../../base/conference';
import { Platform } from '../../base/react';
import { MiddlewareRegistry } from '../../base/redux';
import { _setImmersiveListener as _setImmersiveListenerA } from './actions';
import { _SET_IMMERSIVE_LISTENER } from './actionTypes';
/**
* Middleware that captures conference actions and activates or deactivates the
* full screen mode. On iOS it hides the status bar, and on Android it uses the
* immersive mode:
* https://developer.android.com/training/system-ui/immersive.html
* In immersive mode the status and navigation bars are hidden and thus the
* entire screen will be covered by our application.
*
* @param {Store} store - The redux store.
* @returns {Function}
*/
MiddlewareRegistry.register(store => next => action => {
switch (action.type) {
case _SET_IMMERSIVE_LISTENER:
return _setImmersiveListenerF(store, next, action);
case APP_WILL_MOUNT: {
const result = next(action);
store.dispatch(
_setImmersiveListenerA(_onImmersiveChange.bind(undefined, store)));
return result;
}
case APP_WILL_UNMOUNT:
store.dispatch(_setImmersiveListenerA(undefined));
break;
case CONFERENCE_WILL_JOIN:
case CONFERENCE_JOINED:
case SET_AUDIO_ONLY: {
const result = next(action);
const { audioOnly, conference, joining }
= store.getState()['features/base/conference'];
_setFullScreen(conference || joining ? !audioOnly : false);
return result;
}
case CONFERENCE_FAILED:
case CONFERENCE_LEFT: {
const result = next(action);
_setFullScreen(false);
return result;
}
}
return next(action);
});
/**
* Handler for Immersive mode changes. This will be called when Android's
* immersive mode changes. This can happen without us wanting, so re-evaluate if
* immersive mode is desired and reactivate it if needed.
*
* @param {Object} store - The redux store.
* @private
* @returns {void}
*/
function _onImmersiveChange({ getState }) {
const state = getState();
const { appState } = state['features/background'];
if (appState === 'active') {
const { audioOnly, conference, joining }
= state['features/base/conference'];
const fullScreen = conference || joining ? !audioOnly : false;
_setFullScreen(fullScreen);
}
}
/**
* Activates/deactivates the full screen mode. On iOS it will hide the status
* bar, and on Android it will turn immersive mode on.
*
* @param {boolean} fullScreen - True to set full screen mode, false to
* deactivate it.
* @private
* @returns {void}
*/
function _setFullScreen(fullScreen: boolean) {
// XXX The React Native module Immersive is only implemented on Android and
// throws on other platforms.
if (Platform.OS === 'android') {
fullScreen ? Immersive.on() : Immersive.off();
} else {
// On platforms other than Android go with whatever React Native itself
// supports.
StatusBar.setHidden(fullScreen, 'slide');
}
}
/**
* Notifies the feature filmstrip that the action
* {@link _SET_IMMERSIVE_LISTENER} is being dispatched within a specific redux
* store.
*
* @param {Store} store - The redux store in which the specified action is being
* dispatched.
* @param {Dispatch} next - The redux dispatch function to dispatch the
* specified action to the specified store.
* @param {Action} action - The redux action {@code _SET_IMMERSIVE_LISTENER}
* which is being dispatched in the specified store.
* @private
* @returns {Object} The value returned by {@code next(action)}.
*/
function _setImmersiveListenerF({ getState }, next, action) {
// XXX The React Native module Immersive is only implemented on Android and
// throws on other platforms.
if (Platform.OS === 'android') {
// Remove the old Immersive listener and add the new one.
const { listener: oldListener } = getState()['features/full-screen'];
const result = next(action);
const { listener: newListener } = getState()['features/full-screen'];
if (oldListener !== newListener) {
oldListener && Immersive.removeImmersiveListener(oldListener);
newListener && Immersive.addImmersiveListener(newListener);
}
return result;
}
return next(action);
}