haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(native-participants-pane) removed mock data

This commit is contained in:
Calin Chitu 2021-06-09 18:35:58 +03:00 committed by Hristo Terezov
parent 05e6dde341
commit 14a5c45fa3
9 changed files with 103 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
react/features/participants-pane/components/native/ContextMenuLobbyParticipantReject.js
View File

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

14
react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js
View File

@ -81,7 +81,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
<Avatar
className = 'participant-avatar'
participantId = { p.id }
size = { 24 } />
size = { 20 } />
<View style = { styles.contextMenuItemText }>
<Text style = { styles.contextMenuItemName }>
{ displayName }
@ -95,7 +95,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
onPress = { muteAudio }
style = { styles.contextMenuItem }>
<Icon
size = { 24 }
size = { 20 }
src = { IconMicrophoneEmptySlash }
style = { styles.contextMenuItemIcon } />
<Text style = { styles.contextMenuItemText }>
@ -109,7 +109,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
onPress = { muteEveryoneElse }
style = { styles.contextMenuItem }>
<Icon
size = { 24 }
size = { 20 }
src = { IconMuteEveryoneElse }
style = { styles.contextMenuItemIcon } />
<Text style = { styles.contextMenuItemText }>
@ -125,7 +125,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
onPress = { muteVideo }
style = { styles.contextMenuItemSection }>
<Icon
size = { 24 }
size = { 20 }
src = { IconVideoOff }
style = { styles.contextMenuItemIcon } />
<Text style = { styles.contextMenuItemText }>
@ -140,7 +140,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
onPress = { kickRemoteParticipant }
style = { styles.contextMenuItem }>
<Icon
size = { 24 }
size = { 20 }
src = { IconCloseCircle }
style = { styles.contextMenuItemIcon } />
<Text style = { styles.contextMenuItemText }>
@ -152,7 +152,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
onPress = { sendPrivateMessage }
style = { styles.contextMenuItem }>
<Icon
size = { 24 }
size = { 20 }
src = { IconMessage }
style = { styles.contextMenuItemIcon } />
<Text style = { styles.contextMenuItemText }>
@ -162,7 +162,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
<TouchableOpacity
style = { styles.contextMenuItemSection }>
<Icon
size = { 24 }
size = { 20 }
src = { IconConnectionActive }
style = { styles.contextMenuItemIcon } />
<Text style = { styles.contextMenuItemText }>{ t('participantsPane.actions.networkStats') }</Text>

4
react/features/participants-pane/components/native/ContextMenuMore.js
View File

@ -45,14 +45,14 @@ export const ContextMenuMore = ({ exclude }: Props) => {
onPress = { muteEveryoneVideo }
style = { styles.contextMenuItem }>
<Icon
size = { 24 }
size = { 20 }
src = { IconVideoOff } />
<Text style = { styles.contextMenuItemText }>{t('participantsPane.actions.stopEveryonesVideo')}</Text>
</TouchableOpacity>
<TouchableOpacity
style = { styles.contextMenuItem }>
<Icon
size = { 24 }
size = { 20 }
src = { IconMicDisabledHollow }
style = { styles.contextMenuIcon } />
<Text style = { styles.contextMenuItemText }>{t('participantsPane.actions.dontAllowUnmute')}</Text>

29
react/features/participants-pane/components/native/LobbyParticipantList.js
View File

@ -4,19 +4,30 @@ import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { Text, View } from 'react-native';
import { Button } from 'react-native-paper';
import { useDispatch } from 'react-redux';
import { useDispatch, useSelector } from 'react-redux';
import { getLobbyState } from '../../../lobby/functions';
import { admitAllKnockingParticipants } from '../../../video-menu/actions.any';
import { LobbyParticipantItem } from './LobbyParticipantItem';
import { participants } from './participants';
import styles from './styles';
export const LobbyParticipantList = () => {
const {
lobbyEnabled,
knockingParticipants: participants
} = useSelector(getLobbyState);
const dispatch = useDispatch();
const admitAll = useCallback(() => dispatch(admitAllKnockingParticipants()), [ dispatch ]);
const admitAll = useCallback(() =>
dispatch(admitAllKnockingParticipants(participants, lobbyEnabled)),
[ dispatch ]);
const { t } = useTranslation();
if (!lobbyEnabled || !participants.length) {
return null;
}
return (
<View style = { styles.lobbyList }>
<View style = { styles.lobbyListDetails } >
@ -33,11 +44,13 @@ export const LobbyParticipantList = () => {
{t('lobby.admitAll')}
</Button>
</View>
{ participants.map(p => (
<LobbyParticipantItem
key = { p.id }
participant = { p } />)
)}
{
participants.map(p => (
<LobbyParticipantItem
key = { p.id }
participant = { p } />)
)
}
</View>
);
};

54
react/features/participants-pane/components/native/MeetingParticipantList.js
View File

@ -4,22 +4,23 @@ import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { Text, View } from 'react-native';
import { Button } from 'react-native-paper';
import { useDispatch } from 'react-redux';
import { useDispatch, useSelector, useStore } from 'react-redux';
import { createToolbarEvent, sendAnalytics } from '../../../analytics';
import { Icon, IconInviteMore } from '../../../base/icons';
import { getParticipants } from '../../../base/participants';
import { doInvitePeople } from '../../../invite/actions.native';
import { shouldRenderInviteButton } from '../../functions';
import { MeetingParticipantItem } from './MeetingParticipantItem';
import { participants } from './participants';
import styles from './styles';
export const MeetingParticipantList = () => {
const dispatch = useDispatch();
const onInvite = useCallback(() => {
sendAnalytics(createToolbarEvent('invite'));
dispatch(doInvitePeople());
}, [ dispatch ]);
const onInvite = useCallback(() => dispatch(doInvitePeople()), [ dispatch ]);
const showInviteButton = useSelector(shouldRenderInviteButton);
const store = useStore();
const state = store.getState();
const participants = getParticipants(state);
const { t } = useTranslation();
return (
@ -28,23 +29,28 @@ export const MeetingParticipantList = () => {
{t('participantsPane.headings.participantsList',
{ count: participants.length })}
</Text>
<Button
children = { t('participantsPane.actions.invite') }
/* eslint-disable-next-line react/jsx-no-bind */
icon = { () =>
(<Icon
size = { 24 }
src = { IconInviteMore } />)
}
labelStyle = { styles.inviteLabel }
mode = 'contained'
onPress = { onInvite }
style = { styles.inviteButton } />
{ participants.map(p => (
<MeetingParticipantItem
key = { p.id }
participant = { p } />)
)}
{
showInviteButton
&& <Button
children = { t('participantsPane.actions.invite') }
/* eslint-disable-next-line react/jsx-no-bind */
icon = { () =>
(<Icon
size = { 24 }
src = { IconInviteMore } />)
}
labelStyle = { styles.inviteLabel }
mode = 'contained'
onPress = { onInvite }
style = { styles.inviteButton } />
}
{
participants.map(p => (
<MeetingParticipantItem
key = { p.id }
participant = { p } />)
)
}
</View>
);
};

11
react/features/participants-pane/components/native/ParticipantItem.js
View File

@ -67,12 +67,12 @@ type Props = {
* @returns {React$Element<any>}
*/
function ParticipantItem({
audioMuteState = MediaState.None,
children,
isKnockingParticipant,
name,
onPress,
participant: p,
audioMuteState = MediaState.None,
videoMuteState = MediaState.None
}: Props) {
@ -96,8 +96,11 @@ function ParticipantItem({
{ p.local ? <Text style = { styles.isLocal }>({t('chat.you')})</Text> : null }
</View>
{
!isKnockingParticipant && <>
{p.raisedHand && <RaisedHandIndicator />}
!isKnockingParticipant
&& <>
{
p.raisedHand && <RaisedHandIndicator />
}
<View style = { styles.participantStatesContainer }>
<View style = { styles.participantStateVideo }>{VideoStateIcons[videoMuteState]}</View>
<View>{AudioStateIcons[audioMuteState]}</View>
@ -105,7 +108,7 @@ function ParticipantItem({
</>
}
</TouchableOpacity>
{ children }
{ !p.local && children }
</View>
);
}

49
react/features/participants-pane/components/native/ParticipantsPane.js
View File

@ -4,11 +4,12 @@ import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { ScrollView, View } from 'react-native';
import { Button } from 'react-native-paper';
import { useDispatch } from 'react-redux';
import { useDispatch, useSelector } from 'react-redux';
import { hideDialog, openDialog } from '../../../base/dialog';
import { Icon, IconClose, IconHorizontalPoints } from '../../../base/icons';
import { JitsiModal } from '../../../base/modal';
import { isLocalParticipantModerator } from '../../../base/participants';
import MuteEveryoneDialog
from '../../../video-menu/components/native/MuteEveryoneDialog';
@ -24,8 +25,9 @@ import styles from './styles';
*/
export function ParticipantsPane() {
const dispatch = useDispatch();
const openMoreMenu = useCallback(() => dispatch(openDialog(ContextMenuMore)));
const openMoreMenu = useCallback(() => dispatch(openDialog(ContextMenuMore)), [ dispatch ]);
const closePane = useCallback(() => dispatch(hideDialog()), [ dispatch ]);
const isLocalModerator = useSelector(isLocalParticipantModerator);
const muteAll = useCallback(() => dispatch(openDialog(MuteEveryoneDialog)),
[ dispatch ]);
const { t } = useTranslation();
@ -51,26 +53,29 @@ export function ParticipantsPane() {
<LobbyParticipantList />
<MeetingParticipantList />
</ScrollView>
<View style = { styles.footer }>
<Button
children = { t('participantsPane.actions.muteAll') }
contentStyle = { styles.muteAllContent }
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 } />
</View>
{
isLocalModerator
&& <View style = { styles.footer }>
<Button
children = { t('participantsPane.actions.muteAll') }
contentStyle = { styles.muteAllContent }
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 } />
</View>
}
</JitsiModal>
);
}

5
react/features/participants-pane/components/native/ParticipantsPaneButton.js
View File

@ -5,8 +5,12 @@ import type { Dispatch } from 'redux';
import { openDialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n';
import { IconParticipants } from '../../../base/icons';
import { setActiveModalId } from '../../../base/modal';
import { connect } from '../../../base/redux';
import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
import {
PARTICIPANTS_PANE_ID
} from '../../../invite/constants';
import { ParticipantsPane } from './';
@ -35,6 +39,7 @@ class ParticipantsPaneButton extends AbstractButton<Props, *> {
*/
_handleClick() {
this.props.dispatch(openDialog(ParticipantsPane));
this.props.dispatch(setActiveModalId(PARTICIPANTS_PANE_ID));
}
}

4
react/features/toolbox/components/native/OverflowMenuButton.js
View File

@ -3,7 +3,7 @@
import { openDialog } from '../../../base/dialog';
import { getFeatureFlag, OVERFLOW_MENU_ENABLED } from '../../../base/flags';
import { translate } from '../../../base/i18n';
import { IconMenuThumb } from '../../../base/icons';
import { IconHorizontalPoints } from '../../../base/icons';
import { connect } from '../../../base/redux';
import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
@ -25,7 +25,7 @@ type Props = AbstractButtonProps & {
*/
class OverflowMenuButton extends AbstractButton<Props, *> {
accessibilityLabel = 'toolbar.accessibilityLabel.moreActions';
icon = IconMenuThumb;
icon = IconHorizontalPoints;
label = 'toolbar.moreActions';
/**