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

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