jiti-meet/react/features/welcome/components/WelcomePage.native.js

329 lines
10 KiB
JavaScript
Raw Normal View History

import React from 'react';
2018-02-02 14:50:16 +00:00
import {
2018-02-16 16:06:03 +00:00
Animated,
2018-02-15 22:58:07 +00:00
Keyboard,
2018-02-02 14:50:16 +00:00
SafeAreaView,
TextInput,
TouchableHighlight,
TouchableOpacity,
View
} from 'react-native';
import { getName } from '../../app';
import { ColorSchemeRegistry } from '../../base/color-scheme';
2017-03-01 02:55:12 +00:00
import { translate } from '../../base/i18n';
2018-02-02 14:50:16 +00:00
import { Icon } from '../../base/font-icons';
import { MEDIA_TYPE } from '../../base/media';
import { Header, LoadingIndicator, Text } from '../../base/react';
2019-03-21 16:38:29 +00:00
import { connect } from '../../base/redux';
import { ColorPalette } from '../../base/styles';
2018-02-02 14:50:16 +00:00
import {
createDesiredLocalTracks,
destroyLocalTracks
} from '../../base/tracks';
2019-05-07 14:50:57 +00:00
import { DialInSummary } from '../../invite';
import { SettingsView } from '../../settings';
2018-02-02 14:50:16 +00:00
import { setSideBarVisible } from '../actions';
import {
AbstractWelcomePage,
_mapStateToProps as _abstractMapStateToProps
} from './AbstractWelcomePage';
2017-12-20 00:49:36 +00:00
import LocalVideoTrackUnderlay from './LocalVideoTrackUnderlay';
import styles, { PLACEHOLDER_TEXT_COLOR } from './styles';
import VideoSwitch from './VideoSwitch';
import WelcomePageLists from './WelcomePageLists';
2018-02-02 14:50:16 +00:00
import WelcomePageSideBar from './WelcomePageSideBar';
/**
* The native container rendering the welcome page.
*
* @extends AbstractWelcomePage
*/
class WelcomePage extends AbstractWelcomePage {
2018-02-02 14:50:16 +00:00
/**
* Constructor of the Component.
*
* @inheritdoc
*/
constructor(props) {
super(props);
this.state._fieldFocused = false;
2018-02-16 16:06:03 +00:00
this.state.hintBoxAnimation = new Animated.Value(0);
// Bind event handlers so they are only bound once per instance.
2018-02-16 16:06:03 +00:00
this._onFieldFocusChange = this._onFieldFocusChange.bind(this);
2018-02-02 14:50:16 +00:00
this._onShowSideBar = this._onShowSideBar.bind(this);
2018-02-16 16:06:03 +00:00
this._renderHintBox = this._renderHintBox.bind(this);
2018-05-29 12:51:55 +00:00
// Specially bind functions to avoid function definition on render.
this._onFieldBlur = this._onFieldFocusChange.bind(this, false);
this._onFieldFocus = this._onFieldFocusChange.bind(this, true);
2018-02-02 14:50:16 +00:00
}
/**
* Implements React's {@link Component#componentDidMount()}. Invoked
* immediately after mounting occurs. Creates a local video track if none
* is available and the camera permission was already granted.
*
* @inheritdoc
* @returns {void}
*/
componentDidMount() {
super.componentDidMount();
2018-02-02 14:50:16 +00:00
const { dispatch } = this.props;
if (this.props._settings.startAudioOnly) {
2018-02-02 14:50:16 +00:00
dispatch(destroyLocalTracks());
} else {
// Make sure we don't request the permission for the camera from
// the start. We will, however, create a video track iff the user
// already granted the permission.
navigator.permissions.query({ name: 'camera' }).then(response => {
response === 'granted'
&& dispatch(createDesiredLocalTracks(MEDIA_TYPE.VIDEO));
});
2018-02-02 14:50:16 +00:00
}
}
/**
* Implements React's {@link Component#render()}. Renders a prompt for
* entering a room name.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const { _reducedUI } = this.props;
if (_reducedUI) {
return this._renderReducedUI();
}
return this._renderFullUI();
}
2018-02-16 16:06:03 +00:00
/**
* Constructs a style array to handle the hint box animation.
*
* @private
* @returns {Array<Object>}
*/
_getHintBoxStyle() {
return [
styles.hintContainer,
{
opacity: this.state.hintBoxAnimation
}
];
}
/**
* Callback for when the room field's focus changes so the hint box
* must be rendered or removed.
*
* @private
* @param {boolean} focused - The focused state of the field.
2018-05-29 12:51:55 +00:00
* @returns {void}
2018-02-16 16:06:03 +00:00
*/
_onFieldFocusChange(focused) {
2018-05-29 12:51:55 +00:00
focused
&& this.setState({
_fieldFocused: true
});
Animated.timing(
this.state.hintBoxAnimation,
{
duration: 300,
toValue: focused ? 1 : 0
})
.start(animationState =>
animationState.finished
&& !focused
&& this.setState({
_fieldFocused: false
}));
2018-02-16 16:06:03 +00:00
}
2018-02-02 14:50:16 +00:00
/**
* Toggles the side bar.
*
* @private
* @returns {void}
*/
_onShowSideBar() {
2018-02-15 22:58:07 +00:00
Keyboard.dismiss();
this.props.dispatch(setSideBarVisible(true));
2018-02-02 14:50:16 +00:00
}
2018-02-16 16:06:03 +00:00
/**
* Renders the hint box if necessary.
*
* @private
* @returns {React$Node}
*/
_renderHintBox() {
if (this.state._fieldFocused) {
const { t } = this.props;
return (
<Animated.View style = { this._getHintBoxStyle() }>
2018-02-16 16:06:03 +00:00
<View style = { styles.hintTextContainer } >
<Text style = { styles.hintText }>
{ t('welcomepage.roomnameHint') }
2018-02-16 16:06:03 +00:00
</Text>
</View>
<View style = { styles.hintButtonContainer } >
{ this._renderJoinButton() }
2018-02-16 16:06:03 +00:00
</View>
</Animated.View>
);
}
return null;
}
/**
* Renders the join button.
*
* @private
* @returns {ReactElement}
*/
_renderJoinButton() {
fix(i18n) Accessiblity labels translations (#3071) * fix(toolbar): accessibilityLabel should be translatable. This commit adds a helper property to get the accessibilityLabel of an item, providing a translation if one is available. This mimics the behavior of label and tooltip. * fix(toolbar) 'hangup' button accessibilityLabel i18n * fix(toolbar) 'mute' button accessibilityLabel i18n * fix(toolbar) 'videomute' button accessibilityLabel i18n * fix(toolbar) 'moreActions' button accessibilityLabel i18n * fix(toolbar) 'shareRoom' button accessibilityLabel i18n * fix(toolbar) 'audioRoute' button accessibilityLabel i18n * fix(toolbar) 'toggleCamera' button accessibilityLabel i18n * fix(toolbar) 'audioOnly' button accessibilityLabel i18n * fix(toolbar) 'roomLock' button accessibilityLabel i18n * fix(toolbar) 'pip' button accessibilityLabel i18n * fix(toolbar) 'invite' button accessibilityLabel i18n * fix(toolbar) 'raiseHand' button accessibilityLabel i18n * fix(toolbar) 'chat' button accessibilityLabel i18n * fix(toolbar) 'shareYourScreen' button accessibilityLabel i18n * fix(toolbar) 'fullScreen' button accessibilityLabel i18n * fix(toolbar) 'sharedvideo' button accessibilityLabel i18n * fix(toolbar) 'document' button accessibilityLabel i18n * fix(toolbar) 'speakerStats' button accessibilityLabel i18n * fix(toolbar) 'feedback' button accessibilityLabel i18n * fix(toolbar) 'shortcuts' button accessibilityLabel i18n * fix(toolbar) 'recording' button accessibilityLabel i18n * fix(toolbar) 'settings' button accessibilityLabel i18n * fix(welcomepage) accessibilityLabels i18n * fix(toolbar) 'info' button accessibilityLabel i18n * fix(i18n): Add translation to various aria-label property values. * fix(i18n): Differentiate between overflow menu and button.
2018-06-07 20:32:18 +00:00
const { t } = this.props;
let children;
if (this.state.joining) {
// TouchableHighlight is picky about what its children can be, so
// wrap it in a native component, i.e. View to avoid having to
// modify non-native children.
children = (
<View>
2018-02-16 16:06:03 +00:00
<LoadingIndicator
color = { styles.buttonText.color }
size = 'small' />
</View>
);
} else {
children = (
<Text style = { styles.buttonText }>
{ this.props.t('welcomepage.join') }
</Text>
);
}
2018-02-16 16:06:03 +00:00
const buttonDisabled = this._isJoinDisabled();
return (
<TouchableHighlight
fix(i18n) Accessiblity labels translations (#3071) * fix(toolbar): accessibilityLabel should be translatable. This commit adds a helper property to get the accessibilityLabel of an item, providing a translation if one is available. This mimics the behavior of label and tooltip. * fix(toolbar) 'hangup' button accessibilityLabel i18n * fix(toolbar) 'mute' button accessibilityLabel i18n * fix(toolbar) 'videomute' button accessibilityLabel i18n * fix(toolbar) 'moreActions' button accessibilityLabel i18n * fix(toolbar) 'shareRoom' button accessibilityLabel i18n * fix(toolbar) 'audioRoute' button accessibilityLabel i18n * fix(toolbar) 'toggleCamera' button accessibilityLabel i18n * fix(toolbar) 'audioOnly' button accessibilityLabel i18n * fix(toolbar) 'roomLock' button accessibilityLabel i18n * fix(toolbar) 'pip' button accessibilityLabel i18n * fix(toolbar) 'invite' button accessibilityLabel i18n * fix(toolbar) 'raiseHand' button accessibilityLabel i18n * fix(toolbar) 'chat' button accessibilityLabel i18n * fix(toolbar) 'shareYourScreen' button accessibilityLabel i18n * fix(toolbar) 'fullScreen' button accessibilityLabel i18n * fix(toolbar) 'sharedvideo' button accessibilityLabel i18n * fix(toolbar) 'document' button accessibilityLabel i18n * fix(toolbar) 'speakerStats' button accessibilityLabel i18n * fix(toolbar) 'feedback' button accessibilityLabel i18n * fix(toolbar) 'shortcuts' button accessibilityLabel i18n * fix(toolbar) 'recording' button accessibilityLabel i18n * fix(toolbar) 'settings' button accessibilityLabel i18n * fix(welcomepage) accessibilityLabels i18n * fix(toolbar) 'info' button accessibilityLabel i18n * fix(i18n): Add translation to various aria-label property values. * fix(i18n): Differentiate between overflow menu and button.
2018-06-07 20:32:18 +00:00
accessibilityLabel =
{ t('welcomepage.accessibilityLabel.join') }
2018-02-16 16:06:03 +00:00
disabled = { buttonDisabled }
onPress = { this._onJoin }
2018-02-16 16:06:03 +00:00
style = { [
styles.button,
buttonDisabled ? styles.buttonDisabled : null
] }
underlayColor = { ColorPalette.white }>
{ children }
</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 {Object}
*/
function _mapStateToProps(state) {
const { reducedUI } = state['features/base/responsive-ui'];
return {
..._abstractMapStateToProps(state),
_headerStyles: ColorSchemeRegistry.get(state, 'Header'),
_reducedUI: reducedUI
};
}
export default translate(connect(_mapStateToProps)(WelcomePage));