diff --git a/lang/main.json b/lang/main.json
index 87c9177a1..dccc9d897 100644
--- a/lang/main.json
+++ b/lang/main.json
@@ -1108,6 +1108,7 @@
"passwordField": "Enter meeting password",
"passwordJoinButton": "Join",
"reject": "Reject",
+ "rejectAll": "Reject all",
"toggleLabel": "Enable lobby"
}
}
diff --git a/react/features/participants-pane/components/native/LobbyParticipantItem.js b/react/features/participants-pane/components/native/LobbyParticipantItem.js
index 81d54a52c..a72a90003 100644
--- a/react/features/participants-pane/components/native/LobbyParticipantItem.js
+++ b/react/features/participants-pane/components/native/LobbyParticipantItem.js
@@ -31,17 +31,17 @@ export const LobbyParticipantItem = ({ participant: p }: Props) => {
participant = { p }
videoMuteState = { MediaState.ForceMuted }>
diff --git a/react/features/participants-pane/components/native/LobbyParticipantList.js b/react/features/participants-pane/components/native/LobbyParticipantList.js
index 887367132..3bbe98cbc 100644
--- a/react/features/participants-pane/components/native/LobbyParticipantList.js
+++ b/react/features/participants-pane/components/native/LobbyParticipantList.js
@@ -13,20 +13,20 @@ export const LobbyParticipantList = () => {
const { t } = useTranslation();
return (
- <>
-
+
+
{t('participantsPane.headings.lobby',
{ count: participants.length })}
@@ -37,6 +37,6 @@ export const LobbyParticipantList = () => {
key = { p.id }
participant = { p } />)
)}
- >
+
);
};
diff --git a/react/features/participants-pane/components/native/ParticipantItem.js b/react/features/participants-pane/components/native/ParticipantItem.js
index 5862b68e5..3b8d16393 100644
--- a/react/features/participants-pane/components/native/ParticipantItem.js
+++ b/react/features/participants-pane/components/native/ParticipantItem.js
@@ -80,13 +80,13 @@ function ParticipantItem({
{ p.local ? ({t('chat.you')}) : null }
- { p.local ? ({ children }) : null }
{p.raisedHand && }
{VideoStateIcons[videoMuteState]}
{AudioStateIcons[audioMuteState]}
+ { p.local ? { children } : null }
);
}
diff --git a/react/features/participants-pane/components/native/ParticipantsPane.js b/react/features/participants-pane/components/native/ParticipantsPane.js
index e6fac5518..7dee70982 100644
--- a/react/features/participants-pane/components/native/ParticipantsPane.js
+++ b/react/features/participants-pane/components/native/ParticipantsPane.js
@@ -6,9 +6,9 @@ import { View } from 'react-native';
import { Button, withTheme } from 'react-native-paper';
import { useDispatch } from 'react-redux';
+import { hideDialog } from '../../../base/dialog';
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';
@@ -33,7 +33,7 @@ type Props = {
function ParticipantsPane({ theme }: Props) {
const dispatch = useDispatch();
const closePane = useCallback(
- () => dispatch(close()),
+ () => dispatch(hideDialog()),
[ dispatch ]);
const { t } = useTranslation();
const { palette } = theme;
@@ -64,9 +64,7 @@ function ParticipantsPane({ theme }: Props) {
@@ -79,7 +77,6 @@ function ParticipantsPane({ theme }: Props) {
src = { IconHorizontalPoints } />)
}
mode = 'contained'
- onPress = { closePane }
style = { styles.moreButton }
theme = {{
colors: {
diff --git a/react/features/participants-pane/components/native/ParticipantsPaneButton.js b/react/features/participants-pane/components/native/ParticipantsPaneButton.js
index bad80cb7c..5573193ec 100644
--- a/react/features/participants-pane/components/native/ParticipantsPaneButton.js
+++ b/react/features/participants-pane/components/native/ParticipantsPaneButton.js
@@ -38,17 +38,4 @@ class ParticipantsPaneButton extends AbstractButton {
}
}
-/**
- * Maps part of the redux state to the component's props.
- *
- * @param {Object} state - The redux store/state.
- * @returns {Props}
- */
-function mapStateToProps(state: Object) {
-
- return {
- state
- };
-}
-
-export default translate(connect(mapStateToProps)(ParticipantsPaneButton));
+export default translate(connect()(ParticipantsPaneButton));
diff --git a/react/features/participants-pane/components/native/styles.js b/react/features/participants-pane/components/native/styles.js
index a1ad5d3ed..482aec3e3 100644
--- a/react/features/participants-pane/components/native/styles.js
+++ b/react/features/participants-pane/components/native/styles.js
@@ -1,19 +1,9 @@
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
-
-/**
- * The style for participant actions.
- */
-const participantActions = {
- alignItems: 'center',
- zIndex: 1
-};
-
/**
* The style for participant states.
*/
const participantState = {
- alignItems: 'center',
display: 'flex',
justifyContent: 'center'
};
@@ -35,7 +25,6 @@ const container = {
alignItems: 'center',
display: 'flex',
flexDirection: 'row',
- height: 72,
paddingRight: 16,
width: '100%'
};
@@ -77,17 +66,19 @@ const buttonContent = {
export default {
participantActions: {
- ...participantActions
+ position: 'absolute',
+ right: 0,
+ zIndex: 1
},
participantActionsHover: {
- ...participantActions,
backgroundColor: '#292929',
bottom: 1,
display: 'none',
position: 'absolute',
right: 8,
top: 0,
+ zIndex: 1,
after: {
backgroundColor: 'linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #292929 100%)',
content: '',
@@ -103,31 +94,40 @@ export default {
},
participantActionsPermanent: {
- ...participantActions,
- display: 'flex'
+ display: 'flex',
+ zIndex: 1
},
- participantActionButton: {
+ participantActionsButtonAdmit: {
backgroundColor: BaseTheme.palette.action01,
- borderRadius: BaseTheme.shape.borderRadius
+ borderRadius: BaseTheme.shape.borderRadius,
+ height: 32
},
- participantActionButtonText: {
- ...BaseTheme.typography.labelRegular
+ participantActionsButtonReject: {
+ backgroundColor: BaseTheme.palette.action01,
+ borderRadius: BaseTheme.shape.borderRadius,
+ height: 32
},
- allParticipantActionButton: {
+ participantActionsButtonText: {
+ },
+
+ allParticipantActionsButton: {
...BaseTheme.typography.labelRegular,
- color: BaseTheme.palette.action01
+ color: BaseTheme.palette.action01,
+ textTransform: 'capitalize'
+
},
participantContainer: {
alignItems: 'center',
+ borderBottomColor: BaseTheme.palette.field01Hover,
+ borderBottomWidth: 2,
display: 'flex',
flexDirection: 'row',
- marginRight: BaseTheme.spacing[6],
- paddingLeft: 8,
- paddingRight: 8
+ height: 64,
+ width: '100%'
},
participantContent: {
@@ -135,19 +135,16 @@ export default {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
- height: 64,
overflow: 'hidden',
- paddingLeft: BaseTheme.spacing[2],
- paddingTop: BaseTheme.spacing[4],
width: '100%'
},
participantNameContainer: {
display: 'flex',
flexDirection: 'row',
- marginRight: BaseTheme.spacing[3],
+ marginLeft: BaseTheme.spacing[2],
overflow: 'hidden',
- width: '50%'
+ width: 232
},
participantName: {
@@ -165,9 +162,7 @@ export default {
participantStatesContainer: {
display: 'flex',
- flexDirection: 'row',
- justifyItems: 'space-between',
- marginLeft: 'auto'
+ flexDirection: 'row'
},
participantStateAudio: {
@@ -175,8 +170,7 @@ export default {
},
participantStateVideo: {
- ...participantState,
- marginRight: 8
+ ...participantState
},
raisedHandIndicator: {
@@ -191,20 +185,26 @@ export default {
...flexContent,
top: 4
},
+ lobbyList: {
+ marginLeft: 16,
+ marginRight: 16
+ },
+
+ lobbyListDetails: {
+ alignItems: 'center',
+ display: 'flex',
+ flexDirection: 'row',
+ width: '100%'
+ },
lobbyListDescription: {
color: BaseTheme.palette.text01,
overflow: 'hidden',
- padding: BaseTheme.spacing[2]
- },
-
- lobbyListContainer: {
- ...container
+ width: 188
},
lobbyListActions: {
- flexDirection: 'row',
- marginLeft: 'auto'
+ flexDirection: 'row'
},
header: {