init

react/features/mobile/full-screen/actionTypes.ts

@@ -0,0 +1,12 @@
+/**
+ * The type of (redux) action to set the react-native-immersive's change event
+ * subscription.
+ *
+ * {
+ *     type: _SET_IMMERSIVE_SUBSCRIPTION,
+ *     subscription: Function
+ * }
+ *
+ * @protected
+ */
+export const _SET_IMMERSIVE_SUBSCRIPTION = '_SET_IMMERSIVE_SUBSCRIPTION';

react/features/mobile/full-screen/actions.ts

@@ -0,0 +1,21 @@
+import { NativeEventSubscription } from 'react-native';
+
+import { _SET_IMMERSIVE_SUBSCRIPTION } from './actionTypes';
+
+/**
+ * Sets the change event listener to be used with react-native-immersive's API.
+ *
+ * @param {Function} subscription - The function to be used with
+ * react-native-immersive's API as the change event listener.
+ * @protected
+ * @returns {{
+ *     type: _SET_IMMERSIVE_SUBSCRIPTION,
+ *     subscription: ?NativeEventSubscription
+ * }}
+ */
+export function _setImmersiveSubscription(subscription?: NativeEventSubscription) {
+    return {
+        type: _SET_IMMERSIVE_SUBSCRIPTION,
+        subscription
+    };
+}

react/features/mobile/full-screen/functions.ts

@@ -0,0 +1,22 @@
+import { IReduxState } from '../../app/types';
+import { getCurrentConference } from '../../base/conference/functions';
+import { isAnyDialogOpen } from '../../base/dialog/functions';
+import { FULLSCREEN_ENABLED } from '../../base/flags/constants';
+import { getFeatureFlag } from '../../base/flags/functions';
+import { isLocalVideoTrackDesktop } from '../../base/tracks/functions.any';
+
+/**
+ * Checks whether full-screen state should be used or not.
+ *
+ * @param {IReduxState} state - The redux state.
+ * @returns {boolean} - Whether full-screen state should be used or not.
+ */
+export function shouldUseFullScreen(state: IReduxState) {
+    const { enabled: audioOnly } = state['features/base/audio-only'];
+    const conference = getCurrentConference(state);
+    const dialogOpen = isAnyDialogOpen(state);
+    const fullscreenEnabled = getFeatureFlag(state, FULLSCREEN_ENABLED, true);
+    const isDesktopSharing = isLocalVideoTrackDesktop(state);
+
+    return conference ? !audioOnly && !dialogOpen && !isDesktopSharing && fullscreenEnabled : false;
+}

react/features/mobile/full-screen/logger.ts

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

react/features/mobile/full-screen/middleware.ts

@@ -0,0 +1,102 @@
+import ImmersiveMode from 'react-native-immersive-mode';
+
+import { IStore } from '../../app/types';
+import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../../base/app/actionTypes';
+import MiddlewareRegistry from '../../base/redux/MiddlewareRegistry';
+import StateListenerRegistry from '../../base/redux/StateListenerRegistry';
+
+import { _setImmersiveSubscription } from './actions';
+import { shouldUseFullScreen } from './functions';
+import logger from './logger';
+
+type BarVisibilityType = {
+    navigationBottomBar: boolean;
+    statusBar: boolean;
+};
+
+type ImmersiveListener = (visibility: BarVisibilityType) => void;
+
+/**
+ * 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 APP_WILL_MOUNT: {
+        _setImmersiveListener(store, _onImmersiveChange.bind(undefined, store));
+
+        break;
+    }
+
+    case APP_WILL_UNMOUNT:
+        _setImmersiveListener(store, undefined);
+        break;
+
+    }
+
+    return next(action);
+});
+
+StateListenerRegistry.register(
+    /* selector */ shouldUseFullScreen,
+    /* listener */ fullScreen => _setFullScreen(fullScreen)
+);
+
+/**
+ * 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 }: IStore) {
+    const state = getState();
+    const { appState } = state['features/mobile/background'];
+
+    if (appState === 'active') {
+        _setFullScreen(shouldUseFullScreen(state));
+    }
+}
+
+/**
+ * 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) {
+    logger.info(`Setting full-screen mode: ${fullScreen}`);
+    ImmersiveMode.fullLayout(fullScreen);
+    ImmersiveMode.setBarMode(fullScreen ? 'Full' : 'Normal');
+}
+
+/**
+ * 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 {Function} listener - Listener for immersive state.
+ * @private
+ * @returns {Object} The value returned by {@code next(action)}.
+ */
+function _setImmersiveListener({ dispatch, getState }: IStore, listener?: ImmersiveListener) {
+    const { subscription } = getState()['features/full-screen'];
+
+    subscription?.remove();
+
+    dispatch(_setImmersiveSubscription(listener ? ImmersiveMode.addEventListener(listener) : undefined));
+}

react/features/mobile/full-screen/reducer.ts

@@ -0,0 +1,21 @@
+import { NativeEventSubscription } from 'react-native';
+
+import ReducerRegistry from '../../base/redux/ReducerRegistry';
+
+import { _SET_IMMERSIVE_SUBSCRIPTION } from './actionTypes';
+
+export interface IFullScreenState {
+    subscription?: NativeEventSubscription;
+}
+
+ReducerRegistry.register<IFullScreenState>('features/full-screen', (state = {}, action): IFullScreenState => {
+    switch (action.type) {
+    case _SET_IMMERSIVE_SUBSCRIPTION:
+        return {
+            ...state,
+            subscription: action.subscription
+        };
+    }
+
+    return state;
+});