[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.
This commit is contained in:
parent
98004c2328
commit
50fea44ce2
|
@ -1,8 +1,6 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { Image } from 'react-native';
|
import { Image } from 'react-native';
|
||||||
|
|
||||||
import { styles } from './styles';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Display a participant avatar.
|
* Display a participant avatar.
|
||||||
*/
|
*/
|
||||||
|
@ -33,7 +31,7 @@ export default class Avatar extends Component {
|
||||||
// XXX Avatar is expected to display the whole image.
|
// XXX Avatar is expected to display the whole image.
|
||||||
resizeMode = 'contain'
|
resizeMode = 'contain'
|
||||||
source = {{ uri: this.props.uri }}
|
source = {{ uri: this.props.uri }}
|
||||||
style = { [ styles.avatar, this.props.style ] } />
|
style = { this.props.style } />
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,19 +4,12 @@ import { createStyleSheet } from '../../styles';
|
||||||
* The style of the avatar and participant view UI (components).
|
* The style of the avatar and participant view UI (components).
|
||||||
*/
|
*/
|
||||||
export const styles = createStyleSheet({
|
export const styles = createStyleSheet({
|
||||||
/**
|
|
||||||
* Avatar style.
|
|
||||||
*/
|
|
||||||
avatar: {
|
|
||||||
flex: 1,
|
|
||||||
width: '100%'
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ParticipantView style.
|
* ParticipantView style.
|
||||||
*/
|
*/
|
||||||
participantView: {
|
participantView: {
|
||||||
alignItems: 'stretch',
|
alignItems: 'stretch',
|
||||||
flex: 1
|
flex: 1,
|
||||||
|
justifyContent: 'center'
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -95,6 +95,7 @@ class Thumbnail extends Component {
|
||||||
= { audioTrack.jitsiTrack.getOriginalStream() } /> }
|
= { audioTrack.jitsiTrack.getOriginalStream() } /> }
|
||||||
|
|
||||||
<ParticipantView
|
<ParticipantView
|
||||||
|
avatarStyle = { styles.avatar }
|
||||||
participantId = { participantId }
|
participantId = { participantId }
|
||||||
showAvatar = { participantNotInLargeVideo }
|
showAvatar = { participantNotInLargeVideo }
|
||||||
showVideo = { participantNotInLargeVideo }
|
showVideo = { participantNotInLargeVideo }
|
||||||
|
|
|
@ -4,6 +4,17 @@ import { BoxModel, ColorPalette } from '../../base/styles';
|
||||||
* Filmstrip related styles common to both Web and native.
|
* Filmstrip related styles common to both Web and native.
|
||||||
*/
|
*/
|
||||||
export const styles = {
|
export const styles = {
|
||||||
|
/**
|
||||||
|
* Avatar style.
|
||||||
|
*/
|
||||||
|
avatar: {
|
||||||
|
alignSelf: 'center',
|
||||||
|
borderRadius: 25,
|
||||||
|
flex: 0,
|
||||||
|
height: 50,
|
||||||
|
width: 50
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Dominant speaker indicator style.
|
* Dominant speaker indicator style.
|
||||||
*/
|
*/
|
||||||
|
|
Loading…
Reference in New Issue