feat(native-participants-pane) implemented review remarks pt. 3

lang/main.json

@@ -601,7 +601,9 @@
             "blockEveryoneMicCamera": "Block everyone's mic and camera",
             "invite": "Invite Someone",
             "askUnmute": "Ask to unmute",
+            "mute": "Mute",
             "muteAll": "Mute all",
+            "muteEveryoneElse": "Mute everyone else",
             "startModeration": "Unmute themselves or start video",
             "stopEveryonesVideo": "Stop everyone's video",
             "stopVideo": "Stop video",

react/features/base/react/components/native/HeaderWithNavigation.js

@@ -56,7 +56,7 @@ class HeaderWithNavigation extends Component<Props> {
         const { hideHeaderWithNavigation, onPressBack, onPressForward } = this.props;
 
         return (
-            !{ hideHeaderWithNavigation }
+            !hideHeaderWithNavigation
                     && <Header>
                         { onPressBack && <BackButton onPress = { onPressBack } /> }
                         <HeaderLabel labelKey = { this.props.headerLabelKey } />

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

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

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

@@ -74,14 +74,14 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
     return (
         <BottomSheet
             onCancel = { cancel }
-            style = { styles.contextMenuMore }>
+            style = { styles.contextMenuMeetingParticipantDetails }>
             <View
-                style = { styles.contextMenuItemSection }>
+                style = { styles.contextMenuItemSectionAvatar }>
                 <Avatar
                     className = 'participant-avatar'
                     participantId = { p.id }
-                    size = { 20 } />
-                <View style = { styles.contextMenuItemText }>
+                    size = { 30 } />
+                <View style = { styles.contextMenuItemAvatarText }>
                     <Text style = { styles.contextMenuItemName }>
                         { displayName }
                     </Text>
@@ -94,7 +94,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
                     onPress = { muteAudio }
                     style = { styles.contextMenuItem }>
                     <Icon
-                        size = { 20 }
+                        size = { 24 }
                         src = { IconMicrophoneEmptySlash }
                         style = { styles.contextMenuItemIcon } />
                     <Text style = { styles.contextMenuItemText }>
@@ -108,7 +108,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
                     onPress = { muteEveryoneElse }
                     style = { styles.contextMenuItem }>
                     <Icon
-                        size = { 20 }
+                        size = { 24 }
                         src = { IconMuteEveryoneElse }
                         style = { styles.contextMenuItemIcon } />
                     <Text style = { styles.contextMenuItemText }>
@@ -124,7 +124,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
                         onPress = { muteVideo }
                         style = { styles.contextMenuItemSection }>
                         <Icon
-                            size = { 20 }
+                            size = { 24 }
                             src = { IconVideoOff }
                             style = { styles.contextMenuItemIcon } />
                         <Text style = { styles.contextMenuItemText }>
@@ -139,7 +139,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
                     onPress = { kickRemoteParticipant }
                     style = { styles.contextMenuItem }>
                     <Icon
-                        size = { 20 }
+                        size = { 24 }
                         src = { IconCloseCircle }
                         style = { styles.contextMenuItemIcon } />
                     <Text style = { styles.contextMenuItemText }>
@@ -151,7 +151,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
                 onPress = { sendPrivateMessage }
                 style = { styles.contextMenuItem }>
                 <Icon
-                    size = { 20 }
+                    size = { 24 }
                     src = { IconMessage }
                     style = { styles.contextMenuItemIcon } />
                 <Text style = { styles.contextMenuItemText }>

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

@@ -38,7 +38,7 @@ export const ContextMenuMore = () => {
                 onPress = { muteAllVideo }
                 style = { styles.contextMenuItem }>
                 <Icon
-                    size = { 20 }
+                    size = { 24 }
                     src = { IconVideoOff } />
                 <Text style = { styles.contextMenuItemText }>{t('participantsPane.actions.stopEveryonesVideo')}</Text>
             </TouchableOpacity>
@@ -46,7 +46,7 @@ export const ContextMenuMore = () => {
                 onPress = { blockAudioVideo }
                 style = { styles.contextMenuItem }>
                 <Icon
-                    size = { 20 }
+                    size = { 24 }
                     src = { IconMicDisabledHollow }
                     style = { styles.contextMenuIcon } />
                 <Text style = { styles.contextMenuItemText }>

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

@@ -10,7 +10,8 @@ import { openDialog } from '../../../base/dialog';
 import { Icon, IconClose, IconHorizontalPoints } from '../../../base/icons';
 import { JitsiModal } from '../../../base/modal';
 import {
-    getParticipantCount, isEveryoneModerator,
+    getParticipantCount,
+    isEveryoneModerator,
     isLocalParticipantModerator
 } from '../../../base/participants';
 import MuteEveryoneDialog
@@ -20,7 +21,7 @@ import { close } from '../../actions.native';
 import { ContextMenuMore } from './ContextMenuMore';
 import { LobbyParticipantList } from './LobbyParticipantList';
 import { MeetingParticipantList } from './MeetingParticipantList';
-import styles, { button } from './styles';
+import styles from './styles';
 
 /**
  * Participant pane.
@@ -34,7 +35,7 @@ const ParticipantsPane = () => {
     const isLocalModerator = useSelector(isLocalParticipantModerator);
     const participantsCount = useSelector(getParticipantCount);
     const everyoneModerator = useSelector(isEveryoneModerator);
-    const showContextMenu = !everyoneModerator && participantsCount > 2;
+    const showContextMenu = true;
     const muteAll = useCallback(() => dispatch(openDialog(MuteEveryoneDialog)),
         [ dispatch ]);
     const { t } = useTranslation();
@@ -45,13 +46,13 @@ const ParticipantsPane = () => {
             style = { styles.participantsPane }>
             <View style = { styles.header }>
                 <Button
-                    contentStyle = { styles.closeIcon }
                     /* eslint-disable-next-line react/jsx-no-bind */
                     icon = { () =>
                         (<Icon
                             size = { 24 }
                             src = { IconClose } />)
                     }
+                    labelStyle = { styles.closeIcon }
                     mode = 'contained'
                     onPress = { closePane }
                     style = { styles.closeButton } />
@@ -65,21 +66,20 @@ const ParticipantsPane = () => {
                 && <View style = { styles.footer }>
                     <Button
                         children = { t('participantsPane.actions.muteAll') }
-                        contentStyle = { styles.muteAllContent }
                         labelStyle = { styles.muteAllLabel }
                         mode = 'contained'
                         onPress = { muteAll }
-                        style = { showContextMenu ? styles.muteAllButton : button } />
+                        style = { showContextMenu ? styles.muteAllMoreButton : styles.muteAllButton } />
                     {
                         showContextMenu
                         && <Button
-                            contentStyle = { styles.moreIcon }
                             /* eslint-disable-next-line react/jsx-no-bind */
                             icon = { () =>
                                 (<Icon
                                     size = { 24 }
                                     src = { IconHorizontalPoints } />)
                             }
+                            labelStyle = { styles.moreIcon }
                             mode = 'contained'
                             onPress = { openMoreMenu }
                             style = { styles.moreButton } />

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

@@ -22,23 +22,39 @@ const flexContent = {
     flex: 1
 };
 
+/**
+ * The style for the context menu items text.
+ */
+const contextMenuItemText = {
+    ...BaseTheme.typography.bodyShortRegularLarge,
+    color: BaseTheme.palette.text01
+};
+
 /**
  * The style of the participants pane buttons.
  */
 export const button = {
-    alignItems: 'center',
     backgroundColor: BaseTheme.palette.action02,
     borderRadius: BaseTheme.shape.borderRadius,
     display: 'flex',
-    justifyContent: 'center',
-    marginLeft: 'auto'
+    minWidth: 0
 };
 
 /**
  * Small buttons.
  */
 const smallButton = {
-    ...button
+    ...button,
+    height: BaseTheme.spacing[7],
+    width: BaseTheme.spacing[7]
+};
+
+/**
+ * Mute all button.
+ */
+const muteAllButton = {
+    ...button,
+    marginLeft: 'auto'
 };
 
 /**
@@ -46,6 +62,7 @@ const smallButton = {
  */
 const buttonContent = {
     ...BaseTheme.typography.labelButton,
+    alignSelf: 'center',
     color: BaseTheme.palette.text01,
     justifyContent: 'center'
 };
@@ -213,6 +230,7 @@ export default {
         display: 'flex',
         flexDirection: 'row',
         height: BaseTheme.spacing[10],
+        justifyContent: 'space-between',
         paddingRight: BaseTheme.spacing[3],
         position: 'relative',
         right: BaseTheme.spacing[0],
@@ -221,13 +239,17 @@ export default {
 
     closeButton: {
         ...smallButton,
-        width: BaseTheme.spacing[8]
+        marginLeft: 'auto'
     },
 
     closeIcon: {
         ...buttonContent,
-        height: BaseTheme.spacing[8],
-        left: BaseTheme.spacing[2]
+        height: BaseTheme.spacing[5],
+        marginLeft: 'auto',
+        paddingTop: 12,
+        paddingBottom: 12,
+        paddingRight: BaseTheme.spacing[3],
+        paddingLeft: BaseTheme.spacing[3]
     },
 
     inviteButton: {
@@ -243,14 +265,17 @@ export default {
     },
 
     moreButton: {
-        ...smallButton,
-        width: BaseTheme.spacing[8]
+        ...smallButton
     },
 
     moreIcon: {
         ...buttonContent,
-        height: BaseTheme.spacing[8],
-        left: BaseTheme.spacing[2]
+        height: BaseTheme.spacing[5],
+        marginLeft: 'auto',
+        paddingTop: 12,
+        paddingBottom: 12,
+        paddingRight: BaseTheme.spacing[3],
+        paddingLeft: BaseTheme.spacing[3]
     },
 
     contextMenuMore: {
@@ -258,20 +283,33 @@ export default {
         borderRadius: BaseTheme.shape.borderRadius
     },
 
+    contextMenuMeetingParticipantDetails: {
+        backgroundColor: BaseTheme.palette.action02,
+        borderRadius: BaseTheme.shape.borderRadius
+    },
+
     muteAllButton: {
-        ...button,
-        left: BaseTheme.spacing[10] + BaseTheme.spacing[2]
+        ...muteAllButton
     },
 
-    muteAllContent: {
-        ...buttonContent,
-        height: BaseTheme.spacing[8]
+    muteAllMoreButton: {
+        ...muteAllButton,
+        right: BaseTheme.spacing[3]
     },
 
     muteAllLabel: {
         ...BaseTheme.typography.labelButtonLarge,
         color: BaseTheme.palette.text01,
-        textTransform: 'capitalize'
+        flexDirection: 'column',
+        height: BaseTheme.spacing[7],
+        marginVertical: BaseTheme.spacing[0],
+        marginHorizontal: BaseTheme.spacing[0],
+        paddingTop: 12,
+        paddingBottom: 12,
+        paddingRight: BaseTheme.spacing[3],
+        paddingLeft: BaseTheme.spacing[3],
+        textTransform: 'capitalize',
+        width: 94
     },
 
     contextMenuItem: {
@@ -282,9 +320,18 @@ export default {
         ...contextMenuItem
     },
 
+    contextMenuItemSectionAvatar: {
+        ...contextMenuItem,
+        marginLeft: BaseTheme.spacing[1]
+    },
+
+    contextMenuItemAvatarText: {
+        ...contextMenuItemText,
+        marginLeft: BaseTheme.spacing[2]
+    },
+
     contextMenuItemText: {
-        ...BaseTheme.typography.bodyShortRegularLarge,
-        color: BaseTheme.palette.text01,
+        ...contextMenuItemText,
         marginLeft: BaseTheme.spacing[3]
     },
 

react/features/participants-pane/constants.js

@@ -3,7 +3,9 @@
 import React from 'react';
 
 import {
-    Icon, IconCameraEmpty, IconCameraEmptyDisabled,
+    Icon,
+    IconCameraEmpty,
+    IconCameraEmptyDisabled,
     IconMicrophoneEmpty,
     IconMicrophoneEmptySlash
 } from '../base/icons';

react/features/video-menu/components/native/VolumeSlider.js

@@ -2,15 +2,11 @@
 
 import _ from 'lodash';
 import React, { PureComponent } from 'react';
-import { View, Slider } from 'react-native';
+import { Slider, View } from 'react-native';
 import { withTheme } from 'react-native-paper';
 
 import { translate } from '../../../base/i18n';
 import { Icon, IconVolumeEmpty } from '../../../base/icons';
-import {
-    getLocalParticipant,
-    getParticipantById
-} from '../../../base/participants';
 import { connect } from '../../../base/redux';
 import { setVolume } from '../../../participants-pane/actions.native';
 import { VOLUME_SLIDER_SCALE } from '../../constants';
@@ -105,7 +101,7 @@ class VolumeSlider extends PureComponent<Props, State> {
         return (
             <View style = { styles.volumeSliderContainer } >
                 <Icon
-                    size = { 20 }
+                    size = { 24 }
                     src = { IconVolumeEmpty }
                     style = { styles.volumeIcon } />
                 <Slider
@@ -148,15 +144,13 @@ class VolumeSlider extends PureComponent<Props, State> {
  */
 function mapStateToProps(state, ownProps): Object {
     const { participant } = ownProps;
-    const { startSilent } = state['features/base/config'];
+    const { id, local } = participant;
     const { participantsVolume } = state['features/participants-pane'];
-    const getParticipant = participant.id
-        ? getParticipantById(state, participant.id) : getLocalParticipant(state);
-    const { id } = getParticipant;
+    const { startSilent } = state['features/base/config'];
 
     return {
         _startSilent: Boolean(startSilent),
-        _volume: participant.local ? undefined : participantsVolume[id]
+        _volume: local ? undefined : participantsVolume[id]
     };
 }
 

react/features/video-menu/components/native/styles.js

@@ -59,11 +59,12 @@ export default createStyleSheet({
     },
 
     volumeIcon: {
-        marginLeft: BaseTheme.spacing[1]
+        marginLeft: BaseTheme.spacing[1],
+        minWidth: '5%'
     },
 
     sliderContainer: {
-        marginLeft: BaseTheme.spacing[2],
-        minWidth: '92%'
+        marginLeft: BaseTheme.spacing[3],
+        minWidth: '90%'
     }
 });