feat(native-participants-pane) rebase, resolved conflicts pt. 2

react/features/base/participants/functions.js

@@ -261,23 +261,6 @@ export function haveParticipantWithScreenSharingFeature(stateful: Object | Funct
     return toState(stateful)['features/base/participants'].haveParticipantWithScreenSharingFeature;
 }
 
-/**
- * Selectors for getting all known participant ids, with fake participants filtered
- * out.
- *
- * @param {(Function|Object|Participant[])} stateful - The redux state
- * features/base/participants, the (whole) redux state, or redux's
- * {@code getState} function to be used to retrieve the state
- * features/base/participants.
- * @returns {Participant[]}
- */
-export function getParticipantsById(stateful: Object | Function) {
-    const state = toState(stateful)['features/base/participants'];
-    const noFakeParticipants = state.filter(p => !p.fakeParticipants);
-
-    return noFakeParticipants.map(p => p.id);
-}
-
 /**
  * Selectors for getting all remote participants.
  *

react/features/lobby/functions.js

@@ -12,7 +12,7 @@ export function getLobbyState(state: any) {
 
 
 /**
- * Selector to return lobby state.
+ * Selector to return array with knocking participant ids.
  *
  * @param {any} state - State object.
  * @returns {Array}

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

@@ -3,7 +3,10 @@
 import { openDialog } from '../base/dialog';
 
 import { SET_VOLUME } from './actionTypes';
-import { ContextMenuLobbyParticipantReject, ContextMenuMeetingParticipantDetails } from './components/native';
+import {
+    ContextMenuMeetingParticipantDetails,
+    ContextMenuLobbyParticipantReject
+} from './components/native';
 export * from './actions.any';
 
 /**

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

@@ -24,7 +24,7 @@ type Props = {
     participant: Object
 };
 
-export const ContextMenuLobbyParticipantReject = ({ participant: p }: Props) => {
+const ContextMenuLobbyParticipantReject = ({ participant: p }: Props) => {
     const dispatch = useDispatch();
     const knockParticipantsIDArr = useSelector(getKnockingParticipantsById);
     const knockParticipantIsAvailable = knockParticipantsIDArr.find(knockPartId => knockPartId === p.id);
@@ -63,3 +63,5 @@ export const ContextMenuLobbyParticipantReject = ({ participant: p }: Props) =>
         </BottomSheet>
     );
 };
+
+export default ContextMenuLobbyParticipantReject;

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

@@ -7,7 +7,6 @@ import { Divider, Text } from 'react-native-paper';
 import { useDispatch } from 'react-redux';
 
 import { Avatar } from '../../../base/avatar';
-import { isToolbarButtonEnabled } from '../../../base/config';
 import { hideDialog, openDialog } from '../../../base/dialog/actions';
 import BottomSheet from '../../../base/dialog/components/native/BottomSheet';
 import {
@@ -16,7 +15,9 @@ import {
     IconMuteEveryoneElse, IconVideoOff
 } from '../../../base/icons';
 import {
-    getParticipantByIdOrUndefined, getParticipantDisplayName,
+    getLocalParticipant,
+    getParticipantByIdOrUndefined,
+    getParticipantDisplayName, getRemoteParticipants,
     isLocalParticipantModerator
 } from '../../../base/participants/functions';
 import { connect } from '../../../base/redux';
@@ -29,9 +30,9 @@ import {
     KickRemoteParticipantDialog,
     MuteEveryoneDialog,
     MuteRemoteParticipantDialog,
-    MuteRemoteParticipantsVideoDialog,
-    VolumeSlider
+    MuteRemoteParticipantsVideoDialog
 } from '../../../video-menu';
+import VolumeSlider from '../../../video-menu/components/native/VolumeSlider';
 
 import styles from './styles';
 
@@ -47,11 +48,6 @@ type Props = {
      */
     _isLocalModerator: boolean,
 
-    /**
-     * True if the chat button is enabled and false otherwise.
-     */
-    _isChatButtonEnabled: boolean,
-
     /**
      * True if the participant is moderator and false otherwise.
      */
@@ -67,6 +63,11 @@ type Props = {
      */
     _isParticipantAudioMuted: boolean,
 
+    /**
+     * Whether the participant is present in the room or not.
+     */
+    _isParticipantIDAvailable?: boolean,
+
     /**
      * Participant reference
      */
@@ -78,14 +79,14 @@ type Props = {
     participantID: string,
 };
 
-export const ContextMenuMeetingParticipantDetails = (
+const ContextMenuMeetingParticipantDetails = (
         {
             _displayName,
             _isLocalModerator,
-            _isChatButtonEnabled,
             _isParticipantVideoMuted,
             _isParticipantAudioMuted,
             _participant,
+            _isParticipantIDAvailable,
             participantID
         }: Props) => {
     const dispatch = useDispatch();
@@ -121,6 +122,7 @@ export const ContextMenuMeetingParticipantDetails = (
         <BottomSheet
             addScrollViewPadding = { false }
             onCancel = { cancel }
+            showSlidingView = { _isParticipantIDAvailable }
             style = { styles.contextMenuMeetingParticipantDetails }>
             <View
                 style = { styles.contextMenuItemSectionAvatar }>
@@ -196,20 +198,16 @@ export const ContextMenuMeetingParticipantDetails = (
                     </>
                 )
             }
-            {
-                _isChatButtonEnabled && (
-                    <TouchableOpacity
-                        onPress = { sendPrivateMessage }
-                        style = { styles.contextMenuItem }>
-                        <Icon
-                            size = { 20 }
-                            src = { IconMessage } />
-                        <Text style = { styles.contextMenuItemText }>
-                            { t('toolbar.accessibilityLabel.privateMessage') }
-                        </Text>
-                    </TouchableOpacity>
-                )
-            }
+            <TouchableOpacity
+                onPress = { sendPrivateMessage }
+                style = { styles.contextMenuItem }>
+                <Icon
+                    size = { 20 }
+                    src = { IconMessage } />
+                <Text style = { styles.contextMenuItemText }>
+                    { t('toolbar.accessibilityLabel.privateMessage') }
+                </Text>
+            </TouchableOpacity>
             {/* We need design specs for this*/}
             {/* <TouchableOpacity*/}
             {/*    style = { styles.contextMenuItemSection }>*/}
@@ -220,7 +218,7 @@ export const ContextMenuMeetingParticipantDetails = (
             {/*    <Text style = { styles.contextMenuItemText }>{ t('participantsPane.actions.networkStats') }</Text>*/}
             {/* </TouchableOpacity>*/}
             <Divider style = { styles.divider } />
-            <VolumeSlider participant = { _participant } />
+            <VolumeSlider participantID = { participantID } />
         </BottomSheet>
     );
 };
@@ -236,17 +234,28 @@ export const ContextMenuMeetingParticipantDetails = (
  */
 function _mapStateToProps(state, ownProps): Object {
     const { participantID } = ownProps;
+    const participantIDS = [];
+
     const participant = getParticipantByIdOrUndefined(state, participantID);
     const _isLocalModerator = isLocalParticipantModerator(state);
-    const _isChatButtonEnabled = isToolbarButtonEnabled('chat', state);
     const _isParticipantVideoMuted = isParticipantVideoMuted(participant, state);
     const _isParticipantAudioMuted = isParticipantAudioMuted(participant, state);
+    const localParticipant = getLocalParticipant(state);
+    const remoteParticipants = getRemoteParticipants(state);
+
+    localParticipant && participantIDS.push(localParticipant?.id);
+
+    remoteParticipants.forEach(p => {
+        participantIDS.push(p?.id);
+    });
+
+    const isParticipantIDAvailable = participantIDS.find(partID => partID === participantID);
 
     return {
         _displayName: getParticipantDisplayName(state, participantID),
         _isLocalModerator,
-        _isChatButtonEnabled,
         _isParticipantAudioMuted,
+        _isParticipantIDAvailable: Boolean(isParticipantIDAvailable),
         _isParticipantVideoMuted,
         _participant: participant
     };

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

@@ -62,30 +62,33 @@ type Props = {
     participantID: ?string
 };
 
-const MeetingParticipantItem = (
-        {
-            _audioMediaState,
-            _displayName,
-            _isVideoMuted,
-            _local,
-            _participantID,
-            _raisedHand,
-            onPress
-        }: Props) => {
-    const showParticipantDetails = !_local && onPress;
-
+/**
+ * Implements the MeetingParticipantItem component.
+ *
+ * @param {Props} props - The props of the component.
+ * @returns {ReactElement}
+ */
+function MeetingParticipantItem({
+    _audioMediaState,
+    _displayName,
+    _isVideoMuted,
+    _local,
+    _participantID,
+    _raisedHand,
+    onPress
+}: Props) {
     return (
         <ParticipantItem
             audioMediaState = { _audioMediaState }
             displayName = { _displayName }
             isKnockingParticipant = { false }
             local = { _local }
-            onPress = { showParticipantDetails }
+            onPress = { onPress }
             participantID = { _participantID }
             raisedHand = { _raisedHand }
             videoMediaState = { _isVideoMuted ? MEDIA_STATE.MUTED : MEDIA_STATE.UNMUTED } />
     );
-};
+}
 
 /**
  * Maps (parts of) the redux state to the associated props for this component.

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

@@ -35,7 +35,7 @@ export const MeetingParticipantList = () => {
         <MeetingParticipantItem
             key = { id }
             /* eslint-disable-next-line react/jsx-no-bind */
-            onPress = { () => dispatch(showContextMenuDetails(id)) }
+            onPress = { () => !localParticipant && dispatch(showContextMenuDetails(id)) }
             participantID = { id } />
     );
 

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

@@ -2,5 +2,5 @@
 
 export { default as ParticipantsPane } from './ParticipantsPane';
 export { default as ParticipantsPaneButton } from './ParticipantsPaneButton';
-export { ContextMenuLobbyParticipantReject } from './ContextMenuLobbyParticipantReject';
-export { ContextMenuMeetingParticipantDetails } from './ContextMenuMeetingParticipantDetails';
+export { default as ContextMenuLobbyParticipantReject } from './ContextMenuLobbyParticipantReject';
+export { default as ContextMenuMeetingParticipantDetails } from './ContextMenuMeetingParticipantDetails';

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

@@ -6,7 +6,7 @@ import { Slider, View } from 'react-native';
 import { withTheme } from 'react-native-paper';
 
 import { Icon, IconVolumeEmpty } from '../../../base/icons';
-import { getParticipantByIdOrUndefined } from '../../../base/participants';
+import { getLocalParticipant } from '../../../base/participants';
 import { connect } from '../../../base/redux';
 import { setVolume } from '../../../participants-pane/actions.native';
 import { VOLUME_SLIDER_SCALE } from '../../constants';
@@ -19,11 +19,6 @@ import styles from './styles';
  */
 type Props = {
 
-    /**
-     * Participant reference
-     */
-    _participant: Object,
-
     /**
      * Whether the participant enters the conference silent.
      */
@@ -131,10 +126,9 @@ class VolumeSlider extends PureComponent<Props, State> {
      * @returns {void}
      */
     _onVolumeChange(volumeLevel) {
-        const { dispatch, _participant } = this.props;
-        const { id } = _participant;
+        const { dispatch, participantID } = this.props;
 
-        dispatch(setVolume(id, volumeLevel));
+        dispatch(setVolume(participantID, volumeLevel));
     }
 }
 
@@ -148,15 +142,13 @@ class VolumeSlider extends PureComponent<Props, State> {
  */
 function mapStateToProps(state, ownProps): Object {
     const { participantID } = ownProps;
-    const participant = getParticipantByIdOrUndefined(state, participantID);
-    const { id, local } = participant;
     const { participantsVolume } = state['features/participants-pane'];
     const { startSilent } = state['features/base/config'];
+    const localParticipant = getLocalParticipant(state);
 
     return {
-        _participant: participant,
         _startSilent: Boolean(startSilent),
-        _volume: local ? undefined : participantsVolume[id]
+        _volume: localParticipant ? undefined : participantsVolume[participantID]
     };
 }