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

Move audio/video controls out to bottom of screen if on mobile

Browse Source
This commit is contained in:
Håvar Aambø Fosstveit
2020-03-23 15:30:43 +01:00
parent ec8c347a23
commit 33ef7746a3
7 changed files with 299 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/components/Containers/Me.js
+94 -90
View File
@@ -299,102 +299,106 @@ const Me = (props) =>
defaultMessage='ME'
/>
</p>
<Tooltip title={micTip} placement={smallScreen ? 'top' : 'left'}>
<div>
<Fab
aria-label={intl.formatMessage({
id : 'device.muteAudio',
defaultMessage : 'Mute audio'
})}
className={classes.fab}
disabled={!me.canSendMic || me.audioInProgress}
color={micState === 'on' ? 'default' : 'secondary'}
size={smallButtons ? 'small' : 'large'}
onClick={() =>
{
if (micState === 'off')
roomClient.enableMic();
else if (micState === 'on')
roomClient.muteMic();
else
roomClient.unmuteMic();
}}
>
{ micState === 'on' ?
<MicIcon />
:
<MicOffIcon />
}
</Fab>
</div>
</Tooltip>
<Tooltip title={webcamTip} placement={smallScreen ? 'top' : 'left'}>
<div>
<Fab
aria-label={intl.formatMessage({
id : 'device.startVideo',
defaultMessage : 'Start video'
})}
className={classes.fab}
disabled={!me.canSendWebcam || me.webcamInProgress}
color={webcamState === 'on' ? 'default' : 'secondary'}
size={smallButtons ? 'small' : 'large'}
onClick={() =>
{
webcamState === 'on' ?
roomClient.disableWebcam() :
roomClient.enableWebcam();
}}
>
{ webcamState === 'on' ?
<VideoIcon />
:
<VideoOffIcon />
}
</Fab>
</div>
</Tooltip>
<Tooltip title={screenTip} placement={smallScreen ? 'top' : 'left'}>
<div>
<Fab
aria-label={intl.formatMessage({
id : 'device.startScreenSharing',
defaultMessage : 'Start screen sharing'
})}
className={classes.fab}
disabled={!me.canShareScreen || me.screenShareInProgress}
color={screenState === 'on' ? 'primary' : 'default'}
size={smallButtons ? 'small' : 'large'}
onClick={() =>
{
switch (screenState)
{
case 'on':
{ !me.isMobile &&
<React.Fragment>
<Tooltip title={micTip} placement={smallScreen ? 'top' : 'left'}>
<div>
<Fab
aria-label={intl.formatMessage({
id : 'device.muteAudio',
defaultMessage : 'Mute audio'
})}
className={classes.fab}
disabled={!me.canSendMic || me.audioInProgress}
color={micState === 'on' ? 'default' : 'secondary'}
size={smallButtons ? 'small' : 'large'}
onClick={() =>
{
roomClient.disableScreenSharing();
break;
if (micState === 'off')
roomClient.enableMic();
else if (micState === 'on')
roomClient.muteMic();
else
roomClient.unmuteMic();
}}
>
{ micState === 'on' ?
<MicIcon />
:
<MicOffIcon />
}
case 'off':
</Fab>
</div>
</Tooltip>
<Tooltip title={webcamTip} placement={smallScreen ? 'top' : 'left'}>
<div>
<Fab
aria-label={intl.formatMessage({
id : 'device.startVideo',
defaultMessage : 'Start video'
})}
className={classes.fab}
disabled={!me.canSendWebcam || me.webcamInProgress}
color={webcamState === 'on' ? 'default' : 'secondary'}
size={smallButtons ? 'small' : 'large'}
onClick={() =>
{
roomClient.enableScreenSharing();
break;
webcamState === 'on' ?
roomClient.disableWebcam() :
roomClient.enableWebcam();
}}
>
{ webcamState === 'on' ?
<VideoIcon />
:
<VideoOffIcon />
}
default:
</Fab>
</div>
</Tooltip>
<Tooltip title={screenTip} placement={smallScreen ? 'top' : 'left'}>
<div>
<Fab
aria-label={intl.formatMessage({
id : 'device.startScreenSharing',
defaultMessage : 'Start screen sharing'
})}
className={classes.fab}
disabled={!me.canShareScreen || me.screenShareInProgress}
color={screenState === 'on' ? 'primary' : 'default'}
size={smallButtons ? 'small' : 'large'}
onClick={() =>
{
break;
switch (screenState)
{
case 'on':
{
roomClient.disableScreenSharing();
break;
}
case 'off':
{
roomClient.enableScreenSharing();
break;
}
default:
{
break;
}
}
}}
>
{ (screenState === 'on' || screenState === 'unsupported') &&
<ScreenOffIcon/>
}
}
}}
>
{ (screenState === 'on' || screenState === 'unsupported') &&
<ScreenOffIcon/>
}
{ screenState === 'off' &&
<ScreenIcon/>
}
</Fab>
</div>
</Tooltip>
{ screenState === 'off' &&
<ScreenIcon/>
}
</Fab>
</div>
</Tooltip>
</React.Fragment>
}
</div>
<VideoView
app/src/components/Containers/Peer.js
+8 -4
View File
@@ -121,6 +121,7 @@ const Peer = (props) =>
advancedMode,
peer,
activeSpeaker,
isMobile,
micConsumer,
webcamConsumer,
screenConsumer,
@@ -259,7 +260,7 @@ const Peer = (props) =>
</div>
</Tooltip>
{ !smallScreen &&
{ !isMobile &&
<Tooltip
title={intl.formatMessage({
id : 'label.newWindow',
@@ -407,7 +408,7 @@ const Peer = (props) =>
}, 2000);
}}
>
{ !smallScreen &&
{ !isMobile &&
<Tooltip
title={intl.formatMessage({
id : 'label.newWindow',
@@ -507,6 +508,7 @@ Peer.propTypes =
screenConsumer : appPropTypes.Consumer,
windowConsumer : PropTypes.string,
activeSpeaker : PropTypes.bool,
isMobile : PropTypes.bool,
spacing : PropTypes.number,
style : PropTypes.object,
smallButtons : PropTypes.bool,
@@ -526,7 +528,8 @@ const makeMapStateToProps = (initialState, { id }) =>
peer : state.peers[id],
...getPeerConsumers(state, id),
windowConsumer : state.room.windowConsumer,
activeSpeaker : id === state.room.activeSpeakerId
activeSpeaker : id === state.room.activeSpeakerId,
isMobile : state.me.isMobile
};
};
@@ -560,7 +563,8 @@ export default withRoomContext(connect(
prev.peers === next.peers &&
prev.consumers === next.consumers &&
prev.room.activeSpeakerId === next.room.activeSpeakerId &&
prev.room.windowConsumer === next.room.windowConsumer
prev.room.windowConsumer === next.room.windowConsumer &&
prev.me.isMobile === next.me.isMobile
);
}
}