92 lines
2.9 KiB
TypeScript
92 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
import { Text, View } from 'react-native';
|
|
|
|
import { getConferenceName } from '../../../../base/conference/functions';
|
|
import { ConnectionIndicator } from '../../../../connection-indicator';
|
|
import { getFeatureFlag, MEETING_NAME_ENABLED } from '../../../../base/flags';
|
|
import { JitsiRecordingConstants } from '../../../../base/lib-jitsi-meet';
|
|
import { connect } from '../../../../base/redux';;
|
|
import { RecordingLabel } from '../../../../recording';
|
|
import { VideoQualityLabel } from '../../../../video-quality';
|
|
|
|
import { getLocalParticipant } from '../../../../base/participants';
|
|
import styles from './styles';
|
|
|
|
|
|
type Props = {
|
|
|
|
/**
|
|
* Name of the meeting we're currently in.
|
|
*/
|
|
_meetingName: string,
|
|
|
|
/**
|
|
* Whether displaying the current meeting name is enabled or not.
|
|
*/
|
|
_meetingNameEnabled: boolean,
|
|
|
|
};
|
|
|
|
/**
|
|
* Implements a navigation bar component that is rendered on top of the
|
|
* carmode screen.
|
|
*
|
|
* @param {Props} props - The React props passed to this component.
|
|
* @returns {JSX.Element}
|
|
*/
|
|
const TitleBar = (props: Props) : JSX.Element => {
|
|
const localParticipant = useSelector(getLocalParticipant);
|
|
const localParticipantId = localParticipant?.id;
|
|
|
|
return (<>
|
|
<View
|
|
pointerEvents = 'box-none'
|
|
style = { styles.titleBarWrapper }>
|
|
<View
|
|
pointerEvents = 'box-none'
|
|
style = { styles.roomNameWrapper }>
|
|
<View style = { styles.qualityLabelContainer }>
|
|
<VideoQualityLabel />
|
|
</View>
|
|
<ConnectionIndicator
|
|
participantId = { localParticipantId }
|
|
iconStyle = { styles.connectionIndicatorIcon } />
|
|
<View style = { styles.headerLabels }>
|
|
<RecordingLabel mode = { JitsiRecordingConstants.mode.FILE } />
|
|
<RecordingLabel mode = { JitsiRecordingConstants.mode.STREAM } />
|
|
</View>
|
|
|
|
{
|
|
props._meetingNameEnabled
|
|
&& <View style = { styles.roomNameView }>
|
|
<Text
|
|
numberOfLines = { 1 }
|
|
style = { styles.roomName }>
|
|
{props._meetingName}
|
|
</Text>
|
|
</View>
|
|
}
|
|
</View>
|
|
</View>
|
|
</>);
|
|
}
|
|
|
|
/**
|
|
* Maps part of the Redux store to the props of this component.
|
|
*
|
|
* @param {Object} state - The Redux state.
|
|
* @returns {Props}
|
|
*/
|
|
function _mapStateToProps(state: Object) {
|
|
const { hideConferenceSubject } = state['features/base/config'];
|
|
|
|
return {
|
|
_meetingName: getConferenceName(state),
|
|
_meetingNameEnabled:
|
|
getFeatureFlag(state, MEETING_NAME_ENABLED, true) && !hideConferenceSubject
|
|
};
|
|
}
|
|
|
|
export default connect(_mapStateToProps)(TitleBar);
|