feat(rn,conference) show participants pane in the top bar

Replace the invite button, which is accessible within the participants
pane.

Show the screen-sharing button in the toolbox when space allows, and fix
it so it's rendered when outside the overflow menu.

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

@@ -6,11 +6,10 @@ import { Text, View } from 'react-native';
 import { getConferenceName, getConferenceTimestamp } from '../../../base/conference/functions';
 import { CONFERENCE_TIMER_ENABLED, MEETING_NAME_ENABLED, getFeatureFlag } from '../../../base/flags';
 import { connect } from '../../../base/redux';
-import InviteButton from '../../../invite/components/add-people-dialog/native/InviteButton';
 import AudioDeviceToggleButton from '../../../mobile/audio-mode/components/AudioDeviceToggleButton';
 import { PictureInPictureButton } from '../../../mobile/picture-in-picture';
-import ToggleCameraButton
-    from '../../../toolbox/components/native/ToggleCameraButton';
+import { ParticipantsPaneButton } from '../../../participants-pane/components/native';
+import ToggleCameraButton from '../../../toolbox/components/native/ToggleCameraButton';
 import { isToolboxVisible } from '../../../toolbox/functions.native';
 import ConferenceTimer from '../ConferenceTimer';
 
@@ -90,7 +89,7 @@ const TitleBar = (props: Props) => (<>
             <AudioDeviceToggleButton styles = { styles.titleBarButton } />
         </View>
         <View style = { styles.titleBarButtonContainer }>
-            <InviteButton styles = { styles.titleBarButton } />
+            <ParticipantsPaneButton styles = { styles.titleBarButton } />
         </View>
     </View>}
 </>);

react/features/invite/components/add-people-dialog/native/InviteButton.js

@@ -1,57 +0,0 @@
-// @flow
-
-import type { Dispatch } from 'redux';
-
-import { INVITE_ENABLED, getFeatureFlag } from '../../../../base/flags';
-import { translate } from '../../../../base/i18n';
-import { IconInviteMore } from '../../../../base/icons';
-import { connect } from '../../../../base/redux';
-import { AbstractButton, type AbstractButtonProps } from '../../../../base/toolbox/components';
-import { doInvitePeople } from '../../../actions.native';
-
-type Props = AbstractButtonProps & {
-
-    /**
-     * The Redux dispatch function.
-     */
-    dispatch: Dispatch<any>
-};
-
-/**
- * Implements an {@link AbstractButton} to enter add/invite people to the
- * current call/conference/meeting.
- */
-class InviteButton extends AbstractButton<Props, *> {
-    accessibilityLabel = 'toolbar.accessibilityLabel.shareRoom';
-    icon = IconInviteMore;
-    label = 'toolbar.shareRoom';
-
-    /**
-     * Handles clicking / pressing the button, and opens the appropriate dialog.
-     *
-     * @private
-     * @returns {void}
-     */
-    _handleClick() {
-        this.props.dispatch(doInvitePeople());
-    }
-}
-
-/**
- * Maps part of the Redux state to the props of this component.
- *
- * @param {Object} state - The Redux state.
- * @param {Props} ownProps - The own props of the component.
- * @returns {Props}
- */
-function _mapStateToProps(state, ownProps: Props) {
-    const { disableInviteFunctions } = state['features/base/config'];
-    const flag = getFeatureFlag(state, INVITE_ENABLED, true);
-
-    return {
-        visible: flag && !disableInviteFunctions && ownProps.visible
-    };
-}
-
-
-export default translate(connect(_mapStateToProps)(InviteButton));

react/features/invite/components/add-people-dialog/native/index.js

@@ -1,4 +1,3 @@
 // @flow
 
 export { default as AddPeopleDialog } from './AddPeopleDialog';
-export { default as InviteButton } from './InviteButton';

react/features/toolbox/components/native/OverflowMenu.js

@@ -8,7 +8,6 @@ import { bottomSheetStyles } from '../../../base/dialog/components/native/styles
 import { connect } from '../../../base/redux';
 import SettingsButton from '../../../base/settings/components/native/SettingsButton';
 import { SharedDocumentButton } from '../../../etherpad';
-import { ParticipantsPaneButton } from '../../../participants-pane/components/native';
 import { ReactionMenu } from '../../../reactions/components';
 import { isReactionsEnabled } from '../../../reactions/functions.any';
 import { LiveStreamButton, RecordButton } from '../../../recording';
@@ -120,16 +119,12 @@ class OverflowMenu extends PureComponent<Props, State> {
             }
         };
 
-        const firstMenuButtonProps
-            = toolbarButtons.has('participantspane') ? topButtonProps : buttonProps;
-
         return (
             <BottomSheet
                 renderFooter = { _reactionsEnabled && !toolbarButtons.has('raisehand')
                     ? this._renderReactionMenu
                     : null }>
-                {!toolbarButtons.has('participantspane') && <ParticipantsPaneButton { ...topButtonProps } />}
-                <OpenCarmodeButton { ...firstMenuButtonProps } />
+                <OpenCarmodeButton { ...topButtonProps } />
                 <AudioOnlyButton { ...buttonProps } />
                 {!_reactionsEnabled && !toolbarButtons.has('raisehand') && <RaiseHandButton { ...buttonProps } />}
                 <Divider style = { styles.divider } />
@@ -139,7 +134,7 @@ class OverflowMenu extends PureComponent<Props, State> {
                 <LinkToSalesforceButton { ...buttonProps } />
                 <Divider style = { styles.divider } />
                 <SharedVideoButton { ...buttonProps } />
-                <ScreenSharingButton { ...buttonProps } />
+                {!toolbarButtons.has('screensharing') && <ScreenSharingButton { ...buttonProps } />}
                 <SpeakerStatsButton { ...buttonProps } />
                 {!toolbarButtons.has('tileview') && <TileViewButton { ...buttonProps } />}
                 <Divider style = { styles.divider } />

react/features/toolbox/components/native/ScreenSharingIosButton.js

@@ -65,6 +65,23 @@ class ScreenSharingIosButton extends AbstractButton<Props, *> {
         this._setNativeComponent = this._setNativeComponent.bind(this);
     }
 
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {React$Node}
+     */
+    render() {
+        return (
+            <>
+                { super.render() }
+                <ScreenCapturePickerView
+                    ref = { this._setNativeComponent }
+                    style = { styles.screenCapturePickerView } />
+            </>
+        );
+    }
+
     /**
     * Sets the internal reference to the React Component wrapping the
     * {@code RPSystemBroadcastPickerView} component.
@@ -109,21 +126,6 @@ class ScreenSharingIosButton extends AbstractButton<Props, *> {
     _isToggled() {
         return this.props._screensharing;
     }
-
-    /**
-   * Helper function to be implemented by subclasses, which may return a
-   * new React Element to be appended at the end of the button.
-   *
-   * @protected
-   * @returns {ReactElement|null}
-   */
-    _getElementAfter() {
-        return (
-            <ScreenCapturePickerView
-                ref = { this._setNativeComponent }
-                style = { styles.screenCapturePickerView } />
-        );
-    }
 }
 
 /**

react/features/toolbox/components/native/Toolbox.js

@@ -9,7 +9,6 @@ import { Platform } from '../../../base/react';
 import { connect } from '../../../base/redux';
 import { StyleType } from '../../../base/styles';
 import { ChatButton } from '../../../chat';
-import { ParticipantsPaneButton } from '../../../participants-pane/components/native';
 import { ReactionsMenuButton } from '../../../reactions/components';
 import { isReactionsEnabled } from '../../../reactions/functions.any';
 import { TileViewButton } from '../../../video-layout';
@@ -21,6 +20,7 @@ import VideoMuteButton from '../VideoMuteButton';
 import HangupMenuButton from './HangupMenuButton';
 import OverflowMenuButton from './OverflowMenuButton';
 import RaiseHandButton from './RaiseHandButton';
+import ScreenSharingButton from './ScreenSharingButton';
 import styles from './styles';
 
 /**
@@ -99,7 +99,7 @@ function Toolbox(props: Props) {
                           styles = { buttonStylesBorderless }
                           toggledStyles = { backgroundToggledStyle } />
                 }
-
+                {additionalButtons.has('screensharing') && <ScreenSharingButton styles = { buttonStylesBorderless } />}
                 { additionalButtons.has('raisehand') && (_reactionsEnabled
                     ? <ReactionsMenuButton
                         styles = { buttonStylesBorderless }
@@ -108,11 +108,6 @@ function Toolbox(props: Props) {
                         styles = { buttonStylesBorderless }
                         toggledStyles = { backgroundToggledStyle } />)}
                 {additionalButtons.has('tileview') && <TileViewButton styles = { buttonStylesBorderless } />}
-                {
-                    additionalButtons.has('participantspane')
-                    && <ParticipantsPaneButton
-                        styles = { buttonStylesBorderless } />
-                }
                 <OverflowMenuButton
                     styles = { buttonStylesBorderless }
                     toggledStyles = { toggledButtonStyles } />

react/features/toolbox/functions.native.js

@@ -27,7 +27,7 @@ export function getMovableButtons(width: number): Set<string> {
 
     switch (true) {
     case width >= WIDTH.FIT_9_ICONS: {
-        buttons = [ 'togglecamera', 'chat', 'participantspane', 'raisehand', 'tileview' ];
+        buttons = [ 'chat', 'togglecamera', 'screensharing', 'raisehand', 'tileview' ];
         break;
     }
     case width >= WIDTH.FIT_8_ICONS: {