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

Fix mute buttons in participant list

master
Håvar Aambø Fosstveit 2020-03-20 12:59:18 +01:00
parent beab510f46
commit 6b469881ef
1 changed files with 33 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
app/src/components/MeetingDrawer/ParticipantList/ListPeer.js
View File

@ -6,6 +6,8 @@ import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import * as appPropTypes from '../../appPropTypes'; import * as appPropTypes from '../../appPropTypes';
import { withRoomContext } from '../../../RoomContext'; import { withRoomContext } from '../../../RoomContext';
import { useIntl } from 'react-intl';
import IconButton from '@material-ui/core/IconButton';
import MicIcon from '@material-ui/icons/Mic'; import MicIcon from '@material-ui/icons/Mic';
import MicOffIcon from '@material-ui/icons/MicOff'; import MicOffIcon from '@material-ui/icons/MicOff';
import ScreenIcon from '@material-ui/icons/ScreenShare'; import ScreenIcon from '@material-ui/icons/ScreenShare';
@ -128,6 +130,8 @@ const styles = (theme) =>
const ListPeer = (props) => const ListPeer = (props) =>
{ {
const intl = useIntl();
const { const {
roomClient, roomClient,
peer, peer,
@ -174,47 +178,49 @@ const ListPeer = (props) =>
{children} {children}
<div className={classes.controls}> <div className={classes.controls}>
{ screenConsumer && { screenConsumer &&
<div <IconButton
className={classnames(classes.button, 'screen', { aria-label={intl.formatMessage({
on : screenVisible, id : 'tooltip.muteScreenSharing',
off : !screenVisible, defaultMessage : 'Mute participant share'
disabled : peer.peerScreenInProgress
})} })}
color={ screenVisible ? 'primary' : 'secondary'}
disabled={ peer.peerScreenInProgress }
onClick={(e) => onClick={(e) =>
{ {
e.stopPropagation(); e.stopPropagation();
screenVisible ? screenVisible ?
roomClient.modifyPeerConsumer(peer.id, 'screen', true) : roomClient.modifyPeerConsumer(peer.id, 'screen', true) :
roomClient.modifyPeerConsumer(peer.id, 'screen', false); roomClient.modifyPeerConsumer(peer.id, 'screen', false);
}} }}
> >
{ screenVisible ? { screenVisible ?
<ScreenIcon /> <ScreenIcon />
: :
<ScreenOffIcon /> <ScreenOffIcon />
} }
</div> </IconButton>
} }
<div <IconButton
className={classnames(classes.button, 'mic', { aria-label={intl.formatMessage({
on : micEnabled, id : 'tooltip.muteParticipant',
off : !micEnabled, defaultMessage : 'Mute participant'
disabled : peer.peerAudioInProgress
})} })}
color={ micEnabled ? 'primary' : 'secondary'}
disabled={ peer.peerAudioInProgress }
onClick={(e) => onClick={(e) =>
{ {
e.stopPropagation(); e.stopPropagation();
micEnabled ? micEnabled ?
roomClient.modifyPeerConsumer(peer.id, 'mic', true) : roomClient.modifyPeerConsumer(peer.id, 'mic', true) :
roomClient.modifyPeerConsumer(peer.id, 'mic', false); roomClient.modifyPeerConsumer(peer.id, 'mic', false);
}} }}
> >
{ micEnabled ? { micEnabled ?
<MicIcon /> <MicIcon />
: :
<MicOffIcon /> <MicOffIcon />
} }
</div> </IconButton>
</div> </div>
</div> </div>
); );
@ -232,15 +238,15 @@ ListPeer.propTypes =
classes : PropTypes.object.isRequired classes : PropTypes.object.isRequired
}; };
const makeMapStateToProps = (initialState, props) => const makeMapStateToProps = (initialState, { id }) =>
{ {
const getPeerConsumers = makePeerConsumerSelector(); const getPeerConsumers = makePeerConsumerSelector();
const mapStateToProps = (state) => const mapStateToProps = (state) =>
{ {
return { return {
peer : state.peers[props.id], peer : state.peers[id],
...getPeerConsumers(state, props) ...getPeerConsumers(state, id)
}; };
}; };