feat(native-participants-pane) ui updates for participant item

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

@@ -27,20 +27,23 @@ export const LobbyParticipantItem = ({ participant: p }: Props) => {
 
     return (
         <ParticipantItem
-            audioMuteState = { MediaState.None }
+            audioMuteState = { MediaState.Muted }
             participant = { p }
-            videoMuteState = { MediaState.None }>
+            videoMuteState = { MediaState.ForceMuted }>
             <Button
+                labelStyle = { styles.participantActionButtonText }
+                mode = 'contained'
+                onPress = { admit }
+                style = { styles.participantActionButton }>
+                {t('lobby.admit')}
+            </Button>
+            <Button
+                labelStyle = { styles.participantActionButtonText }
                 mode = 'contained'
                 onPress = { reject }
                 style = { styles.participantActionButton }>
                 {t('lobby.reject')}
             </Button>
-            <Button
-                onPress = { admit }
-                style = { styles.participantActionButton }>
-                {t('lobby.admit')}
-            </Button>
         </ParticipantItem>
     );
 };

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

@@ -14,7 +14,7 @@ export const LobbyParticipantList = () => {
     return (
         <>
             {/* eslint-disable-next-line max-len */}
-            <Text style = { styles.participantName }>
+            <Text style = { styles.lobbyListDescription }>
                 {t('participantsPane.headings.lobby',
                     { count: participants.length })}
             </Text>

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

@@ -18,6 +18,14 @@ import {
 import { RaisedHandIndicator } from './RaisedHandIndicator';
 import styles from './styles';
 
+// /**
+//  * Participant actions component mapping depending on trigger type.
+//  */
+// const Actions = {
+//     [ActionTrigger.Hover]: ParticipantActionsHover,
+//     [ActionTrigger.Permanent]: ParticipantActionsPermanent
+// };
+
 type Props = {
 
     /**
@@ -73,11 +81,11 @@ function ParticipantItem({
                     </Text>
                     { p.local ? <Text style = { styles.isLocal }>({t('chat.you')})</Text> : null }
                 </View>
-                { !p.local && children }
+                { p.local && <Text style = { styles.participantActions }> {children} </Text> }
-                <View style = { styles.participantStates } >
+                <View style = { styles.participantStatesContainer } >
                     {p.raisedHand && <RaisedHandIndicator />}
-                    {VideoStateIcons[videoMuteState]}
+                    <View style = { styles.participantStateVideo }>{VideoStateIcons[videoMuteState]}</View>
-                    {AudioStateIcons[audioMuteState]}
+                    <View style = { styles.participantStateAudio }>{AudioStateIcons[audioMuteState]}</View>
                 </View>
             </View>
         </View>

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

@@ -9,6 +9,7 @@ export const RaisedHandIndicator = () => (
     <View style = { styles.raisedHandIndicator }>
         <Icon
             size = { 15 }
-            src = { IconRaisedHandHollow } />
+            src = { IconRaisedHandHollow }
+            style = { styles.raisedHandIcon } />
     </View>
 );

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

@@ -1,5 +1,33 @@
 import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
+
+/**
+ * The style for participant actions.
+ */
+const participantActions = {
+    alignItems: 'center',
+    zIndex: 1
+};
+
+/**
+ * The style for participant states.
+ */
+const participantState = {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center'
+};
+
+/**
+ * The style for content.
+ */
+const flexContent = {
+    alignItems: 'center',
+    color: BaseTheme.palette.icon01,
+    display: 'flex',
+    flex: 1
+};
+
 /**
  * The style of the participants pane buttons.
  */
@@ -37,7 +65,8 @@ const smallButton = {
  * The style of the participants pane buttons description.
  */
 const buttonContent = {
-    ...BaseTheme.typography.labelButtonLarge,
+    ...BaseTheme.typography.labelButton,
+    ...flexContent,
     color: BaseTheme.palette.text01,
     justifyContent: 'center'
 };
@@ -47,43 +76,73 @@ const buttonContent = {
  */
 export default {
 
+    participantActions: {
+        ...participantActions
+    },
+
+    participantActionsHover: {
+        ...participantActions,
+        backgroundColor: '#292929',
+        bottom: 1,
+        display: 'none',
+        position: 'absolute',
+        right: 8,
+        top: 0,
+        after: {
+            backgroundColor: 'linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #292929 100%)',
+            content: '',
+            bottom: 0,
+            display: 'block',
+            left: 0,
+            pointerEvents: 'none',
+            position: 'absolute',
+            top: 0,
+            transform: 'translateX(-100%)',
+            width: 40
+        }
+    },
+
+    participantActionsPermanent: {
+        ...participantActions,
+        display: 'flex'
+    },
+
     participantActionButton: {
         backgroundColor: BaseTheme.palette.action01,
-        borderRadius: BaseTheme.shape.borderRadius,
+        borderRadius: BaseTheme.shape.borderRadius
-        height: 40,
+    },
-        paddingTop: 8,
+
-        paddingBottom: 8,
+    participantActionButtonText: {
-        paddingLeft: 16,
+        fontSize: 5
-        paddingRight: 16,
-        width: 73
     },
 
     participantContainer: {
         alignItems: 'center',
         display: 'flex',
         flexDirection: 'row',
-        fontSize: 13,
+        marginRight: BaseTheme.spacing[6],
-        height: 64,
-        justifyContent: 'center',
-        margin: BaseTheme.spacing[4],
         paddingLeft: 8,
         paddingRight: 8
     },
 
     participantContent: {
-        backgroundColor: 'green',
+        alignItems: 'center',
-        boxShadow: BaseTheme.shape.boxShadow,
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        height: 64,
         overflow: 'hidden',
-        paddingRight: BaseTheme.spacing[4],
+        paddingLeft: BaseTheme.spacing[2],
+        paddingTop: BaseTheme.spacing[4],
         width: '100%'
     },
 
     participantNameContainer: {
         display: 'flex',
-        flex: 1,
         flexDirection: 'row',
         marginRight: BaseTheme.spacing[3],
-        overflow: 'hidden'
+        overflow: 'hidden',
+        width: '50%'
     },
 
     participantName: {
@@ -99,18 +158,41 @@ export default {
         backgroundColor: BaseTheme.palette.ui01
     },
 
-    participantStates: {
+    participantStatesContainer: {
-        alignItems: 'flex-end',
+        display: 'flex',
-        display: 'flex'
+        flexDirection: 'row',
+        justifyItems: 'space-between',
+        marginLeft: 'auto'
+    },
+
+    participantStateAudio: {
+        ...participantState
+    },
+
+    participantStateVideo: {
+        ...participantState,
+        marginRight: 8
     },
 
     raisedHandIndicator: {
         backgroundColor: BaseTheme.palette.warning02,
         borderRadius: BaseTheme.shape.borderRadius / 2,
         height: 24,
+        marginRight: 8,
         width: 24
     },
 
+    raisedHandIcon: {
+        ...flexContent,
+        top: 4
+    },
+
+    lobbyListDescription: {
+        color: BaseTheme.palette.text01,
+        overflow: 'hidden',
+        padding: BaseTheme.spacing[2]
+    },
+
     lobbyListContainer: {
         ...container
     },