feat(native-participants-pane) removed mock data

react/features/participants-pane/components/native/ContextMenuLobbyParticipantReject.js

@@ -39,7 +39,7 @@ export const ContextMenuLobbyParticipantReject = ({ participant: p }: Props) =>
                 <Avatar
                     className = 'participant-avatar'
                     participantId = { p.id }
-                    size = { 24 } />
+                    size = { 20 } />
                 <View style = { styles.contextMenuItemText }>
                     <Text style = { styles.contextMenuItemName }>
                         { displayName }
@@ -51,7 +51,7 @@ export const ContextMenuLobbyParticipantReject = ({ participant: p }: Props) =>
                 onPress = { reject }
                 style = { styles.contextMenuItem }>
                 <Icon
-                    size = { 24 }
+                    size = { 20 }
                     src = { IconClose }
                     style = { styles.contextMenuItemIcon } />
                 <Text style = { styles.contextMenuItemText }>{ t('lobby.reject') }</Text>

react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js

@@ -81,7 +81,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
                 <Avatar
                     className = 'participant-avatar'
                     participantId = { p.id }
-                    size = { 24 } />
+                    size = { 20 } />
                 <View style = { styles.contextMenuItemText }>
                     <Text style = { styles.contextMenuItemName }>
                         { displayName }
@@ -95,7 +95,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
                     onPress = { muteAudio }
                     style = { styles.contextMenuItem }>
                     <Icon
-                        size = { 24 }
+                        size = { 20 }
                         src = { IconMicrophoneEmptySlash }
                         style = { styles.contextMenuItemIcon } />
                     <Text style = { styles.contextMenuItemText }>
@@ -109,7 +109,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
                     onPress = { muteEveryoneElse }
                     style = { styles.contextMenuItem }>
                     <Icon
-                        size = { 24 }
+                        size = { 20 }
                         src = { IconMuteEveryoneElse }
                         style = { styles.contextMenuItemIcon } />
                     <Text style = { styles.contextMenuItemText }>
@@ -125,7 +125,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
                         onPress = { muteVideo }
                         style = { styles.contextMenuItemSection }>
                         <Icon
-                            size = { 24 }
+                            size = { 20 }
                             src = { IconVideoOff }
                             style = { styles.contextMenuItemIcon } />
                         <Text style = { styles.contextMenuItemText }>
@@ -140,7 +140,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
                     onPress = { kickRemoteParticipant }
                     style = { styles.contextMenuItem }>
                     <Icon
-                        size = { 24 }
+                        size = { 20 }
                         src = { IconCloseCircle }
                         style = { styles.contextMenuItemIcon } />
                     <Text style = { styles.contextMenuItemText }>
@@ -152,7 +152,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
                 onPress = { sendPrivateMessage }
                 style = { styles.contextMenuItem }>
                 <Icon
-                    size = { 24 }
+                    size = { 20 }
                     src = { IconMessage }
                     style = { styles.contextMenuItemIcon } />
                 <Text style = { styles.contextMenuItemText }>
@@ -162,7 +162,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
             <TouchableOpacity
                 style = { styles.contextMenuItemSection }>
                 <Icon
-                    size = { 24 }
+                    size = { 20 }
                     src = { IconConnectionActive }
                     style = { styles.contextMenuItemIcon } />
                 <Text style = { styles.contextMenuItemText }>{ t('participantsPane.actions.networkStats') }</Text>

react/features/participants-pane/components/native/ContextMenuMore.js

@@ -45,14 +45,14 @@ export const ContextMenuMore = ({ exclude }: Props) => {
                 onPress = { muteEveryoneVideo }
                 style = { styles.contextMenuItem }>
                 <Icon
-                    size = { 24 }
+                    size = { 20 }
                     src = { IconVideoOff } />
                 <Text style = { styles.contextMenuItemText }>{t('participantsPane.actions.stopEveryonesVideo')}</Text>
             </TouchableOpacity>
             <TouchableOpacity
                 style = { styles.contextMenuItem }>
                 <Icon
-                    size = { 24 }
+                    size = { 20 }
                     src = { IconMicDisabledHollow }
                     style = { styles.contextMenuIcon } />
                 <Text style = { styles.contextMenuItemText }>{t('participantsPane.actions.dontAllowUnmute')}</Text>

react/features/participants-pane/components/native/LobbyParticipantList.js

@@ -4,19 +4,30 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Text, View } from 'react-native';
 import { Button } from 'react-native-paper';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
+import { getLobbyState } from '../../../lobby/functions';
 import { admitAllKnockingParticipants } from '../../../video-menu/actions.any';
 
 import { LobbyParticipantItem } from './LobbyParticipantItem';
-import { participants } from './participants';
 import styles from './styles';
 
 export const LobbyParticipantList = () => {
+    const {
+        lobbyEnabled,
+        knockingParticipants: participants
+    } = useSelector(getLobbyState);
+
     const dispatch = useDispatch();
-    const admitAll = useCallback(() => dispatch(admitAllKnockingParticipants()), [ dispatch ]);
+    const admitAll = useCallback(() =>
+        dispatch(admitAllKnockingParticipants(participants, lobbyEnabled)),
+        [ dispatch ]);
     const { t } = useTranslation();
 
+    if (!lobbyEnabled || !participants.length) {
+        return null;
+    }
+
     return (
         <View style = { styles.lobbyList }>
             <View style = { styles.lobbyListDetails } >
@@ -33,11 +44,13 @@ export const LobbyParticipantList = () => {
                     {t('lobby.admitAll')}
                 </Button>
             </View>
-            { participants.map(p => (
-                <LobbyParticipantItem
-                    key = { p.id }
-                    participant = { p } />)
-            )}
+            {
+                participants.map(p => (
+                    <LobbyParticipantItem
+                        key = { p.id }
+                        participant = { p } />)
+                )
+            }
         </View>
     );
 };

react/features/participants-pane/components/native/MeetingParticipantList.js

@@ -4,22 +4,23 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Text, View } from 'react-native';
 import { Button } from 'react-native-paper';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector, useStore } from 'react-redux';
 
-import { createToolbarEvent, sendAnalytics } from '../../../analytics';
 import { Icon, IconInviteMore } from '../../../base/icons';
+import { getParticipants } from '../../../base/participants';
 import { doInvitePeople } from '../../../invite/actions.native';
+import { shouldRenderInviteButton } from '../../functions';
 
 import { MeetingParticipantItem } from './MeetingParticipantItem';
-import { participants } from './participants';
 import styles from './styles';
 
 export const MeetingParticipantList = () => {
     const dispatch = useDispatch();
-    const onInvite = useCallback(() => {
-        sendAnalytics(createToolbarEvent('invite'));
-        dispatch(doInvitePeople());
-    }, [ dispatch ]);
+    const onInvite = useCallback(() => dispatch(doInvitePeople()), [ dispatch ]);
+    const showInviteButton = useSelector(shouldRenderInviteButton);
+    const store = useStore();
+    const state = store.getState();
+    const participants = getParticipants(state);
     const { t } = useTranslation();
 
     return (
@@ -28,23 +29,28 @@ export const MeetingParticipantList = () => {
                 {t('participantsPane.headings.participantsList',
                     { count: participants.length })}
             </Text>
-            <Button
-                children = { t('participantsPane.actions.invite') }
-                /* eslint-disable-next-line react/jsx-no-bind */
-                icon = { () =>
-                    (<Icon
-                        size = { 24 }
-                        src = { IconInviteMore } />)
-                }
-                labelStyle = { styles.inviteLabel }
-                mode = 'contained'
-                onPress = { onInvite }
-                style = { styles.inviteButton } />
-            { participants.map(p => (
-                <MeetingParticipantItem
-                    key = { p.id }
-                    participant = { p } />)
-            )}
+            {
+                showInviteButton
+                && <Button
+                    children = { t('participantsPane.actions.invite') }
+                    /* eslint-disable-next-line react/jsx-no-bind */
+                    icon = { () =>
+                        (<Icon
+                            size = { 24 }
+                            src = { IconInviteMore } />)
+                    }
+                    labelStyle = { styles.inviteLabel }
+                    mode = 'contained'
+                    onPress = { onInvite }
+                    style = { styles.inviteButton } />
+            }
+            {
+                participants.map(p => (
+                    <MeetingParticipantItem
+                        key = { p.id }
+                        participant = { p } />)
+                )
+            }
         </View>
     );
 };

react/features/participants-pane/components/native/ParticipantItem.js

@@ -67,12 +67,12 @@ type Props = {
  * @returns {React$Element<any>}
  */
 function ParticipantItem({
-    audioMuteState = MediaState.None,
     children,
     isKnockingParticipant,
     name,
     onPress,
     participant: p,
+    audioMuteState = MediaState.None,
     videoMuteState = MediaState.None
 }: Props) {
 
@@ -96,8 +96,11 @@ function ParticipantItem({
                     { p.local ? <Text style = { styles.isLocal }>({t('chat.you')})</Text> : null }
                 </View>
                 {
-                    !isKnockingParticipant && <>
-                        {p.raisedHand && <RaisedHandIndicator />}
+                    !isKnockingParticipant
+                    && <>
+                        {
+                            p.raisedHand && <RaisedHandIndicator />
+                        }
                         <View style = { styles.participantStatesContainer }>
                             <View style = { styles.participantStateVideo }>{VideoStateIcons[videoMuteState]}</View>
                             <View>{AudioStateIcons[audioMuteState]}</View>
@@ -105,7 +108,7 @@ function ParticipantItem({
                     </>
                 }
             </TouchableOpacity>
-            { children }
+            { !p.local && children }
         </View>
     );
 }

react/features/participants-pane/components/native/ParticipantsPane.js

@@ -4,11 +4,12 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ScrollView, View } from 'react-native';
 import { Button } from 'react-native-paper';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { hideDialog, openDialog } from '../../../base/dialog';
 import { Icon, IconClose, IconHorizontalPoints } from '../../../base/icons';
 import { JitsiModal } from '../../../base/modal';
+import { isLocalParticipantModerator } from '../../../base/participants';
 import MuteEveryoneDialog
     from '../../../video-menu/components/native/MuteEveryoneDialog';
 
@@ -24,8 +25,9 @@ import styles from './styles';
  */
 export function ParticipantsPane() {
     const dispatch = useDispatch();
-    const openMoreMenu = useCallback(() => dispatch(openDialog(ContextMenuMore)));
+    const openMoreMenu = useCallback(() => dispatch(openDialog(ContextMenuMore)), [ dispatch ]);
     const closePane = useCallback(() => dispatch(hideDialog()), [ dispatch ]);
+    const isLocalModerator = useSelector(isLocalParticipantModerator);
     const muteAll = useCallback(() => dispatch(openDialog(MuteEveryoneDialog)),
         [ dispatch ]);
     const { t } = useTranslation();
@@ -51,26 +53,29 @@ export function ParticipantsPane() {
                 <LobbyParticipantList />
                 <MeetingParticipantList />
             </ScrollView>
-            <View style = { styles.footer }>
-                <Button
-                    children = { t('participantsPane.actions.muteAll') }
-                    contentStyle = { styles.muteAllContent }
-                    labelStyle = { styles.muteAllLabel }
-                    mode = 'contained'
-                    onPress = { muteAll }
-                    style = { styles.muteAllButton } />
-                <Button
-                    contentStyle = { styles.moreIcon }
-                    /* eslint-disable-next-line react/jsx-no-bind */
-                    icon = { () =>
-                        (<Icon
-                            size = { 24 }
-                            src = { IconHorizontalPoints } />)
-                    }
-                    mode = 'contained'
-                    onPress = { openMoreMenu }
-                    style = { styles.moreButton } />
-            </View>
+            {
+                isLocalModerator
+                && <View style = { styles.footer }>
+                    <Button
+                        children = { t('participantsPane.actions.muteAll') }
+                        contentStyle = { styles.muteAllContent }
+                        labelStyle = { styles.muteAllLabel }
+                        mode = 'contained'
+                        onPress = { muteAll }
+                        style = { styles.muteAllButton } />
+                    <Button
+                        contentStyle = { styles.moreIcon }
+                        /* eslint-disable-next-line react/jsx-no-bind */
+                        icon = { () =>
+                            (<Icon
+                                size = { 24 }
+                                src = { IconHorizontalPoints } />)
+                        }
+                        mode = 'contained'
+                        onPress = { openMoreMenu }
+                        style = { styles.moreButton } />
+                </View>
+            }
         </JitsiModal>
     );
 }

react/features/participants-pane/components/native/ParticipantsPaneButton.js

@@ -5,8 +5,12 @@ import type { Dispatch } from 'redux';
 import { openDialog } from '../../../base/dialog';
 import { translate } from '../../../base/i18n';
 import { IconParticipants } from '../../../base/icons';
+import { setActiveModalId } from '../../../base/modal';
 import { connect } from '../../../base/redux';
 import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
+import {
+    PARTICIPANTS_PANE_ID
+} from '../../../invite/constants';
 
 import { ParticipantsPane } from './';
 
@@ -35,6 +39,7 @@ class ParticipantsPaneButton extends AbstractButton<Props, *> {
      */
     _handleClick() {
         this.props.dispatch(openDialog(ParticipantsPane));
+        this.props.dispatch(setActiveModalId(PARTICIPANTS_PANE_ID));
     }
 }
 

react/features/toolbox/components/native/OverflowMenuButton.js

@@ -3,7 +3,7 @@
 import { openDialog } from '../../../base/dialog';
 import { getFeatureFlag, OVERFLOW_MENU_ENABLED } from '../../../base/flags';
 import { translate } from '../../../base/i18n';
-import { IconMenuThumb } from '../../../base/icons';
+import { IconHorizontalPoints } from '../../../base/icons';
 import { connect } from '../../../base/redux';
 import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
 
@@ -25,7 +25,7 @@ type Props = AbstractButtonProps & {
  */
 class OverflowMenuButton extends AbstractButton<Props, *> {
     accessibilityLabel = 'toolbar.accessibilityLabel.moreActions';
-    icon = IconMenuThumb;
+    icon = IconHorizontalPoints;
     label = 'toolbar.moreActions';
 
     /**