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

81 lines
2.0 KiB
JavaScript

// @flow
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { connect } from 'react-redux';
import {
getLocalParticipant,
getParticipantDisplayName,
shouldRenderParticipantVideo
} from '../../../base/participants';
import { shouldDisplayTileView } from '../../../video-layout';
import styles from './styles';
type Props = {
/**
* The name of the participant to render.
*/
_participantName: string,
/**
* True of the label needs to be rendered. False otherwise.
*/
_render: boolean
}
/**
* Renders a label with the display name of the on-stage participant.
*/
class DisplayNameLabel extends Component<Props> {
/**
* Implements {@code Component#render}.
*
* @inheritdoc
*/
render() {
if (!this.props._render) {
return null;
}
return (
<View style = { styles.displayNameBackdrop }>
<Text style = { styles.displayNameText }>
{ this.props._participantName }
</Text>
</View>
);
}
}
/**
* Maps part of the Redux state to the props of this component.
*
* @param {Object} state - The Redux state.
* @returns {{
* }}
*/
function _mapStateToProps(state: Object) {
const largeVideoParticipantId = state['features/large-video'].participantId;
const localParticipant = getLocalParticipant(state);
// Currently we only render the display name if it's not the local
// participant, we're not in tile view and there is no video rendered for
// the on-stage participant.
const _render = localParticipant.id !== largeVideoParticipantId
&& !shouldDisplayTileView(state)
&& !shouldRenderParticipantVideo(state, largeVideoParticipantId);
return {
_participantName:
getParticipantDisplayName(state, largeVideoParticipantId),
_render
};
}
// $FlowExpectedError
export default connect(_mapStateToProps)(DisplayNameLabel);