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

184 lines
5.0 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';
2019-06-26 14:08:23 +00:00
import { Avatar } from '../../base/avatar';
2020-03-30 15:26:15 +00:00
import { IconInfo, IconSettings, IconHelp } from '../../base/icons';
import { setActiveModalId } from '../../base/modal';
2018-02-02 14:50:16 +00:00
import {
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';
2020-03-30 15:26:15 +00:00
import { HELP_VIEW_MODAL_ID } from '../../help';
2020-04-06 15:21:50 +00:00
import { SETTINGS_VIEW_ID } from '../../settings';
import { setSideBarVisible } from '../actions';
2020-05-20 10:57:03 +00:00
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 terms (of service/use) are available to the user.
*/
const TERMS_URL = 'https://jitsi.org/meet/terms';
type Props = {
/**
* Redux dispatch action
*/
dispatch: Function,
/**
2019-06-26 14:08:23 +00:00
* Display name of the local participant.
2018-02-02 14:50:16 +00:00
*/
_displayName: ?string,
2018-02-02 14:50:16 +00:00
/**
2019-06-26 14:08:23 +00:00
* ID of the local participant.
2018-02-02 14:50:16 +00:00
*/
_localParticipantId: ?string,
2018-02-02 14:50:16 +00:00
/**
* 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);
2020-03-30 15:26:15 +00:00
this._onOpenHelpPage = this._onOpenHelpPage.bind(this);
2018-02-02 14:50:16 +00:00
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
2019-06-26 14:08:23 +00:00
participantId = { this.props._localParticipantId }
size = { SIDEBAR_AVATAR_SIZE } />
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
2019-08-30 16:39:06 +00:00
icon = { IconSettings }
2018-05-29 12:51:55 +00:00
label = 'settings.title'
2018-02-02 14:50:16 +00:00
onPress = { this._onOpenSettings } />
<SideBarItem
2019-08-30 16:39:06 +00:00
icon = { IconInfo }
2018-05-29 12:51:55 +00:00
label = 'welcomepage.terms'
2018-02-02 14:50:16 +00:00
url = { TERMS_URL } />
<SideBarItem
2019-08-30 16:39:06 +00:00
icon = { IconInfo }
2018-05-29 12:51:55 +00:00
label = 'welcomepage.privacy'
2018-02-02 14:50:16 +00:00
url = { PRIVACY_URL } />
<SideBarItem
2020-03-30 15:26:15 +00:00
icon = { IconHelp }
label = 'welcomepage.getHelp'
onPress = { this._onOpenHelpPage } />
2018-02-02 14:50:16 +00:00
</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
}
2020-03-30 15:26:15 +00:00
_onOpenHelpPage: () => void;
/**
* Shows the {@link HelpView}.
*
* @returns {void}
*/
_onOpenHelpPage() {
const { dispatch } = this.props;
dispatch(setSideBarVisible(false));
dispatch(setActiveModalId(HELP_VIEW_MODAL_ID));
}
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));
2020-04-06 15:21:50 +00:00
dispatch(setActiveModalId(SETTINGS_VIEW_ID));
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
2019-06-26 14:08:23 +00:00
* @returns {Props}
2018-02-02 14:50:16 +00:00
*/
function _mapStateToProps(state: Object) {
2019-06-26 14:08:23 +00:00
const _localParticipant = getLocalParticipant(state);
const _localParticipantId = _localParticipant?.id;
const _displayName = _localParticipant && getParticipantDisplayName(state, _localParticipantId);
2018-02-02 14:50:16 +00:00
return {
_displayName,
_localParticipantId,
2018-02-02 14:50:16 +00:00
_visible: state['features/welcome'].sideBarVisible
};
}
export default connect(_mapStateToProps)(WelcomePageSideBar);