feat(native-participants-pane) first lobbyparticipantlist steps

This commit is contained in:
Calin Chitu 2021-05-20 19:06:52 +03:00 committed by Hristo Terezov
parent 0c76d7532c
commit f984faef3f
6 changed files with 57 additions and 59 deletions

View File

@ -31,12 +31,13 @@ export const LobbyParticipantItem = ({ participant: p }: Props) => {
participant = { p }
videoMuteState = { MediaState.None }>
<Button
onClick = { reject }
mode = 'contained'
onPress = { reject }
style = { styles.participantActionButton }>
{t('lobby.reject')}
</Button>
<Button
onClick = { admit }
onPress = { admit }
style = { styles.participantActionButton }>
{t('lobby.admit')}
</Button>

View File

@ -2,35 +2,27 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { View } from 'react-native';
import { Text } from 'react-native-paper';
import { useSelector } from 'react-redux';
import { getLobbyState } from '../../../lobby/functions';
import { LobbyParticipantItem } from './LobbyParticipantItem';
import { participants } from './participants';
import styles from './styles';
export const LobbyParticipantList = () => {
const {
lobbyEnabled
} = useSelector(getLobbyState);
const { t } = useTranslation();
if (!lobbyEnabled || !participants.length) {
return null;
}
return (
<>
<Text>{t('participantsPane.headings.lobby', { count: participants.length })}</Text>
<View>
{participants.map(p => (
{/* eslint-disable-next-line max-len */}
<Text style = { styles.participantName }>
{t('participantsPane.headings.lobby',
{ count: participants.length })}
</Text>
{ participants.map(p => (
<LobbyParticipantItem
key = { p.id }
participant = { p } />)
)}
</View>
</>
);
};

View File

@ -1,6 +1,7 @@
// @flow
import React from 'react';
import type { Node } from 'react';
import { useTranslation } from 'react-i18next';
import { View } from 'react-native';
import { Text } from 'react-native-paper';
@ -24,6 +25,11 @@ type Props = {
*/
audioMuteState: MediaState,
/**
* React children
*/
children: Node,
/**
* Callback for when the mouse leaves this component
*/
@ -46,6 +52,7 @@ type Props = {
* @returns {React$Element<any>}
*/
function ParticipantItem({
children,
audioMuteState = MediaState.None,
videoMuteState = MediaState.None,
participant: p
@ -57,15 +64,16 @@ function ParticipantItem({
<View style = { styles.participantContainer } >
<Avatar
className = 'participant-avatar'
participant = { p.id }
participantId = { p.id }
size = { 32 } />
<View style = { styles.participantContent }>
<View style = { styles.participantNameContainer }>
<Text style = { styles.participantName }>
{ name }
</Text>
{ p.local ? <Text>({t('chat.you')})</Text> : null }
{ p.local ? <Text style = { styles.isLocal }>({t('chat.you')})</Text> : null }
</View>
{ !p.local && children }
<View style = { styles.participantStates } >
{p.raisedHand && <RaisedHandIndicator />}
{VideoStateIcons[videoMuteState]}

View File

@ -10,6 +10,7 @@ import { Icon, IconClose, IconHorizontalPoints } from '../../../base/icons';
import { JitsiModal } from '../../../base/modal';
import { close } from '../../actions.any';
import { LobbyParticipantList } from './LobbyParticipantList';
import styles from './styles';
@ -47,7 +48,7 @@ function ParticipantsPane({ theme }: Props) {
/* eslint-disable-next-line react/jsx-no-bind */
icon = { () =>
(<Icon
size = { 16 }
size = { 24 }
src = { IconClose } />)
}
mode = 'contained'
@ -59,8 +60,11 @@ function ParticipantsPane({ theme }: Props) {
}
}} />
</View>
<LobbyParticipantList />
<View style = { styles.footer }>
<Button
color = { palette.text01 }
compact = { true }
contentStyle = { styles.muteAllContent }
onPress = { closePane }
style = { styles.muteAllButton } >
@ -71,7 +75,7 @@ function ParticipantsPane({ theme }: Props) {
/* eslint-disable-next-line react/jsx-no-bind */
icon = { () =>
(<Icon
size = { 16 }
size = { 24 }
src = { IconHorizontalPoints } />)
}
mode = 'contained'

View File

@ -35,6 +35,7 @@ export const participants = [
name: 'me',
pinned: false,
presence: undefined,
raisedHand: true,
role: 'participant',
startWithAudioMuted: true,
startWithVideoMuted: false
@ -95,6 +96,7 @@ export const participants = [
name: 'Carlin',
pinned: false,
presence: undefined,
raisedHand: true,
role: 'participant',
startWithAudioMuted: true,
startWithVideoMuted: false

View File

@ -1,15 +1,5 @@
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
/**
* The style for content.
*/
const flexContent = {
alignItems: 'center',
color: BaseTheme.palette.icon01,
display: 'flex',
flex: 1
};
/**
* The style of the participants pane buttons.
*/
@ -17,9 +7,8 @@ const container = {
alignItems: 'center',
display: 'flex',
flexDirection: 'row',
height: 64,
justifyContent: 'center',
paddingRight: 8,
height: 72,
paddingRight: 16,
width: '100%'
};
@ -32,6 +21,7 @@ const button = {
borderRadius: BaseTheme.shape.borderRadius,
display: 'flex',
height: 48,
justifyContent: 'center',
marginLeft: 'auto'
};
@ -48,7 +38,7 @@ const smallButton = {
*/
const buttonContent = {
...BaseTheme.typography.labelButtonLarge,
...flexContent,
color: BaseTheme.palette.text01,
justifyContent: 'center'
};
@ -70,34 +60,39 @@ export default {
participantContainer: {
alignItems: 'center',
color: BaseTheme.palette.text01,
display: 'flex',
flexDirection: 'row',
fontSize: 13,
height: 64,
justifyContent: 'center',
margin: BaseTheme.spacing[4],
position: 'relative',
width: 375
paddingLeft: 8,
paddingRight: 8
},
participantContent: {
...flexContent,
backgroundColor: 'green',
boxShadow: BaseTheme.shape.boxShadow,
height: '100%',
overflow: 'hidden',
paddingRight: BaseTheme.spacing[4]
paddingRight: BaseTheme.spacing[4],
width: '100%'
},
participantNameContainer: {
display: 'flex',
flex: 1,
flexDirection: 'row',
marginRight: BaseTheme.spacing[3],
overflow: 'hidden'
},
participantName: {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
color: BaseTheme.palette.text01
},
isLocal: {
color: BaseTheme.palette.text01
},
participantsPane: {
@ -105,8 +100,8 @@ export default {
},
participantStates: {
display: 'flex',
justifyContent: 'flex-end'
alignItems: 'flex-end',
display: 'flex'
},
raisedHandIndicator: {
@ -121,13 +116,11 @@ export default {
},
header: {
...container,
backgroundColor: 'red'
...container
},
footer: {
...container,
backgroundColor: 'green',
marginTop: 'auto'
},
@ -136,7 +129,8 @@ export default {
},
closeIcon: {
...buttonContent
...buttonContent,
left: 8
},
moreButton: {
@ -144,16 +138,13 @@ export default {
},
moreIcon: {
...buttonContent
...buttonContent,
left: 8
},
muteAllButton: {
...button,
paddingBottom: 12,
paddingLeft: 16,
paddingRight: 16,
paddingTop: 12,
width: 94
left: 80
},
muteAllContent: {