diff --git a/css/_participants-count.scss b/css/_participants-count.scss new file mode 100644 index 0000000000..6039375aff --- /dev/null +++ b/css/_participants-count.scss @@ -0,0 +1,26 @@ +.participants-count { + background: #fff; + border-radius: 4px; + color: #5e6d7a; + cursor: pointer; + display: inline-block; + font-size: 13px; + line-height: 20px; + margin-left: 16px; + padding: 4px 8px; + pointer-events: auto; + + &-number { + margin-right: 8px; + vertical-align: middle; + } + + &-icon { + background: url('../images/user-groups.svg'); + background-repeat: no-repeat; + display: inline-block; + height: 16px; + width: 16px; + vertical-align: middle; + } +} diff --git a/css/_subject.scss b/css/_subject.scss index 734a680354..59a6aa98a6 100644 --- a/css/_subject.scss +++ b/css/_subject.scss @@ -9,7 +9,7 @@ text-align: center; font-size: 17px; color: #fff; - z-index: $toolbarBackgroundZ; + z-index: $zindex10; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; @@ -19,4 +19,8 @@ &.visible { top: 0px; } + + &-text { + vertical-align: middle; + } } diff --git a/css/main.scss b/css/main.scss index 30ee3f059b..aacfb28860 100644 --- a/css/main.scss +++ b/css/main.scss @@ -45,6 +45,7 @@ $flagsImagePath: "../images/"; @import 'videolayout_default'; @import 'notice'; @import 'subject'; +@import 'participants-count'; @import 'popup_menu'; @import 'recording'; @import 'login_menu'; diff --git a/images/user-groups.svg b/images/user-groups.svg new file mode 100644 index 0000000000..689707f31f --- /dev/null +++ b/images/user-groups.svg @@ -0,0 +1,3 @@ + + + diff --git a/react/features/conference/components/web/ParticipantsCount.js b/react/features/conference/components/web/ParticipantsCount.js new file mode 100644 index 0000000000..3b5464cb53 --- /dev/null +++ b/react/features/conference/components/web/ParticipantsCount.js @@ -0,0 +1,101 @@ +// @flow + +import React, { PureComponent } from 'react'; +import type { Dispatch } from 'redux'; + +import { openDialog } from '../../../base/dialog'; +import { getParticipantCount } from '../../../base/participants'; +import { connect } from '../../../base/redux'; +import { SpeakerStats } from '../../../speaker-stats'; + +/** + * The type of the React {@code Component} props of {@link ParticipantsCount}. + */ +type Props = { + + /** + * Number of the conference participants. + */ + count: string, + + /** + * Conference data. + */ + conference: Object, + + /** + * Invoked to open Speaker stats. + */ + dispatch: Dispatch, +}; + +/** + * ParticipantsCount react component. + * Displays the number of participants and opens Speaker stats on click. + * + * @class ParticipantsCount + */ +class ParticipantsCount extends PureComponent { + /** + * Initializes a new ParticipantsCount instance. + * + * @param {Object} props - The read-only properties with which the new + * instance is to be initialized. + */ + constructor(props: Props) { + super(props); + + this._onClick = this._onClick.bind(this); + } + + _onClick: () => void; + + /** + * Callback invoked to display {@code SpeakerStats}. + * + * @private + * @returns {void} + */ + _onClick() { + const { dispatch, conference } = this.props; + + dispatch(openDialog(SpeakerStats, { conference })); + } + + /** + * Implements React's {@link PureComponent#render()}. + * + * @inheritdoc + * @returns {ReactElement} + */ + render() { + return ( +
+ + {this.props.count} + + +
+ ); + } +} + + +/** + * Maps (parts of) the Redux state to the associated props for the + * {@code ParticipantsCount} component. + * + * @param {Object} state - The Redux state. + * @private + * @returns {Props} + */ +function mapStateToProps(state) { + return { + conference: state['features/base/conference'].conference, + count: getParticipantCount(state) + }; +} + +export default connect(mapStateToProps)(ParticipantsCount); diff --git a/react/features/conference/components/web/Subject.js b/react/features/conference/components/web/Subject.js index edc618821a..d8790a3067 100644 --- a/react/features/conference/components/web/Subject.js +++ b/react/features/conference/components/web/Subject.js @@ -5,6 +5,8 @@ import React, { Component } from 'react'; import { connect } from '../../../base/redux'; import { isToolboxVisible } from '../../../toolbox'; +import ParticipantsCount from './ParticipantsCount'; + /** * The type of the React {@code Component} props of {@link Subject}. */ @@ -39,7 +41,8 @@ class Subject extends Component { return (
- { _subject } + { _subject } +
); }