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

react/features/gifs/components/native/GifsMenuFooter.tsx

@@ -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;

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

@@ -1,16 +1,10 @@
 // @flow
 
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
-import { View } from 'react-native';
+import { useSelector } from 'react-redux';
-import { useDispatch, 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>
     );
 };

react/features/participants-pane/components/native/ParticipantsPaneFooter.tsx

@@ -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;