diff --git a/lang/main.json b/lang/main.json
index fbfa6d0bd..9f88e7875 100644
--- a/lang/main.json
+++ b/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",
diff --git a/react/features/welcome/components/WelcomePage.native.js b/react/features/welcome/components/WelcomePage.native.js
index 23a6db293..7bf56e6d7 100644
--- a/react/features/welcome/components/WelcomePage.native.js
+++ b/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 (
-
-
-
-
-
-
- {
- this._renderHintBox()
- }
-
-
-
-
-
-
-
-
- );
+ if (_reducedUI) {
+ return this._renderReducedUI();
+ }
+
+ return this._renderFullUI();
}
/**
@@ -272,20 +236,92 @@ class WelcomePage extends AbstractWelcomePage {
);
}
+
+ /**
+ * Renders the full welcome page.
+ *
+ * @returns {ReactElement}
+ */
+ _renderFullUI() {
+ const roomnameAccLabel = 'welcomepage.accessibilityLabel.roomname';
+ const { _headerStyles, t } = this.props;
+
+ return (
+
+
+
+
+
+
+ {
+ this._renderHintBox()
+ }
+
+
+
+
+
+
+
+
+ );
+ }
+
+ /**
+ * Renders a "reduced" version of the welcome page.
+ *
+ * @returns {ReactElement}
+ */
+ _renderReducedUI() {
+ const { t } = this.props;
+
+ return (
+
+
+ { t('welcomepage.reducedUIText', { app: getName() }) }
+
+
+ );
+ }
}
/**
* 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
};
}
diff --git a/react/features/welcome/components/styles.js b/react/features/welcome/components/styles.js
index f86912a7b..bf978981d 100644
--- a/react/features/welcome/components/styles.js
+++ b/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.
*/