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

66 lines
2.3 KiB
JavaScript

// @flow
import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { ScrollView, View } from 'react-native';
import { Button } from 'react-native-paper';
import { useDispatch, useSelector } from 'react-redux';
import { openDialog } from '../../../base/dialog';
import JitsiScreen from '../../../base/modal/components/JitsiScreen';
import {
isLocalParticipantModerator
} from '../../../base/participants';
import MuteEveryoneDialog
from '../../../video-menu/components/native/MuteEveryoneDialog';
import { ContextMenuMore } from './ContextMenuMore';
import HorizontalDotsIcon from './HorizontalDotsIcon';
import LobbyParticipantList from './LobbyParticipantList';
import MeetingParticipantList from './MeetingParticipantList';
import styles from './styles';
/**
* Participant pane.
*
* @returns {React$Element<any>}
*/
const ParticipantsPane = () => {
const dispatch = useDispatch();
const openMoreMenu = useCallback(() => dispatch(openDialog(ContextMenuMore)), [ dispatch ]);
const isLocalModerator = useSelector(isLocalParticipantModerator);
const muteAll = useCallback(() => dispatch(openDialog(MuteEveryoneDialog)),
[ dispatch ]);
const { t } = useTranslation();
return (
<JitsiScreen
hasTabNavigator = { false }
style = { styles.participantsPane }>
<ScrollView bounces = { false }>
<LobbyParticipantList />
<MeetingParticipantList />
</ScrollView>
{
isLocalModerator
&& <View style = { styles.footer }>
<Button
children = { t('participantsPane.actions.muteAll') }
labelStyle = { styles.muteAllLabel }
mode = 'contained'
onPress = { muteAll }
style = { styles.muteAllMoreButton } />
<Button
icon = { HorizontalDotsIcon }
labelStyle = { styles.moreIcon }
mode = 'contained'
onPress = { openMoreMenu }
style = { styles.moreButton } />
</View>
}
</JitsiScreen>
);
};
export default ParticipantsPane;