diff --git a/app/src/components/Containers/HiddenPeers.js b/app/src/components/Containers/HiddenPeers.js deleted file mode 100644 index 49b5462..0000000 --- a/app/src/components/Containers/HiddenPeers.js +++ /dev/null @@ -1,139 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import PropTypes from 'prop-types'; -import classnames from 'classnames'; -import { withStyles } from '@material-ui/core/styles'; -import { FormattedMessage } from 'react-intl'; -import * as toolareaActions from '../../actions/toolareaActions'; -import BuddyImage from '../../images/buddy.svg'; - -const styles = () => - ({ - root : - { - width : '12vmin', - height : '9vmin', - position : 'absolute', - bottom : '3%', - right : '3%', - color : 'rgba(170, 170, 170, 1)', - cursor : 'pointer', - backgroundImage : `url(${BuddyImage})`, - backgroundColor : 'rgba(42, 75, 88, 1)', - backgroundPosition : 'bottom', - backgroundSize : 'auto 85%', - backgroundRepeat : 'no-repeat', - border : 'var(--peer-border)', - boxShadow : 'var(--peer-shadow)', - textAlign : 'center', - verticalAlign : 'middle', - lineHeight : '1.8vmin', - fontSize : '1.7vmin', - fontWeight : 'bolder', - animation : 'none', - '&.pulse' : - { - animation : 'pulse 0.5s' - } - }, - '@keyframes pulse' : - { - '0%' : - { - transform : 'scale3d(1, 1, 1)' - }, - '50%' : - { - transform : 'scale3d(1.2, 1.2, 1.2)' - }, - '100%' : - { - transform : 'scale3d(1, 1, 1)' - } - } - }); - -class HiddenPeers extends React.PureComponent -{ - constructor(props) - { - super(props); - this.state = { className: '' }; - } - - componentDidUpdate(prevProps) - { - const { hiddenPeersCount } = this.props; - - if (hiddenPeersCount !== prevProps.hiddenPeersCount) - { - // eslint-disable-next-line react/no-did-update-set-state - this.setState({ className: 'pulse' }, () => - { - if (this.timeout) - { - clearTimeout(this.timeout); - } - - this.timeout = setTimeout(() => - { - this.setState({ className: '' }); - }, 500); - }); - } - } - - render() - { - const { - hiddenPeersCount, - openUsersTab, - classes - } = this.props; - - return ( -
openUsersTab()} - > -

- +{hiddenPeersCount}
- -

-
- ); - } -} - -HiddenPeers.propTypes = -{ - hiddenPeersCount : PropTypes.number, - openUsersTab : PropTypes.func.isRequired, - classes : PropTypes.object.isRequired -}; - -const mapDispatchToProps = (dispatch) => -{ - return { - openUsersTab : () => - { - dispatch(toolareaActions.openToolArea()); - dispatch(toolareaActions.setToolTab('users')); - } - }; -}; - -export default connect( - null, - mapDispatchToProps -)(withStyles(styles)(HiddenPeers)); diff --git a/app/src/components/Controls/TopBar.js b/app/src/components/Controls/TopBar.js index 6c5d9ac..790771a 100644 --- a/app/src/components/Controls/TopBar.js +++ b/app/src/components/Controls/TopBar.js @@ -2,7 +2,8 @@ import React from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import { - lobbyPeersKeySelector + lobbyPeersKeySelector, + peersLengthSelector } from '../Selectors'; import * as appPropTypes from '../appPropTypes'; import { withRoomContext } from '../../RoomContext'; @@ -22,6 +23,7 @@ import FullScreenIcon from '@material-ui/icons/Fullscreen'; import FullScreenExitIcon from '@material-ui/icons/FullscreenExit'; import SettingsIcon from '@material-ui/icons/Settings'; import SecurityIcon from '@material-ui/icons/Security'; +import PeopleIcon from '@material-ui/icons/People'; import LockIcon from '@material-ui/icons/Lock'; import LockOpenIcon from '@material-ui/icons/LockOpen'; import Button from '@material-ui/core/Button'; @@ -115,6 +117,7 @@ const TopBar = (props) => const { roomClient, room, + peersLength, lobbyPeers, stickyAppBar, myPicture, @@ -126,6 +129,7 @@ const TopBar = (props) => setSettingsOpen, setLockDialogOpen, toggleToolArea, + openUsersTab, unread, classes } = props; @@ -247,6 +251,28 @@ const TopBar = (props) => } + + openUsersTab()} + > + + + + + { fullscreenEnabled && ({ room : state.room, + peersLength : peersLengthSelector(state), lobbyPeers : lobbyPeersKeySelector(state), stickyAppBar : state.settings.stickyAppBar, loggedIn : state.me.loggedIn, @@ -377,6 +406,11 @@ const mapDispatchToProps = (dispatch) => toggleToolArea : () => { dispatch(toolareaActions.toggleToolArea()); + }, + openUsersTab : () => + { + dispatch(toolareaActions.openToolArea()); + dispatch(toolareaActions.setToolTab('users')); } }); @@ -389,6 +423,7 @@ export default withRoomContext(connect( { return ( prev.room === next.room && + prev.peers === next.peers && prev.lobbyPeers === next.lobbyPeers && prev.settings.stickyAppBar === next.settings.stickyAppBar && prev.me.loggedIn === next.me.loggedIn && diff --git a/app/src/components/MeetingViews/Democratic.js b/app/src/components/MeetingViews/Democratic.js index be71389..d987e4e 100644 --- a/app/src/components/MeetingViews/Democratic.js +++ b/app/src/components/MeetingViews/Democratic.js @@ -2,16 +2,13 @@ import React from 'react'; import { connect } from 'react-redux'; import { spotlightPeersSelector, - peersLengthSelector, - videoBoxesSelector, - spotlightsLengthSelector + videoBoxesSelector } from '../Selectors'; import classnames from 'classnames'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; import Peer from '../Containers/Peer'; import Me from '../Containers/Me'; -import HiddenPeers from '../Containers/HiddenPeers'; const RATIO = 1.334; const PADDING_V = 50; @@ -130,9 +127,7 @@ class Democratic extends React.PureComponent { const { advancedMode, - peersLength, spotlightsPeers, - spotlightsLength, toolbarsVisible, stickyAppBar, classes @@ -169,11 +164,6 @@ class Democratic extends React.PureComponent /> ); })} - { spotlightsLength < peersLength && - - } ); } @@ -182,9 +172,7 @@ class Democratic extends React.PureComponent Democratic.propTypes = { advancedMode : PropTypes.bool, - peersLength : PropTypes.number, boxes : PropTypes.number, - spotlightsLength : PropTypes.number, spotlightsPeers : PropTypes.array.isRequired, toolbarsVisible : PropTypes.bool.isRequired, stickyAppBar : PropTypes.bool, @@ -194,12 +182,10 @@ Democratic.propTypes = const mapStateToProps = (state) => { return { - peersLength : peersLengthSelector(state), - boxes : videoBoxesSelector(state), - spotlightsPeers : spotlightPeersSelector(state), - spotlightsLength : spotlightsLengthSelector(state), - toolbarsVisible : state.room.toolbarsVisible, - stickyAppBar : state.settings.stickyAppBar + boxes : videoBoxesSelector(state), + spotlightsPeers : spotlightPeersSelector(state), + toolbarsVisible : state.room.toolbarsVisible, + stickyAppBar : state.settings.stickyAppBar }; }; diff --git a/app/src/components/MeetingViews/Filmstrip.js b/app/src/components/MeetingViews/Filmstrip.js index 0403ce4..503948e 100644 --- a/app/src/components/MeetingViews/Filmstrip.js +++ b/app/src/components/MeetingViews/Filmstrip.js @@ -4,14 +4,12 @@ import { connect } from 'react-redux'; import { withStyles } from '@material-ui/core/styles'; import classnames from 'classnames'; import { - spotlightsLengthSelector, videoBoxesSelector } from '../Selectors'; import { withRoomContext } from '../../RoomContext'; import Me from '../Containers/Me'; import Peer from '../Containers/Peer'; import SpeakerPeer from '../Containers/SpeakerPeer'; -import HiddenPeers from '../Containers/HiddenPeers'; import Grid from '@material-ui/core/Grid'; const styles = () => @@ -207,7 +205,6 @@ class Filmstrip extends React.PureComponent myId, advancedMode, spotlights, - spotlightsLength, classes } = this.props; @@ -284,12 +281,6 @@ class Filmstrip extends React.PureComponent })} - - { spotlightsLength - } ); } @@ -303,7 +294,6 @@ Filmstrip.propTypes = { consumers : PropTypes.object.isRequired, myId : PropTypes.string.isRequired, selectedPeerId : PropTypes.string, - spotlightsLength : PropTypes.number, spotlights : PropTypes.array.isRequired, boxes : PropTypes.number, classes : PropTypes.object.isRequired @@ -318,7 +308,6 @@ const mapStateToProps = (state) => consumers : state.consumers, myId : state.me.id, spotlights : state.room.spotlights, - spotlightsLength : spotlightsLengthSelector(state), boxes : videoBoxesSelector(state) }; };