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: {