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. */