rn: add a reduced UI mode for the welcome page

The only way to render the welcome page in reduced UI mode currently is to
hangup a call from the Android ongoing notification while in PiP mode.

lang/main.json

@@ -791,6 +791,7 @@
         "recentList": "Recent",
         "recentListDelete": "Delete",
         "recentListEmpty": "Your recent list is currently empty. Chat with your team and you will find all your recent meetings here.",
+        "reducedUIText": "Welcome to __app__!",
         "roomname": "Enter room name",
         "roomnameHint": "Enter the name or URL of the room you want to join. You may make a name up, just let the people you are meeting know it so that they enter the same name.",
         "sendFeedback": "Send feedback",

react/features/welcome/components/WelcomePage.native.js

@@ -9,6 +9,8 @@ import {
     View
 } from 'react-native';
 
+import { getName } from '../../app';
+
 import { ColorSchemeRegistry } from '../../base/color-scheme';
 import { translate } from '../../base/i18n';
 import { Icon } from '../../base/font-icons';
@@ -23,11 +25,12 @@ import {
 import { DialInSummary } from '../../invite';
 import { SettingsView } from '../../settings';
 
+import { setSideBarVisible } from '../actions';
+
 import {
     AbstractWelcomePage,
     _mapStateToProps as _abstractMapStateToProps
 } from './AbstractWelcomePage';
-import { setSideBarVisible } from '../actions';
 import LocalVideoTrackUnderlay from './LocalVideoTrackUnderlay';
 import styles, { PLACEHOLDER_TEXT_COLOR } from './styles';
 import VideoSwitch from './VideoSwitch';
@@ -95,52 +98,13 @@ class WelcomePage extends AbstractWelcomePage {
      * @returns {ReactElement}
      */
     render() {
-        const roomnameAccLabel = 'welcomepage.accessibilityLabel.roomname';
-        const { _headerStyles, t } = this.props;
+        const { _reducedUI } = this.props;
 
-        return (
-            <LocalVideoTrackUnderlay style = { styles.welcomePage }>
-                <View style = { _headerStyles.page }>
-                    <Header style = { styles.header }>
-                        <TouchableOpacity onPress = { this._onShowSideBar } >
-                            <Icon
-                                name = 'menu'
-                                style = { _headerStyles.headerButtonIcon } />
-                        </TouchableOpacity>
-                        <VideoSwitch />
-                    </Header>
-                    <SafeAreaView style = { styles.roomContainer } >
-                        <View style = { styles.joinControls } >
-                            <TextInput
-                                accessibilityLabel = { t(roomnameAccLabel) }
-                                autoCapitalize = 'none'
-                                autoComplete = 'off'
-                                autoCorrect = { false }
-                                autoFocus = { false }
-                                onBlur = { this._onFieldBlur }
-                                onChangeText = { this._onRoomChange }
-                                onFocus = { this._onFieldFocus }
-                                onSubmitEditing = { this._onJoin }
-                                placeholder = { t('welcomepage.roomname') }
-                                placeholderTextColor = {
-                                    PLACEHOLDER_TEXT_COLOR
-                                }
-                                returnKeyType = { 'go' }
-                                style = { styles.textInput }
-                                underlineColorAndroid = 'transparent'
-                                value = { this.state.room } />
-                            {
-                                this._renderHintBox()
-                            }
-                        </View>
-                    </SafeAreaView>
-                    <WelcomePageLists disabled = { this.state._fieldFocused } />
-                    <SettingsView />
-                    <DialInSummary />
-                </View>
-                <WelcomePageSideBar />
-            </LocalVideoTrackUnderlay>
-        );
+        if (_reducedUI) {
+            return this._renderReducedUI();
+        }
+
+        return this._renderFullUI();
     }
 
     /**
@@ -272,20 +236,92 @@ class WelcomePage extends AbstractWelcomePage {
             </TouchableHighlight>
         );
     }
+
+    /**
+     * Renders the full welcome page.
+     *
+     * @returns {ReactElement}
+     */
+    _renderFullUI() {
+        const roomnameAccLabel = 'welcomepage.accessibilityLabel.roomname';
+        const { _headerStyles, t } = this.props;
+
+        return (
+            <LocalVideoTrackUnderlay style = { styles.welcomePage }>
+                <View style = { _headerStyles.page }>
+                    <Header style = { styles.header }>
+                        <TouchableOpacity onPress = { this._onShowSideBar } >
+                            <Icon
+                                name = 'menu'
+                                style = { _headerStyles.headerButtonIcon } />
+                        </TouchableOpacity>
+                        <VideoSwitch />
+                    </Header>
+                    <SafeAreaView style = { styles.roomContainer } >
+                        <View style = { styles.joinControls } >
+                            <TextInput
+                                accessibilityLabel = { t(roomnameAccLabel) }
+                                autoCapitalize = 'none'
+                                autoComplete = 'off'
+                                autoCorrect = { false }
+                                autoFocus = { false }
+                                onBlur = { this._onFieldBlur }
+                                onChangeText = { this._onRoomChange }
+                                onFocus = { this._onFieldFocus }
+                                onSubmitEditing = { this._onJoin }
+                                placeholder = { t('welcomepage.roomname') }
+                                placeholderTextColor = {
+                                    PLACEHOLDER_TEXT_COLOR
+                                }
+                                returnKeyType = { 'go' }
+                                style = { styles.textInput }
+                                underlineColorAndroid = 'transparent'
+                                value = { this.state.room } />
+                            {
+                                this._renderHintBox()
+                            }
+                        </View>
+                    </SafeAreaView>
+                    <WelcomePageLists disabled = { this.state._fieldFocused } />
+                    <SettingsView />
+                    <DialInSummary />
+                </View>
+                <WelcomePageSideBar />
+            </LocalVideoTrackUnderlay>
+        );
+    }
+
+    /**
+     * Renders a "reduced" version of the welcome page.
+     *
+     * @returns {ReactElement}
+     */
+    _renderReducedUI() {
+        const { t } = this.props;
+
+        return (
+            <View style = { styles.reducedUIContainer }>
+                <Text style = { styles.reducedUIText }>
+                    { t('welcomepage.reducedUIText', { app: getName() }) }
+                </Text>
+            </View>
+        );
+    }
 }
 
 /**
  * Maps part of the Redux state to the props of this component.
  *
  * @param {Object} state - The Redux state.
- * @returns {{
- *     _headerStyles: Object
- * }}
+ * @returns {Object}
  */
 function _mapStateToProps(state) {
+    const { reducedUI } = state['features/base/responsive-ui'];
+
     return {
         ..._abstractMapStateToProps(state),
-        _headerStyles: ColorSchemeRegistry.get(state, 'Header')
+        _headerStyles: ColorSchemeRegistry.get(state, 'Header'),
+        _reducedUI: reducedUI
     };
 }
 

react/features/welcome/components/styles.js

@@ -163,6 +163,21 @@ export default createStyleSheet({
         flexDirection: 'column'
     },
 
+    /**
+     * The styles for reduced UI mode.
+     */
+    reducedUIContainer: {
+        alignItems: 'center',
+        backgroundColor: ColorPalette.blue,
+        flex: 1,
+        justifyContent: 'center'
+    },
+
+    reducedUIText: {
+        color: TEXT_COLOR,
+        fontSize: 12
+    },
+
     /**
      * Container for room name input box and 'join' button.
      */