jiti-meet/react/features/filmstrip/components/native/styles.js

180 lines
3.8 KiB
JavaScript
Raw Normal View History

2019-03-27 10:23:41 +00:00
// @flow
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
import { SMALL_THUMBNAIL_SIZE } from '../../constants';
2019-03-27 10:23:41 +00:00
/**
* Size for the Avatar.
*/
export const AVATAR_SIZE = 50;
const indicatorContainer = {
backgroundColor: 'rgba(0, 0, 0, 0.7)',
borderRadius: 4,
margin: 2,
padding: 2
};
/**
* The styles of the feature filmstrip.
*/
2019-03-27 10:23:41 +00:00
export default {
/**
2021-11-04 21:10:43 +00:00
* The FlatList content container styles.
*/
contentContainer: {
alignItems: 'center',
justifyContent: 'center',
flex: 0
},
/**
* The display name container.
*/
displayNameContainer: {
padding: 2
},
2019-03-27 10:23:41 +00:00
/**
* The style of the narrow {@link Filmstrip} version which displays
* thumbnails in a row at the bottom of the screen.
*/
filmstripNarrow: {
flexDirection: 'row',
flexGrow: 0,
justifyContent: 'flex-end',
margin: 6
2019-03-27 10:23:41 +00:00
},
/**
* The style of the wide {@link Filmstrip} version which displays thumbnails
* in a column on the short size of the screen.
*
* NOTE: width is calculated based on the children, but it should also align
* to {@code FILMSTRIP_SIZE}.
*/
filmstripWide: {
bottom: 0,
flexDirection: 'column',
flexGrow: 0,
position: 'absolute',
right: 0,
top: 0
},
/**
* The styles for the FlatList container.
*/
flatListContainer: {
flexGrow: 1,
flexShrink: 1,
flex: 0
},
/**
* The styles for the FlatList component in stage view.
*/
flatListStageView: {
flexGrow: 0
},
/**
* The styles for the FlatList component in tile view.
*/
flatListTileView: {
flex: 0
},
2019-03-27 10:23:41 +00:00
/**
* Container of the {@link LocalThumbnail}.
*/
localThumbnail: {
alignContent: 'stretch',
alignSelf: 'stretch',
aspectRatio: 1,
flexShrink: 0,
flexDirection: 'row'
},
/**
2019-03-27 10:23:41 +00:00
* The style of a participant's Thumbnail which renders either the video or
* the avatar of the associated participant.
*/
thumbnail: {
2019-03-27 10:23:41 +00:00
alignItems: 'stretch',
backgroundColor: BaseTheme.palette.ui02,
2019-03-27 10:23:41 +00:00
borderColor: '#424242',
borderRadius: 4,
2019-03-27 10:23:41 +00:00
borderStyle: 'solid',
borderWidth: 1,
flex: 1,
height: SMALL_THUMBNAIL_SIZE,
2019-03-27 10:23:41 +00:00
justifyContent: 'center',
margin: 2,
maxHeight: SMALL_THUMBNAIL_SIZE,
maxWidth: SMALL_THUMBNAIL_SIZE,
2019-03-27 10:23:41 +00:00
overflow: 'hidden',
position: 'relative',
width: SMALL_THUMBNAIL_SIZE
},
indicatorContainer,
2019-03-27 10:23:41 +00:00
/**
* The thumbnails indicator container.
*/
2019-03-27 10:23:41 +00:00
thumbnailIndicatorContainer: {
alignSelf: 'center',
2019-03-27 10:23:41 +00:00
bottom: 4,
flex: 1,
flexDirection: 'row',
left: 4,
position: 'absolute',
maxWidth: '95%',
overflow: 'hidden',
...indicatorContainer,
padding: 0
},
bottomIndicatorsContainer: {
padding: 2,
flexDirection: 'row'
2019-03-27 10:23:41 +00:00
},
2019-03-29 13:26:49 +00:00
thumbnailTopIndicatorContainer: {
padding: 4,
position: 'absolute',
top: 0,
flexDirection: 'row'
2019-03-29 13:26:49 +00:00
},
2019-04-15 16:23:28 +00:00
thumbnailTopLeftIndicatorContainer: {
left: 0
},
raisedHandIndicator: {
...indicatorContainer,
backgroundColor: BaseTheme.palette.warning02
},
raisedHandIcon: {
color: BaseTheme.palette.uiBackground
},
thumbnailRaisedHand: {
borderWidth: 2,
borderColor: BaseTheme.palette.warning02
},
thumbnailDominantSpeaker: {
borderWidth: 4,
borderColor: BaseTheme.palette.action01Hover
},
thumbnailGif: {
flexGrow: 1,
resizeMode: 'contain'
2019-03-27 10:23:41 +00:00
}
};