123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184 |
- // @flow
-
- import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
- import { ColorPalette } from '../../../base/styles';
- import { SMALL_THUMBNAIL_SIZE } from '../../constants';
-
- /**
- * Size for the Avatar.
- */
- export const AVATAR_SIZE = 50;
-
- /**
- * The styles of the feature filmstrip.
- */
- export default {
-
- /**
- * The FlatList content container styles
- */
- contentContainer: {
- alignItems: 'center',
- justifyContent: 'center',
- flex: 0
- },
-
- /**
- * The display name container.
- */
- displayNameContainer: {
- alignSelf: 'center',
- bottom: 0,
- flex: 1,
- margin: 4,
- position: 'absolute'
- },
-
- /**
- * 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',
- marginBottom: 5
- },
-
- /**
- * 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.
- */
- flatList: {
- flex: 0
- },
-
- /**
- * Container of the {@link LocalThumbnail}.
- */
- localThumbnail: {
- alignContent: 'stretch',
- alignSelf: 'stretch',
- aspectRatio: 1,
- flexShrink: 0,
- flexDirection: 'row'
- },
-
- moderatorIndicatorContainer: {
- bottom: 4,
- position: 'absolute',
- right: 4
- },
-
- /**
- * The style of the scrollview containing the remote thumbnails.
- */
- scrollView: {
- flexGrow: 0
- },
-
- /**
- * 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,
- height: SMALL_THUMBNAIL_SIZE,
- justifyContent: 'center',
- margin: 2,
- maxHeight: SMALL_THUMBNAIL_SIZE,
- maxWidth: SMALL_THUMBNAIL_SIZE,
- overflow: 'hidden',
- position: 'relative',
- width: SMALL_THUMBNAIL_SIZE
- },
-
- /**
- * The thumbnails indicator container.
- */
- thumbnailIndicatorContainer: {
- alignSelf: 'stretch',
- bottom: 4,
- flex: 1,
- flexDirection: 'row',
- left: 4,
- position: 'absolute'
- },
-
- thumbnailTopIndicatorContainer: {
- padding: 4,
- position: 'absolute',
- top: 0
- },
-
- thumbnailTopLeftIndicatorContainer: {
- left: 0
- },
-
- thumbnailTopRightIndicatorContainer: {
- right: 0
- }
- };
-
- /**
- * Color schemed styles for the @{code Thumbnail} component.
- */
- ColorSchemeRegistry.register('Thumbnail', {
-
- /**
- * Tinting style of the on-stage participant thumbnail.
- */
- activeThumbnailTint: {
- backgroundColor: schemeColor('activeParticipantTint')
- },
-
- /**
- * Coloring if the thumbnail background.
- */
- participantViewStyle: {
- backgroundColor: schemeColor('background')
- },
-
- /**
- * Pinned video thumbnail style.
- */
- thumbnailPinned: {
- borderColor: schemeColor('activeParticipantHighlight'),
- shadowColor: schemeColor('activeParticipantHighlight'),
- shadowOffset: {
- height: 5,
- width: 5
- },
- shadowRadius: 5
- }
- });
|