fix: disable audio/video settings popup on mobile browsers

Mobile devices do not support capture from multiple cameras/mics at a time.

react/features/toolbox/components/web/AudioSettingsButton.js

@@ -2,6 +2,7 @@
 
 import React, { Component } from 'react';
 
+import { isMobileBrowser } from '../../../base/environment/utils';
 import { IconArrowDown } from '../../../base/icons';
 import JitsiMeetJS from '../../../base/lib-jitsi-meet/_';
 import { connect } from '../../../base/redux';
@@ -31,6 +32,7 @@ type Props = {
 
     /**
      * Flag controlling the visibility of the button.
+     * AudioSettings popup is disabled on mobile browsers.
      */
     visible: boolean,
 };
@@ -130,7 +132,7 @@ class AudioSettingsButton extends Component<Props, State> {
                     <AudioMuteButton />
                 </ToolboxButtonWithIcon>
             </AudioSettingsPopup>
-        ) : null;
+        ) : <AudioMuteButton />;
     }
 }
 
@@ -143,7 +145,8 @@ class AudioSettingsButton extends Component<Props, State> {
 function mapStateToProps(state) {
     return {
         isDisabled: isAudioSettingsButtonDisabled(state),
-        permissionPromptVisibility: getMediaPermissionPromptVisibility(state)
+        permissionPromptVisibility: getMediaPermissionPromptVisibility(state),
+        visible: !isMobileBrowser()
     };
 }
 

react/features/toolbox/components/web/VideoSettingsButton.js

@@ -2,6 +2,7 @@
 
 import React, { Component } from 'react';
 
+import { isMobileBrowser } from '../../../base/environment/utils';
 import { IconArrowDown } from '../../../base/icons';
 import JitsiMeetJS from '../../../base/lib-jitsi-meet/_';
 import { connect } from '../../../base/redux';
@@ -37,6 +38,9 @@ type Props = {
 
     /**
      * Flag controlling the visibility of the button.
+     * VideoSettings popup is currently disabled on mobile browsers
+     * as mobile devices do not support capture of more than one
+     * camera at a time.
      */
     visible: boolean,
 };
@@ -144,7 +148,7 @@ class VideoSettingsButton extends Component<Props, State> {
                     <VideoMuteButton />
                 </ToolboxButtonWithIcon>
             </VideoSettingsPopup>
-        ) : null;
+        ) : <VideoMuteButton />;
     }
 }
 
@@ -158,7 +162,8 @@ function mapStateToProps(state) {
     return {
         hasVideoTrack: Boolean(getLocalJitsiVideoTrack(state)),
         isDisabled: isVideoSettingsButtonDisabled(state),
-        permissionPromptVisibility: getMediaPermissionPromptVisibility(state)
+        permissionPromptVisibility: getMediaPermissionPromptVisibility(state),
+        visible: !isMobileBrowser()
     };
 }