[RN] Add avatar to remote video menu

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<Props> {
         return (
             <BottomSheet onCancel = { this._onCancel }>
                 <View style = { styles.participantNameContainer }>
+                    <Avatar
+                        size = { AVATAR_SIZE }
+                        uri = { this.props._avatarURL } />
                     <Text style = { styles.participantNameLabel }>
                         { this.props._participantDisplayName }
                     </Text>
@@ -95,14 +112,17 @@ class RemoteVideoMenu extends Component<Props> {
  * @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)
     };
 }
 

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