{ 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'
diff --git a/react/features/toolbox/components/web/VideoSettingsButton.js b/react/features/toolbox/components/web/VideoSettingsButton.js
new file mode 100644
index 0000000000..b6b4941066
--- /dev/null
+++ b/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
{
+ /**
+ * 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}
+ */
+ 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 ? (
+
+
+
+
+
+ ) : 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);
diff --git a/react/features/toolbox/functions.web.js b/react/features/toolbox/functions.web.js
index cbbd855a0c..145abbed81 100644
--- a/react/features/toolbox/functions.web.js
+++ b/react/features/toolbox/functions.web.js
@@ -40,6 +40,8 @@ export function isToolboxVisible(state: Object) {
timeoutID,
visible
} = state['features/toolbox'];
+ const { audioSettingsVisible, videoSettingsVisible } = state['features/settings'];
- return Boolean(!iAmSipGateway && (timeoutID || visible || alwaysVisible));
+ return Boolean(!iAmSipGateway && (timeoutID || visible || alwaysVisible
+ || audioSettingsVisible || videoSettingsVisible));
}