v1.7.0/call volume handling

This commit is contained in:
2020-09-05 18:02:07 -04:00
parent e8f2b676db
commit 93c903cc45
4 changed files with 97 additions and 90 deletions
+10 -78
View File
@@ -492,19 +492,6 @@ export default class Chat extends Component {
}
return null;
}
setVideoVolume(v, id) {
const audioOuts = document.querySelectorAll('audio.vxt-audio');
if (audioOuts.length >= 0) {
audioOuts.forEach((el) => {
if (el.id === `audio-${id}`) {
el.volume = v * 0.1;
const { volumes } = this.state;
volumes[id] = v;
this.setState({ volumes });
}
});
}
}
handleVideo() {
const { usingVideo } = this.state;
this.mCallManager.toggleVideo(!usingVideo);
@@ -688,55 +675,6 @@ export default class Chat extends Component {
<Chip className="party-controls-users-chip" clickable size="small" label={user} />
))}
</div>
{Object.keys(usersOnCall).length > 0 ? (
<Typography className="party-controls-users-title" variant="overline">
MEMBERS IN CALL
</Typography>
) : null}
{Object.keys(usersOnCall).length > 0 ? (
<div className="party-controls-users-container">
{Object.keys(usersOnCall).map((id) => {
return usersOnCall[id].status === 'Connected' ||
usersOnCall[id].status === 'Connecting' ? (
<Tooltip
interactive
title={
<Grid className="party-controls-users-volume" container spacing={2}>
<Grid item>
<VolumeDown />
</Grid>
<Grid item xs>
<Slider
max={10}
min={0}
step={1}
color="secondary"
value={volumes[id] || 10}
onChangeCommitted={(e, v) => this.setVideoVolume(v, id)}
/>
</Grid>
<Grid item>
<VolumeUp />
</Grid>
</Grid>
}
>
<Chip
color={
usersOnCall[id].info.externalId === LocalData().userUid
? 'secondary'
: 'default'
}
className="party-controls-users-chip"
clickable
size="small"
label={usersOnCall[id].info.name || ' '}
/>
</Tooltip>
) : null;
})}
</div>
) : null}
</ExpansionPanelDetails>
</ExpansionPanel>
{player ? (
@@ -852,22 +790,16 @@ export default class Chat extends Component {
{gif || newMessage ? null : callActionPending ? (
<CircularProgress className="icon-button" color="secondary" />
) : (
<IconButton
disabled={callActionPending}
onClick={() => this.handlePhoneCall(false)}
color={!onCall ? 'secondary' : 'primary'}
className="icon-button"
>
{onCall ? (
<Tooltip placement="top" title="Leave Call">
<PhoneDisable />
</Tooltip>
) : (
<Tooltip placement="top" title="Join Voice Call">
<PhoneEnable />
</Tooltip>
)}
</IconButton>
<Tooltip placement="top" title={onCall ? 'Leave Call' : 'Join Call'}>
<IconButton
disabled={callActionPending}
onClick={() => this.handlePhoneCall(false)}
color={!onCall ? 'secondary' : 'primary'}
className="icon-button"
>
{onCall ? <PhoneDisable /> : <PhoneEnable />}
</IconButton>
</Tooltip>
)}
{!gif && !newMessage && onCall && !muted ? (
<Tooltip title="Mute Mic" placement="top">