From 02f598718731fd01337df542e5e077ba6ba77a05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= Date: Mon, 26 Sep 2022 22:33:27 +0200 Subject: [PATCH] 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. --- .../conference/components/native/TitleBar.js | 7 +-- .../add-people-dialog/native/InviteButton.js | 57 ------------------- .../add-people-dialog/native/index.js | 1 - .../toolbox/components/native/OverflowMenu.js | 9 +-- .../native/ScreenSharingIosButton.js | 32 ++++++----- .../toolbox/components/native/Toolbox.js | 9 +-- react/features/toolbox/functions.native.js | 2 +- 7 files changed, 25 insertions(+), 92 deletions(-) delete mode 100644 react/features/invite/components/add-people-dialog/native/InviteButton.js diff --git a/react/features/conference/components/native/TitleBar.js b/react/features/conference/components/native/TitleBar.js index a64c0b63b..ba2af92bf 100644 --- a/react/features/conference/components/native/TitleBar.js +++ b/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) => (<> - + } ); diff --git a/react/features/invite/components/add-people-dialog/native/InviteButton.js b/react/features/invite/components/add-people-dialog/native/InviteButton.js deleted file mode 100644 index c80c8cd8f..000000000 --- a/react/features/invite/components/add-people-dialog/native/InviteButton.js +++ /dev/null @@ -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 -}; - -/** - * Implements an {@link AbstractButton} to enter add/invite people to the - * current call/conference/meeting. - */ -class InviteButton extends AbstractButton { - 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)); diff --git a/react/features/invite/components/add-people-dialog/native/index.js b/react/features/invite/components/add-people-dialog/native/index.js index 1aedf86dc..f2e67e631 100644 --- a/react/features/invite/components/add-people-dialog/native/index.js +++ b/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'; diff --git a/react/features/toolbox/components/native/OverflowMenu.js b/react/features/toolbox/components/native/OverflowMenu.js index b404fa1be..5446ada33 100644 --- a/react/features/toolbox/components/native/OverflowMenu.js +++ b/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 { } }; - const firstMenuButtonProps - = toolbarButtons.has('participantspane') ? topButtonProps : buttonProps; - return ( - {!toolbarButtons.has('participantspane') && } - + {!_reactionsEnabled && !toolbarButtons.has('raisehand') && } @@ -139,7 +134,7 @@ class OverflowMenu extends PureComponent { - + {!toolbarButtons.has('screensharing') && } {!toolbarButtons.has('tileview') && } diff --git a/react/features/toolbox/components/native/ScreenSharingIosButton.js b/react/features/toolbox/components/native/ScreenSharingIosButton.js index 792223835..ea6fa902a 100644 --- a/react/features/toolbox/components/native/ScreenSharingIosButton.js +++ b/react/features/toolbox/components/native/ScreenSharingIosButton.js @@ -65,6 +65,23 @@ class ScreenSharingIosButton extends AbstractButton { this._setNativeComponent = this._setNativeComponent.bind(this); } + /** + * Implements React's {@link Component#render()}. + * + * @inheritdoc + * @returns {React$Node} + */ + render() { + return ( + <> + { super.render() } + + + ); + } + /** * Sets the internal reference to the React Component wrapping the * {@code RPSystemBroadcastPickerView} component. @@ -109,21 +126,6 @@ class ScreenSharingIosButton extends AbstractButton { _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 ( - - ); - } } /** diff --git a/react/features/toolbox/components/native/Toolbox.js b/react/features/toolbox/components/native/Toolbox.js index e513ba426..f35221bbd 100644 --- a/react/features/toolbox/components/native/Toolbox.js +++ b/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') && } { additionalButtons.has('raisehand') && (_reactionsEnabled ? )} {additionalButtons.has('tileview') && } - { - additionalButtons.has('participantspane') - && - } diff --git a/react/features/toolbox/functions.native.js b/react/features/toolbox/functions.native.js index 69bc370f0..656ab5301 100644 --- a/react/features/toolbox/functions.native.js +++ b/react/features/toolbox/functions.native.js @@ -27,7 +27,7 @@ export function getMovableButtons(width: number): Set { 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: {