131 lines
3.1 KiB
JavaScript
131 lines
3.1 KiB
JavaScript
import { Platform } from '../../base/react';
|
|
import { BoxModel, ColorPalette } from '../../base/styles';
|
|
|
|
/**
|
|
* Filmstrip related styles common to both Web and native.
|
|
*/
|
|
export const styles = {
|
|
/**
|
|
* Avatar style.
|
|
*/
|
|
avatar: {
|
|
alignSelf: 'center',
|
|
|
|
// XXX Workaround for Android: for images < 80 the border radius doesn't
|
|
// work properly, but applying a radius twice as big does the trick.
|
|
borderRadius: Platform.OS === 'android' ? 100 : 25,
|
|
flex: 0,
|
|
height: 50,
|
|
width: 50
|
|
},
|
|
|
|
/**
|
|
* Dominant speaker indicator style.
|
|
*/
|
|
dominantSpeakerIndicator: {
|
|
color: ColorPalette.white,
|
|
fontSize: 15
|
|
},
|
|
|
|
/**
|
|
* Dominant speaker indicator background style.
|
|
*/
|
|
dominantSpeakerIndicatorBackground: {
|
|
backgroundColor: ColorPalette.blue,
|
|
borderRadius: 15,
|
|
left: 4,
|
|
padding: 5,
|
|
position: 'absolute',
|
|
top: 4
|
|
},
|
|
|
|
/**
|
|
* The style of the Container which represents the very filmstrip.
|
|
*/
|
|
filmstrip: {
|
|
alignItems: 'flex-end',
|
|
alignSelf: 'stretch',
|
|
bottom: BoxModel.margin,
|
|
flex: 1,
|
|
flexDirection: 'column',
|
|
left: 0,
|
|
position: 'absolute',
|
|
right: 0
|
|
},
|
|
|
|
/**
|
|
* The style of the content container of the ScrollView which is placed
|
|
* inside filmstrip and which contains the participants' thumbnails in order
|
|
* to allow scrolling through them if they do not fit within the display.
|
|
*/
|
|
filmstripScrollViewContentContainer: {
|
|
paddingHorizontal: BoxModel.padding
|
|
},
|
|
|
|
/**
|
|
* Moderator indicator style.
|
|
*/
|
|
moderatorIndicator: {
|
|
backgroundColor: 'transparent',
|
|
bottom: 4,
|
|
color: ColorPalette.white,
|
|
position: 'absolute',
|
|
right: 4
|
|
},
|
|
|
|
/**
|
|
* The style of a participant's Thumbnail which renders either the video or
|
|
* the avatar of the associated participant.
|
|
*/
|
|
thumbnail: {
|
|
alignItems: 'stretch',
|
|
backgroundColor: ColorPalette.appBackground,
|
|
borderColor: '#424242',
|
|
borderRadius: 3,
|
|
borderStyle: 'solid',
|
|
borderWidth: 1,
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
marginLeft: 2,
|
|
marginRight: 2,
|
|
overflow: 'hidden',
|
|
position: 'relative'
|
|
},
|
|
|
|
/**
|
|
* The thumbnail audio and video muted indicator style.
|
|
*/
|
|
thumbnailIndicator: {
|
|
backgroundColor: 'transparent',
|
|
color: ColorPalette.white,
|
|
paddingLeft: 1,
|
|
paddingRight: 1,
|
|
position: 'relative'
|
|
},
|
|
|
|
/**
|
|
* The thumbnails indicator container.
|
|
*/
|
|
thumbnailIndicatorContainer: {
|
|
alignSelf: 'stretch',
|
|
bottom: 4,
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
left: 4,
|
|
position: 'absolute'
|
|
},
|
|
|
|
/**
|
|
* Pinned video thumbnail style.
|
|
*/
|
|
thumbnailPinned: {
|
|
borderColor: ColorPalette.blue,
|
|
shadowColor: ColorPalette.black,
|
|
shadowOffset: {
|
|
height: 5,
|
|
width: 5
|
|
},
|
|
shadowRadius: 5
|
|
}
|
|
};
|