From b268e01a42be3edfa8be349905824ebc73253f28 Mon Sep 17 00:00:00 2001 From: Calin Chitu Date: Tue, 13 Jul 2021 16:17:20 +0300 Subject: [PATCH] feat(native-participants-pane) rebase, resolved conflicts pt. 2 --- react/features/base/participants/functions.js | 17 ----- react/features/lobby/functions.js | 2 +- .../participants-pane/actions.native.js | 5 +- .../ContextMenuLobbyParticipantReject.js | 4 +- .../ContextMenuMeetingParticipantDetails.js | 65 +++++++++++-------- .../native/MeetingParticipantItem.js | 31 +++++---- .../native/MeetingParticipantList.js | 2 +- .../components/native/index.js | 4 +- .../components/native/VolumeSlider.js | 18 ++--- 9 files changed, 70 insertions(+), 78 deletions(-) diff --git a/react/features/base/participants/functions.js b/react/features/base/participants/functions.js index 8739a2d22..b859ca479 100644 --- a/react/features/base/participants/functions.js +++ b/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. * diff --git a/react/features/lobby/functions.js b/react/features/lobby/functions.js index 7e02e39b8..eaa32cc54 100644 --- a/react/features/lobby/functions.js +++ b/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} diff --git a/react/features/participants-pane/actions.native.js b/react/features/participants-pane/actions.native.js index 422d61b81..aa6a653ad 100644 --- a/react/features/participants-pane/actions.native.js +++ b/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'; /** diff --git a/react/features/participants-pane/components/native/ContextMenuLobbyParticipantReject.js b/react/features/participants-pane/components/native/ContextMenuLobbyParticipantReject.js index ed4a906e7..438824dd1 100644 --- a/react/features/participants-pane/components/native/ContextMenuLobbyParticipantReject.js +++ b/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) => ); }; + +export default ContextMenuLobbyParticipantReject; diff --git a/react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js b/react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js index 03aa3c6b1..2e5d44aac 100644 --- a/react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js +++ b/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 = ( @@ -196,20 +198,16 @@ export const ContextMenuMeetingParticipantDetails = ( ) } - { - _isChatButtonEnabled && ( - - - - { t('toolbar.accessibilityLabel.privateMessage') } - - - ) - } + + + + { t('toolbar.accessibilityLabel.privateMessage') } + + {/* We need design specs for this*/} {/* */} @@ -220,7 +218,7 @@ export const ContextMenuMeetingParticipantDetails = ( {/* { t('participantsPane.actions.networkStats') }*/} {/* */} - + ); }; @@ -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 }; diff --git a/react/features/participants-pane/components/native/MeetingParticipantItem.js b/react/features/participants-pane/components/native/MeetingParticipantItem.js index dcbde11cf..86f660d0e 100644 --- a/react/features/participants-pane/components/native/MeetingParticipantItem.js +++ b/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 ( ); -}; +} /** * Maps (parts of) the redux state to the associated props for this component. diff --git a/react/features/participants-pane/components/native/MeetingParticipantList.js b/react/features/participants-pane/components/native/MeetingParticipantList.js index 77a2e263e..8408d19af 100644 --- a/react/features/participants-pane/components/native/MeetingParticipantList.js +++ b/react/features/participants-pane/components/native/MeetingParticipantList.js @@ -35,7 +35,7 @@ export const MeetingParticipantList = () => { dispatch(showContextMenuDetails(id)) } + onPress = { () => !localParticipant && dispatch(showContextMenuDetails(id)) } participantID = { id } /> ); diff --git a/react/features/participants-pane/components/native/index.js b/react/features/participants-pane/components/native/index.js index a9494b346..425247373 100644 --- a/react/features/participants-pane/components/native/index.js +++ b/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'; diff --git a/react/features/video-menu/components/native/VolumeSlider.js b/react/features/video-menu/components/native/VolumeSlider.js index 94ca053e1..12c5631f1 100644 --- a/react/features/video-menu/components/native/VolumeSlider.js +++ b/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 { * @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 { */ 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] }; }