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

Adding badge of "unread" raised hands, ref #40

auto_join_3.3
Håvar Aambø Fosstveit 2020-05-02 23:16:16 +02:00
parent 272cef52b4
commit 1dcb4eabf2
3 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,8 @@ import { connect } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { import {
lobbyPeersKeySelector, lobbyPeersKeySelector,
peersLengthSelector peersLengthSelector,
raisedHandsSelector
} from '../Selectors'; } from '../Selectors';
import * as appPropTypes from '../appPropTypes'; import * as appPropTypes from '../appPropTypes';
import { withRoomContext } from '../../RoomContext'; import { withRoomContext } from '../../RoomContext';
@ -410,7 +411,7 @@ const mapStateToProps = (state) =>
loginEnabled : state.me.loginEnabled, loginEnabled : state.me.loginEnabled,
myPicture : state.me.picture, myPicture : state.me.picture,
unread : state.toolarea.unreadMessages + unread : state.toolarea.unreadMessages +
state.toolarea.unreadFiles, state.toolarea.unreadFiles + raisedHandsSelector(state),
canLock : canLock :
state.me.roles.some((role) => state.me.roles.some((role) =>
state.room.permissionsFromRoles.CHANGE_ROOM_LOCK.includes(role)), state.room.permissionsFromRoles.CHANGE_ROOM_LOCK.includes(role)),

32
app/src/components/MeetingDrawer/MeetingDrawer.js
View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { raisedHandsSelector } from '../Selectors';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import * as toolareaActions from '../../actions/toolareaActions'; import * as toolareaActions from '../../actions/toolareaActions';
@ -51,6 +52,7 @@ const MeetingDrawer = (props) =>
currentToolTab, currentToolTab,
unreadMessages, unreadMessages,
unreadFiles, unreadFiles,
raisedHands,
closeDrawer, closeDrawer,
setToolTab, setToolTab,
classes, classes,
@ -93,10 +95,14 @@ const MeetingDrawer = (props) =>
} }
/> />
<Tab <Tab
label={intl.formatMessage({ label={
id : 'label.participants', <Badge color='secondary' badgeContent={raisedHands}>
defaultMessage : 'Participants' {intl.formatMessage({
})} id : 'label.participants',
defaultMessage : 'Participants'
})}
</Badge>
}
/> />
</Tabs> </Tabs>
<IconButton onClick={closeDrawer}> <IconButton onClick={closeDrawer}>
@ -116,16 +122,21 @@ MeetingDrawer.propTypes =
setToolTab : PropTypes.func.isRequired, setToolTab : PropTypes.func.isRequired,
unreadMessages : PropTypes.number.isRequired, unreadMessages : PropTypes.number.isRequired,
unreadFiles : PropTypes.number.isRequired, unreadFiles : PropTypes.number.isRequired,
raisedHands : PropTypes.number.isRequired,
closeDrawer : PropTypes.func.isRequired, closeDrawer : PropTypes.func.isRequired,
classes : PropTypes.object.isRequired, classes : PropTypes.object.isRequired,
theme : PropTypes.object.isRequired theme : PropTypes.object.isRequired
}; };
const mapStateToProps = (state) => ({ const mapStateToProps = (state) =>
currentToolTab : state.toolarea.currentToolTab, {
unreadMessages : state.toolarea.unreadMessages, return {
unreadFiles : state.toolarea.unreadFiles currentToolTab : state.toolarea.currentToolTab,
}); unreadMessages : state.toolarea.unreadMessages,
unreadFiles : state.toolarea.unreadFiles,
raisedHands : raisedHandsSelector(state)
};
};
const mapDispatchToProps = { const mapDispatchToProps = {
setToolTab : toolareaActions.setToolTab setToolTab : toolareaActions.setToolTab
@ -141,7 +152,8 @@ export default connect(
return ( return (
prev.toolarea.currentToolTab === next.toolarea.currentToolTab && prev.toolarea.currentToolTab === next.toolarea.currentToolTab &&
prev.toolarea.unreadMessages === next.toolarea.unreadMessages && prev.toolarea.unreadMessages === next.toolarea.unreadMessages &&
prev.toolarea.unreadFiles === next.toolarea.unreadFiles prev.toolarea.unreadFiles === next.toolarea.unreadFiles &&
prev.peers === next.peers
); );
} }
} }

5
app/src/components/Selectors.js
View File

@ -106,6 +106,11 @@ export const passivePeersSelector = createSelector(
.sort((a, b) => String(a.displayName || '').localeCompare(String(b.displayName || ''))) .sort((a, b) => String(a.displayName || '').localeCompare(String(b.displayName || '')))
); );
export const raisedHandsSelector = createSelector(
peersValueSelector,
(peers) => peers.reduce((a, b) => (a + (b.raisedHand ? 1 : 0)), 0)
);
export const videoBoxesSelector = createSelector( export const videoBoxesSelector = createSelector(
spotlightsLengthSelector, spotlightsLengthSelector,
screenProducersSelector, screenProducersSelector,