feat(prejoin_page) Add settings buttons

This reverts commit faf24ca7ec.

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

@@ -0,0 +1,127 @@
+// @flow
+
+import React, { Component } from 'react';
+
+import AudioMuteButton from '../AudioMuteButton';
+import { hasAvailableDevices } from '../../../base/devices';
+import { IconArrowDown } from '../../../base/icons';
+import JitsiMeetJS from '../../../base/lib-jitsi-meet/_';
+import { ToolboxButtonWithIcon } from '../../../base/toolbox';
+import { connect } from '../../../base/redux';
+
+import { AudioSettingsPopup, toggleAudioSettings } from '../../../settings';
+
+type Props = {
+
+    /**
+     * Click handler for the small icon. Opens audio options.
+     */
+    onAudioOptionsClick: Function,
+
+    /**
+     * If the user has audio input or audio output devices.
+     */
+    hasDevices: boolean,
+
+    /**
+     * Flag controlling the visibility of the button.
+     */
+    visible: boolean,
+};
+
+type State = {
+
+    /**
+     * If there are permissions for audio devices.
+     */
+    hasPermissions: boolean,
+}
+
+/**
+ * Button used for audio & audio settings.
+ *
+ * @returns {ReactElement}
+ */
+class AudioSettingsButton extends Component<Props, State> {
+    /**
+     * Initializes a new {@code AudioSettingsButton} instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            hasPermissions: false
+        };
+    }
+
+    /**
+     * Updates device permissions.
+     *
+     * @returns {Promise<void>}
+     */
+    async _updatePermissions() {
+        const hasPermissions = await JitsiMeetJS.mediaDevices.isDevicePermissionGranted(
+            'audio',
+        );
+
+        this.setState({
+            hasPermissions
+        });
+    }
+
+    /**
+     * Implements React's {@link Component#componentDidMount}.
+     *
+     * @inheritdoc
+     */
+    componentDidMount() {
+        this._updatePermissions();
+    }
+
+    /**
+     * Implements React's {@link Component#render}.
+     *
+     * @inheritdoc
+     */
+    render() {
+        const { hasDevices, onAudioOptionsClick, visible } = this.props;
+        const settingsDisabled = !this.state.hasPermissions || !hasDevices;
+
+        return visible ? (
+            <AudioSettingsPopup>
+                <ToolboxButtonWithIcon
+                    icon = { IconArrowDown }
+                    iconDisabled = { settingsDisabled }
+                    onIconClick = { onAudioOptionsClick }>
+                    <AudioMuteButton />
+                </ToolboxButtonWithIcon>
+            </AudioSettingsPopup>
+        ) : null;
+    }
+}
+
+/**
+ * Function that maps parts of Redux state tree into component props.
+ *
+ * @param {Object} state - Redux state.
+ * @returns {Object}
+ */
+function mapStateToProps(state) {
+    return {
+        hasDevices:
+            hasAvailableDevices(state, 'audioInput')
+            || hasAvailableDevices(state, 'audioOutput')
+    };
+}
+
+const mapDispatchToProps = {
+    onAudioOptionsClick: toggleAudioSettings
+};
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(AudioSettingsButton);

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'

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

@@ -0,0 +1,124 @@
+// @flow
+
+import React, { Component } from 'react';
+
+import { toggleVideoSettings, VideoSettingsPopup } from '../../../settings';
+import VideoMuteButton from '../VideoMuteButton';
+import JitsiMeetJS from '../../../base/lib-jitsi-meet/_';
+import { hasAvailableDevices } from '../../../base/devices';
+import { IconArrowDown } from '../../../base/icons';
+import { connect } from '../../../base/redux';
+import { ToolboxButtonWithIcon } from '../../../base/toolbox';
+
+type Props = {
+
+    /**
+     * Click handler for the small icon. Opens video options.
+     */
+    onVideoOptionsClick: Function,
+
+    /**
+     * If the user has any video devices.
+     */
+    hasDevices: boolean,
+
+    /**
+     * Flag controlling the visibility of the button.
+     */
+    visible: boolean,
+};
+
+type State = {
+
+    /**
+     * Whether the app has video permissions or not.
+     */
+    hasPermissions: boolean,
+};
+
+/**
+ * Button used for video & video settings.
+ *
+ * @returns {ReactElement}
+ */
+class VideoSettingsButton extends Component<Props, State> {
+    /**
+     * Initializes a new {@code VideoSettingsButton} instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            hasPermissions: false
+        };
+    }
+
+    /**
+     * Updates device permissions.
+     *
+     * @returns {Promise<void>}
+     */
+    async _updatePermissions() {
+        const hasPermissions = await JitsiMeetJS.mediaDevices.isDevicePermissionGranted(
+            'video',
+        );
+
+        this.setState({
+            hasPermissions
+        });
+    }
+
+    /**
+     * Implements React's {@link Component#componentDidMount}.
+     *
+     * @inheritdoc
+     */
+    componentDidMount() {
+        this._updatePermissions();
+    }
+
+    /**
+     * Implements React's {@link Component#render}.
+     *
+     * @inheritdoc
+     */
+    render() {
+        const { hasDevices, onVideoOptionsClick, visible } = this.props;
+        const iconDisabled = !this.state.hasPermissions || !hasDevices;
+
+        return visible ? (
+            <VideoSettingsPopup>
+                <ToolboxButtonWithIcon
+                    icon = { IconArrowDown }
+                    iconDisabled = { iconDisabled }
+                    onIconClick = { onVideoOptionsClick }>
+                    <VideoMuteButton />
+                </ToolboxButtonWithIcon>
+            </VideoSettingsPopup>
+        ) : null;
+    }
+}
+
+/**
+ * Function that maps parts of Redux state tree into component props.
+ *
+ * @param {Object} state - Redux state.
+ * @returns {Object}
+ */
+function mapStateToProps(state) {
+    return {
+        hasDevices: hasAvailableDevices(state, 'videoInput')
+    };
+}
+
+const mapDispatchToProps = {
+    onVideoOptionsClick: toggleVideoSettings
+};
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(VideoSettingsButton);