feat(prejoin_page) Add settings buttons

This reverts commit faf24ca7ec.

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

@@ -72,6 +72,7 @@ import {
     setToolbarHovered
 } from '../../actions';
 import AudioMuteButton from '../AudioMuteButton';
+import AudioSettingsButton from './AudioSettingsButton';
 import DownloadButton from '../DownloadButton';
 import { isToolboxVisible } from '../../functions';
 import HangupButton from '../HangupButton';
@@ -81,6 +82,7 @@ import OverflowMenuProfileItem from './OverflowMenuProfileItem';
 import MuteEveryoneButton from './MuteEveryoneButton';
 import ToolbarButton from './ToolbarButton';
 import VideoMuteButton from '../VideoMuteButton';
+import VideoSettingsButton from './VideoSettingsButton';
 import {
     ClosedCaptionButton
 } from '../../../subtitles';
@@ -126,6 +128,11 @@ type Props = {
      */
     _fullScreen: boolean,
 
+    /**
+     * Whether or not the prejoin page is enabled.
+     */
+    _prejoinPageEnabled: boolean,
+
     /**
      * Whether or not the tile view is enabled.
      */
@@ -1116,6 +1123,40 @@ class Toolbox extends Component<Props, State> {
         });
     }
 
+    /**
+     * Renders the Audio controlling button.
+     *
+     * @returns {ReactElement}
+     */
+    _renderAudioButton() {
+        return this._shouldShowButton('microphone')
+            ? this.props._prejoinPageEnabled
+                ? <AudioSettingsButton
+                    key = 'asb'
+                    visible = { true } />
+                : <AudioMuteButton
+                    key = 'amb'
+                    visible = { true } />
+            : null;
+    }
+
+    /**
+     * Renders the Video controlling button.
+     *
+     * @returns {ReactElement}
+     */
+    _renderVideoButton() {
+        return this._shouldShowButton('camera')
+            ? this.props._prejoinPageEnabled
+                ? <VideoSettingsButton
+                    key = 'vsb'
+                    visible = { true } />
+                : <VideoMuteButton
+                    key = 'vmb'
+                    visible = { true } />
+            : null;
+    }
+
     /**
      * Renders the toolbox content.
      *
@@ -1234,12 +1275,10 @@ class Toolbox extends Component<Props, State> {
                     }
                 </div>
                 <div className = 'button-group-center'>
-                    <AudioMuteButton
-                        visible = { this._shouldShowButton('microphone') } />
+                    { this._renderAudioButton() }
                     <HangupButton
                         visible = { this._shouldShowButton('hangup') } />
-                    <VideoMuteButton
-                        visible = { this._shouldShowButton('camera') } />
+                    { this._renderVideoButton() }
                 </div>
                 <div className = 'button-group-right'>
                     { buttonsRight.indexOf('localrecording') !== -1
@@ -1303,7 +1342,9 @@ function _mapStateToProps(state) {
     let { desktopSharingEnabled } = state['features/base/conference'];
     const {
         callStatsID,
-        iAmRecorder
+        enableFeaturesBasedOnToken,
+        iAmRecorder,
+        prejoinPageEnabled
     } = state['features/base/config'];
     const sharedVideoStatus = state['features/shared-video'].status;
     const {
@@ -1318,7 +1359,7 @@ function _mapStateToProps(state) {
 
     let desktopSharingDisabledTooltipKey;
 
-    if (state['features/base/config'].enableFeaturesBasedOnToken) {
+    if (enableFeaturesBasedOnToken) {
         // we enable desktop sharing if any participant already have this
         // feature enabled
         desktopSharingEnabled = getParticipants(state)
@@ -1354,6 +1395,7 @@ function _mapStateToProps(state) {
         _localParticipantID: localParticipant.id,
         _localRecState: localRecordingStates,
         _overflowMenuVisible: overflowMenuVisible,
+        _prejoinPageEnabled: prejoinPageEnabled,
         _raisedHand: localParticipant.raisedHand,
         _screensharing: localVideo && localVideo.videoType === 'desktop',
         _sharingVideo: sharedVideoStatus === 'playing'