feat(native-participants-pane) open/close pane native actions

react/features/participants-pane/actions.native.js

@@ -1,7 +1,33 @@
 import { openDialog } from '../base/dialog';
 
+import { PARTICIPANTS_PANE_CLOSE, PARTICIPANTS_PANE_OPEN } from './actionTypes';
 import { ContextMenuLobbyParticipantReject, ContextMenuMeetingParticipantDetails } from './components/native';
 
+
+/**
+ * Action to open the participants pane.
+ *
+ * @returns {Object}
+ */
+export function open() {
+    console.log(2);
+
+    return {
+        type: PARTICIPANTS_PANE_OPEN
+    };
+}
+
+/**
+ * Action to close the participants pane.
+ *
+ * @returns {Object}
+ */
+export function close() {
+    return {
+        type: PARTICIPANTS_PANE_CLOSE
+    };
+}
+
 /**
  * Displays the context menu for the selected lobby participant.
  *

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

@@ -4,26 +4,37 @@ 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 { useDispatch, useSelector, connect } 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 {
+    isLocalParticipantModerator
+} from '../../../base/participants';
 import MuteEveryoneDialog
     from '../../../video-menu/components/native/MuteEveryoneDialog';
+import { PARTICIPANTS_PANE_ID } from '../../constants';
 
 import { ContextMenuMore } from './ContextMenuMore';
 import { LobbyParticipantList } from './LobbyParticipantList';
 import { MeetingParticipantList } from './MeetingParticipantList';
 import styles from './styles';
 
+type Props = {
+
+    /**
+     * Is the participants pane open
+     */
+    _isOpen: boolean
+};
+
 /**
  * Participant pane.
  *
  * @returns {React$Element<any>}
  */
-function ParticipantsPane() {
+function ParticipantsPane({ _isOpen: paneOpen }: Props) {
     const dispatch = useDispatch();
     const openMoreMenu = useCallback(() => dispatch(openDialog(ContextMenuMore)), [ dispatch ]);
     const closePane = useCallback(() => dispatch(hideDialog()), [ dispatch ]);
@@ -33,8 +44,10 @@ function ParticipantsPane() {
     const { t } = useTranslation();
 
     return (
-        <JitsiModal
+        paneOpen
+        && <JitsiModal
             hideHeaderWithNavigation = { true }
+            modalId = { PARTICIPANTS_PANE_ID }
             style = { styles.participantsPane }>
             <View style = { styles.header }>
                 <Button
@@ -80,5 +93,23 @@ function ParticipantsPane() {
     );
 }
 
+/**
+ * Maps (parts of) the redux state to {@link ParticipantsPane} React {@code Component}
+ * props.
+ *
+ * @param {Object} state - The redux store/state.
+ * @private
+ * @returns {{
+ *     _isOpen: boolean,
+ * }}
+ */
+function _mapStateToProps(state: Object) {
+    const { isOpen } = state['features/participants-pane'];
+
+    return {
+        _isOpen: isOpen
+    };
+}
+
 
-export default ParticipantsPane;
+export default connect(_mapStateToProps)(ParticipantsPane);

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

@@ -2,13 +2,11 @@
 
 import type { Dispatch } from 'redux';
 
-import { openDialog } from '../../../base/dialog';
 import { translate } from '../../../base/i18n';
 import { IconParticipants } from '../../../base/icons';
 import { connect } from '../../../base/redux';
 import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
-
-import { ParticipantsPane } from './';
+import { open } from '../../actions.native';
 
 type Props = AbstractButtonProps & {
 
@@ -34,7 +32,7 @@ class ParticipantsPaneButton extends AbstractButton<Props, *> {
      * @returns {void}
      */
     _handleClick() {
-        this.props.dispatch(openDialog(ParticipantsPane));
+        this.props.dispatch(open());
     }
 }
 

react/features/participants-pane/constants.js

@@ -1,5 +1,7 @@
 // @flow
 
+export const PARTICIPANTS_PANE_ID = 'participantsPane';
+
 /**
  * Reducer key for the feature.
  */