diff --git a/react/features/conference/components/native/Conference.js b/react/features/conference/components/native/Conference.js index ccecd4105..c3ddb48cb 100644 --- a/react/features/conference/components/native/Conference.js +++ b/react/features/conference/components/native/Conference.js @@ -436,6 +436,7 @@ class Conference extends AbstractConference { _shouldDisplayTileView || <> + { this._renderNotificationsContainer() } } @@ -467,7 +468,6 @@ class Conference extends AbstractConference { {/* eslint-disable-next-line react/jsx-no-bind */} - { this._renderNotificationsContainer() } @@ -530,7 +530,8 @@ class Conference extends AbstractConference { return super.renderNotificationsContainer( { - style: notificationsStyle + style: notificationsStyle, + toolboxVisible: this.props._toolboxVisible } ); } diff --git a/react/features/filmstrip/components/native/Filmstrip.js b/react/features/filmstrip/components/native/Filmstrip.js index d13f48a82..ef1ec71ca 100644 --- a/react/features/filmstrip/components/native/Filmstrip.js +++ b/react/features/filmstrip/components/native/Filmstrip.js @@ -9,6 +9,7 @@ import { Platform } from '../../../base/react'; import { connect } from '../../../base/redux'; import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui/constants'; import { getHideSelfView } from '../../../base/settings/functions.any'; +import { areThereNotifications } from '../../../notifications/functions'; import { isToolboxVisible } from '../../../toolbox/functions'; import { setVisibleRemoteParticipants } from '../../actions'; import { @@ -16,12 +17,13 @@ import { isFilmstripVisible, shouldDisplayLocalThumbnailSeparately, shouldRemoteVideosBeVisible -} from '../../functions'; +} from '../../functions.native'; import LocalThumbnail from './LocalThumbnail'; import Thumbnail from './Thumbnail'; import styles from './styles'; + // Immutable reference to avoid re-renders. const NO_REMOTE_VIDEOS = []; @@ -51,6 +53,8 @@ type Props = { _localParticipantId: string, + _notificationsAvailable: boolean, + /** * The participants in the conference. */ @@ -248,6 +252,7 @@ class Filmstrip extends PureComponent { _disableSelfView, _toolboxVisible, _localParticipantId, + _notificationsAvailable, _participants, _visible } = this.props; @@ -256,7 +261,7 @@ class Filmstrip extends PureComponent { return null; } - const bottomEdge = Platform.OS === 'ios' && !_toolboxVisible; + const bottomEdge = Platform.OS === 'ios' && !_toolboxVisible && !_notificationsAvailable; const isNarrowAspectRatio = _aspectRatio === ASPECT_RATIO_NARROW; const filmstripStyle = isNarrowAspectRatio ? styles.filmstripNarrow : styles.filmstripWide; const { height, width } = this._getDimensions(); @@ -330,6 +335,7 @@ function _mapStateToProps(state) { _clientWidth: responsiveUI.clientWidth, _disableSelfView: disableSelfView, _localParticipantId: getLocalParticipant(state)?.id, + _notificationsAvailable: areThereNotifications(state), _participants: showRemoteVideos ? remoteParticipants : NO_REMOTE_VIDEOS, _toolboxVisible: isToolboxVisible(state), _visible: enabled && isFilmstripVisible(state) diff --git a/react/features/notifications/components/native/NotificationsContainer.js b/react/features/notifications/components/native/NotificationsContainer.js index abbf82e8e..6282c74fb 100644 --- a/react/features/notifications/components/native/NotificationsContainer.js +++ b/react/features/notifications/components/native/NotificationsContainer.js @@ -1,6 +1,8 @@ // @flow import React, { Component } from 'react'; +import { Platform } from 'react-native'; +import { SafeAreaView } from 'react-native-safe-area-context'; import { connect } from '../../../base/redux'; import { hideNotification } from '../../actions'; @@ -20,7 +22,9 @@ type Props = { /** * Invoked to update the redux store in order to remove notifications. */ - dispatch: Function + dispatch: Function, + + toolboxVisible: boolean }; /** @@ -165,10 +169,12 @@ class NotificationsContainer extends Component { * @inheritdoc */ render() { - const { _notifications } = this.props; + const { _notifications, toolboxVisible } = this.props; + const bottomEdge = Platform.OS === 'ios' && !toolboxVisible; return ( - <> + { _notifications.map((notification, index) => { const { props, uid } = notification; @@ -182,7 +188,7 @@ class NotificationsContainer extends Component { ); }) } - + ); } diff --git a/react/features/notifications/components/native/styles.js b/react/features/notifications/components/native/styles.js index 0edf7cb9a..9f0e2b1da 100644 --- a/react/features/notifications/components/native/styles.js +++ b/react/features/notifications/components/native/styles.js @@ -17,7 +17,7 @@ const notification = { flexDirection: 'row', maxHeight: 104, height: 'auto', - marginBottom: BaseTheme.spacing[3], + marginBottom: BaseTheme.spacing[2], marginHorizontal: BaseTheme.spacing[2], maxWidth: 400, width: 'auto'