Browse Source

[RN] Add avatar to remote video menu

master
Bettenbuk Zoltan 6 years ago
parent
commit
2ea5f3c1aa

+ 23
- 3
react/features/remote-video-menu/components/native/RemoteVideoMenu.js View File

8
     BottomSheet,
8
     BottomSheet,
9
     bottomSheetItemStylesCombined
9
     bottomSheetItemStylesCombined
10
 } from '../../../base/dialog';
10
 } from '../../../base/dialog';
11
-import { getParticipantDisplayName } from '../../../base/participants';
11
+import {
12
+    Avatar,
13
+    getAvatarURL,
14
+    getParticipantDisplayName
15
+} from '../../../base/participants';
12
 
16
 
13
 import { hideRemoteVideoMenu } from '../../actions';
17
 import { hideRemoteVideoMenu } from '../../actions';
14
 
18
 
16
 import MuteButton from './MuteButton';
20
 import MuteButton from './MuteButton';
17
 import styles from './styles';
21
 import styles from './styles';
18
 
22
 
23
+/**
24
+ * Size of the rendered avatar in the menu.
25
+ */
26
+const AVATAR_SIZE = 25;
27
+
19
 type Props = {
28
 type Props = {
20
 
29
 
21
     /**
30
     /**
28
      */
37
      */
29
     participant: Object,
38
     participant: Object,
30
 
39
 
40
+    /**
41
+     * URL of the avatar of the participant.
42
+     */
43
+    _avatarURL: string,
44
+
31
     /**
45
     /**
32
      * Display name of the participant retreived from Redux.
46
      * Display name of the participant retreived from Redux.
33
      */
47
      */
65
         return (
79
         return (
66
             <BottomSheet onCancel = { this._onCancel }>
80
             <BottomSheet onCancel = { this._onCancel }>
67
                 <View style = { styles.participantNameContainer }>
81
                 <View style = { styles.participantNameContainer }>
82
+                    <Avatar
83
+                        size = { AVATAR_SIZE }
84
+                        uri = { this.props._avatarURL } />
68
                     <Text style = { styles.participantNameLabel }>
85
                     <Text style = { styles.participantNameLabel }>
69
                         { this.props._participantDisplayName }
86
                         { this.props._participantDisplayName }
70
                     </Text>
87
                     </Text>
95
  * @param {Object} ownProps - Properties of component.
112
  * @param {Object} ownProps - Properties of component.
96
  * @private
113
  * @private
97
  * @returns {{
114
  * @returns {{
115
+ *      _avatarURL: string,
98
  *      _participantDisplayName: string
116
  *      _participantDisplayName: string
99
  *  }}
117
  *  }}
100
  */
118
  */
101
 function _mapStateToProps(state, ownProps) {
119
 function _mapStateToProps(state, ownProps) {
102
-    const { id } = ownProps.participant;
120
+    const { participant } = ownProps;
103
 
121
 
104
     return {
122
     return {
105
-        _participantDisplayName: getParticipantDisplayName(state, id)
123
+        _avatarURL: getAvatarURL(participant),
124
+        _participantDisplayName: getParticipantDisplayName(
125
+            state, participant.id)
106
     };
126
     };
107
 }
127
 }
108
 
128
 

+ 1
- 0
react/features/remote-video-menu/components/native/styles.js View File

15
         color: ColorPalette.lightGrey,
15
         color: ColorPalette.lightGrey,
16
         flexShrink: 1,
16
         flexShrink: 1,
17
         fontSize: 16,
17
         fontSize: 16,
18
+        marginLeft: 16,
18
         opacity: 0.90
19
         opacity: 0.90
19
     }
20
     }
20
 });
21
 });

Loading…
Cancel
Save