You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

DisplayNameLabel.js 2.0KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. // @flow
  2. import React, { Component } from 'react';
  3. import { Text, View } from 'react-native';
  4. import {
  5. getLocalParticipant,
  6. getParticipantDisplayName,
  7. shouldRenderParticipantVideo
  8. } from '../../../base/participants';
  9. import { connect } from '../../../base/redux';
  10. import styles from './styles';
  11. type Props = {
  12. /**
  13. * The name of the participant to render.
  14. */
  15. _participantName: string,
  16. /**
  17. * True of the label needs to be rendered. False otherwise.
  18. */
  19. _render: boolean,
  20. /**
  21. * The ID of the participant to render the label for.
  22. */
  23. participantId: string
  24. }
  25. /**
  26. * Renders a label with the display name of the on-stage participant.
  27. */
  28. class DisplayNameLabel extends Component<Props> {
  29. /**
  30. * Implements {@code Component#render}.
  31. *
  32. * @inheritdoc
  33. */
  34. render() {
  35. if (!this.props._render) {
  36. return null;
  37. }
  38. return (
  39. <View style = { styles.displayNameBackdrop }>
  40. <Text style = { styles.displayNameText }>
  41. { this.props._participantName }
  42. </Text>
  43. </View>
  44. );
  45. }
  46. }
  47. /**
  48. * Maps part of the Redux state to the props of this component.
  49. *
  50. * @param {Object} state - The Redux state.
  51. * @param {Props} ownProps - The own props of the component.
  52. * @returns {{
  53. * }}
  54. */
  55. function _mapStateToProps(state: Object, ownProps: Props) {
  56. const { participantId } = ownProps;
  57. const localParticipant = getLocalParticipant(state);
  58. // Currently we only render the display name if it's not the local
  59. // participant and there is no video rendered for
  60. // them.
  61. const _render = Boolean(participantId)
  62. && localParticipant.id !== participantId
  63. && !shouldRenderParticipantVideo(state, participantId);
  64. return {
  65. _participantName:
  66. getParticipantDisplayName(state, participantId),
  67. _render
  68. };
  69. }
  70. export default connect(_mapStateToProps)(DisplayNameLabel);