2021-05-14 16:03:23 +00:00
|
|
|
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
|
|
|
|
|
2021-05-21 15:35:36 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* The style for participant actions.
|
|
|
|
*/
|
|
|
|
const participantActions = {
|
|
|
|
alignItems: 'center',
|
|
|
|
zIndex: 1
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The style for participant states.
|
|
|
|
*/
|
|
|
|
const participantState = {
|
|
|
|
alignItems: 'center',
|
|
|
|
display: 'flex',
|
|
|
|
justifyContent: 'center'
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The style for content.
|
|
|
|
*/
|
|
|
|
const flexContent = {
|
|
|
|
alignItems: 'center',
|
|
|
|
color: BaseTheme.palette.icon01,
|
|
|
|
display: 'flex',
|
|
|
|
flex: 1
|
|
|
|
};
|
|
|
|
|
2021-05-19 10:08:30 +00:00
|
|
|
/**
|
|
|
|
* The style of the participants pane buttons.
|
|
|
|
*/
|
|
|
|
const container = {
|
|
|
|
alignItems: 'center',
|
|
|
|
display: 'flex',
|
|
|
|
flexDirection: 'row',
|
2021-05-20 16:06:52 +00:00
|
|
|
height: 72,
|
|
|
|
paddingRight: 16,
|
2021-05-19 10:08:30 +00:00
|
|
|
width: '100%'
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The style of the participants pane buttons.
|
|
|
|
*/
|
|
|
|
const button = {
|
|
|
|
alignItems: 'center',
|
|
|
|
backgroundColor: BaseTheme.palette.action02,
|
|
|
|
borderRadius: BaseTheme.shape.borderRadius,
|
|
|
|
display: 'flex',
|
|
|
|
height: 48,
|
2021-05-20 16:06:52 +00:00
|
|
|
justifyContent: 'center',
|
2021-05-19 10:08:30 +00:00
|
|
|
marginLeft: 'auto'
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Small buttons.
|
|
|
|
*/
|
|
|
|
const smallButton = {
|
|
|
|
...button,
|
|
|
|
width: 48
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The style of the participants pane buttons description.
|
|
|
|
*/
|
|
|
|
const buttonContent = {
|
2021-05-21 15:35:36 +00:00
|
|
|
...BaseTheme.typography.labelButton,
|
|
|
|
...flexContent,
|
2021-05-20 16:06:52 +00:00
|
|
|
color: BaseTheme.palette.text01,
|
2021-05-19 10:08:30 +00:00
|
|
|
justifyContent: 'center'
|
|
|
|
};
|
|
|
|
|
2021-05-14 16:03:23 +00:00
|
|
|
/**
|
|
|
|
* The styles of the native components of the feature {@code participants}.
|
|
|
|
*/
|
|
|
|
export default {
|
2021-05-19 10:08:30 +00:00
|
|
|
|
2021-05-21 15:35:36 +00:00
|
|
|
participantActions: {
|
|
|
|
...participantActions
|
|
|
|
},
|
|
|
|
|
|
|
|
participantActionsHover: {
|
|
|
|
...participantActions,
|
|
|
|
backgroundColor: '#292929',
|
|
|
|
bottom: 1,
|
|
|
|
display: 'none',
|
|
|
|
position: 'absolute',
|
|
|
|
right: 8,
|
|
|
|
top: 0,
|
|
|
|
after: {
|
|
|
|
backgroundColor: 'linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #292929 100%)',
|
|
|
|
content: '',
|
|
|
|
bottom: 0,
|
|
|
|
display: 'block',
|
|
|
|
left: 0,
|
|
|
|
pointerEvents: 'none',
|
|
|
|
position: 'absolute',
|
|
|
|
top: 0,
|
|
|
|
transform: 'translateX(-100%)',
|
|
|
|
width: 40
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
participantActionsPermanent: {
|
|
|
|
...participantActions,
|
|
|
|
display: 'flex'
|
|
|
|
},
|
|
|
|
|
2021-05-19 10:08:30 +00:00
|
|
|
participantActionButton: {
|
|
|
|
backgroundColor: BaseTheme.palette.action01,
|
2021-05-21 15:35:36 +00:00
|
|
|
borderRadius: BaseTheme.shape.borderRadius
|
|
|
|
},
|
|
|
|
|
|
|
|
participantActionButtonText: {
|
2021-05-24 11:08:58 +00:00
|
|
|
...BaseTheme.typography.labelRegular
|
|
|
|
},
|
|
|
|
|
|
|
|
allParticipantActionButton: {
|
|
|
|
...BaseTheme.typography.labelRegular,
|
|
|
|
color: BaseTheme.palette.action01
|
2021-05-14 16:03:23 +00:00
|
|
|
},
|
|
|
|
|
2021-05-19 10:08:30 +00:00
|
|
|
participantContainer: {
|
2021-05-14 16:03:23 +00:00
|
|
|
alignItems: 'center',
|
|
|
|
display: 'flex',
|
2021-05-20 16:06:52 +00:00
|
|
|
flexDirection: 'row',
|
2021-05-21 15:35:36 +00:00
|
|
|
marginRight: BaseTheme.spacing[6],
|
2021-05-20 16:06:52 +00:00
|
|
|
paddingLeft: 8,
|
|
|
|
paddingRight: 8
|
2021-05-14 16:03:23 +00:00
|
|
|
},
|
|
|
|
|
2021-05-19 10:08:30 +00:00
|
|
|
participantContent: {
|
2021-05-21 15:35:36 +00:00
|
|
|
alignItems: 'center',
|
|
|
|
display: 'flex',
|
|
|
|
flexDirection: 'row',
|
|
|
|
flexWrap: 'wrap',
|
|
|
|
height: 64,
|
2021-05-19 10:08:30 +00:00
|
|
|
overflow: 'hidden',
|
2021-05-21 15:35:36 +00:00
|
|
|
paddingLeft: BaseTheme.spacing[2],
|
|
|
|
paddingTop: BaseTheme.spacing[4],
|
2021-05-20 16:06:52 +00:00
|
|
|
width: '100%'
|
2021-05-19 10:08:30 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
participantNameContainer: {
|
2021-05-14 16:03:23 +00:00
|
|
|
display: 'flex',
|
2021-05-20 16:06:52 +00:00
|
|
|
flexDirection: 'row',
|
2021-05-19 10:08:30 +00:00
|
|
|
marginRight: BaseTheme.spacing[3],
|
2021-05-21 15:35:36 +00:00
|
|
|
overflow: 'hidden',
|
|
|
|
width: '50%'
|
2021-05-19 10:08:30 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
participantName: {
|
|
|
|
overflow: 'hidden',
|
2021-05-20 16:06:52 +00:00
|
|
|
color: BaseTheme.palette.text01
|
|
|
|
},
|
|
|
|
|
|
|
|
isLocal: {
|
|
|
|
color: BaseTheme.palette.text01
|
2021-05-19 10:08:30 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
participantsPane: {
|
|
|
|
backgroundColor: BaseTheme.palette.ui01
|
|
|
|
},
|
|
|
|
|
2021-05-21 15:35:36 +00:00
|
|
|
participantStatesContainer: {
|
|
|
|
display: 'flex',
|
|
|
|
flexDirection: 'row',
|
|
|
|
justifyItems: 'space-between',
|
|
|
|
marginLeft: 'auto'
|
|
|
|
},
|
|
|
|
|
|
|
|
participantStateAudio: {
|
|
|
|
...participantState
|
|
|
|
},
|
|
|
|
|
|
|
|
participantStateVideo: {
|
|
|
|
...participantState,
|
|
|
|
marginRight: 8
|
2021-05-19 10:08:30 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
raisedHandIndicator: {
|
|
|
|
backgroundColor: BaseTheme.palette.warning02,
|
|
|
|
borderRadius: BaseTheme.shape.borderRadius / 2,
|
|
|
|
height: 24,
|
2021-05-21 15:35:36 +00:00
|
|
|
marginRight: 8,
|
2021-05-19 10:08:30 +00:00
|
|
|
width: 24
|
|
|
|
},
|
|
|
|
|
2021-05-21 15:35:36 +00:00
|
|
|
raisedHandIcon: {
|
|
|
|
...flexContent,
|
|
|
|
top: 4
|
|
|
|
},
|
|
|
|
|
|
|
|
lobbyListDescription: {
|
|
|
|
color: BaseTheme.palette.text01,
|
|
|
|
overflow: 'hidden',
|
|
|
|
padding: BaseTheme.spacing[2]
|
|
|
|
},
|
|
|
|
|
2021-05-19 10:08:30 +00:00
|
|
|
lobbyListContainer: {
|
|
|
|
...container
|
|
|
|
},
|
|
|
|
|
2021-05-24 11:08:58 +00:00
|
|
|
lobbyListActions: {
|
|
|
|
flexDirection: 'row',
|
|
|
|
marginLeft: 'auto'
|
|
|
|
},
|
|
|
|
|
2021-05-19 10:08:30 +00:00
|
|
|
header: {
|
2021-05-20 16:06:52 +00:00
|
|
|
...container
|
2021-05-19 10:08:30 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
footer: {
|
|
|
|
...container,
|
|
|
|
marginTop: 'auto'
|
|
|
|
},
|
|
|
|
|
|
|
|
closeButton: {
|
|
|
|
...smallButton
|
|
|
|
},
|
|
|
|
|
|
|
|
closeIcon: {
|
2021-05-20 16:06:52 +00:00
|
|
|
...buttonContent,
|
|
|
|
left: 8
|
2021-05-19 10:08:30 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
moreButton: {
|
|
|
|
...smallButton
|
|
|
|
},
|
|
|
|
|
|
|
|
moreIcon: {
|
2021-05-20 16:06:52 +00:00
|
|
|
...buttonContent,
|
|
|
|
left: 8
|
2021-05-19 10:08:30 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
muteAllButton: {
|
|
|
|
...button,
|
2021-05-20 16:06:52 +00:00
|
|
|
left: 80
|
2021-05-19 10:08:30 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
muteAllContent: {
|
|
|
|
...buttonContent
|
2021-05-14 16:03:23 +00:00
|
|
|
}
|
|
|
|
};
|