Consistent middleware and reducer imports

On Android the status and navigation bars are shown again after coming back from
the background, so enter full-screen mode again if needed.

css/_variables.scss

@@ -16,7 +16,7 @@ $defaultToolbarSize: 50px;
 $thumbnailToolbarHeight: 22px;
 $thumbnailIndicatorBorder: 2px;
 $thumbnailIndicatorSize: $thumbnailToolbarHeight;
-$thumbnailVideoMargin: 5px;
+$thumbnailVideoMargin: 2px;
 $thumbnailsBorder: 2px;
 $thumbnailVideoBorder: 2px;
 $hideFilmstripButtonWidth: 17px;

react/features/app/actions.js

@@ -8,7 +8,6 @@ import {
     _parseURIString,
     init
 } from './functions';
-import './reducer';
 
 /**
  * Temporary solution. Should dispatch actions related to initial settings of

react/features/app/components/App.native.js

@@ -2,8 +2,9 @@
 
 import { Linking } from 'react-native';
 
-import { Platform } from '../../base/react';
 import '../../audio-mode';
+import '../../background';
+import { Platform } from '../../base/react';
 import '../../full-screen';
 import '../../wake-lock';
 

react/features/app/index.js

@@ -2,3 +2,5 @@ export * from './actions';
 export * from './actionTypes';
 export * from './components';
 export * from './functions';
+
+import './reducer';

react/features/background/actionTypes.js

@@ -0,0 +1,43 @@
+import { Symbol } from '../base/react';
+
+/**
+ * The type of redux action to set the AppState API change event listener.
+ *
+ * {
+ *      type: _SET_APP_STATE_LISTENER,
+ *      listener: Function
+ * }
+ *
+ * @protected
+ */
+export const _SET_APP_STATE_LISTENER
+    = Symbol('_SET_APP_STATE_LISTENER');
+
+/**
+ * The type of redux action which signals that video will be muted because the
+ * app is going to the background.
+ *
+ * {
+ *      type: _SET_BACKGROUND_VIDEO_MUTED,
+ *      muted: boolean
+ * }
+ *
+ * @protected
+ */
+export const _SET_BACKGROUND_VIDEO_MUTED
+    = Symbol('_SET_BACKGROUND_VIDEO_MUTED');
+
+/**
+ * The type of redux action which signals that the app state has changed (in
+ * terms of execution mode). The app state can be one of 'active', 'inactive',
+ * or 'background'.
+ *
+ * {
+ *      type: APP_STATE_CHANGED,
+ *      appState: string
+ * }
+ *
+ * @public
+ * @see {@link https://facebook.github.io/react-native/docs/appstate.html}
+ */
+export const APP_STATE_CHANGED = Symbol('APP_STATE_CHANGED');

react/features/background/actions.js

@@ -0,0 +1,81 @@
+import { setVideoMuted } from '../base/media';
+
+import {
+    _SET_APP_STATE_LISTENER,
+    _SET_BACKGROUND_VIDEO_MUTED,
+    APP_STATE_CHANGED
+} from './actionTypes';
+
+/**
+ * Signals that the App state has changed (in terms of execution state). The
+ * application can be in 3 states: 'active', 'inactive' and 'background'.
+ *
+ * @param {string} appState - The new App state.
+ * @public
+ * @returns {{
+ *      type: APP_STATE_CHANGED,
+ *      appState: string
+ * }}
+ * @see {@link https://facebook.github.io/react-native/docs/appstate.html}
+ */
+export function appStateChanged(appState: string) {
+    return {
+        type: APP_STATE_CHANGED,
+        appState
+    };
+}
+
+/**
+ * Sets the listener to be used with React Native's AppState API.
+ *
+ * @param {Function} listener - Function to be set as the change event listener.
+ * @protected
+ * @returns {{
+ *     type: _SET_APP_STATE_LISTENER,
+ *     listener: Function
+ * }}
+ */
+export function _setAppStateListener(listener: ?Function) {
+    return {
+        type: _SET_APP_STATE_LISTENER,
+        listener
+    };
+}
+
+/**
+ * Signals that the app should mute video because it's now running in the
+ * background, or unmute it because it came back from the background. If video
+ * was already muted nothing will happen; otherwise, it will be muted. When
+ * coming back from the background the previous state will be restored.
+ *
+ * @param {boolean} muted - True if video should be muted; false, otherwise.
+ * @protected
+ * @returns {Function}
+ */
+export function _setBackgroundVideoMuted(muted: boolean) {
+    return (dispatch, getState) => {
+        if (muted) {
+            const mediaState = getState()['features/base/media'];
+
+            if (mediaState.video.muted) {
+                // Video is already muted, do nothing.
+                return;
+            }
+        } else {
+            const bgState = getState()['features/background'];
+
+            if (!bgState.videoMuted) {
+                // We didn't mute video, do nothing.
+                return;
+            }
+        }
+
+        // Remember that video was muted due to the app going to the background
+        // vs user's choice.
+        dispatch({
+            type: _SET_BACKGROUND_VIDEO_MUTED,
+            muted
+        });
+        dispatch(setVideoMuted(muted));
+    };
+}

react/features/background/index.js

@@ -0,0 +1,5 @@
+export * from './actions';
+export * from './actionTypes';
+
+import './middleware';
+import './reducer';

react/features/background/middleware.js

@@ -0,0 +1,109 @@
+/* @flow */
+
+import { AppState } from 'react-native';
+import type { Dispatch } from 'redux';
+
+import {
+    APP_WILL_MOUNT,
+    APP_WILL_UNMOUNT
+} from '../app';
+import { MiddlewareRegistry } from '../base/redux';
+
+import {
+    _setAppStateListener,
+    _setBackgroundVideoMuted,
+    appStateChanged
+} from './actions';
+import {
+    _SET_APP_STATE_LISTENER,
+    APP_STATE_CHANGED
+} from './actionTypes';
+
+/**
+ * Middleware that captures App lifetime actions and subscribes to application
+ * state changes. When the application state changes it will fire the action
+ * required to mute or unmute the local video in case the application goes to
+ * the background or comes back from it.
+ *
+ * @param {Store} store - Redux store.
+ * @returns {Function}
+ * @see {@link https://facebook.github.io/react-native/docs/appstate.html}
+ */
+MiddlewareRegistry.register(store => next => action => {
+    switch (action.type) {
+    case _SET_APP_STATE_LISTENER: {
+        // Remove the current/old AppState listener.
+        const { appStateListener } = store.getState()['features/background'];
+
+        if (appStateListener) {
+            AppState.removeEventListener('change', appStateListener);
+        }
+
+        // Add the new AppState listener.
+        if (action.listener) {
+            AppState.addEventListener('change', action.listener);
+        }
+        break;
+    }
+
+    case APP_STATE_CHANGED:
+        _appStateChanged(store.dispatch, action.appState);
+        break;
+
+    case APP_WILL_MOUNT:
+        store.dispatch(
+                _setAppStateListener(
+                        _onAppStateChange.bind(undefined, store.dispatch)));
+        break;
+
+    case APP_WILL_UNMOUNT:
+        store.dispatch(_setAppStateListener(null));
+        break;
+    }
+
+    return next(action);
+});
+
+/**
+ * Handles app state changes. Dispatches the necessary Redux actions for the
+ * local video to be muted when the app goes to the background, and to be
+ * unmuted when the app comes back.
+ *
+ * @param {Dispatch} dispatch - Redux dispatch function.
+ * @param {string} appState - The current app state.
+ * @private
+ * @returns {void}
+ */
+function _appStateChanged(dispatch: Dispatch<*>, appState: string) {
+    let muted;
+
+    switch (appState) {
+    case 'active':
+        muted = false;
+        break;
+
+    case 'background':
+        muted = true;
+        break;
+
+    case 'inactive':
+    default:
+        // XXX: We purposely don't handle the 'inactive' app state.
+        return;
+    }
+
+    dispatch(_setBackgroundVideoMuted(muted));
+}
+
+/**
+ * Called by React Native's AppState API to notify that the application state
+ * has changed. Dispatches the change within the (associated) Redux store.
+ *
+ * @param {Dispatch} dispatch - Redux dispatch function.
+ * @param {string} appState - The current application execution state.
+ * @private
+ * @returns {void}
+ */
+function _onAppStateChange(dispatch: Dispatch<*>, appState: string) {
+    dispatch(appStateChanged(appState));
+}

react/features/background/reducer.js

@@ -0,0 +1,31 @@
+import { ReducerRegistry } from '../base/redux';
+
+import {
+    _SET_APP_STATE_LISTENER,
+    _SET_BACKGROUND_VIDEO_MUTED,
+    APP_STATE_CHANGED
+} from './actionTypes';
+
+ReducerRegistry.register('features/background', (state = {}, action) => {
+    switch (action.type) {
+    case _SET_APP_STATE_LISTENER:
+        return {
+            ...state,
+            appStateListener: action.listener
+        };
+
+    case _SET_BACKGROUND_VIDEO_MUTED:
+        return {
+            ...state,
+            videoMuted: action.muted
+        };
+
+    case APP_STATE_CHANGED:
+        return {
+            ...state,
+            appState: action.appState
+        };
+    }
+
+    return state;
+});

react/features/base/conference/actions.js

@@ -20,8 +20,6 @@ import {
 } from './actionTypes';
 import { EMAIL_COMMAND } from './constants';
 import { _addLocalTracksToConference } from './functions';
-import './middleware';
-import './reducer';
 
 /**
  * Adds conference (event) listeners.

react/features/base/conference/index.js

@@ -1,3 +1,6 @@
 export * from './actions';
 export * from './actionTypes';
 export * from './functions';
+
+import './middleware';
+import './reducer';

react/features/base/connection/actions.native.js

@@ -11,7 +11,6 @@ import {
     CONNECTION_FAILED,
     SET_DOMAIN
 } from './actionTypes';
-import './reducer';
 
 const JitsiConnectionEvents = JitsiMeetJS.events.connection;
 

react/features/base/connection/actions.web.js

@@ -5,7 +5,6 @@ import type { Dispatch } from 'redux';
 import UIEvents from '../../../../service/UI/UIEvents';
 
 import { SET_DOMAIN } from './actionTypes';
-import './reducer';
 
 declare var APP: Object;
 declare var JitsiMeetJS: Object;

react/features/base/connection/index.js

@@ -1,3 +1,5 @@
 export * from './actions';
 export * from './actionTypes';
 export * from './functions';
+
+import './reducer';

react/features/base/lib-jitsi-meet/actions.js

@@ -5,8 +5,6 @@ import {
     LIB_INITIALIZED,
     SET_CONFIG
 } from './actionTypes';
-import './middleware';
-import './reducer';
 
 /**
  * Disposes lib-jitsi-meet.

react/features/base/lib-jitsi-meet/index.js

@@ -6,3 +6,6 @@ export { JitsiMeetJS as default };
 export * from './actions';
 export * from './actionTypes';
 export * from './functions';
+
+import './middleware';
+import './reducer';

react/features/base/lib-jitsi-meet/native/index.js

@@ -1,2 +1,2 @@
-require('./polyfills-browser');
-require('./polyfills-browserify');
+import './polyfills-browser';
+import './polyfills-browserify';

react/features/base/media/actions.js

@@ -8,8 +8,6 @@ import {
     SET_VIDEO_MUTED
 } from './actionTypes';
 import { CAMERA_FACING_MODE } from './constants';
-import './middleware';
-import './reducer';
 
 /**
  * Action to set the muted state of the local audio.

react/features/base/media/index.js

@@ -3,3 +3,6 @@ export * from './actionTypes';
 export * from './components';
 export * from './constants';
 export * from './functions';
+
+import './middleware';
+import './reducer';

react/features/base/participants/actions.js

@@ -7,8 +7,6 @@ import {
     PIN_PARTICIPANT
 } from './actionTypes';
 import { getLocalParticipant } from './functions';
-import './middleware';
-import './reducer';
 
 /**
  * Action to update a participant's email.

react/features/base/participants/index.js

@@ -2,3 +2,6 @@ export * from './actions';
 export * from './actionTypes';
 export * from './constants';
 export * from './functions';
+
+import './middleware';
+import './reducer';

react/features/base/tracks/actions.js

@@ -10,8 +10,6 @@ import {
     TRACK_REMOVED,
     TRACK_UPDATED
 } from './actionTypes';
-import './middleware';
-import './reducer';
 
 const JitsiTrackErrors = JitsiMeetJS.errors.track;
 const JitsiTrackEvents = JitsiMeetJS.events.track;

react/features/base/tracks/index.js

@@ -1,3 +1,6 @@
 export * from './actions';
 export * from './actionTypes';
 export * from './functions';
+
+import './middleware';
+import './reducer';

react/features/full-screen/middleware.js

@@ -3,6 +3,7 @@
 import { StatusBar } from 'react-native';
 import { Immersive } from 'react-native-immersive';
 
+import { APP_STATE_CHANGED } from '../background';
 import {
     CONFERENCE_FAILED,
     CONFERENCE_LEFT,
@@ -23,9 +24,20 @@ import { MiddlewareRegistry } from '../base/redux';
  * @returns {Function}
  */
 MiddlewareRegistry.register(store => next => action => {
-    let fullScreen;
+    let fullScreen = null;
 
     switch (action.type) {
+    case APP_STATE_CHANGED: {
+        // Check if we just came back from the background and reenable full
+        // screen mode if necessary.
+        if (action.appState === 'active') {
+            const conference = store.getState()['features/base/conference'];
+
+            fullScreen = conference ? !conference.audioOnly : false;
+        }
+        break;
+    }
+
     case CONFERENCE_WILL_JOIN: {
         const conference = store.getState()['features/base/conference'];
 
@@ -37,10 +49,6 @@ MiddlewareRegistry.register(store => next => action => {
     case CONFERENCE_LEFT:
         fullScreen = false;
         break;
-
-    default:
-        fullScreen = null;
-        break;
     }
 
     if (fullScreen !== null) {

react/features/large-video/actions.js

@@ -6,8 +6,6 @@ import {
 } from '../base/tracks';
 
 import { SELECT_LARGE_VIDEO_PARTICIPANT } from './actionTypes';
-import './middleware';
-import './reducer';
 
 /**
  * Signals conference to select a participant.

react/features/large-video/index.js

@@ -1,2 +1,5 @@
 export * from './actions';
 export * from './components';
+
+import './middleware';
+import './reducer';

react/features/room-lock/actions.js

@@ -1,7 +1,6 @@
 import { setPassword } from '../base/conference';
 
 import { BEGIN_ROOM_LOCK_REQUEST, END_ROOM_LOCK_REQUEST } from './actionTypes';
-import './reducer';
 
 /**
  * Begins a (user) request to lock a specific conference/room.

react/features/room-lock/index.js

@@ -1,2 +1,4 @@
 export * from './actions';
 export * from './components';
+
+import './reducer';

react/features/unsupported-browser/actions.js

@@ -1,5 +1,4 @@
 import { DISMISS_MOBILE_APP_PROMO } from './actionTypes';
-import './reducer';
 
 /**
  * Returns a Redux action which signals that the UnsupportedMobileBrowser which

react/features/unsupported-browser/index.js

@@ -1,2 +1,4 @@
 export * from './actions';
 export * from './components';
+
+import './reducer';