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.
This commit is contained in:
Saúl Ibarra Corretgé
Saúl Ibarra Corretgé
parent
714e0e045d
commit
55218de779
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue