When in PiP mode the LargeView will not be large enough to hold the avatar (for those interested in the details, our avatar's size is 200, and in PiP mode the app is resized to about 150). In order to solve it, this PR refactors how the avatar style is passed along, reducing it to a single "size" prop. With this only prop, the Avatar compononent will compute the width, height and borderRadius, plus deal with some Android shenanigans. In addition, the LargeView component now uses DimensionsDetector to check its own size and adjust the size prop passed to the Avatar component as needed.
46 lines
1.0 KiB
JavaScript
46 lines
1.0 KiB
JavaScript
import { BoxModel, ColorPalette, createStyleSheet } from '../../styles';
|
|
|
|
/**
|
|
* The styles of the feature base/participants.
|
|
*/
|
|
export default createStyleSheet({
|
|
/**
|
|
* The style of the avatar of the participant.
|
|
*/
|
|
avatar: {
|
|
alignSelf: 'center',
|
|
flex: 0
|
|
},
|
|
|
|
/**
|
|
* Style for the text rendered when there is a connectivity problem.
|
|
*/
|
|
connectionInfoText: {
|
|
color: ColorPalette.white,
|
|
fontSize: 12,
|
|
marginVertical: BoxModel.margin,
|
|
marginHorizontal: BoxModel.margin,
|
|
textAlign: 'center'
|
|
},
|
|
|
|
/**
|
|
* Style for the container of the text rendered when there is a
|
|
* connectivity problem.
|
|
*/
|
|
connectionInfoContainer: {
|
|
alignSelf: 'center',
|
|
backgroundColor: ColorPalette.darkGrey,
|
|
borderRadius: 20,
|
|
marginTop: BoxModel.margin
|
|
},
|
|
|
|
/**
|
|
* {@code ParticipantView} style.
|
|
*/
|
|
participantView: {
|
|
alignItems: 'stretch',
|
|
flex: 1,
|
|
justifyContent: 'center'
|
|
}
|
|
});
|