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

fixes #343

auto_join_3.3
Mészáros Mihály 2020-05-12 20:29:50 +02:00
parent 2623ef2eaa
commit b3764a1d64
1 changed files with 213 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

410
app/src/components/Containers/Me.js
View File

@ -400,195 +400,207 @@ const Me = (props) =>
<React.Fragment> <React.Fragment>
<Tooltip title={micTip} placement='left'> <Tooltip title={micTip} placement='left'>
{ smallContainer ? { smallContainer ?
<IconButton <div>
aria-label={intl.formatMessage({ <IconButton
id : 'device.muteAudio', aria-label={intl.formatMessage({
defaultMessage : 'Mute audio' id : 'device.muteAudio',
})} defaultMessage : 'Mute audio'
className={classes.smallContainer} })}
disabled={!me.canSendMic || me.audioInProgress} className={classes.smallContainer}
color={micState === 'on' ? 'primary' : 'secondary'} disabled={!me.canSendMic || me.audioInProgress}
size='small' color={micState === 'on' ? 'primary' : 'secondary'}
onClick={() => size='small'
{ onClick={() =>
if (micState === 'off') {
roomClient.enableMic(); if (micState === 'off')
else if (micState === 'on') roomClient.enableMic();
roomClient.muteMic(); else if (micState === 'on')
else roomClient.muteMic();
roomClient.unmuteMic(); else
}} roomClient.unmuteMic();
> }}
{ micState === 'on' ? >
<MicIcon /> { micState === 'on' ?
: <MicIcon />
<MicOffIcon /> :
} <MicOffIcon />
</IconButton> }
</IconButton>
</div>
: :
<Fab <div>
aria-label={intl.formatMessage({ <Fab
id : 'device.muteAudio', aria-label={intl.formatMessage({
defaultMessage : 'Mute audio' id : 'device.muteAudio',
})} defaultMessage : 'Mute audio'
className={classes.fab} })}
disabled={!me.canSendMic || me.audioInProgress} className={classes.fab}
color={micState === 'on' ? 'default' : 'secondary'} disabled={!me.canSendMic || me.audioInProgress}
size='large' color={micState === 'on' ? 'default' : 'secondary'}
onClick={() => size='large'
{ onClick={() =>
if (micState === 'off') {
roomClient.enableMic(); if (micState === 'off')
else if (micState === 'on') roomClient.enableMic();
roomClient.muteMic(); else if (micState === 'on')
else roomClient.muteMic();
roomClient.unmuteMic(); else
}} roomClient.unmuteMic();
> }}
{ micState === 'on' ? >
<MicIcon /> { micState === 'on' ?
: <MicIcon />
<MicOffIcon /> :
} <MicOffIcon />
</Fab> }
</Fab>
</div>
} }
</Tooltip> </Tooltip>
<Tooltip title={webcamTip} placement='left'> <Tooltip title={webcamTip} placement='left'>
{ smallContainer ? { smallContainer ?
<IconButton <div>
aria-label={intl.formatMessage({ <IconButton
id : 'device.startVideo', aria-label={intl.formatMessage({
defaultMessage : 'Start video' id : 'device.startVideo',
})} defaultMessage : 'Start video'
className={classes.smallContainer} })}
disabled={!me.canSendWebcam || me.webcamInProgress} className={classes.smallContainer}
color={webcamState === 'on' ? 'primary' : 'secondary'} disabled={!me.canSendWebcam || me.webcamInProgress}
size='small' color={webcamState === 'on' ? 'primary' : 'secondary'}
onClick={() => size='small'
{ onClick={() =>
webcamState === 'on' ? {
roomClient.disableWebcam() : webcamState === 'on' ?
roomClient.enableWebcam(); roomClient.disableWebcam() :
}} roomClient.enableWebcam();
> }}
{ webcamState === 'on' ? >
<VideoIcon /> { webcamState === 'on' ?
: <VideoIcon />
<VideoOffIcon /> :
} <VideoOffIcon />
</IconButton> }
</IconButton>
</div>
: :
<Fab <div>
aria-label={intl.formatMessage({ <Fab
id : 'device.startVideo', aria-label={intl.formatMessage({
defaultMessage : 'Start video' id : 'device.startVideo',
})} defaultMessage : 'Start video'
className={classes.fab} })}
disabled={!me.canSendWebcam || me.webcamInProgress} className={classes.fab}
color={webcamState === 'on' ? 'default' : 'secondary'} disabled={!me.canSendWebcam || me.webcamInProgress}
size='large' color={webcamState === 'on' ? 'default' : 'secondary'}
onClick={() => size='large'
{ onClick={() =>
webcamState === 'on' ? {
roomClient.disableWebcam() : webcamState === 'on' ?
roomClient.enableWebcam(); roomClient.disableWebcam() :
}} roomClient.enableWebcam();
> }}
{ webcamState === 'on' ? >
<VideoIcon /> { webcamState === 'on' ?
: <VideoIcon />
<VideoOffIcon /> :
} <VideoOffIcon />
</Fab> }
</Fab>
</div>
} }
</Tooltip> </Tooltip>
{ me.browser.platform !== 'mobile' && { me.browser.platform !== 'mobile' &&
<Tooltip title={screenTip} placement='left'> <Tooltip title={screenTip} placement='left'>
{ smallContainer ? { smallContainer ?
<IconButton <div>
aria-label={intl.formatMessage({ <IconButton
id : 'device.startScreenSharing', aria-label={intl.formatMessage({
defaultMessage : 'Start screen sharing' id : 'device.startScreenSharing',
})} defaultMessage : 'Start screen sharing'
className={classes.smallContainer} })}
disabled={ className={classes.smallContainer}
!canShareScreen || disabled={
!canShareScreen ||
!me.canShareScreen || !me.canShareScreen ||
me.screenShareInProgress me.screenShareInProgress
}
color='primary'
size='small'
onClick={() =>
{
switch (screenState)
{
case 'on':
{
roomClient.disableScreenSharing();
break;
}
case 'off':
{
roomClient.enableScreenSharing();
break;
}
default:
{
break;
}
} }
}} color='primary'
> size='small'
{ (screenState === 'on' || screenState === 'unsupported') && onClick={() =>
{
switch (screenState)
{
case 'on':
{
roomClient.disableScreenSharing();
break;
}
case 'off':
{
roomClient.enableScreenSharing();
break;
}
default:
{
break;
}
}
}}
>
{ (screenState === 'on' || screenState === 'unsupported') &&
<ScreenOffIcon/> <ScreenOffIcon/>
} }
{ screenState === 'off' && { screenState === 'off' &&
<ScreenIcon/> <ScreenIcon/>
} }
</IconButton> </IconButton>
</div>
: :
<Fab <div>
aria-label={intl.formatMessage({ <Fab
id : 'device.startScreenSharing', aria-label={intl.formatMessage({
defaultMessage : 'Start screen sharing' id : 'device.startScreenSharing',
})} defaultMessage : 'Start screen sharing'
className={classes.fab} })}
disabled={ className={classes.fab}
!canShareScreen || disabled={
!canShareScreen ||
!me.canShareScreen || !me.canShareScreen ||
me.screenShareInProgress me.screenShareInProgress
}
color={screenState === 'on' ? 'primary' : 'default'}
size='large'
onClick={() =>
{
switch (screenState)
{
case 'on':
{
roomClient.disableScreenSharing();
break;
}
case 'off':
{
roomClient.enableScreenSharing();
break;
}
default:
{
break;
}
} }
}} color={screenState === 'on' ? 'primary' : 'default'}
> size='large'
{ (screenState === 'on' || screenState === 'unsupported') && onClick={() =>
{
switch (screenState)
{
case 'on':
{
roomClient.disableScreenSharing();
break;
}
case 'off':
{
roomClient.enableScreenSharing();
break;
}
default:
{
break;
}
}
}}
>
{ (screenState === 'on' || screenState === 'unsupported') &&
<ScreenOffIcon/> <ScreenOffIcon/>
} }
{ screenState === 'off' && { screenState === 'off' &&
<ScreenIcon/> <ScreenIcon/>
} }
</Fab> </Fab>
</div>
} }
</Tooltip> </Tooltip>
} }
@ -692,39 +704,43 @@ const Me = (props) =>
> >
<Tooltip title={webcamTip} placement='left'> <Tooltip title={webcamTip} placement='left'>
{ smallContainer ? { smallContainer ?
<IconButton <div>
aria-label={intl.formatMessage({ <IconButton
id : 'device.stopVideo', aria-label={intl.formatMessage({
defaultMessage : 'Stop video' id : 'device.stopVideo',
})} defaultMessage : 'Stop video'
className={classes.smallContainer} })}
disabled={!me.canSendWebcam || me.webcamInProgress} className={classes.smallContainer}
size='small' disabled={!me.canSendWebcam || me.webcamInProgress}
color='primary' size='small'
onClick={() => color='primary'
{ onClick={() =>
roomClient.disableExtraVideo(producer.id); {
}} roomClient.disableExtraVideo(producer.id);
> }}
<VideoIcon /> >
<VideoIcon />
</IconButton> </IconButton>
</div>
: :
<Fab <div>
aria-label={intl.formatMessage({ <Fab
id : 'device.stopVideo', aria-label={intl.formatMessage({
defaultMessage : 'Stop video' id : 'device.stopVideo',
})} defaultMessage : 'Stop video'
className={classes.fab} })}
disabled={!me.canSendWebcam || me.webcamInProgress} className={classes.fab}
size={smallContainer ? 'small' : 'large'} disabled={!me.canSendWebcam || me.webcamInProgress}
onClick={() => size={smallContainer ? 'small' : 'large'}
{ onClick={() =>
roomClient.disableExtraVideo(producer.id); {
}} roomClient.disableExtraVideo(producer.id);
> }}
<VideoIcon /> >
</Fab> <VideoIcon />
</Fab>
</div>
} }
</Tooltip> </Tooltip>
</div> </div>