diff --git a/app/src/components/Containers/Me.js b/app/src/components/Containers/Me.js index ea6e9e0..8d45473 100644 --- a/app/src/components/Containers/Me.js +++ b/app/src/components/Containers/Me.js @@ -400,195 +400,207 @@ const Me = (props) => { smallContainer ? - - { - if (micState === 'off') - roomClient.enableMic(); - else if (micState === 'on') - roomClient.muteMic(); - else - roomClient.unmuteMic(); - }} - > - { micState === 'on' ? - - : - - } - +
+ + { + if (micState === 'off') + roomClient.enableMic(); + else if (micState === 'on') + roomClient.muteMic(); + else + roomClient.unmuteMic(); + }} + > + { micState === 'on' ? + + : + + } + +
: - - { - if (micState === 'off') - roomClient.enableMic(); - else if (micState === 'on') - roomClient.muteMic(); - else - roomClient.unmuteMic(); - }} - > - { micState === 'on' ? - - : - - } - +
+ + { + if (micState === 'off') + roomClient.enableMic(); + else if (micState === 'on') + roomClient.muteMic(); + else + roomClient.unmuteMic(); + }} + > + { micState === 'on' ? + + : + + } + +
}
{ smallContainer ? - - { - webcamState === 'on' ? - roomClient.disableWebcam() : - roomClient.enableWebcam(); - }} - > - { webcamState === 'on' ? - - : - - } - +
+ + { + webcamState === 'on' ? + roomClient.disableWebcam() : + roomClient.enableWebcam(); + }} + > + { webcamState === 'on' ? + + : + + } + +
: - - { - webcamState === 'on' ? - roomClient.disableWebcam() : - roomClient.enableWebcam(); - }} - > - { webcamState === 'on' ? - - : - - } - +
+ + { + webcamState === 'on' ? + roomClient.disableWebcam() : + roomClient.enableWebcam(); + }} + > + { webcamState === 'on' ? + + : + + } + +
}
{ me.browser.platform !== 'mobile' && { smallContainer ? - + - { - switch (screenState) - { - case 'on': - { - roomClient.disableScreenSharing(); - break; - } - case 'off': - { - roomClient.enableScreenSharing(); - break; - } - default: - { - break; - } } - }} - > - { (screenState === 'on' || screenState === 'unsupported') && + color='primary' + size='small' + onClick={() => + { + switch (screenState) + { + case 'on': + { + roomClient.disableScreenSharing(); + break; + } + case 'off': + { + roomClient.enableScreenSharing(); + break; + } + default: + { + break; + } + } + }} + > + { (screenState === 'on' || screenState === 'unsupported') && - } - { screenState === 'off' && + } + { screenState === 'off' && - } + } - + + : - + - { - switch (screenState) - { - case 'on': - { - roomClient.disableScreenSharing(); - break; - } - case 'off': - { - roomClient.enableScreenSharing(); - break; - } - default: - { - break; - } } - }} - > - { (screenState === 'on' || screenState === 'unsupported') && + color={screenState === 'on' ? 'primary' : 'default'} + size='large' + onClick={() => + { + switch (screenState) + { + case 'on': + { + roomClient.disableScreenSharing(); + break; + } + case 'off': + { + roomClient.enableScreenSharing(); + break; + } + default: + { + break; + } + } + }} + > + { (screenState === 'on' || screenState === 'unsupported') && - } - { screenState === 'off' && + } + { screenState === 'off' && - } - + } + + } } @@ -692,39 +704,43 @@ const Me = (props) => > { smallContainer ? - - { - roomClient.disableExtraVideo(producer.id); - }} - > - +
+ + { + roomClient.disableExtraVideo(producer.id); + }} + > + - + +
: - - { - roomClient.disableExtraVideo(producer.id); - }} - > - - +
+ + { + roomClient.disableExtraVideo(producer.id); + }} + > + + +
}