186 lines
4.1 KiB
JavaScript
186 lines
4.1 KiB
JavaScript
// @flow
|
|
|
|
import { ColorSchemeRegistry, schemeColor } from '../../base/color-scheme';
|
|
import { ColorPalette } from '../../base/styles';
|
|
import { FILMSTRIP_SIZE } from '../constants';
|
|
|
|
/**
|
|
* Size for the Avatar.
|
|
*/
|
|
export const AVATAR_SIZE = 50;
|
|
|
|
/**
|
|
* The base style of {@link Filmstrip} shared between narrow and wide versions.
|
|
*/
|
|
const filmstrip = {
|
|
flexGrow: 0
|
|
};
|
|
|
|
/**
|
|
* The styles of the feature filmstrip common to both Web and native.
|
|
*/
|
|
export default {
|
|
/**
|
|
* 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 narrow {@link Filmstrip} version which displays
|
|
* thumbnails in a row at the bottom of the screen.
|
|
*/
|
|
filmstripNarrow: {
|
|
...filmstrip,
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-end',
|
|
height: FILMSTRIP_SIZE
|
|
},
|
|
|
|
/**
|
|
* 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: {
|
|
...filmstrip,
|
|
bottom: 0,
|
|
flexDirection: 'column',
|
|
position: 'absolute',
|
|
right: 0,
|
|
top: 0
|
|
},
|
|
|
|
/**
|
|
* Container of the {@link LocalThumbnail}.
|
|
*/
|
|
localThumbnail: {
|
|
alignContent: 'stretch',
|
|
alignSelf: 'stretch',
|
|
aspectRatio: 1,
|
|
flexShrink: 0,
|
|
flexDirection: 'row'
|
|
},
|
|
|
|
/**
|
|
* Moderator indicator style.
|
|
*/
|
|
moderatorIndicator: {
|
|
backgroundColor: 'transparent',
|
|
bottom: 4,
|
|
color: ColorPalette.white,
|
|
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,
|
|
justifyContent: 'center',
|
|
margin: 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'
|
|
},
|
|
|
|
tileView: {
|
|
alignSelf: 'center'
|
|
},
|
|
|
|
tileViewRows: {
|
|
justifyContent: 'center'
|
|
},
|
|
|
|
tileViewRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'center'
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 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
|
|
}
|
|
});
|