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

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