feat(native-participants-pane) admit/reject all buttons

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

@@ -2,7 +2,8 @@
 
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Text } from 'react-native-paper';
+import { Text, View } from 'react-native';
+import { Button } from 'react-native-paper';
 
 import { LobbyParticipantItem } from './LobbyParticipantItem';
 import { participants } from './participants';
@@ -13,11 +14,24 @@ export const LobbyParticipantList = () => {
 
     return (
         <>
-            {/* eslint-disable-next-line max-len */}
+            <View style = { styles.lobbyListContainer } >
-            <Text style = { styles.lobbyListDescription }>
+                <Text style = { styles.lobbyListDescription }>
-                {t('participantsPane.headings.lobby',
+                    {t('participantsPane.headings.lobby',
-                    { count: participants.length })}
+                        { count: participants.length })}
-            </Text>
+                </Text>
+                <View style = { styles.lobbyListActions }>
+                    <Button
+                        labelStyle = { styles.allParticipantActionButton }
+                        mode = 'text'>
+                        {t('lobby.admitAll')}
+                    </Button>
+                    <Button
+                        labelStyle = { styles.allParticipantActionButton }
+                        mode = 'text'>
+                        {t('lobby.rejectAll')}
+                    </Button>
+                </View>
+            </View>
             { participants.map(p => (
                 <LobbyParticipantItem
                     key = { p.id }

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

@@ -3,8 +3,7 @@
 import React from 'react';
 import type { Node } from 'react';
 import { useTranslation } from 'react-i18next';
-import { View } from 'react-native';
+import { Text, View } from 'react-native';
-import { Text } from 'react-native-paper';
 import { useSelector } from 'react-redux';
 
 import { Avatar } from '../../../base/avatar';
@@ -81,7 +80,7 @@ function ParticipantItem({
                     </Text>
                     { p.local ? <Text style = { styles.isLocal }>({t('chat.you')})</Text> : null }
                 </View>
-                { p.local && <Text style = { styles.participantActions }> {children} </Text> }
+                { p.local ? <Text style = { styles.participantActions }> ({ children }) </Text> : null }
                 <View style = { styles.participantStatesContainer } >
                     {p.raisedHand && <RaisedHandIndicator />}
                     <View style = { styles.participantStateVideo }>{VideoStateIcons[videoMuteState]}</View>

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

@@ -100,5 +100,165 @@ export const participants = [
         role: 'participant',
         startWithAudioMuted: true,
         startWithVideoMuted: false
+    },
+    {
+        audioOutputDeviceId: 'default',
+        avatarURL: undefined,
+        botType: undefined,
+        conference: undefined,
+        connectionStatus: undefined,
+        dominantSpeaker: false,
+        email: undefined,
+        id: 'd082114',
+        isFakeParticipant: undefined,
+        isJigasi: undefined,
+        loadableAvatarUrl: undefined,
+        local: true,
+        name: 'testuser2',
+        pinned: false,
+        presence: undefined,
+        role: 'moderator',
+        startWithAudioMuted: true,
+        startWithVideoMuted: true
+    },
+    {
+        audioOutputDeviceId: 'default',
+        avatarURL: undefined,
+        botType: undefined,
+        conference: undefined,
+        connectionStatus: undefined,
+        dominantSpeaker: false,
+        email: undefined,
+        id: 'd08774533',
+        isFakeParticipant: undefined,
+        isJigasi: undefined,
+        loadableAvatarUrl: undefined,
+        local: true,
+        name: 'testuser2',
+        pinned: false,
+        presence: undefined,
+        role: 'moderator',
+        startWithAudioMuted: true,
+        startWithVideoMuted: true
+    },
+    {
+        audioOutputDeviceId: 'default',
+        avatarURL: undefined,
+        botType: undefined,
+        conference: undefined,
+        connectionStatus: undefined,
+        dominantSpeaker: false,
+        email: undefined,
+        id: 'd063636',
+        isFakeParticipant: undefined,
+        isJigasi: undefined,
+        loadableAvatarUrl: undefined,
+        local: true,
+        name: 'testuser2',
+        pinned: false,
+        presence: undefined,
+        role: 'moderator',
+        startWithAudioMuted: true,
+        startWithVideoMuted: true
+    },
+    {
+        audioOutputDeviceId: 'default',
+        avatarURL: undefined,
+        botType: undefined,
+        conference: undefined,
+        connectionStatus: undefined,
+        dominantSpeaker: false,
+        email: undefined,
+        id: 'dadagqrq1',
+        isFakeParticipant: undefined,
+        isJigasi: undefined,
+        loadableAvatarUrl: undefined,
+        local: true,
+        name: 'testuser2',
+        pinned: false,
+        presence: undefined,
+        role: 'moderator',
+        startWithAudioMuted: true,
+        startWithVideoMuted: true
+    },
+    {
+        audioOutputDeviceId: 'default',
+        avatarURL: undefined,
+        botType: undefined,
+        conference: undefined,
+        connectionStatus: undefined,
+        dominantSpeaker: false,
+        email: undefined,
+        id: 'd0aad',
+        isFakeParticipant: undefined,
+        isJigasi: undefined,
+        loadableAvatarUrl: undefined,
+        local: true,
+        name: 'testuser2',
+        pinned: false,
+        presence: undefined,
+        role: 'moderator',
+        startWithAudioMuted: true,
+        startWithVideoMuted: true
+    },
+    {
+        audioOutputDeviceId: 'default',
+        avatarURL: undefined,
+        botType: undefined,
+        conference: undefined,
+        connectionStatus: undefined,
+        dominantSpeaker: false,
+        email: undefined,
+        id: 'd0866327',
+        isFakeParticipant: undefined,
+        isJigasi: undefined,
+        loadableAvatarUrl: undefined,
+        local: true,
+        name: 'testuser2',
+        pinned: false,
+        presence: undefined,
+        role: 'moderator',
+        startWithAudioMuted: true,
+        startWithVideoMuted: true
+    },
+    {
+        audioOutputDeviceId: 'default',
+        avatarURL: undefined,
+        botType: undefined,
+        conference: undefined,
+        connectionStatus: undefined,
+        dominantSpeaker: false,
+        email: undefined,
+        id: 'd08162234',
+        isFakeParticipant: undefined,
+        isJigasi: undefined,
+        loadableAvatarUrl: undefined,
+        local: true,
+        name: 'testuser2',
+        pinned: false,
+        presence: undefined,
+        role: 'moderator',
+        startWithAudioMuted: true,
+        startWithVideoMuted: true
+    },
+    {
+        audioOutputDeviceId: 'default',
+        avatarURL: undefined,
+        botType: undefined,
+        conference: undefined,
+        connectionStatus: undefined,
+        dominantSpeaker: false,
+        email: undefined,
+        id: 'd04141',
+        isFakeParticipant: undefined,
+        isJigasi: undefined,
+        loadableAvatarUrl: undefined,
+        local: true,
+        name: 'testuser2',
+        pinned: false,
+        presence: undefined,
+        role: 'moderator',
+        startWithAudioMuted: true,
+        startWithVideoMuted: true
     }
 ];

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

@@ -113,7 +113,12 @@ export default {
     },
 
     participantActionButtonText: {
-        fontSize: 5
+        ...BaseTheme.typography.labelRegular
+    },
+
+    allParticipantActionButton: {
+        ...BaseTheme.typography.labelRegular,
+        color: BaseTheme.palette.action01
     },
 
     participantContainer: {
@@ -197,6 +202,11 @@ export default {
         ...container
     },
 
+    lobbyListActions: {
+        flexDirection: 'row',
+        marginLeft: 'auto'
+    },
+
     header: {
         ...container
     },