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

react/features/app/reducers.any.js

@@ -40,6 +40,7 @@ import '../large-video/reducer';
 import '../lobby/reducer';
 import '../notifications/reducer';
 import '../overlay/reducer';
+import '../participants-pane/reducer';
 import '../reactions/reducer';
 import '../recent-list/reducer';
 import '../recording/reducer';

react/features/conference/components/native/Conference.js

@@ -23,6 +23,7 @@ import { AddPeopleDialog, CalleeInfoContainer } from '../../../invite';
 import { LargeVideo } from '../../../large-video';
 import { KnockingParticipantList } from '../../../lobby';
 import { BackButtonRegistry } from '../../../mobile/back-button';
+import { ParticipantsPane } from '../../../participants-pane/components/native';
 import { Captions } from '../../../subtitles';
 import { setToolboxVisible } from '../../../toolbox/actions';
 import { Toolbox } from '../../../toolbox/components/native';
@@ -71,6 +72,8 @@ type Props = AbstractProps & {
      */
     _fullscreenEnabled: boolean,
 
+    _isOpen: boolean,
+
     /**
      * The ID of the participant currently on stage (if any)
      */
@@ -237,6 +240,7 @@ class Conference extends AbstractConference<Props, *> {
     _renderContent() {
         const {
             _connecting,
+            _isOpen,
             _largeVideoParticipantId,
             _reducedUI,
             _shouldDisplayTileView
@@ -296,11 +300,14 @@ class Conference extends AbstractConference<Props, *> {
                 </SafeAreaView>
 
                 <TestConnectionInfo />
-
                 { this._renderConferenceNotification() }
 
                 { this._renderConferenceModals() }
+
                 {_shouldDisplayTileView && <Toolbox />}
+
+                { _isOpen && <ParticipantsPane /> }
+
             </>
         );
     }
@@ -384,6 +391,7 @@ class Conference extends AbstractConference<Props, *> {
  * @returns {Props}
  */
 function _mapStateToProps(state) {
+    const { isOpen } = state['features/participants-pane'];
     const { connecting, connection } = state['features/base/connection'];
     const {
         conference,
@@ -412,6 +420,7 @@ function _mapStateToProps(state) {
         _connecting: Boolean(connecting_),
         _filmstripVisible: isFilmstripVisible(state),
         _fullscreenEnabled: getFeatureFlag(state, FULLSCREEN_ENABLED, true),
+        _isOpen: isOpen,
         _largeVideoParticipantId: state['features/large-video'].participantId,
         _pictureInPictureEnabled: getFeatureFlag(state, PIP_ENABLED),
         _reducedUI: reducedUI,

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

@@ -0,0 +1,28 @@
+// @flow
+
+import {
+    PARTICIPANTS_PANE_CLOSE,
+    PARTICIPANTS_PANE_OPEN
+} from './actionTypes';
+
+/**
+ * Action to close the participants pane.
+ *
+ * @returns {Object}
+ */
+export const close = () => {
+    return {
+        type: PARTICIPANTS_PANE_CLOSE
+    };
+};
+
+/**
+ * Action to open the participants pane.
+ *
+ * @returns {Object}
+ */
+export const open = () => {
+    return {
+        type: PARTICIPANTS_PANE_OPEN
+    };
+};

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

@@ -1,32 +1,9 @@
+// @flow
+
 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
-    };
-}
+export * from './actions.any';
 
 /**
  * Displays the context menu for the selected lobby participant.
@@ -34,7 +11,7 @@ export function close() {
  * @param {Object} participant - The selected lobby participant.
  * @returns {Function}
  */
-export function showContextMenuReject(participant) {
+export function showContextMenuReject(participant: Object) {
     return openDialog(ContextMenuLobbyParticipantReject, { participant });
 }
 
@@ -45,6 +22,6 @@ export function showContextMenuReject(participant) {
  * @param {Object} participant - The selected meeting participant.
  * @returns {Function}
  */
-export function showContextMenuDetails(participant) {
+export function showContextMenuDetails(participant: Object) {
     return openDialog(ContextMenuMeetingParticipantDetails, { participant });
 }

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

@@ -1,26 +1,3 @@
-import {
-    PARTICIPANTS_PANE_CLOSE,
-    PARTICIPANTS_PANE_OPEN
-} from './actionTypes';
+// @flow
 
-/**
- * Action to close the participants pane.
- *
- * @returns {Object}
- */
-export const close = () => {
-    return {
-        type: PARTICIPANTS_PANE_CLOSE
-    };
-};
-
-/**
- * Action to open the participants pane.
- *
- * @returns {Object}
- */
-export const open = () => {
-    return {
-        type: PARTICIPANTS_PANE_OPEN
-    };
-};
+export * from './actions.any';

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

@@ -4,9 +4,9 @@ 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, connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
-import { hideDialog, openDialog } from '../../../base/dialog';
+import { openDialog } from '../../../base/dialog';
 import { Icon, IconClose, IconHorizontalPoints } from '../../../base/icons';
 import { JitsiModal } from '../../../base/modal';
 import {
@@ -14,40 +14,30 @@ import {
 } from '../../../base/participants';
 import MuteEveryoneDialog
     from '../../../video-menu/components/native/MuteEveryoneDialog';
-import { PARTICIPANTS_PANE_ID } from '../../constants';
+import { close } from '../../actions.native';
 
 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({ _isOpen: paneOpen }: Props) {
+const ParticipantsPane = () => {
     const dispatch = useDispatch();
     const openMoreMenu = useCallback(() => dispatch(openDialog(ContextMenuMore)), [ dispatch ]);
-    const closePane = useCallback(() => dispatch(hideDialog()), [ dispatch ]);
+    const closePane = useCallback(() => dispatch(close()), [ dispatch ]);
     const isLocalModerator = useSelector(isLocalParticipantModerator);
     const muteAll = useCallback(() => dispatch(openDialog(MuteEveryoneDialog)),
         [ dispatch ]);
     const { t } = useTranslation();
 
     return (
-        paneOpen
-        && <JitsiModal
+        <JitsiModal
             hideHeaderWithNavigation = { true }
-            modalId = { PARTICIPANTS_PANE_ID }
             style = { styles.participantsPane }>
             <View style = { styles.header }>
                 <Button
@@ -91,25 +81,6 @@ function ParticipantsPane({ _isOpen: paneOpen }: Props) {
             }
         </JitsiModal>
     );
-}
-
-/**
- * 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 connect(_mapStateToProps)(ParticipantsPane);
+export default ParticipantsPane;

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

@@ -32,7 +32,9 @@ class ParticipantsPaneButton extends AbstractButton<Props, *> {
      * @returns {void}
      */
     _handleClick() {
-        this.props.dispatch(open());
+        const { dispatch } = this.props;
+
+        dispatch(open());
     }
 }
 

react/features/participants-pane/constants.js

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