Briq
/
multiparty-meeting
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Remove HiddenPeers, added icon on AppBar

master
Håvar Aambø Fosstveit 2020-03-19 23:58:14 +01:00
parent 959289594b
commit fb2e7246c4
4 changed files with 41 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
app/src/components/Containers/HiddenPeers.js
View File

@ -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 (
<div
className={classnames(classes.root, this.state.className)}
onClick={() => openUsersTab()}
>
<p>
+{hiddenPeersCount} <br />
<FormattedMessage
id='room.hiddenPeers'
defaultMessage={
`{hiddenPeersCount, plural,
one {participant}
other {participants}}`
}
values={{
hiddenPeersCount
}}
/>
</p>
</div>
);
}
}
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));

37
app/src/components/Controls/TopBar.js
View File

@ -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) =>
</IconButton>
</Tooltip>
}
<Tooltip
title={intl.formatMessage({
id : 'tooltip.participants',
defaultMessage : 'Show participants'
})}
>
<IconButton
aria-label={intl.formatMessage({
id : 'tooltip.participants',
defaultMessage : 'Show participants'
})}
color='inherit'
onClick={() => openUsersTab()}
>
<Badge
color='primary'
badgeContent={peersLength + 1}
>
<PeopleIcon />
</Badge>
</IconButton>
</Tooltip>
{ fullscreenEnabled &&
<Tooltip title={fullscreenTooltip}>
<IconButton
@ -331,6 +357,7 @@ TopBar.propTypes =
{
roomClient : PropTypes.object.isRequired,
room : appPropTypes.Room.isRequired,
peersLength : PropTypes.number,
lobbyPeers : PropTypes.array,
stickyAppBar : PropTypes.bool,
myPicture : PropTypes.string,
@ -343,6 +370,7 @@ TopBar.propTypes =
setSettingsOpen : PropTypes.func.isRequired,
setLockDialogOpen : PropTypes.func.isRequired,
toggleToolArea : PropTypes.func.isRequired,
openUsersTab : PropTypes.func.isRequired,
unread : PropTypes.number.isRequired,
classes : PropTypes.object.isRequired,
theme : PropTypes.object.isRequired
@ -351,6 +379,7 @@ TopBar.propTypes =
const mapStateToProps = (state) =>
({
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 &&

16
app/src/components/MeetingViews/Democratic.js
View File

@ -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 &&
<HiddenPeers
hiddenPeersCount={peersLength - spotlightsLength}
/>
}
</div>
);
}
@ -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,10 +182,8 @@ 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
};

11
app/src/components/MeetingViews/Filmstrip.js
View File

@ -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
})}
</Grid>
</div>
{ spotlightsLength<Object.keys(peers).length &&
<HiddenPeers
hiddenPeersCount={Object.keys(peers).length-spotlightsLength}
/>
}
</div>
);
}
@ -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)
};
};