theluyuan
38ba663466
Some checks failed
Close stale issues and PRs / stale (push) Has been cancelled
96 lines
4.0 KiB
TypeScript
96 lines
4.0 KiB
TypeScript
/* eslint-disable lines-around-comment */
|
|
|
|
import React, { useCallback } from 'react';
|
|
import { View, ViewStyle } from 'react-native';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
|
|
import { IReduxState } from '../../../app/types';
|
|
import { openDialog, openSheet } from '../../../base/dialog/actions';
|
|
import {
|
|
BREAKOUT_ROOMS_BUTTON_ENABLED
|
|
} from '../../../base/flags/constants';
|
|
import { getFeatureFlag } from '../../../base/flags/functions';
|
|
import Icon from '../../../base/icons/components/Icon';
|
|
import { IconDotsHorizontal, IconRingGroup } from '../../../base/icons/svg';
|
|
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
|
|
import Button from '../../../base/ui/components/native/Button';
|
|
import IconButton from '../../../base/ui/components/native/IconButton';
|
|
import { BUTTON_TYPES } from '../../../base/ui/constants.native';
|
|
import {
|
|
navigate
|
|
} from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
|
|
import { screen } from '../../../mobile/navigation/routes';
|
|
// @ts-ignore
|
|
import MuteEveryoneDialog from '../../../video-menu/components/native/MuteEveryoneDialog';
|
|
import { isMoreActionsVisible, isMuteAllVisible } from '../../functions';
|
|
|
|
import { ContextMenuMore } from './ContextMenuMore';
|
|
import styles from './styles';
|
|
|
|
|
|
/**
|
|
* Implements the participants pane footer component.
|
|
*
|
|
* @returns { JSX.Element} - The participants pane footer component.
|
|
*/
|
|
const ParticipantsPaneFooter = (): JSX.Element => {
|
|
const dispatch = useDispatch();
|
|
const isBreakoutRoomsSupported = useSelector((state: IReduxState) =>
|
|
state['features/base/conference'].conference?.getBreakoutRooms()?.isSupported()
|
|
);
|
|
const isBreakoutRoomsEnabled = useSelector((state: IReduxState) =>
|
|
getFeatureFlag(state, BREAKOUT_ROOMS_BUTTON_ENABLED, true)
|
|
);
|
|
const openMoreMenu = useCallback(() => dispatch(openSheet(ContextMenuMore)), [ dispatch ]);
|
|
const muteAll = useCallback(() => dispatch(openDialog(MuteEveryoneDialog)),
|
|
[ dispatch ]);
|
|
const showMoreActions = useSelector(isMoreActionsVisible);
|
|
const showMuteAll = useSelector(isMuteAllVisible);
|
|
|
|
return (
|
|
<View style = { styles.participantsPaneFooterContainer as ViewStyle }>
|
|
{
|
|
isBreakoutRoomsSupported
|
|
&& isBreakoutRoomsEnabled
|
|
&& <Button
|
|
accessibilityLabel = 'participantsPane.actions.breakoutRooms'
|
|
// eslint-disable-next-line react/jsx-no-bind, no-confusing-arrow
|
|
icon = { () => (
|
|
<Icon
|
|
color = { BaseTheme.palette.icon04 }
|
|
size = { 20 }
|
|
src = { IconRingGroup } />
|
|
) }
|
|
labelKey = 'participantsPane.actions.breakoutRooms'
|
|
// eslint-disable-next-line react/jsx-no-bind, no-confusing-arrow
|
|
onClick = { () => navigate(screen.conference.breakoutRooms) }
|
|
style = { styles.breakoutRoomsButton }
|
|
type = { BUTTON_TYPES.SECONDARY } />
|
|
}
|
|
|
|
<View style = { styles.participantsPaneFooter as ViewStyle }>
|
|
{
|
|
showMuteAll && (
|
|
<Button
|
|
accessibilityLabel = 'participantsPane.actions.muteAll'
|
|
labelKey = 'participantsPane.actions.muteAll'
|
|
onClick = { muteAll }
|
|
type = { BUTTON_TYPES.SECONDARY } />
|
|
)
|
|
}
|
|
{
|
|
showMoreActions && (
|
|
<IconButton
|
|
onPress = { openMoreMenu }
|
|
src = { IconDotsHorizontal }
|
|
style = { styles.moreButton }
|
|
type = { BUTTON_TYPES.SECONDARY } />
|
|
)
|
|
}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default ParticipantsPaneFooter;
|