From d62e378528831e793f1f2fedfbf2fc9a928d28aa Mon Sep 17 00:00:00 2001
From: Calin Chitu <calinte2002@yahoo.co.uk>
Date: Mon, 12 Jul 2021 18:14:38 +0300
Subject: [PATCH] feat(native-participants-pane) rebase, resolved conflicts pt.
 1

---
 react/features/base/participants/functions.js |  17 ++
 .../participants-pane/actions.native.js       |   6 +-
 .../ContextMenuMeetingParticipantDetails.js   | 240 ++++++++++++------
 .../components/native/LobbyParticipantItem.js |   5 +-
 .../native/MeetingParticipantItem.js          | 115 +++++++--
 .../native/MeetingParticipantList.js          |  41 ++-
 .../components/native/ParticipantItem.js      |  35 ++-
 .../web/MeetingParticipantContextMenu.js      |  22 +-
 .../components/web/MeetingParticipantItem.js  |  12 +-
 .../components/web/MeetingParticipantList.js  |   8 +-
 .../components/web/ParticipantItem.js         |   6 +-
 .../components/web/ParticipantsPane.js        |  18 +-
 .../participants-pane/components/web/index.js |   2 +-
 .../components/native/VolumeSlider.js         |  21 +-
 14 files changed, 382 insertions(+), 166 deletions(-)

diff --git a/react/features/base/participants/functions.js b/react/features/base/participants/functions.js
index b859ca479..8739a2d22 100644
--- a/react/features/base/participants/functions.js
+++ b/react/features/base/participants/functions.js
@@ -261,6 +261,23 @@ 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.
  *
diff --git a/react/features/participants-pane/actions.native.js b/react/features/participants-pane/actions.native.js
index 8c8e190a5..422d61b81 100644
--- a/react/features/participants-pane/actions.native.js
+++ b/react/features/participants-pane/actions.native.js
@@ -20,11 +20,11 @@ export function showContextMenuReject(participant: Object) {
 /**
  * Displays the context menu for the selected meeting participant.
  *
- * @param {Object} participant - The selected meeting participant.
+ * @param {string} participantID - The selected meeting participant id.
  * @returns {Function}
  */
-export function showContextMenuDetails(participant: Object) {
-    return openDialog(ContextMenuMeetingParticipantDetails, { participant });
+export function showContextMenuDetails(participantID: String) {
+    return openDialog(ContextMenuMeetingParticipantDetails, { participantID });
 }
 
 /**
diff --git a/react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js b/react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js
index 0d60a1e1f..03aa3c6b1 100644
--- a/react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js
+++ b/react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js
@@ -4,9 +4,10 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TouchableOpacity, View } from 'react-native';
 import { Divider, Text } from 'react-native-paper';
-import { useDispatch, useSelector } from 'react-redux';
+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 {
@@ -15,10 +16,14 @@ import {
     IconMuteEveryoneElse, IconVideoOff
 } from '../../../base/icons';
 import {
-    getParticipantsById,
+    getParticipantByIdOrUndefined, getParticipantDisplayName,
     isLocalParticipantModerator
-} from '../../../base/participants';
-import { getIsParticipantVideoMuted } from '../../../base/tracks';
+} from '../../../base/participants/functions';
+import { connect } from '../../../base/redux';
+import {
+    isParticipantAudioMuted,
+    isParticipantVideoMuted
+} from '../../../base/tracks/functions';
 import { openChat } from '../../../chat/actions.native';
 import {
     KickRemoteParticipantDialog,
@@ -32,131 +37,179 @@ import styles from './styles';
 
 type Props = {
 
+    /**
+     * The display name of the participant.
+     */
+    _displayName: string,
+
+    /**
+     * True if the local participant is moderator and false otherwise.
+     */
+    _isLocalModerator: boolean,
+
+    /**
+     * True if the chat button is enabled and false otherwise.
+     */
+    _isChatButtonEnabled: boolean,
+
+    /**
+     * True if the participant is moderator and false otherwise.
+     */
+    _isParticipantModerator: boolean,
+
+    /**
+     * True if the participant is video muted and false otherwise.
+     */
+    _isParticipantVideoMuted: boolean,
+
+    /**
+     * True if the participant is audio muted and false otherwise.
+     */
+    _isParticipantAudioMuted: boolean,
+
     /**
      * Participant reference
      */
-    participant: Object
+    _participant: Object,
+
+    /**
+     * The ID of the participant.
+     */
+    participantID: string,
 };
 
-export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props) => {
+export const ContextMenuMeetingParticipantDetails = (
+        {
+            _displayName,
+            _isLocalModerator,
+            _isChatButtonEnabled,
+            _isParticipantVideoMuted,
+            _isParticipantAudioMuted,
+            _participant,
+            participantID
+        }: Props) => {
     const dispatch = useDispatch();
-    const participantsIDArr = useSelector(getParticipantsById);
-    const participantIsAvailable = participantsIDArr.find(partId => partId === p.id);
     const cancel = useCallback(() => dispatch(hideDialog()), [ dispatch ]);
-    const displayName = p.name;
-    const isLocalModerator = useSelector(isLocalParticipantModerator);
-    const isParticipantVideoMuted = useSelector(getIsParticipantVideoMuted(p));
     const kickRemoteParticipant = useCallback(() => {
         dispatch(openDialog(KickRemoteParticipantDialog, {
-            participantID: p.id
+            participantID
         }));
-    }, [ dispatch, p ]);
+    }, [ dispatch, participantID ]);
     const muteAudio = useCallback(() => {
         dispatch(openDialog(MuteRemoteParticipantDialog, {
-            participantID: p.id
+            participantID
         }));
-    }, [ dispatch, p ]);
+    }, [ dispatch, participantID ]);
     const muteEveryoneElse = useCallback(() => {
         dispatch(openDialog(MuteEveryoneDialog, {
-            exclude: [ p.id ]
+            exclude: [ participantID ]
         }));
-    }, [ dispatch, p ]);
+    }, [ dispatch, participantID ]);
     const muteVideo = useCallback(() => {
         dispatch(openDialog(MuteRemoteParticipantsVideoDialog, {
-            participantID: p.id
+            participantID
         }));
-    }, [ dispatch, p ]);
+    }, [ dispatch, participantID ]);
 
     const sendPrivateMessage = useCallback(() => {
         dispatch(hideDialog());
-        dispatch(openChat(p));
-    }, [ dispatch, p ]);
+        dispatch(openChat(_participant));
+    }, [ dispatch, _participant ]);
     const { t } = useTranslation();
 
     return (
         <BottomSheet
             addScrollViewPadding = { false }
             onCancel = { cancel }
-            showSlidingView = { Boolean(participantIsAvailable) }
             style = { styles.contextMenuMeetingParticipantDetails }>
             <View
                 style = { styles.contextMenuItemSectionAvatar }>
                 <Avatar
                     className = 'participant-avatar'
-                    participantId = { p.id }
+                    participantId = { participantID }
                     size = { 20 } />
                 <View style = { styles.contextMenuItemAvatarText }>
                     <Text style = { styles.contextMenuItemName }>
-                        { displayName }
+                        { _displayName }
                     </Text>
                 </View>
             </View>
             <Divider style = { styles.divider } />
             {
-                isLocalModerator
-                && <TouchableOpacity
-                    onPress = { muteAudio }
-                    style = { styles.contextMenuItem }>
-                    <Icon
-                        size = { 20 }
-                        src = { IconMicrophoneEmptySlash } />
-                    <Text style = { styles.contextMenuItemText }>
-                        { t('participantsPane.actions.mute') }
-                    </Text>
-                </TouchableOpacity>
-            }
-            {
-                isLocalModerator
-                && <TouchableOpacity
-                    onPress = { muteEveryoneElse }
-                    style = { styles.contextMenuItem }>
-                    <Icon
-                        size = { 20 }
-                        src = { IconMuteEveryoneElse } />
-                    <Text style = { styles.contextMenuItemText }>
-                        { t('participantsPane.actions.muteEveryoneElse') }
-                    </Text>
-                </TouchableOpacity>
+                _isLocalModerator && (
+                    <>
+                        {
+                            !_isParticipantAudioMuted
+                            && <TouchableOpacity
+                                onPress = { muteAudio }
+                                style = { styles.contextMenuItem }>
+                                <Icon
+                                    size = { 20 }
+                                    src = { IconMicrophoneEmptySlash } />
+                                <Text style = { styles.contextMenuItemText }>
+                                    { t('participantsPane.actions.mute') }
+                                </Text>
+                            </TouchableOpacity>
+                        }
+
+                        <TouchableOpacity
+                            onPress = { muteEveryoneElse }
+                            style = { styles.contextMenuItem }>
+                            <Icon
+                                size = { 20 }
+                                src = { IconMuteEveryoneElse } />
+                            <Text style = { styles.contextMenuItemText }>
+                                { t('participantsPane.actions.muteEveryoneElse') }
+                            </Text>
+                        </TouchableOpacity>
+                    </>
+                )
             }
             <Divider style = { styles.divider } />
             {
-                isLocalModerator && (
-                    isParticipantVideoMuted
-                    || <TouchableOpacity
-                        onPress = { muteVideo }
-                        style = { styles.contextMenuItemSection }>
+                _isLocalModerator && (
+                    <>
+                        {
+                            _isParticipantVideoMuted
+                            || <TouchableOpacity
+                                onPress = { muteVideo }
+                                style = { styles.contextMenuItemSection }>
+                                <Icon
+                                    size = { 20 }
+                                    src = { IconVideoOff } />
+                                <Text style = { styles.contextMenuItemText }>
+                                    { t('participantsPane.actions.stopVideo') }
+                                </Text>
+                            </TouchableOpacity>
+                        }
+
+                        <TouchableOpacity
+                            onPress = { kickRemoteParticipant }
+                            style = { styles.contextMenuItem }>
+                            <Icon
+                                size = { 20 }
+                                src = { IconCloseCircle } />
+                            <Text style = { styles.contextMenuItemText }>
+                                { t('videothumbnail.kick') }
+                            </Text>
+                        </TouchableOpacity>
+                    </>
+                )
+            }
+            {
+                _isChatButtonEnabled && (
+                    <TouchableOpacity
+                        onPress = { sendPrivateMessage }
+                        style = { styles.contextMenuItem }>
                         <Icon
                             size = { 20 }
-                            src = { IconVideoOff } />
+                            src = { IconMessage } />
                         <Text style = { styles.contextMenuItemText }>
-                            { t('participantsPane.actions.stopVideo') }
+                            { t('toolbar.accessibilityLabel.privateMessage') }
                         </Text>
                     </TouchableOpacity>
                 )
             }
-            {
-                isLocalModerator
-                && <TouchableOpacity
-                    onPress = { kickRemoteParticipant }
-                    style = { styles.contextMenuItem }>
-                    <Icon
-                        size = { 20 }
-                        src = { IconCloseCircle } />
-                    <Text style = { styles.contextMenuItemText }>
-                        { t('videothumbnail.kick') }
-                    </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 }>*/}
@@ -167,7 +220,36 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
             {/*    <Text style = { styles.contextMenuItemText }>{ t('participantsPane.actions.networkStats') }</Text>*/}
             {/* </TouchableOpacity>*/}
             <Divider style = { styles.divider } />
-            <VolumeSlider participant = { p } />
+            <VolumeSlider participant = { _participant } />
         </BottomSheet>
     );
 };
+
+
+/**
+ * Maps (parts of) the redux state to the associated props for this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {Object} ownProps - The own props of the component.
+ * @private
+ * @returns {Props}
+ */
+function _mapStateToProps(state, ownProps): Object {
+    const { participantID } = ownProps;
+    const participant = getParticipantByIdOrUndefined(state, participantID);
+    const _isLocalModerator = isLocalParticipantModerator(state);
+    const _isChatButtonEnabled = isToolbarButtonEnabled('chat', state);
+    const _isParticipantVideoMuted = isParticipantVideoMuted(participant, state);
+    const _isParticipantAudioMuted = isParticipantAudioMuted(participant, state);
+
+    return {
+        _displayName: getParticipantDisplayName(state, participantID),
+        _isLocalModerator,
+        _isChatButtonEnabled,
+        _isParticipantAudioMuted,
+        _isParticipantVideoMuted,
+        _participant: participant
+    };
+}
+
+export default connect(_mapStateToProps)(ContextMenuMeetingParticipantDetails);
diff --git a/react/features/participants-pane/components/native/LobbyParticipantItem.js b/react/features/participants-pane/components/native/LobbyParticipantItem.js
index e53ac11f1..198f1247d 100644
--- a/react/features/participants-pane/components/native/LobbyParticipantItem.js
+++ b/react/features/participants-pane/components/native/LobbyParticipantItem.js
@@ -29,10 +29,13 @@ export const LobbyParticipantItem = ({ participant: p }: Props) => {
     return (
         <ParticipantItem
             audioMediaState = { MEDIA_STATE.NONE }
+            displayName = { p.name }
             isKnockingParticipant = { true }
-            name = { p.name }
+            local = { p.local }
             onPress = { openContextMenuReject }
             participant = { p }
+            participantID = { p.id }
+            raisedHand = { p.raisedHand }
             videoMediaState = { MEDIA_STATE.NONE }>
             <Button
                 children = { t('lobby.admit') }
diff --git a/react/features/participants-pane/components/native/MeetingParticipantItem.js b/react/features/participants-pane/components/native/MeetingParticipantItem.js
index a0a07fe6e..dcbde11cf 100644
--- a/react/features/participants-pane/components/native/MeetingParticipantItem.js
+++ b/react/features/participants-pane/components/native/MeetingParticipantItem.js
@@ -1,14 +1,19 @@
 // @flow
 
-import React, { useCallback } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import React from 'react';
 
+import { translate } from '../../../base/i18n';
 import {
-    getIsParticipantAudioMuted,
-    getIsParticipantVideoMuted
+    getParticipantByIdOrUndefined,
+    getParticipantDisplayName
+} from '../../../base/participants';
+import { connect } from '../../../base/redux';
+import {
+    isParticipantAudioMuted,
+    isParticipantVideoMuted
 } from '../../../base/tracks';
-import { showContextMenuDetails } from '../../actions.native';
 import { MEDIA_STATE } from '../../constants';
+import type { MediaState } from '../../constants';
 import { getParticipantAudioMediaState } from '../../functions';
 
 import ParticipantItem from './ParticipantItem';
@@ -17,26 +22,100 @@ import ParticipantItem from './ParticipantItem';
 type Props = {
 
     /**
-     * Participant reference
+     * Media state for audio.
      */
-    participant: Object
+    _audioMediaState: MediaState,
+
+    /**
+     * The display name of the participant.
+     */
+    _displayName: string,
+
+    /**
+     * True if the participant is video muted.
+     */
+    _isVideoMuted: boolean,
+
+    /**
+     * True if the participant is the local participant.
+     */
+    _local: boolean,
+
+    /**
+     * The participant ID.
+     */
+    _participantID: string,
+
+    /**
+     * True if the participant have raised hand.
+     */
+    _raisedHand: boolean,
+
+    /**
+     * Callback to invoke when item is pressed.
+     */
+    onPress: Function,
+
+    /**
+     * The ID of the participant.
+     */
+    participantID: ?string
 };
 
-export const MeetingParticipantItem = ({ participant: p }: Props) => {
-    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 ]));
+const MeetingParticipantItem = (
+        {
+            _audioMediaState,
+            _displayName,
+            _isVideoMuted,
+            _local,
+            _participantID,
+            _raisedHand,
+            onPress
+        }: Props) => {
+    const showParticipantDetails = !_local && onPress;
 
     return (
         <ParticipantItem
-            audioMediaState = { audioMediaState }
+            audioMediaState = { _audioMediaState }
+            displayName = { _displayName }
             isKnockingParticipant = { false }
-            name = { p.name }
-            onPress = { openContextMenuDetails }
-            participant = { p }
-            videoMediaState = { isVideoMuted ? MEDIA_STATE.MUTED : MEDIA_STATE.UNMUTED } />
+            local = { _local }
+            onPress = { showParticipantDetails }
+            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.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {Object} ownProps - The own props of the component.
+ * @private
+ * @returns {Props}
+ */
+function mapStateToProps(state, ownProps): Object {
+    const { participantID } = ownProps;
+    const participant = getParticipantByIdOrUndefined(state, participantID);
+    const _isAudioMuted = isParticipantAudioMuted(participant, state);
+    const isVideoMuted = isParticipantVideoMuted(participant, state);
+    const audioMediaState = getParticipantAudioMediaState(
+        participant, _isAudioMuted, state
+    );
+
+    return {
+        _audioMediaState: audioMediaState,
+        _displayName: getParticipantDisplayName(state, participant?.id),
+        _isAudioMuted,
+        _isVideoMuted: isVideoMuted,
+        _local: Boolean(participant?.local),
+        _participantID: participant?.id,
+        _raisedHand: Boolean(participant?.raisedHand)
+    };
+}
+
+
+export default translate(connect(mapStateToProps)(MeetingParticipantItem));
+
+
diff --git a/react/features/participants-pane/components/native/MeetingParticipantList.js b/react/features/participants-pane/components/native/MeetingParticipantList.js
index 16470a49b..77a2e263e 100644
--- a/react/features/participants-pane/components/native/MeetingParticipantList.js
+++ b/react/features/participants-pane/components/native/MeetingParticipantList.js
@@ -7,25 +7,49 @@ import { Button } from 'react-native-paper';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { Icon, IconInviteMore } from '../../../base/icons';
-import { getParticipants } from '../../../base/participants';
+import {
+    getLocalParticipant,
+    getParticipantCountWithFake,
+    getRemoteParticipants
+} from '../../../base/participants';
 import { doInvitePeople } from '../../../invite/actions.native';
+import { showContextMenuDetails } from '../../actions.native';
 import { shouldRenderInviteButton } from '../../functions';
 
-import { MeetingParticipantItem } from './MeetingParticipantItem';
+import MeetingParticipantItem from './MeetingParticipantItem';
 import styles from './styles';
 
 export const MeetingParticipantList = () => {
     const dispatch = useDispatch();
+    const items = [];
+    const localParticipant = useSelector(getLocalParticipant);
     const onInvite = useCallback(() => dispatch(doInvitePeople()), [ dispatch ]);
+    const participants = useSelector(getRemoteParticipants);
+    const participantsCount = useSelector(getParticipantCountWithFake);
     const showInviteButton = useSelector(shouldRenderInviteButton);
-    const participants = useSelector(getParticipants);
+
     const { t } = useTranslation();
 
+    // eslint-disable-next-line react/no-multi-comp
+    const renderParticipant = id => (
+        <MeetingParticipantItem
+            key = { id }
+            /* eslint-disable-next-line react/jsx-no-bind */
+            onPress = { () => dispatch(showContextMenuDetails(id)) }
+            participantID = { id } />
+    );
+
+    localParticipant && items.push(renderParticipant(localParticipant?.id));
+
+    participants.forEach(p => {
+        items.push(renderParticipant(p?.id));
+    });
+
     return (
         <View style = { styles.meetingList }>
             <Text style = { styles.meetingListDescription }>
                 {t('participantsPane.headings.participantsList',
-                    { count: participants.length })}
+                    { count: participantsCount })}
             </Text>
             {
                 showInviteButton
@@ -42,13 +66,8 @@ export const MeetingParticipantList = () => {
                     onPress = { onInvite }
                     style = { styles.inviteButton } />
             }
-            {
-                participants.map(p => (
-                    <MeetingParticipantItem
-                        key = { p.id }
-                        participant = { p } />)
-                )
-            }
+            { items }
         </View>
     );
 };
+
diff --git a/react/features/participants-pane/components/native/ParticipantItem.js b/react/features/participants-pane/components/native/ParticipantItem.js
index b815c2cb6..2b852aec4 100644
--- a/react/features/participants-pane/components/native/ParticipantItem.js
+++ b/react/features/participants-pane/components/native/ParticipantItem.js
@@ -5,10 +5,8 @@ import type { Node } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TouchableOpacity, View } from 'react-native';
 import { Text } from 'react-native-paper';
-import { useSelector } from 'react-redux';
 
 import { Avatar } from '../../../base/avatar';
-import { getParticipantDisplayNameWithId } from '../../../base/participants';
 import { MEDIA_STATE, type MediaState, AudioStateIcons, VideoStateIcons } from '../../constants';
 
 import { RaisedHandIndicator } from './RaisedHandIndicator';
@@ -26,15 +24,20 @@ type Props = {
      */
     children?: Node,
 
+    /**
+     * The name of the participant. Used for showing lobby names.
+     */
+    displayName: string,
+
     /**
      * Is the participant waiting?
      */
     isKnockingParticipant: boolean,
 
     /**
-     * The name of the participant. Used for showing lobby names.
+     * True if the participant is local.
      */
-    name?: string,
+    local: boolean,
 
     /**
      * Callback to be invoked on pressing the participant item.
@@ -42,9 +45,14 @@ type Props = {
     onPress?: Function,
 
     /**
-     * Participant reference
+     * The ID of the participant.
      */
-    participant: Object,
+    participantID: string,
+
+    /**
+     * True if the participant have raised hand.
+     */
+    raisedHand: boolean,
 
     /**
      * Media state for video
@@ -59,15 +67,16 @@ type Props = {
  */
 function ParticipantItem({
     children,
+    displayName,
     isKnockingParticipant,
-    name,
+    local,
     onPress,
-    participant: p,
+    participantID,
+    raisedHand,
     audioMediaState = MEDIA_STATE.NONE,
     videoMediaState = MEDIA_STATE.NONE
 }: Props) {
 
-    const displayName = name || useSelector(getParticipantDisplayNameWithId(p.id));
     const { t } = useTranslation();
 
     return (
@@ -77,19 +86,19 @@ function ParticipantItem({
                 style = { styles.participantContent }>
                 <Avatar
                     className = 'participant-avatar'
-                    participantId = { p.id }
+                    participantId = { participantID }
                     size = { 32 } />
                 <View style = { styles.participantNameContainer }>
                     <Text style = { styles.participantName }>
                         { displayName }
                     </Text>
-                    { p.local ? <Text style = { styles.isLocal }>({t('chat.you')})</Text> : null }
+                    { local ? <Text style = { styles.isLocal }>({t('chat.you')})</Text> : null }
                 </View>
                 {
                     !isKnockingParticipant
                     && <>
                         {
-                            p.raisedHand && <RaisedHandIndicator />
+                            raisedHand && <RaisedHandIndicator />
                         }
                         <View style = { styles.participantStatesContainer }>
                             <View style = { styles.participantStateVideo }>{VideoStateIcons[videoMediaState]}</View>
@@ -98,7 +107,7 @@ function ParticipantItem({
                     </>
                 }
             </TouchableOpacity>
-            { !p.local && children }
+            { !local && children }
         </View>
     );
 }
diff --git a/react/features/participants-pane/components/web/MeetingParticipantContextMenu.js b/react/features/participants-pane/components/web/MeetingParticipantContextMenu.js
index 13eec8de5..f92deac75 100644
--- a/react/features/participants-pane/components/web/MeetingParticipantContextMenu.js
+++ b/react/features/participants-pane/components/web/MeetingParticipantContextMenu.js
@@ -2,9 +2,9 @@
 
 import React, { Component } from 'react';
 
-import { isToolbarButtonEnabled } from '../../base/config/functions.web';
-import { openDialog } from '../../base/dialog';
-import { translate } from '../../base/i18n';
+import { isToolbarButtonEnabled } from '../../../base/config/functions.web';
+import { openDialog } from '../../../base/dialog';
+import { translate } from '../../../base/i18n';
 import {
     IconCloseCircle,
     IconCrown,
@@ -12,18 +12,18 @@ import {
     IconMicDisabled,
     IconMuteEveryoneElse,
     IconVideoOff
-} from '../../base/icons';
+} from '../../../base/icons';
 import {
     getParticipantByIdOrUndefined,
     isLocalParticipantModerator,
     isParticipantModerator
-} from '../../base/participants';
-import { connect } from '../../base/redux';
-import { isParticipantAudioMuted, isParticipantVideoMuted } from '../../base/tracks';
-import { openChat } from '../../chat/actions';
-import { GrantModeratorDialog, KickRemoteParticipantDialog, MuteEveryoneDialog } from '../../video-menu';
-import MuteRemoteParticipantsVideoDialog from '../../video-menu/components/web/MuteRemoteParticipantsVideoDialog';
-import { getComputedOuterHeight } from '../functions';
+} from '../../../base/participants';
+import { connect } from '../../../base/redux';
+import { isParticipantAudioMuted, isParticipantVideoMuted } from '../../../base/tracks';
+import { openChat } from '../../../chat/actions';
+import { GrantModeratorDialog, KickRemoteParticipantDialog, MuteEveryoneDialog } from '../../../video-menu';
+import MuteRemoteParticipantsVideoDialog from '../../../video-menu/components/web/MuteRemoteParticipantsVideoDialog';
+import { getComputedOuterHeight } from '../../functions';
 
 import {
     ContextMenu,
diff --git a/react/features/participants-pane/components/web/MeetingParticipantItem.js b/react/features/participants-pane/components/web/MeetingParticipantItem.js
index ae3133bc6..9da0e5768 100644
--- a/react/features/participants-pane/components/web/MeetingParticipantItem.js
+++ b/react/features/participants-pane/components/web/MeetingParticipantItem.js
@@ -2,14 +2,14 @@
 
 import React from 'react';
 
-import { getParticipantByIdOrUndefined, getParticipantDisplayName } from '../../base/participants';
-import { connect } from '../../base/redux';
-import { isParticipantAudioMuted, isParticipantVideoMuted } from '../../base/tracks';
-import { ACTION_TRIGGER, MEDIA_STATE, type MediaState } from '../constants';
-import { getParticipantAudioMediaState, getQuickActionButtonType } from '../functions';
+import { getParticipantByIdOrUndefined, getParticipantDisplayName } from '../../../base/participants';
+import { connect } from '../../../base/redux';
+import { isParticipantAudioMuted, isParticipantVideoMuted } from '../../../base/tracks';
+import { ACTION_TRIGGER, MEDIA_STATE, type MediaState } from '../../constants';
+import { getParticipantAudioMediaState, getQuickActionButtonType } from '../../functions';
+import ParticipantQuickAction from '../ParticipantQuickAction';
 
 import ParticipantItem from './ParticipantItem';
-import ParticipantQuickAction from './ParticipantQuickAction';
 import { ParticipantActionEllipsis } from './styled';
 
 type Props = {
diff --git a/react/features/participants-pane/components/web/MeetingParticipantList.js b/react/features/participants-pane/components/web/MeetingParticipantList.js
index 2eb96da0d..e434488ac 100644
--- a/react/features/participants-pane/components/web/MeetingParticipantList.js
+++ b/react/features/participants-pane/components/web/MeetingParticipantList.js
@@ -4,14 +4,14 @@ import React, { useCallback, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector, useDispatch } from 'react-redux';
 
-import { openDialog } from '../../base/dialog';
+import { openDialog } from '../../../base/dialog';
 import {
     getLocalParticipant,
     getParticipantCountWithFake,
     getRemoteParticipants
-} from '../../base/participants';
-import MuteRemoteParticipantDialog from '../../video-menu/components/web/MuteRemoteParticipantDialog';
-import { findStyledAncestor, shouldRenderInviteButton } from '../functions';
+} from '../../../base/participants';
+import MuteRemoteParticipantDialog from '../../../video-menu/components/web/MuteRemoteParticipantDialog';
+import { findStyledAncestor, shouldRenderInviteButton } from '../../functions';
 
 import { InviteButton } from './InviteButton';
 import MeetingParticipantContextMenu from './MeetingParticipantContextMenu';
diff --git a/react/features/participants-pane/components/web/ParticipantItem.js b/react/features/participants-pane/components/web/ParticipantItem.js
index 7baa9174a..fbccb5ca7 100644
--- a/react/features/participants-pane/components/web/ParticipantItem.js
+++ b/react/features/participants-pane/components/web/ParticipantItem.js
@@ -2,15 +2,15 @@
 
 import React, { type Node } from 'react';
 
-import { Avatar } from '../../base/avatar';
+import { Avatar } from '../../../base/avatar';
 import {
     Icon,
     IconCameraEmpty,
     IconCameraEmptyDisabled,
     IconMicrophoneEmpty,
     IconMicrophoneEmptySlash
-} from '../../base/icons';
-import { ACTION_TRIGGER, MEDIA_STATE, type ActionTrigger, type MediaState } from '../constants';
+} from '../../../base/icons';
+import { ACTION_TRIGGER, MEDIA_STATE, type ActionTrigger, type MediaState } from '../../constants';
 
 import { RaisedHandIndicator } from './RaisedHandIndicator';
 import {
diff --git a/react/features/participants-pane/components/web/ParticipantsPane.js b/react/features/participants-pane/components/web/ParticipantsPane.js
index 8410479cd..52a8b4cd9 100644
--- a/react/features/participants-pane/components/web/ParticipantsPane.js
+++ b/react/features/participants-pane/components/web/ParticipantsPane.js
@@ -3,19 +3,19 @@
 import React, { Component } from 'react';
 import { ThemeProvider } from 'styled-components';
 
-import { openDialog } from '../../base/dialog';
-import { translate } from '../../base/i18n';
+import { openDialog } from '../../../base/dialog';
+import { translate } from '../../../base/i18n';
 import {
     getParticipantCount,
     isLocalParticipantModerator
-} from '../../base/participants';
-import { connect } from '../../base/redux';
-import { MuteEveryoneDialog } from '../../video-menu/components/';
-import { close } from '../actions';
-import { classList, findStyledAncestor, getParticipantsPaneOpen } from '../functions';
-import theme from '../theme.json';
+} from '../../../base/participants';
+import { connect } from '../../../base/redux';
+import { MuteEveryoneDialog } from '../../../video-menu/components/';
+import { close } from '../../actions';
+import { classList, findStyledAncestor, getParticipantsPaneOpen } from '../../functions';
+import theme from '../../theme.json';
+import { FooterContextMenu } from '../FooterContextMenu';
 
-import { FooterContextMenu } from './FooterContextMenu';
 import { LobbyParticipantList } from './LobbyParticipantList';
 import { MeetingParticipantList } from './MeetingParticipantList';
 import {
diff --git a/react/features/participants-pane/components/web/index.js b/react/features/participants-pane/components/web/index.js
index e3d2551a9..eff0bc764 100644
--- a/react/features/participants-pane/components/web/index.js
+++ b/react/features/participants-pane/components/web/index.js
@@ -3,5 +3,5 @@ export * from './LobbyParticipantItem';
 export * from './LobbyParticipantList';
 export * from './MeetingParticipantList';
 export { default as ParticipantsPane } from './ParticipantsPane';
-export * from './ParticipantsPaneButton';
+export * from '../ParticipantsPaneButton';
 export * from './RaisedHandIndicator';
diff --git a/react/features/video-menu/components/native/VolumeSlider.js b/react/features/video-menu/components/native/VolumeSlider.js
index 7abb80115..94ca053e1 100644
--- a/react/features/video-menu/components/native/VolumeSlider.js
+++ b/react/features/video-menu/components/native/VolumeSlider.js
@@ -5,8 +5,8 @@ import React, { PureComponent } from 'react';
 import { Slider, View } from 'react-native';
 import { withTheme } from 'react-native-paper';
 
-import { translate } from '../../../base/i18n';
 import { Icon, IconVolumeEmpty } from '../../../base/icons';
+import { getParticipantByIdOrUndefined } from '../../../base/participants';
 import { connect } from '../../../base/redux';
 import { setVolume } from '../../../participants-pane/actions.native';
 import { VOLUME_SLIDER_SCALE } from '../../constants';
@@ -19,6 +19,11 @@ import styles from './styles';
  */
 type Props = {
 
+    /**
+     * Participant reference
+     */
+    _participant: Object,
+
     /**
      * Whether the participant enters the conference silent.
      */
@@ -35,9 +40,9 @@ type Props = {
     dispatch: Function,
 
     /**
-     * Participant reference
+     * The ID of the participant.
      */
-    participant: Object,
+    participantID: string,
 
     /**
      * Theme used for styles.
@@ -126,8 +131,8 @@ class VolumeSlider extends PureComponent<Props, State> {
      * @returns {void}
      */
     _onVolumeChange(volumeLevel) {
-        const { dispatch, participant } = this.props;
-        const { id } = participant;
+        const { dispatch, _participant } = this.props;
+        const { id } = _participant;
 
         dispatch(setVolume(id, volumeLevel));
     }
@@ -142,16 +147,18 @@ class VolumeSlider extends PureComponent<Props, State> {
  * @returns {Props}
  */
 function mapStateToProps(state, ownProps): Object {
-    const { participant } = ownProps;
+    const { participantID } = ownProps;
+    const participant = getParticipantByIdOrUndefined(state, participantID);
     const { id, local } = participant;
     const { participantsVolume } = state['features/participants-pane'];
     const { startSilent } = state['features/base/config'];
 
     return {
+        _participant: participant,
         _startSilent: Boolean(startSilent),
         _volume: local ? undefined : participantsVolume[id]
     };
 }
 
-export default translate(connect(mapStateToProps)(withTheme(VolumeSlider)));
+export default connect(mapStateToProps)(withTheme(VolumeSlider));