init

react/features/mobile/background/actionTypes.ts

@@ -0,0 +1,26 @@
+/**
+ * The type of redux action used for app state subscription.
+ *
+ * {
+ *     type: _SET_APP_STATE_SUBSCRIPTION,
+ *     subscription: NativeEventSubscription
+ * }
+ *
+ * @protected
+ */
+export const _SET_APP_STATE_SUBSCRIPTION = '_SET_APP_STATE_SUBSCRIPTION';
+
+/**
+ * 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 = 'APP_STATE_CHANGED';

react/features/mobile/background/actions.ts

@@ -0,0 +1,39 @@
+import { NativeEventSubscription } from 'react-native';
+
+import { APP_STATE_CHANGED, _SET_APP_STATE_SUBSCRIPTION } from './actionTypes';
+
+/**
+ * Sets subscription for app state.
+ *
+ * @param {Function} subscription - Subscription for the native event.
+ * @private
+ * @returns {{
+ *     type: _SET_APP_STATE_SUBSCRIPTION,
+ *     subscription: NativeEventSubscription
+ * }}
+ */
+export function _setAppStateSubscription(subscription?: NativeEventSubscription) {
+    return {
+        type: _SET_APP_STATE_SUBSCRIPTION,
+        subscription
+    };
+}
+
+/**
+ * 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
+    };
+}

react/features/mobile/background/logger.ts

@@ -0,0 +1,3 @@
+import { getLogger } from '../../base/logging/functions';
+
+export default getLogger('features/mobile/background');

react/features/mobile/background/middleware.native.ts

@@ -0,0 +1,83 @@
+import { AppState } from 'react-native';
+
+import { IStore } from '../../app/types';
+import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../../base/app/actionTypes';
+import MiddlewareRegistry from '../../base/redux/MiddlewareRegistry';
+
+import { _setAppStateSubscription, appStateChanged } from './actions';
+import logger from './logger';
+
+/**
+ * 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 - The redux store.
+ * @returns {Function}
+ * @see {@link https://facebook.github.io/react-native/docs/appstate.html}
+ */
+MiddlewareRegistry.register(store => next => action => {
+    switch (action.type) {
+
+    case APP_WILL_MOUNT: {
+        const { dispatch } = store;
+
+        _setAppStateListener(store, _onAppStateChange.bind(undefined, dispatch));
+
+        // Because there is no change taking place when the app mounts,
+        // we need to force registering the appState status.
+        const appStateInterval = setInterval(() => {
+            const { currentState } = AppState;
+
+            if (currentState !== 'unknown') {
+                clearInterval(appStateInterval);
+
+                _onAppStateChange(dispatch, currentState);
+            }
+        }, 100);
+
+        break;
+    }
+
+    case APP_WILL_UNMOUNT:
+        _setAppStateListener(store, undefined);
+        break;
+    }
+
+    return next(action);
+});
+
+/**
+ * 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 - The redux {@code dispatch} function.
+ * @param {string} appState - The current application execution state.
+ * @private
+ * @returns {void}
+ */
+function _onAppStateChange(dispatch: IStore['dispatch'], appState: string) {
+    dispatch(appStateChanged(appState));
+
+    logger.info(`appState changed to: ${appState}`);
+}
+
+/**
+ * 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 {any} listener - Listener for app state status.
+ * @private
+ * @returns {Object} The value returned by {@code next(action)}.
+ */
+function _setAppStateListener({ dispatch, getState }: IStore, listener: any) {
+    const { subscription } = getState()['features/mobile/background'];
+
+    subscription?.remove();
+
+    dispatch(_setAppStateSubscription(listener ? AppState.addEventListener('change', listener) : undefined));
+}

react/features/mobile/background/reducer.ts

@@ -0,0 +1,37 @@
+import { NativeEventSubscription } from 'react-native';
+
+import ReducerRegistry from '../../base/redux/ReducerRegistry';
+
+import { APP_STATE_CHANGED, _SET_APP_STATE_SUBSCRIPTION } from './actionTypes';
+
+export interface IMobileBackgroundState {
+    appState: string;
+    subscription?: NativeEventSubscription;
+}
+
+/**
+ * The default/initial redux state of the feature background.
+ */
+const DEFAULT_STATE = {
+    appState: ''
+};
+
+// eslint-disable-next-line max-len
+ReducerRegistry.register<IMobileBackgroundState>('features/mobile/background', (state = DEFAULT_STATE, action): IMobileBackgroundState => {
+    switch (action.type) {
+
+    case _SET_APP_STATE_SUBSCRIPTION:
+        return {
+            ...state,
+            subscription: action.subscription
+        };
+
+    case APP_STATE_CHANGED:
+        return {
+            ...state,
+            appState: action.appState
+        };
+    }
+
+    return state;
+});