jiti-meet/react/features/conference/components/native/carmode/TitleBar.tsx

92 lines
2.9 KiB
TypeScript
Raw Normal View History

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);