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

175 lines
4.6 KiB
JavaScript
Raw Normal View History

2018-02-02 14:50:16 +00:00
// @flow
import React, { Component } from 'react';
import { SafeAreaView, ScrollView, Text } from 'react-native';
import {
Avatar,
getAvatarURL,
getLocalParticipant,
getParticipantDisplayName
} from '../../base/participants';
import {
Header,
SlidingView
2018-02-02 14:50:16 +00:00
} from '../../base/react';
2019-03-21 16:38:29 +00:00
import { connect } from '../../base/redux';
import { setSettingsViewVisible } from '../../settings';
import { setSideBarVisible } from '../actions';
import SideBarItem from './SideBarItem';
import styles, { SIDEBAR_AVATAR_SIZE } from './styles';
2018-02-02 14:50:16 +00:00
/**
* The URL at which the privacy policy is available to the user.
*/
const PRIVACY_URL = 'https://jitsi.org/meet/privacy';
/**
* The URL at which the user may send feedback.
*/
const SEND_FEEDBACK_URL = 'mailto:support@jitsi.org';
/**
* The URL at which the terms (of service/use) are available to the user.
*/
const TERMS_URL = 'https://jitsi.org/meet/terms';
type Props = {
/**
* Redux dispatch action
*/
dispatch: Function,
/**
* The avatar URL to be rendered.
*/
2018-05-29 12:51:55 +00:00
_avatarURL: string,
2018-02-02 14:50:16 +00:00
/**
* Display name of the local participant.
*/
_displayName: string,
/**
* Sets the side bar visible or hidden.
*/
_visible: boolean
};
/**
* A component rendering a welcome page sidebar.
*/
class WelcomePageSideBar extends Component<Props> {
/**
* Constructs a new SideBar instance.
*
* @inheritdoc
*/
2019-03-19 15:42:25 +00:00
constructor(props: Props) {
2018-02-02 14:50:16 +00:00
super(props);
// Bind event handlers so they are only bound once per instance.
2018-02-02 14:50:16 +00:00
this._onHideSideBar = this._onHideSideBar.bind(this);
this._onOpenSettings = this._onOpenSettings.bind(this);
}
/**
* Implements React's {@link Component#render()}, renders the sidebar.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
return (
<SlidingView
2018-02-02 14:50:16 +00:00
onHide = { this._onHideSideBar }
position = 'left'
show = { this.props._visible }
style = { styles.sideBar } >
2018-02-02 14:50:16 +00:00
<Header style = { styles.sideBarHeader }>
<Avatar
size = { SIDEBAR_AVATAR_SIZE }
2018-02-02 14:50:16 +00:00
style = { styles.avatar }
2018-05-29 12:51:55 +00:00
uri = { this.props._avatarURL } />
2018-02-02 14:50:16 +00:00
<Text style = { styles.displayName }>
{ this.props._displayName }
</Text>
</Header>
<SafeAreaView style = { styles.sideBarBody }>
<ScrollView
style = { styles.itemContainer }>
<SideBarItem
icon = 'settings'
2018-05-29 12:51:55 +00:00
label = 'settings.title'
2018-02-02 14:50:16 +00:00
onPress = { this._onOpenSettings } />
<SideBarItem
icon = 'info'
2018-05-29 12:51:55 +00:00
label = 'welcomepage.terms'
2018-02-02 14:50:16 +00:00
url = { TERMS_URL } />
<SideBarItem
icon = 'info'
2018-05-29 12:51:55 +00:00
label = 'welcomepage.privacy'
2018-02-02 14:50:16 +00:00
url = { PRIVACY_URL } />
<SideBarItem
icon = 'info'
2018-05-29 12:51:55 +00:00
label = 'welcomepage.sendFeedback'
2018-02-02 14:50:16 +00:00
url = { SEND_FEEDBACK_URL } />
</ScrollView>
</SafeAreaView>
</SlidingView>
2018-02-02 14:50:16 +00:00
);
}
_onHideSideBar: () => void;
/**
* Invoked when the sidebar has closed itself (e.g. Overlay pressed).
2018-02-02 14:50:16 +00:00
*
* @private
* @returns {void}
*/
_onHideSideBar() {
this.props.dispatch(setSideBarVisible(false));
2018-02-02 14:50:16 +00:00
}
_onOpenSettings: () => void;
/**
* Shows the {@link SettingsView}.
2018-02-02 14:50:16 +00:00
*
* @private
* @returns {void}
*/
_onOpenSettings() {
const { dispatch } = this.props;
dispatch(setSideBarVisible(false));
dispatch(setSettingsViewVisible(true));
2018-02-02 14:50:16 +00:00
}
}
/**
* Maps (parts of) the redux state to the React {@code Component} props.
*
* @param {Object} state - The redux state.
* @protected
2018-05-29 12:51:55 +00:00
* @returns {{
* _avatarURL: string,
* _displayName: string,
* _visible: boolean
* }}
2018-02-02 14:50:16 +00:00
*/
function _mapStateToProps(state: Object) {
const localParticipant = getLocalParticipant(state);
2018-02-02 14:50:16 +00:00
return {
2018-05-29 12:51:55 +00:00
_avatarURL: getAvatarURL(localParticipant),
_displayName: getParticipantDisplayName(state, localParticipant.id),
2018-02-02 14:50:16 +00:00
_visible: state['features/welcome'].sideBarVisible
};
}
export default connect(_mapStateToProps)(WelcomePageSideBar);