diff --git a/react/features/remote-video-menu/components/native/RemoteVideoMenu.js b/react/features/remote-video-menu/components/native/RemoteVideoMenu.js index 670ab368f6..11d8ae0d83 100644 --- a/react/features/remote-video-menu/components/native/RemoteVideoMenu.js +++ b/react/features/remote-video-menu/components/native/RemoteVideoMenu.js @@ -8,7 +8,11 @@ import { BottomSheet, bottomSheetItemStylesCombined } from '../../../base/dialog'; -import { getParticipantDisplayName } from '../../../base/participants'; +import { + Avatar, + getAvatarURL, + getParticipantDisplayName +} from '../../../base/participants'; import { hideRemoteVideoMenu } from '../../actions'; @@ -16,6 +20,11 @@ import KickButton from './KickButton'; import MuteButton from './MuteButton'; import styles from './styles'; +/** + * Size of the rendered avatar in the menu. + */ +const AVATAR_SIZE = 25; + type Props = { /** @@ -28,6 +37,11 @@ type Props = { */ participant: Object, + /** + * URL of the avatar of the participant. + */ + _avatarURL: string, + /** * Display name of the participant retreived from Redux. */ @@ -65,6 +79,9 @@ class RemoteVideoMenu extends Component { return ( + { this.props._participantDisplayName } @@ -95,14 +112,17 @@ class RemoteVideoMenu extends Component { * @param {Object} ownProps - Properties of component. * @private * @returns {{ + * _avatarURL: string, * _participantDisplayName: string * }} */ function _mapStateToProps(state, ownProps) { - const { id } = ownProps.participant; + const { participant } = ownProps; return { - _participantDisplayName: getParticipantDisplayName(state, id) + _avatarURL: getAvatarURL(participant), + _participantDisplayName: getParticipantDisplayName( + state, participant.id) }; } diff --git a/react/features/remote-video-menu/components/native/styles.js b/react/features/remote-video-menu/components/native/styles.js index 7479e40e24..e82693bd27 100644 --- a/react/features/remote-video-menu/components/native/styles.js +++ b/react/features/remote-video-menu/components/native/styles.js @@ -15,6 +15,7 @@ export default createStyleSheet({ color: ColorPalette.lightGrey, flexShrink: 1, fontSize: 16, + marginLeft: 16, opacity: 0.90 } });