diff --git a/react/features/conference/components/Conference.native.js b/react/features/conference/components/Conference.native.js index a0030fb0d..9ea184ecc 100644 --- a/react/features/conference/components/Conference.native.js +++ b/react/features/conference/components/Conference.native.js @@ -10,7 +10,6 @@ import { appNavigate } from '../../app'; import { connect, disconnect } from '../../base/connection'; import { DialogContainer } from '../../base/dialog'; import { CalleeInfoContainer } from '../../base/jwt'; -import { JitsiRecordingConstants } from '../../base/lib-jitsi-meet'; import { getParticipantCount } from '../../base/participants'; import { Container, LoadingIndicator, TintedView } from '../../base/react'; import { TestConnectionInfo } from '../../base/testing'; @@ -18,10 +17,9 @@ import { createDesiredLocalTracks } from '../../base/tracks'; import { ConferenceNotification } from '../../calendar-sync'; import { Filmstrip } from '../../filmstrip'; import { LargeVideo } from '../../large-video'; -import { RecordingLabel } from '../../recording'; import { setToolboxVisible, Toolbox } from '../../toolbox'; -import { VideoQualityLabel } from '../../video-quality'; +import ConferenceIndicators from './ConferenceIndicators'; import styles from './styles'; /** @@ -249,13 +247,11 @@ class Conference extends Component { */} - - - - - + {/* + * A container that automatically renders indicators such + * as VideoQualityLabel or RecordingLabel if need be. + */} + diff --git a/react/features/conference/components/ConferenceIndicators.native.js b/react/features/conference/components/ConferenceIndicators.native.js new file mode 100644 index 000000000..67a82e5e4 --- /dev/null +++ b/react/features/conference/components/ConferenceIndicators.native.js @@ -0,0 +1,81 @@ +// @flow +import React, { Component } from 'react'; +import { View } from 'react-native'; +import { connect } from 'react-redux'; + +import { JitsiRecordingConstants } from '../../base/lib-jitsi-meet'; +import { + isNarrowAspectRatio, + makeAspectRatioAware +} from '../../base/responsive-ui'; +import { RecordingLabel } from '../../recording'; +import { VideoQualityLabel } from '../../video-quality'; + +import styles from './styles'; + +type Props = { + + /** + * The indicator which determines whether the filmstrip is visible. + */ + _filmstripVisible: boolean +}; + +/** + * A container that renders the conference indicators, if any. + */ +class ConferenceIndicators extends Component { + /** + * Implements React {@code Component}'s render. + * + * @inheritdoc + */ + render() { + const _wide = !isNarrowAspectRatio(this); + const { _filmstripVisible } = this.props; + + return ( + + + + + + ); + } + +} + +/** + * Maps (parts of) the redux state to the associated + * {@code ConferenceIndicators}'s props. + * + * @param {Object} state - The redux state. + * @private + * @returns {{ + * _filmstripVisible: boolean + * }} + */ +function _mapStateToProps(state) { + const { length: participantCount } = state['features/base/participants']; + const { visible } = state['features/filmstrip']; + + return { + /** + * The indicator which determines whether the filmstrip is visible. + * + * @private + * @type {boolean} + */ + _filmstripVisible: visible && participantCount > 1 + }; +} + +export default connect(_mapStateToProps)( + makeAspectRatioAware(ConferenceIndicators) +); diff --git a/react/features/conference/components/ConferenceIndicators.web.js b/react/features/conference/components/ConferenceIndicators.web.js new file mode 100644 index 000000000..e69de29bb diff --git a/react/features/conference/components/styles.js b/react/features/conference/components/styles.js index 44bf304f0..51b7368fb 100644 --- a/react/features/conference/components/styles.js +++ b/react/features/conference/components/styles.js @@ -30,6 +30,13 @@ export default createStyleSheet({ top: 0 }, + /** + * Indicator container for wide aspect ratio. + */ + indicatorContainerWide: { + right: 80 + }, + /** * The style of the {@link View} which expands over the whole * {@link Conference} area and splits it between the {@link Filmstrip} and