feat(native-participants-pane) first lobbyparticipantlist steps

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

@@ -31,12 +31,13 @@ export const LobbyParticipantItem = ({ participant: p }: Props) => {
             participant = { p }
             videoMuteState = { MediaState.None }>
             <Button
-                onClick = { reject }
+                mode = 'contained'
+                onPress = { reject }
                 style = { styles.participantActionButton }>
                 {t('lobby.reject')}
             </Button>
             <Button
-                onClick = { admit }
+                onPress = { admit }
                 style = { styles.participantActionButton }>
                 {t('lobby.admit')}
             </Button>

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 (
         <>
-            <Text>{t('participantsPane.headings.lobby', { count: participants.length })}</Text>
-            <View>
-                {participants.map(p => (
-                    <LobbyParticipantItem
-                        key = { p.id }
-                        participant = { p } />)
-                )}
-            </View>
+            {/* eslint-disable-next-line max-len */}
+            <Text style = { styles.participantName }>
+                {t('participantsPane.headings.lobby',
+                    { count: participants.length })}
+            </Text>
+            { participants.map(p => (
+                <LobbyParticipantItem
+                    key = { p.id }
+                    participant = { p } />)
+            )}
         </>
     );
 };

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<any>}
  */
 function ParticipantItem({
+    children,
     audioMuteState = MediaState.None,
     videoMuteState = MediaState.None,
     participant: p
@@ -57,15 +64,16 @@ function ParticipantItem({
         <View style = { styles.participantContainer } >
             <Avatar
                 className = 'participant-avatar'
-                participant = { p.id }
+                participantId = { p.id }
                 size = { 32 } />
             <View style = { styles.participantContent }>
                 <View style = { styles.participantNameContainer }>
                     <Text style = { styles.participantName }>
                         { name }
                     </Text>
-                    { p.local ? <Text>({t('chat.you')})</Text> : null }
+                    { p.local ? <Text style = { styles.isLocal }>({t('chat.you')})</Text> : null }
                 </View>
+                { !p.local && children }
                 <View style = { styles.participantStates } >
                     {p.raisedHand && <RaisedHandIndicator />}
                     {VideoStateIcons[videoMuteState]}

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 = { () =>
                         (<Icon
-                            size = { 16 }
+                            size = { 24 }
                             src = { IconClose } />)
                     }
                     mode = 'contained'
@@ -59,8 +60,11 @@ function ParticipantsPane({ theme }: Props) {
                         }
                     }} />
             </View>
+            <LobbyParticipantList />
             <View style = { styles.footer }>
                 <Button
+                    color = { palette.text01 }
+                    compact = { true }
                     contentStyle = { styles.muteAllContent }
                     onPress = { closePane }
                     style = { styles.muteAllButton } >
@@ -71,7 +75,7 @@ function ParticipantsPane({ theme }: Props) {
                     /* eslint-disable-next-line react/jsx-no-bind */
                     icon = { () =>
                         (<Icon
-                            size = { 16 }
+                            size = { 24 }
                             src = { IconHorizontalPoints } />)
                     }
                     mode = 'contained'

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

@@ -35,6 +35,7 @@ export const participants = [
         name: 'me',
         pinned: false,
         presence: undefined,
+        raisedHand: true,
         role: 'participant',
         startWithAudioMuted: true,
         startWithVideoMuted: false
@@ -95,6 +96,7 @@ export const participants = [
         name: 'Carlin',
         pinned: false,
         presence: undefined,
+        raisedHand: true,
         role: 'participant',
         startWithAudioMuted: true,
         startWithVideoMuted: false

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

@@ -1,15 +1,5 @@
 import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
-/**
- * The style for content.
- */
-const flexContent = {
-    alignItems: 'center',
-    color: BaseTheme.palette.icon01,
-    display: 'flex',
-    flex: 1
-};
-
 /**
  * The style of the participants pane buttons.
  */
@@ -17,9 +7,8 @@ const container = {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'row',
-    height: 64,
-    justifyContent: 'center',
-    paddingRight: 8,
+    height: 72,
+    paddingRight: 16,
     width: '100%'
 };
 
@@ -32,6 +21,7 @@ const button = {
     borderRadius: BaseTheme.shape.borderRadius,
     display: 'flex',
     height: 48,
+    justifyContent: 'center',
     marginLeft: 'auto'
 };
 
@@ -48,7 +38,7 @@ const smallButton = {
  */
 const buttonContent = {
     ...BaseTheme.typography.labelButtonLarge,
-    ...flexContent,
+    color: BaseTheme.palette.text01,
     justifyContent: 'center'
 };
 
@@ -70,34 +60,39 @@ export default {
 
     participantContainer: {
         alignItems: 'center',
-        color: BaseTheme.palette.text01,
         display: 'flex',
+        flexDirection: 'row',
         fontSize: 13,
         height: 64,
+        justifyContent: 'center',
         margin: BaseTheme.spacing[4],
-        position: 'relative',
-        width: 375
+        paddingLeft: 8,
+        paddingRight: 8
     },
 
     participantContent: {
-        ...flexContent,
+        backgroundColor: 'green',
         boxShadow: BaseTheme.shape.boxShadow,
-        height: '100%',
         overflow: 'hidden',
-        paddingRight: BaseTheme.spacing[4]
+        paddingRight: BaseTheme.spacing[4],
+        width: '100%'
     },
 
     participantNameContainer: {
         display: 'flex',
         flex: 1,
+        flexDirection: 'row',
         marginRight: BaseTheme.spacing[3],
         overflow: 'hidden'
     },
 
     participantName: {
         overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
+        color: BaseTheme.palette.text01
+    },
+
+    isLocal: {
+        color: BaseTheme.palette.text01
     },
 
     participantsPane: {
@@ -105,8 +100,8 @@ export default {
     },
 
     participantStates: {
-        display: 'flex',
-        justifyContent: 'flex-end'
+        alignItems: 'flex-end',
+        display: 'flex'
     },
 
     raisedHandIndicator: {
@@ -121,13 +116,11 @@ export default {
     },
 
     header: {
-        ...container,
-        backgroundColor: 'red'
+        ...container
     },
 
     footer: {
         ...container,
-        backgroundColor: 'green',
         marginTop: 'auto'
     },
 
@@ -136,7 +129,8 @@ export default {
     },
 
     closeIcon: {
-        ...buttonContent
+        ...buttonContent,
+        left: 8
     },
 
     moreButton: {
@@ -144,16 +138,13 @@ export default {
     },
 
     moreIcon: {
-        ...buttonContent
+        ...buttonContent,
+        left: 8
     },
 
     muteAllButton: {
         ...button,
-        paddingBottom: 12,
-        paddingLeft: 16,
-        paddingRight: 16,
-        paddingTop: 12,
-        width: 94
+        left: 80
     },
 
     muteAllContent: {