diff --git a/lang/main.json b/lang/main.json index b5f594d5f..00b44bf1e 100644 --- a/lang/main.json +++ b/lang/main.json @@ -593,7 +593,8 @@ "close": "Close", "headings": { "lobby": "Lobby ({{count}})", - "participantsList": "Meeting participants ({{count}})" + "participantsList": "Meeting participants ({{count}})", + "waitingLobby": "Waiting in lobby ({{count}})" }, "actions": { "allow": "Allow attendees to:", diff --git a/react/features/participants-pane/components/native/ContextMenuLobbyParticipantReject.js b/react/features/participants-pane/components/native/ContextMenuLobbyParticipantReject.js index f1ea3664b..330229511 100644 --- a/react/features/participants-pane/components/native/ContextMenuLobbyParticipantReject.js +++ b/react/features/participants-pane/components/native/ContextMenuLobbyParticipantReject.js @@ -3,7 +3,7 @@ import React, { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { TouchableOpacity, View } from 'react-native'; -import { Text } from 'react-native-paper'; +import { Divider, Text } from 'react-native-paper'; import { useDispatch } from 'react-redux'; import { Avatar } from '../../../base/avatar'; @@ -46,6 +46,7 @@ export const ContextMenuLobbyParticipantReject = ({ participant: p }: Props) => + diff --git a/react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js b/react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js index 84fde4fd2..33b565eda 100644 --- a/react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js +++ b/react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js @@ -3,7 +3,7 @@ import React, { useCallback, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { TouchableOpacity, View } from 'react-native'; -import { Text } from 'react-native-paper'; +import { Divider, Text } from 'react-native-paper'; import { useDispatch, useSelector, useStore } from 'react-redux'; import { Avatar } from '../../../base/avatar'; @@ -88,6 +88,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props) + { isLocalModerator && } + { isLocalModerator && ( isParticipantVideoMuted @@ -165,6 +167,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props) style = { styles.contextMenuItemIcon } /> { t('participantsPane.actions.networkStats') } + diff --git a/react/features/participants-pane/components/native/LobbyParticipantItem.js b/react/features/participants-pane/components/native/LobbyParticipantItem.js index b91338e09..298ab8bd8 100644 --- a/react/features/participants-pane/components/native/LobbyParticipantItem.js +++ b/react/features/participants-pane/components/native/LobbyParticipantItem.js @@ -29,6 +29,7 @@ export const LobbyParticipantItem = ({ participant: p }: Props) => { return ( { - {t('participantsPane.headings.lobby', + {t('participantsPane.headings.waitingLobby', { count: participants.length })} diff --git a/react/features/participants-pane/components/native/MeetingParticipantItem.js b/react/features/participants-pane/components/native/MeetingParticipantItem.js index 2813304b6..10bb4776a 100644 --- a/react/features/participants-pane/components/native/MeetingParticipantItem.js +++ b/react/features/participants-pane/components/native/MeetingParticipantItem.js @@ -30,6 +30,7 @@ export const MeetingParticipantItem = ({ participant: p }: Props) => { return ( { p.local ? ({t('chat.you')}) : null } - - {p.raisedHand && } - {VideoStateIcons[videoMuteState]} - {AudioStateIcons[audioMuteState]} - + { + !isKnockingParticipant && <> + {p.raisedHand && } + + {VideoStateIcons[videoMuteState]} + {AudioStateIcons[audioMuteState]} + + + } { children } diff --git a/react/features/participants-pane/components/native/styles.js b/react/features/participants-pane/components/native/styles.js index 2a3bac64b..b6fc9ccca 100644 --- a/react/features/participants-pane/components/native/styles.js +++ b/react/features/participants-pane/components/native/styles.js @@ -1,27 +1,11 @@ import BaseTheme from '../../../base/ui/components/BaseTheme.native'; -/** - * The style for participant states. - */ -const participantState = { - display: 'flex', - justifyContent: 'center' -}; - -/** - * The style for participant list. - */ -const participantList = { - marginLeft: BaseTheme.spacing[3], - marginRight: BaseTheme.spacing[3], - position: 'relative' -}; - /** * The style for participant list description. */ const participantListDescription = { - color: BaseTheme.palette.text01, + ...BaseTheme.typography.heading6, + color: BaseTheme.palette.text02, paddingBottom: BaseTheme.spacing[3], paddingTop: BaseTheme.spacing[3], position: 'relative', @@ -46,7 +30,6 @@ const button = { backgroundColor: BaseTheme.palette.action02, borderRadius: BaseTheme.shape.borderRadius, display: 'flex', - height: BaseTheme.spacing[7], justifyContent: 'center', marginLeft: 'auto' }; @@ -55,8 +38,7 @@ const button = { * Small buttons. */ const smallButton = { - ...button, - width: BaseTheme.spacing[7] + ...button }; /** @@ -64,7 +46,6 @@ const smallButton = { */ const buttonContent = { ...BaseTheme.typography.labelButton, - ...flexContent, color: BaseTheme.palette.text01, justifyContent: 'center' }; @@ -87,22 +68,18 @@ export default { backgroundColor: BaseTheme.palette.action01, borderRadius: BaseTheme.shape.borderRadius, flexDirection: 'row', - height: BaseTheme.spacing[5], + height: BaseTheme.spacing[6], + marginRight: BaseTheme.spacing[3], position: 'absolute', right: 0, zIndex: 1 }, - participantActionsButtonReject: { - backgroundColor: BaseTheme.palette.action01, - borderRadius: BaseTheme.shape.borderRadius, - height: BaseTheme.spacing[5] - }, - participantActionsButtonContent: { alignItems: 'center', display: 'flex', - height: BaseTheme.spacing[5] + height: BaseTheme.spacing[5], + top: BaseTheme.spacing[1] }, participantActionsButtonText: { @@ -110,13 +87,16 @@ export default { textTransform: 'capitalize' }, - allParticipantActionsButton: { + admitAllParticipantsActionButtonLabel: { ...BaseTheme.typography.heading6, color: BaseTheme.palette.link01, - marginRight: 'auto', textTransform: 'capitalize' }, + admitAllParticipantsActionButton: { + marginLeft: 'auto' + }, + participantContainer: { alignItems: 'center', borderBottomColor: BaseTheme.palette.field01Hover, @@ -124,6 +104,8 @@ export default { display: 'flex', flexDirection: 'row', height: BaseTheme.spacing[9], + paddingLeft: BaseTheme.spacing[3], + paddingRight: BaseTheme.spacing[3], width: '100%' }, @@ -163,23 +145,18 @@ export default { display: 'flex', flexDirection: 'row', marginLeft: 'auto', - width: 72 - }, - - participantStateAudio: { - ...participantState + width: '15%' }, participantStateVideo: { - ...participantState, - paddingRight: BaseTheme.spacing[2] + paddingRight: BaseTheme.spacing[3] }, raisedHandIndicator: { backgroundColor: BaseTheme.palette.warning02, borderRadius: BaseTheme.shape.borderRadius / 2, height: BaseTheme.spacing[4], - marginRight: BaseTheme.spacing[2], + marginLeft: BaseTheme.spacing[1], width: BaseTheme.spacing[4] }, @@ -188,11 +165,11 @@ export default { top: BaseTheme.spacing[1] }, lobbyList: { - ...participantList + position: 'relative' }, meetingList: { - ...participantList, + position: 'relative', marginTop: BaseTheme.spacing[3] }, @@ -202,6 +179,7 @@ export default { flexDirection: 'row', justifyContent: 'space-between', overflow: 'hidden', + paddingLeft: BaseTheme.spacing[3], position: 'relative', width: '100%' }, @@ -211,7 +189,8 @@ export default { }, meetingListDescription: { - ...participantListDescription + ...participantListDescription, + marginLeft: BaseTheme.spacing[3] }, header: { @@ -241,17 +220,21 @@ export default { }, closeButton: { - ...smallButton + ...smallButton, + width: BaseTheme.spacing[8] }, closeIcon: { ...buttonContent, + height: BaseTheme.spacing[8], left: BaseTheme.spacing[2] }, inviteButton: { backgroundColor: BaseTheme.palette.action01, - marginTop: BaseTheme.spacing[2] + marginTop: BaseTheme.spacing[2], + marginLeft: BaseTheme.spacing[3], + marginRight: BaseTheme.spacing[3] }, inviteLabel: { @@ -260,11 +243,13 @@ export default { }, moreButton: { - ...smallButton + ...smallButton, + width: BaseTheme.spacing[8] }, moreIcon: { ...buttonContent, + height: BaseTheme.spacing[8], left: BaseTheme.spacing[2] }, @@ -279,10 +264,12 @@ export default { }, muteAllContent: { - ...buttonContent + ...buttonContent, + height: BaseTheme.spacing[8] }, muteAllLabel: { + ...BaseTheme.typography.labelButtonLarge, color: BaseTheme.palette.text01, textTransform: 'capitalize' }, @@ -292,16 +279,12 @@ export default { }, contextMenuItemSection: { - ...contextMenuItem, - borderBottomColor: BaseTheme.palette.section01, - borderBottomWidth: 1 + ...contextMenuItem }, contextMenuItemText: { ...BaseTheme.typography.bodyShortRegularLarge, - alignSelf: 'center', color: BaseTheme.palette.text01, - flexDirection: 'row', marginLeft: BaseTheme.spacing[3] }, @@ -316,5 +299,9 @@ export default { contextMenuIcon: { color: BaseTheme.palette.actionDanger + }, + + divider: { + backgroundColor: BaseTheme.palette.section01 } };