jiti-meet/react/features/conference/components/native/TitleBar.js

118 lines
4.0 KiB
JavaScript
Raw Normal View History

2019-01-30 15:43:57 +00:00
// @flow
2021-03-18 10:54:49 +00:00
import React from 'react';
import { Text, View } from 'react-native';
2019-01-30 15:43:57 +00:00
import { getConferenceName, getConferenceTimestamp } from '../../../base/conference/functions';
import { CONFERENCE_TIMER_ENABLED, MEETING_NAME_ENABLED, getFeatureFlag } from '../../../base/flags';
2019-03-21 16:38:29 +00:00
import { connect } from '../../../base/redux';
import AudioDeviceToggleButton from '../../../mobile/audio-mode/components/AudioDeviceToggleButton';
2019-01-30 15:43:57 +00:00
import { PictureInPictureButton } from '../../../mobile/picture-in-picture';
import { ParticipantsPaneButton } from '../../../participants-pane/components/native';
import ToggleCameraButton from '../../../toolbox/components/native/ToggleCameraButton';
2020-07-24 12:14:33 +00:00
import { isToolboxVisible } from '../../../toolbox/functions.native';
2020-01-13 17:12:25 +00:00
import ConferenceTimer from '../ConferenceTimer';
2020-05-20 10:57:03 +00:00
import Labels from './Labels';
2021-03-18 10:54:49 +00:00
import styles from './styles';
2019-01-30 15:43:57 +00:00
type Props = {
/**
* Creates a function to be invoked when the onPress of the touchables are
* triggered.
*/
_createOnPress: Function,
/**
* Whether displaying the current conference timer is enabled or not.
*/
_conferenceTimerEnabled: boolean,
2019-01-30 15:43:57 +00:00
/**
* Name of the meeting we're currently in.
*/
_meetingName: string,
/**
* Whether displaying the current meeting name is enabled or not.
*/
_meetingNameEnabled: boolean,
2019-01-30 15:43:57 +00:00
/**
* True if the navigation bar should be visible.
*/
_visible: boolean
};
/**
* Implements a navigation bar component that is rendered on top of the
* conference screen.
2021-03-18 10:54:49 +00:00
*
* @param {Props} props - The React props passed to this component.
* @returns {React.Node}
2019-01-30 15:43:57 +00:00
*/
const TitleBar = (props: Props) => (<>
{props._visible && <View
pointerEvents = 'box-none'
style = { styles.titleBarWrapper }>
<View style = { styles.pipButtonContainer }>
<PictureInPictureButton styles = { styles.pipButton } />
</View>
2021-03-18 10:54:49 +00:00
<View
pointerEvents = 'box-none'
style = { styles.roomNameWrapper }>
{
props._conferenceTimerEnabled
&& <View style = { styles.roomTimerView }>
<ConferenceTimer textStyle = { styles.roomTimer } />
</View>
}
{
props._meetingNameEnabled
&& <View style = { styles.roomNameView }>
<Text
numberOfLines = { 1 }
style = { styles.roomName }>
{ props._meetingName }
</Text>
</View>
}
{/* eslint-disable-next-line react/jsx-no-bind */}
<Labels createOnPress = { props._createOnPress } />
2021-03-18 10:54:49 +00:00
</View>
<View style = { styles.titleBarButtonContainer }>
<ToggleCameraButton styles = { styles.titleBarButton } />
</View>
<View style = { styles.titleBarButtonContainer }>
<AudioDeviceToggleButton styles = { styles.titleBarButton } />
</View>
<View style = { styles.titleBarButtonContainer }>
<ParticipantsPaneButton styles = { styles.titleBarButton } />
</View>
</View>}
</>);
2019-01-30 15:43:57 +00:00
/**
* Maps part of the Redux store to the props of this component.
*
* @param {Object} state - The Redux state.
* @returns {Props}
2019-01-30 15:43:57 +00:00
*/
function _mapStateToProps(state) {
const { hideConferenceTimer, hideConferenceSubject } = state['features/base/config'];
const startTimestamp = getConferenceTimestamp(state);
2019-01-30 15:43:57 +00:00
return {
_conferenceTimerEnabled:
Boolean(getFeatureFlag(state, CONFERENCE_TIMER_ENABLED, true) && !hideConferenceTimer && startTimestamp),
2019-05-29 07:53:12 +00:00
_meetingName: getConferenceName(state),
_meetingNameEnabled:
getFeatureFlag(state, MEETING_NAME_ENABLED, true) && !hideConferenceSubject,
2019-01-30 15:43:57 +00:00
_visible: isToolboxVisible(state)
};
}
export default connect(_mapStateToProps)(TitleBar);