-
- {!_hideRecordingLabel &&
-
-
-
-
- }
-
- {
- !_hideConferenceNameAndTimer
- &&
- { _subject && { _subject }}
- { !_hideConferenceTimer && }
-
- }
- { _showParticipantCount &&
}
-
- {_hideRecordingLabel && (
- <>
-
-
-
- >
- )}
-
-
-
-
+ render() {
+ return (
+
+ { [
+ this._renderAlwaysVisible(),
+ this._renderAutoHide()
+ ] }
-
- );
+ );
+ }
}
/**
@@ -143,40 +177,14 @@ function ConferenceInfo(props: Props) {
* @param {Object} state - The Redux state.
* @private
* @returns {{
- * _hideConferenceTimer: boolean,
- * _showParticipantCount: boolean,
- * _subject: string,
- * _visible: boolean
+ * _visible: boolean,
+ * _conferenceInfo: Object
* }}
*/
function _mapStateToProps(state) {
- const participantCount = getParticipantCount(state);
- const {
- hideConferenceTimer,
- hideConferenceSubject,
- hideParticipantsStats,
- hideRecordingLabel,
- iAmRecorder
- } = state['features/base/config'];
- const { clientWidth } = state['features/base/responsive-ui'];
-
- const shouldHideRecordingLabel = hideRecordingLabel || iAmRecorder;
- const fileRecordingStatus = getSessionStatusToShow(state, JitsiRecordingConstants.mode.FILE);
- const streamRecordingStatus = getSessionStatusToShow(state, JitsiRecordingConstants.mode.STREAM);
- const isFileRecording = fileRecordingStatus ? fileRecordingStatus !== JitsiRecordingConstants.status.OFF : false;
- const isStreamRecording = streamRecordingStatus
- ? streamRecordingStatus !== JitsiRecordingConstants.status.OFF : false;
- const { isEngaged } = state['features/local-recording'];
-
return {
- _hideConferenceNameAndTimer: clientWidth < 300,
- _hideConferenceTimer: Boolean(hideConferenceTimer),
- _hideRecordingLabel: shouldHideRecordingLabel,
- _fullWidth: state['features/video-layout'].tileViewEnabled,
- _showParticipantCount: participantCount > 2 && !hideParticipantsStats,
- _subject: hideConferenceSubject ? '' : getConferenceName(state),
_visible: isToolboxVisible(state),
- _recordingLabel: (isFileRecording || isStreamRecording || isEngaged) && !shouldHideRecordingLabel
+ _conferenceInfo: getConferenceInfo(state)
};
}
diff --git a/react/features/conference/components/web/ConferenceInfoContainer.js b/react/features/conference/components/web/ConferenceInfoContainer.js
new file mode 100644
index 0000000000000..d3ec4ebcb3c44
--- /dev/null
+++ b/react/features/conference/components/web/ConferenceInfoContainer.js
@@ -0,0 +1,24 @@
+/* @flow */
+
+import React from 'react';
+
+type Props = {
+
+ /**
+ * The children components.
+ */
+ children: React$Node,
+
+ /**
+ * Whether this conference info container should be visible or not.
+ */
+ visible: boolean
+}
+
+export default ({ visible, children }: Props) => (
+
+);
diff --git a/react/features/conference/components/web/ParticipantsCount.js b/react/features/conference/components/web/ParticipantsCount.js
index bc4aaf424de4f..95b5e0b6eea06 100644
--- a/react/features/conference/components/web/ParticipantsCount.js
+++ b/react/features/conference/components/web/ParticipantsCount.js
@@ -19,7 +19,7 @@ type Props = {
/**
* Number of the conference participants.
*/
- count: string,
+ count: number,
/**
* Conference data.
@@ -72,6 +72,12 @@ class ParticipantsCount extends PureComponent
{
* @returns {ReactElement}
*/
render() {
+ const { count } = this.props;
+
+ if (count <= 2) {
+ return null;
+ }
+
return (
{
+ text = { count } />
);
}
diff --git a/react/features/conference/components/web/SubjectText.js b/react/features/conference/components/web/SubjectText.js
new file mode 100644
index 0000000000000..6e44ec447e1d5
--- /dev/null
+++ b/react/features/conference/components/web/SubjectText.js
@@ -0,0 +1,50 @@
+/* @flow */
+
+import React from 'react';
+
+import { getConferenceName } from '../../../base/conference/functions';
+import { connect } from '../../../base/redux';
+import { Tooltip } from '../../../base/tooltip';
+
+type Props = {
+
+ /**
+ * The conference display name.
+ */
+ _subject: string
+}
+
+/**
+ * Label for the conference name.
+ *
+ * @param {Props} props - The props of the component.
+ * @returns {ReactElement}
+ */
+const SubjectText = ({ _subject }: Props) => (
+
+);
+
+
+/**
+ * Maps (parts of) the Redux state to the associated
+ * {@code Subject}'s props.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {{
+ * _subject: string,
+ * }}
+ */
+function _mapStateToProps(state) {
+ return {
+ _subject: getConferenceName(state)
+ };
+}
+
+export default connect(_mapStateToProps)(SubjectText);
diff --git a/react/features/conference/components/web/index.js b/react/features/conference/components/web/index.js
index 94b05b4877a71..dd62a4697fa16 100644
--- a/react/features/conference/components/web/index.js
+++ b/react/features/conference/components/web/index.js
@@ -5,3 +5,4 @@ export { default as renderConferenceTimer } from './ConferenceTimerDisplay';
export { default as InsecureRoomNameLabel } from './InsecureRoomNameLabel';
export { default as InviteMore } from './InviteMore';
export { default as ConferenceInfo } from './ConferenceInfo';
+export { default as SubjectText } from './SubjectText';
diff --git a/react/features/local-recording/components/LocalRecordingLabel.web.js b/react/features/local-recording/components/LocalRecordingLabel.web.js
index 0316481c48c41..b4642db0ceed4 100644
--- a/react/features/local-recording/components/LocalRecordingLabel.web.js
+++ b/react/features/local-recording/components/LocalRecordingLabel.web.js
@@ -14,14 +14,19 @@ import { Tooltip } from '../../base/tooltip';
type Props = {
/**
- * Invoked to obtain translated strings.
+ * Whether this is the Jibri recorder participant.
*/
- t: Function,
+ _iAmRecorder: boolean,
+
+ /**
+ * Whether local recording is engaged or not.
+ */
+ _isEngaged: boolean,
/**
- * Whether local recording is engaged or not.
+ * Invoked to obtain translated strings.
*/
- isEngaged: boolean
+ t: Function,
};
/**
@@ -38,7 +43,7 @@ class LocalRecordingLabel extends Component {
* @returns {ReactElement}
*/
render() {
- if (!this.props.isEngaged) {
+ if (!this.props._isEngaged || this.props._iAmRecorder) {
return null;
}
@@ -66,9 +71,11 @@ class LocalRecordingLabel extends Component {
*/
function _mapStateToProps(state) {
const { isEngaged } = state['features/local-recording'];
+ const { iAmRecorder } = state['features/base/config'];
return {
- isEngaged
+ _isEngaged: isEngaged,
+ _iAmRecorder: iAmRecorder
};
}
diff --git a/react/features/recording/components/AbstractRecordingLabel.js b/react/features/recording/components/AbstractRecordingLabel.js
index c829984233aec..4c710ef29b584 100644
--- a/react/features/recording/components/AbstractRecordingLabel.js
+++ b/react/features/recording/components/AbstractRecordingLabel.js
@@ -15,6 +15,11 @@ import { getSessionStatusToShow } from '../functions';
*/
type Props = {
+ /**
+ * Whether this is the Jibri recorder participant.
+ */
+ _iAmRecorder: boolean,
+
/**
* The status of the highermost priority session.
*/
@@ -100,7 +105,7 @@ export default class AbstractRecordingLabel
* @inheritdoc
*/
render() {
- return this.props._status && !this.state.staleLabel
+ return this.props._status && !this.state.staleLabel && !this.props._iAmRecorder
? this._renderLabel() : null;
}
@@ -172,6 +177,7 @@ export function _mapStateToProps(state: Object, ownProps: Props) {
const { mode } = ownProps;
return {
+ _iAmRecorder: state['features/base/config'].iAmRecorder,
_status: getSessionStatusToShow(state, mode)
};
}