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

react/features/base/config/functions.any.js

     return state['features/base/config'].recordingSharingUrl;
 }
 
-/* eslint-disable max-params, no-shadow */
+/**
+ * Selector used to get if the new participant is starting silent.
+ *
+ * @param {Object} state - The global state.
+ * @returns {string}
+ */
+export function getIsStartingSilent(state: Object) {
+    return Boolean(state['features/base/config'].startSilent);
+}
 
 /**
  * Overrides JSON properties in {@code config} and

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

         const { hideHeaderWithNavigation, onPressBack, onPressForward } = this.props;
 
         return (
-            <>
-                {
-                    !hideHeaderWithNavigation
+            !{ hideHeaderWithNavigation }
                     && <Header>
                         { onPressBack && <BackButton onPress = { onPressBack } /> }
                         <HeaderLabel labelKey = { this.props.headerLabelKey } />
                             labelKey = { this.props.forwardLabelKey }
                             onPress = { onPressForward } /> }
                     </Header>
-                }
-            </>
         );
     }
 }

react/features/conference/components/native/Conference.js

     /**
      * The indicator which determines if the participants pane is open.
      */
-    _isOpen: boolean,
+    _isParticipantsPaneOpen: boolean,
 
     /**
      * The ID of the participant currently on stage (if any)
     _renderContent() {
         const {
             _connecting,
-            _isOpen,
+            _isParticipantsPaneOpen,
             _largeVideoParticipantId,
             _reducedUI,
             _shouldDisplayTileView
 
                 {_shouldDisplayTileView && <Toolbox />}
 
-                { _isOpen && <ParticipantsPane /> }
+                { _isParticipantsPaneOpen && <ParticipantsPane /> }
 
             </>
         );
         _connecting: Boolean(connecting_),
         _filmstripVisible: isFilmstripVisible(state),
         _fullscreenEnabled: getFeatureFlag(state, FULLSCREEN_ENABLED, true),
-        _isOpen: isOpen,
+        _isParticipantsPaneOpen: isOpen,
         _largeVideoParticipantId: state['features/large-video'].participantId,
         _pictureInPictureEnabled: getFeatureFlag(state, PIP_ENABLED),
         _reducedUI: reducedUI,

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

 import { useTranslation } from 'react-i18next';
 import { TouchableOpacity, View } from 'react-native';
 import { Divider, Text } from 'react-native-paper';
-import { useDispatch, useSelector, useStore } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { Avatar } from '../../../base/avatar';
+import { getIsStartingSilent } from '../../../base/config';
 import { hideDialog, openDialog } from '../../../base/dialog/actions';
 import BottomSheet from '../../../base/dialog/components/native/BottomSheet';
 import {
 
 export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props) => {
     const [ volume, setVolume ] = useState(undefined);
-    const store = useStore();
-    const startSilent = store.getState['features/base/config'];
     const dispatch = useDispatch();
     const cancel = useCallback(() => dispatch(hideDialog()), [ dispatch ]);
-    const changeVolume = useCallback(() => setVolume(volume), [ volume ]);
+    const changeVolume = useCallback(() => setVolume(volume), [ setVolume, volume ]);
     const displayName = p.name;
     const isLocalModerator = useSelector(isLocalParticipantModerator);
     const isParticipantVideoMuted = useSelector(getIsParticipantVideoMuted(p));
+    const isStartingSilent = useSelector(getIsStartingSilent);
+
     const kickRemoteParticipant = useCallback(() => {
         dispatch(openDialog(KickRemoteParticipantDialog, {
             participantID: p.id
             participantID: p.id
         }));
     }, [ dispatch, p ]);
-    const onVolumeChange = startSilent ? undefined : changeVolume;
+    const onVolumeChange = isStartingSilent ? undefined : changeVolume;
     const sendPrivateMessage = useCallback(() => {
         dispatch(hideDialog());
         dispatch(openChat(p));

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

 import { useTranslation } from 'react-i18next';
 import { TouchableOpacity } from 'react-native';
 import { Text } from 'react-native-paper';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { openDialog, hideDialog } from '../../../base/dialog/actions';
 import BottomSheet from '../../../base/dialog/components/native/BottomSheet';
     Icon, IconMicDisabledHollow,
     IconVideoOff
 } from '../../../base/icons';
-import { MEDIA_TYPE } from '../../../base/media';
+import { getLocalParticipant } from '../../../base/participants';
 import { BlockAudioVideoDialog } from '../../../video-menu';
-import {
-    muteAllParticipants
-} from '../../../video-menu/actions.any';
+import MuteEveryonesVideoDialog
+    from '../../../video-menu/components/native/MuteEveryonesVideoDialog';
 
 import styles from './styles';
-type Props = {
-
-    /**
-     * Array of participant IDs to not mute
-     */
-    exclude: Array<string>
-};
 
-export const ContextMenuMore = ({ exclude }: Props) => {
+export const ContextMenuMore = () => {
     const dispatch = useDispatch();
     const blockAudioVideo = useCallback(() => dispatch(openDialog(BlockAudioVideoDialog)), [ dispatch ]);
     const cancel = useCallback(() => dispatch(hideDialog()), [ dispatch ]);
-    const muteEveryoneVideo = useCallback(() => dispatch(muteAllParticipants(exclude, MEDIA_TYPE.VIDEO)), [ dispatch ]);
+    const { id } = useSelector(getLocalParticipant);
+    const muteAllVideo = useCallback(() =>
+        dispatch(openDialog(MuteEveryonesVideoDialog,
+            { exclude: [ id ] })),
+        [ dispatch ]);
     const { t } = useTranslation();
 
     return (
             onCancel = { cancel }
             style = { styles.contextMenuMore }>
             <TouchableOpacity
-                onPress = { muteEveryoneVideo }
+                onPress = { muteAllVideo }
                 style = { styles.contextMenuItem }>
                 <Icon
                     size = { 20 }

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

 import { Button } from 'react-native-paper';
 import { useDispatch } from 'react-redux';
 
-import { setKnockingParticipantApproval } from '../../../lobby/actions.native';
+import { approveKnockingParticipant } from '../../../lobby/actions.native';
 import { showContextMenuReject } from '../../actions.native';
-import { MediaState } from '../../constants';
+import { MEDIA_STATE } from '../../constants';
 
 import ParticipantItem from './ParticipantItem';
 import styles from './styles';
 
 export const LobbyParticipantItem = ({ participant: p }: Props) => {
     const dispatch = useDispatch();
-    const admit = useCallback(() => dispatch(setKnockingParticipantApproval(p.id, true), [ dispatch ]));
+    const admit = useCallback(() => dispatch(approveKnockingParticipant(p.id), [ dispatch ]));
     const openContextMenuReject = useCallback(() => dispatch(showContextMenuReject(p), [ dispatch ]));
     const { t } = useTranslation();
 
     return (
         <ParticipantItem
-            audioMuteState = { MediaState.Muted }
+            audioMediaState = { MEDIA_STATE.NONE }
             isKnockingParticipant = { true }
             name = { p.name }
             onPress = { openContextMenuReject }
             participant = { p }
-            videoMuteState = { MediaState.ForceMuted }>
+            videoMediaState = { MEDIA_STATE.NONE }>
             <Button
                 children = { t('lobby.admit') }
                 contentStyle = { styles.participantActionsButtonContent }

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

 import { Button } from 'react-native-paper';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { admitMultiple } from '../../../lobby/actions.native';
 import { getLobbyState } from '../../../lobby/functions';
-import { admitAllKnockingParticipants } from '../../../video-menu/actions.any';
 
 import { LobbyParticipantItem } from './LobbyParticipantItem';
 import styles from './styles';
 
     const dispatch = useDispatch();
     const admitAll = useCallback(() =>
-        dispatch(admitAllKnockingParticipants(participants, lobbyEnabled)),
+        dispatch(admitMultiple(participants)),
         [ dispatch ]);
     const { t } = useTranslation();
 

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

 } from '../../../base/tracks';
 import { showContextMenuDetails } from '../../actions.native';
 import { MEDIA_STATE } from '../../constants';
+import { getParticipantAudioMediaState } from '../../functions';
 
 import ParticipantItem from './ParticipantItem';
 
     const dispatch = useDispatch();
     const isAudioMuted = useSelector(getIsParticipantAudioMuted(p));
     const isVideoMuted = useSelector(getIsParticipantVideoMuted(p));
+    const audioMediaState = useSelector(getParticipantAudioMediaState(p, isAudioMuted));
     const openContextMenuDetails = useCallback(() => !p.local && dispatch(showContextMenuDetails(p), [ dispatch ]));
 
     return (
         <ParticipantItem
-            audioMuteState = { isAudioMuted ? MEDIA_STATE.MUTED : MEDIA_STATE.UNMUTED }
+            audioMediaState = { audioMediaState }
             isKnockingParticipant = { false }
             name = { p.name }
             onPress = { openContextMenuDetails }
             participant = { p }
-            videoMuteState = { isVideoMuted ? MEDIA_STATE.Muted : MEDIA_STATE.Unmuted } />
+            videoMediaState = { isVideoMuted ? MEDIA_STATE.MUTED : MEDIA_STATE.UNMUTED } />
     );
 };
+

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

 import { useTranslation } from 'react-i18next';
 import { Text, View } from 'react-native';
 import { Button } from 'react-native-paper';
-import { useDispatch, useSelector, useStore } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { Icon, IconInviteMore } from '../../../base/icons';
 import { getParticipants } from '../../../base/participants';
     const dispatch = useDispatch();
     const onInvite = useCallback(() => dispatch(doInvitePeople()), [ dispatch ]);
     const showInviteButton = useSelector(shouldRenderInviteButton);
-    const store = useStore();
-    const state = store.getState();
-    const participants = getParticipants(state);
+    const participants = useSelector(getParticipants);
     const { t } = useTranslation();
 
     return (

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

 
 import { Avatar } from '../../../base/avatar';
 import { getParticipantDisplayNameWithId } from '../../../base/participants';
-import {
-    AudioStateIcons,
-    MediaState,
-    VideoStateIcons
-} from '../../constants';
+import { MEDIA_STATE, type MediaState, AudioStateIcons, VideoStateIcons } from '../../constants';
 
 import { RaisedHandIndicator } from './RaisedHandIndicator';
 import styles from './styles';
      */
     name?: string,
 
-    /**
-     * Callback for when the mouse leaves this component
-     */
-    onLeave?: Function,
-
     /**
      * Callback to be invoked on pressing the participant item.
      */
     name,
     onPress,
     participant: p,
-    audioMediaState = MediaState.None,
-    videoMediaState = MediaState.None
+    audioMediaState = MEDIA_STATE.NONE,
+    videoMediaState = MEDIA_STATE.NONE
 }: Props) {
 
     const displayName = name || useSelector(getParticipantDisplayNameWithId(p.id));
     return (
         <View style = { styles.participantContainer } >
             <TouchableOpacity
-                /* eslint-disable-next-line react/jsx-no-bind */
                 onPress = { onPress }
                 style = { styles.participantContent }>
                 <Avatar

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

 import { Icon, IconClose, IconHorizontalPoints } from '../../../base/icons';
 import { JitsiModal } from '../../../base/modal';
 import {
+    getParticipantCount, isEveryoneModerator,
     isLocalParticipantModerator
 } from '../../../base/participants';
 import MuteEveryoneDialog
 import { ContextMenuMore } from './ContextMenuMore';
 import { LobbyParticipantList } from './LobbyParticipantList';
 import { MeetingParticipantList } from './MeetingParticipantList';
-import styles from './styles';
+import styles, { button } from './styles';
 
 /**
  * Participant pane.
     const openMoreMenu = useCallback(() => dispatch(openDialog(ContextMenuMore)), [ dispatch ]);
     const closePane = useCallback(() => dispatch(close()), [ dispatch ]);
     const isLocalModerator = useSelector(isLocalParticipantModerator);
+    const participantsCount = useSelector(getParticipantCount);
+    const everyoneModerator = useSelector(isEveryoneModerator);
+    const showContextMenu = !everyoneModerator && participantsCount > 2;
     const muteAll = useCallback(() => dispatch(openDialog(MuteEveryoneDialog)),
         [ dispatch ]);
     const { t } = useTranslation();
                         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 } />
+                        style = { showContextMenu ? styles.muteAllButton : button } />
+                    {
+                        showContextMenu
+                        && <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/styles.js

 /**
  * The style of the participants pane buttons.
  */
-const button = {
+export const button = {
     alignItems: 'center',
     backgroundColor: BaseTheme.palette.action02,
     borderRadius: BaseTheme.shape.borderRadius,

react/features/participants-pane/constants.js

 // @flow
 
+import React from 'react';
+
+import {
+    Icon, IconCameraEmpty, IconCameraEmptyDisabled,
+    IconMicrophoneEmpty,
+    IconMicrophoneEmptySlash
+} from '../base/icons';
+
 /**
  * Reducer key for the feature.
  */
     ASK_TO_UNMUTE: 'AskToUnmute',
     NONE: 'None'
 };
+
+/**
+ * Icon mapping for possible participant audio states.
+ */
+export const AudioStateIcons: {[MediaState]: React$Element<any> | null} = {
+    [MEDIA_STATE.FORCE_MUTED]: (
+        <Icon
+            color = '#E04757'
+            size = { 16 }
+            src = { IconMicrophoneEmptySlash } />
+    ),
+    [MEDIA_STATE.MUTED]: (
+        <Icon
+            size = { 16 }
+            src = { IconMicrophoneEmptySlash } />
+    ),
+    [MEDIA_STATE.UNMUTED]: (
+        <Icon
+            color = '#1EC26A'
+            size = { 16 }
+            src = { IconMicrophoneEmpty } />
+    ),
+    [MEDIA_STATE.NONE]: null
+};
+
+/**
+ * Icon mapping for possible participant video states.
+ */
+export const VideoStateIcons = {
+    [MEDIA_STATE.FORCE_MUTED]: (
+        <Icon
+            size = { 16 }
+            src = { IconCameraEmptyDisabled } />
+    ),
+    [MEDIA_STATE.MUTED]: (
+        <Icon
+            size = { 16 }
+            src = { IconCameraEmptyDisabled } />
+    ),
+    [MEDIA_STATE.UNMUTED]: (
+        <Icon
+            size = { 16 }
+            src = { IconCameraEmpty } />
+    ),
+    [MEDIA_STATE.NONE]: null
+};

react/features/video-menu/actions.any.js

     muteRemoteParticipant
 } from '../base/participants';
 import { getIsParticipantAudioMuted } from '../base/tracks';
-import { setKnockingParticipantApproval } from '../lobby/actions';
 
 declare var APP: Object;
 
     };
 }
 
-/**
- * Admit all knocking participants.
- *
- * @param {Array<Object>} knockingParticipants - Array of participants waiting in lobby.
- * @param {boolean} lobbyEnabled - Is lobby mode enabled.
- *
- * @returns {Function}
- */
-export function admitAllKnockingParticipants(knockingParticipants: Array<Object>, lobbyEnabled: boolean) {
-    return (dispatch: Dispatch<any>) => {
-        const knockingParticipantsIds = knockingParticipants.map(participant => participant.id);
-
-        knockingParticipantsIds
-            .map(id => lobbyEnabled && setKnockingParticipantApproval(id, true))
-            .map(dispatch);
-    };
-}
-
 
 /**
  * Don't allow participants to unmute video/audio.