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

feat(conf/gifs/participants): created ParticipantsPaneFooter and updated comments

This commit is contained in:
Calin-Teodor 2022-07-08 11:27:27 +03:00 committed by Calinteodor
parent ba3cd53017
commit 077901cd2b
4 changed files with 72 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
react/features/conference/components/native/carmode/CarModeFooter.tsx
View File

@ -7,9 +7,9 @@ import SoundDeviceButton from './SoundDeviceButton';
import styles from './styles';
/**
* Implements the carmode footer component.
* Implements the car mode footer component.
*
* @returns { JSX.Element} - The carmode footer component.
* @returns { JSX.Element} - The car mode footer component.
*/
const CarModeFooter = (): JSX.Element => {
const { t } = useTranslation();

8
react/features/gifs/components/native/GifsMenuFooter.tsx
View File

@ -4,6 +4,12 @@ import { Image, Text, View } from 'react-native';
import styles from './styles';
/**
* Implements the gifs menu footer component.
*
* @returns { JSX.Element} - The gifs menu footer component.
*/
const GifsMenuFooter = (): JSX.Element => {
const { t } = useTranslation();
@ -17,4 +23,4 @@ const GifsMenuFooter = (): JSX.Element => {
)
};
export default GifsMenuFooter
export default GifsMenuFooter;

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

@ -1,16 +1,10 @@
// @flow
import React, { useCallback, useState } from 'react';
import { View } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { openDialog, openSheet } from '../../../base/dialog';
import { IconHorizontalPoints } from '../../../base/icons';
import JitsiScreen from '../../../base/modal/components/JitsiScreen';
import { isLocalParticipantModerator } from '../../../base/participants';
import Button from '../../../base/react/components/native/Button';
import IconButton from '../../../base/react/components/native/IconButton';
import { BUTTON_TYPES } from '../../../base/react/constants';
import { equals } from '../../../base/redux';
import {
getBreakoutRooms,
@ -20,9 +14,6 @@ import {
isInBreakoutRoom
} from '../../../breakout-rooms/functions';
import { getKnockingParticipants } from '../../../lobby/functions';
import MuteEveryoneDialog
from '../../../video-menu/components/native/MuteEveryoneDialog';
import { isMoreActionsVisible, isMuteAllVisible } from '../../functions';
import {
AddBreakoutRoomButton,
AutoAssignButton,
@ -30,23 +21,20 @@ import {
} from '../breakout-rooms/components/native';
import { CollapsibleRoom } from '../breakout-rooms/components/native/CollapsibleRoom';
import { ContextMenuMore } from './ContextMenuMore';
import LobbyParticipantList from './LobbyParticipantList';
import MeetingParticipantList from './MeetingParticipantList';
import ParticipantsPaneFooter from './ParticipantsPaneFooter';
import styles from './styles';
/**
* Participant pane.
* Participants pane.
*
* @returns {React$Element<any>}
*/
const ParticipantsPane = () => {
const dispatch = useDispatch();
const [ searchString, setSearchString ] = useState('');
const openMoreMenu = useCallback(() => dispatch(openSheet(ContextMenuMore)), [ dispatch ]);
const isLocalModerator = useSelector(isLocalParticipantModerator);
const muteAll = useCallback(() => dispatch(openDialog(MuteEveryoneDialog)),
[ dispatch ]);
const { conference } = useSelector(state => state['features/base/conference']);
const _isBreakoutRoomsSupported = conference?.getBreakoutRooms()?.isSupported();
const currentRoomId = useSelector(getCurrentRoomId);
@ -56,12 +44,12 @@ const ParticipantsPane = () => {
const inBreakoutRoom = useSelector(isInBreakoutRoom);
const showAddBreakoutRoom = useSelector(isAddBreakoutRoomButtonVisible);
const showAutoAssign = useSelector(isAutoAssignParticipantsVisible);
const showMoreActions = useSelector(isMoreActionsVisible);
const showMuteAll = useSelector(isMuteAllVisible);
const lobbyParticipants = useSelector(getKnockingParticipants);
return (
<JitsiScreen style = { styles.participantsPaneContainer }>
<JitsiScreen
footerComponent = { isLocalModerator && ParticipantsPaneFooter }
style = { styles.participantsPaneContainer }>
<LobbyParticipantList />
<MeetingParticipantList
breakoutRooms = { rooms }
@ -85,29 +73,6 @@ const ParticipantsPane = () => {
{
showAddBreakoutRoom && <AddBreakoutRoomButton />
}
{
isLocalModerator
&& <View style = { styles.participantsPaneFooter }>
{
showMuteAll && (
<Button
accessibilityLabel = 'participantsPane.actions.muteAll'
label = 'participantsPane.actions.muteAll'
onPress = { muteAll }
type = { BUTTON_TYPES.SECONDARY } />
)
}
{
showMoreActions && (
<IconButton
onPress = { openMoreMenu }
src = { IconHorizontalPoints }
style = { styles.moreButton }
type = { BUTTON_TYPES.SECONDARY } />
)
}
</View>
}
</JitsiScreen>
);
};

55
react/features/participants-pane/components/native/ParticipantsPaneFooter.tsx Normal file
View File

@ -0,0 +1,55 @@
import React, { useCallback } from 'react';
import { View } from 'react-native';
import { useDispatch, useSelector} from "react-redux";
import { openDialog, openSheet } from '../../../base/dialog';
import { IconHorizontalPoints } from '../../../base/icons';
import Button from '../../../base/react/components/native/Button';
import IconButton from '../../../base/react/components/native/IconButton';
import { BUTTON_TYPES } from '../../../base/react/constants';
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 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.participantsPaneFooter }>
{
showMuteAll && (
<Button
accessibilityLabel = 'participantsPane.actions.muteAll'
label = 'participantsPane.actions.muteAll'
onPress = { muteAll }
type = { BUTTON_TYPES.SECONDARY } />
)
}
{
showMoreActions && (
<IconButton
onPress = { openMoreMenu }
src = { IconHorizontalPoints }
style = { styles.moreButton }
type = { BUTTON_TYPES.SECONDARY } />
)
}
</View>
)
};
export default ParticipantsPaneFooter;