浏览代码

[RN] Use rounded avatars in the film strip

Also move (native) avatar style to film-strip styles, since  that's where it
applies. This is analogous to how the large-view avatar is styled.
j8
Saúl Ibarra Corretgé 8 年前
父节点
当前提交
50fea44ce2

+ 1
- 3
react/features/base/participants/components/Avatar.native.js 查看文件

1
 import React, { Component } from 'react';
1
 import React, { Component } from 'react';
2
 import { Image } from 'react-native';
2
 import { Image } from 'react-native';
3
 
3
 
4
-import { styles } from './styles';
5
-
6
 /**
4
 /**
7
  * Display a participant avatar.
5
  * Display a participant avatar.
8
  */
6
  */
33
                 // XXX Avatar is expected to display the whole image.
31
                 // XXX Avatar is expected to display the whole image.
34
                 resizeMode = 'contain'
32
                 resizeMode = 'contain'
35
                 source = {{ uri: this.props.uri }}
33
                 source = {{ uri: this.props.uri }}
36
-                style = { [ styles.avatar, this.props.style ] } />
34
+                style = { this.props.style } />
37
         );
35
         );
38
     }
36
     }
39
 }
37
 }

+ 2
- 9
react/features/base/participants/components/styles.js 查看文件

4
  * The style of the avatar and participant view UI (components).
4
  * The style of the avatar and participant view UI (components).
5
  */
5
  */
6
 export const styles = createStyleSheet({
6
 export const styles = createStyleSheet({
7
-    /**
8
-     * Avatar style.
9
-     */
10
-    avatar: {
11
-        flex: 1,
12
-        width: '100%'
13
-    },
14
-
15
     /**
7
     /**
16
      * ParticipantView style.
8
      * ParticipantView style.
17
      */
9
      */
18
     participantView: {
10
     participantView: {
19
         alignItems: 'stretch',
11
         alignItems: 'stretch',
20
-        flex: 1
12
+        flex: 1,
13
+        justifyContent: 'center'
21
     }
14
     }
22
 });
15
 });

+ 1
- 0
react/features/filmstrip/components/Thumbnail.js 查看文件

95
                             = { audioTrack.jitsiTrack.getOriginalStream() } /> }
95
                             = { audioTrack.jitsiTrack.getOriginalStream() } /> }
96
 
96
 
97
                 <ParticipantView
97
                 <ParticipantView
98
+                    avatarStyle = { styles.avatar }
98
                     participantId = { participantId }
99
                     participantId = { participantId }
99
                     showAvatar = { participantNotInLargeVideo }
100
                     showAvatar = { participantNotInLargeVideo }
100
                     showVideo = { participantNotInLargeVideo }
101
                     showVideo = { participantNotInLargeVideo }

+ 11
- 0
react/features/filmstrip/components/styles.js 查看文件

4
  * Filmstrip related styles common to both Web and native.
4
  * Filmstrip related styles common to both Web and native.
5
  */
5
  */
6
 export const styles = {
6
 export const styles = {
7
+    /**
8
+     * Avatar style.
9
+     */
10
+    avatar: {
11
+        alignSelf: 'center',
12
+        borderRadius: 25,
13
+        flex: 0,
14
+        height: 50,
15
+        width: 50
16
+    },
17
+
7
     /**
18
     /**
8
      * Dominant speaker indicator style.
19
      * Dominant speaker indicator style.
9
      */
20
      */

正在加载...
取消
保存