diff --git a/react/features/participants-pane/components/native/LobbyParticipantItem.js b/react/features/participants-pane/components/native/LobbyParticipantItem.js index ec4671d8d..fb99c5378 100644 --- a/react/features/participants-pane/components/native/LobbyParticipantItem.js +++ b/react/features/participants-pane/components/native/LobbyParticipantItem.js @@ -31,12 +31,13 @@ export const LobbyParticipantItem = ({ participant: p }: Props) => { participant = { p } videoMuteState = { MediaState.None }> diff --git a/react/features/participants-pane/components/native/LobbyParticipantList.js b/react/features/participants-pane/components/native/LobbyParticipantList.js index 51aac09cd..15aec4de8 100644 --- a/react/features/participants-pane/components/native/LobbyParticipantList.js +++ b/react/features/participants-pane/components/native/LobbyParticipantList.js @@ -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 ( <> - {t('participantsPane.headings.lobby', { count: participants.length })} - - {participants.map(p => ( - ) - )} - + {/* eslint-disable-next-line max-len */} + + {t('participantsPane.headings.lobby', + { count: participants.length })} + + { participants.map(p => ( + ) + )} ); }; diff --git a/react/features/participants-pane/components/native/ParticipantItem.js b/react/features/participants-pane/components/native/ParticipantItem.js index 374df4d90..96cb2c244 100644 --- a/react/features/participants-pane/components/native/ParticipantItem.js +++ b/react/features/participants-pane/components/native/ParticipantItem.js @@ -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} */ function ParticipantItem({ + children, audioMuteState = MediaState.None, videoMuteState = MediaState.None, participant: p @@ -57,15 +64,16 @@ function ParticipantItem({ { name } - { p.local ? ({t('chat.you')}) : null } + { p.local ? ({t('chat.you')}) : null } + { !p.local && children } {p.raisedHand && } {VideoStateIcons[videoMuteState]} diff --git a/react/features/participants-pane/components/native/ParticipantsPane.js b/react/features/participants-pane/components/native/ParticipantsPane.js index f20d99414..e6fac5518 100644 --- a/react/features/participants-pane/components/native/ParticipantsPane.js +++ b/react/features/participants-pane/components/native/ParticipantsPane.js @@ -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 = { () => () } mode = 'contained' @@ -59,8 +60,11 @@ function ParticipantsPane({ theme }: Props) { } }} /> +