feat(prejoin_page): Add prejoin page

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

@@ -3,7 +3,7 @@
 import React, { Component } from 'react';
 
 import AudioMuteButton from '../AudioMuteButton';
-import { hasAvailableDevices } from '../../../base/devices';
+import { isAudioSettingsButtonDisabled } from '../../functions';
 import { IconArrowDown } from '../../../base/icons';
 import JitsiMeetJS from '../../../base/lib-jitsi-meet/_';
 import { ToolboxButtonWithIcon } from '../../../base/toolbox';
@@ -25,9 +25,9 @@ type Props = {
     permissionPromptVisibility: boolean,
 
     /**
-     * If the user has audio input or audio output devices.
+     * If the button should be disabled.
      */
-    hasDevices: boolean,
+    isDisabled: boolean,
 
     /**
      * Flag controlling the visibility of the button.
@@ -49,6 +49,8 @@ type State = {
  * @returns {ReactElement}
  */
 class AudioSettingsButton extends Component<Props, State> {
+    _isMounted: boolean;
+
     /**
      * Initializes a new {@code AudioSettingsButton} instance.
      *
@@ -58,6 +60,7 @@ class AudioSettingsButton extends Component<Props, State> {
     constructor(props) {
         super(props);
 
+        this._isMounted = true;
         this.state = {
             hasPermissions: false
         };
@@ -73,7 +76,7 @@ class AudioSettingsButton extends Component<Props, State> {
             'audio',
         );
 
-        this.setState({
+        this._isMounted && this.setState({
             hasPermissions
         });
     }
@@ -98,14 +101,23 @@ class AudioSettingsButton extends Component<Props, State> {
         }
     }
 
+    /**
+     * Implements React's {@link Component#componentWillUnmount}.
+     *
+     * @inheritdoc
+     */
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+
     /**
      * Implements React's {@link Component#render}.
      *
      * @inheritdoc
      */
     render() {
-        const { hasDevices, onAudioOptionsClick, visible } = this.props;
-        const settingsDisabled = !this.state.hasPermissions || !hasDevices;
+        const { isDisabled, onAudioOptionsClick, visible } = this.props;
+        const settingsDisabled = !this.state.hasPermissions || isDisabled;
 
         return visible ? (
             <AudioSettingsPopup>
@@ -128,9 +140,7 @@ class AudioSettingsButton extends Component<Props, State> {
  */
 function mapStateToProps(state) {
     return {
-        hasDevices:
-            hasAvailableDevices(state, 'audioInput')
-            || hasAvailableDevices(state, 'audioOutput'),
+        isDisabled: isAudioSettingsButtonDisabled(state),
         permissionPromptVisibility: getMediaPermissionPromptVisibility(state)
     };
 }

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

@@ -1,11 +1,10 @@
 // @flow
 
 import React, { Component } from 'react';
-
+import { isVideoSettingsButtonDisabled } from '../../functions';
 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';
@@ -25,9 +24,9 @@ type Props = {
     permissionPromptVisibility: boolean,
 
     /**
-     * If the user has any video devices.
+     * If the button should be disabled
      */
-    hasDevices: boolean,
+    isDisabled: boolean,
 
     /**
      * Flag controlling the visibility of the button.
@@ -49,6 +48,8 @@ type State = {
  * @returns {ReactElement}
  */
 class VideoSettingsButton extends Component<Props, State> {
+    _isMounted: boolean;
+
     /**
      * Initializes a new {@code VideoSettingsButton} instance.
      *
@@ -58,6 +59,7 @@ class VideoSettingsButton extends Component<Props, State> {
     constructor(props) {
         super(props);
 
+        this._isMounted = true;
         this.state = {
             hasPermissions: false
         };
@@ -73,7 +75,7 @@ class VideoSettingsButton extends Component<Props, State> {
             'video',
         );
 
-        this.setState({
+        this._isMounted && this.setState({
             hasPermissions
         });
     }
@@ -98,14 +100,23 @@ class VideoSettingsButton extends Component<Props, State> {
         }
     }
 
+    /**
+     * Implements React's {@link Component#componentWillUnmount}.
+     *
+     * @inheritdoc
+     */
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+
     /**
      * Implements React's {@link Component#render}.
      *
      * @inheritdoc
      */
     render() {
-        const { hasDevices, onVideoOptionsClick, visible } = this.props;
-        const iconDisabled = !this.state.hasPermissions || !hasDevices;
+        const { isDisabled, onVideoOptionsClick, visible } = this.props;
+        const iconDisabled = !this.state.hasPermissions || isDisabled;
 
         return visible ? (
             <VideoSettingsPopup>
@@ -128,7 +139,7 @@ class VideoSettingsButton extends Component<Props, State> {
  */
 function mapStateToProps(state) {
     return {
-        hasDevices: hasAvailableDevices(state, 'videoInput'),
+        isDisabled: isVideoSettingsButtonDisabled(state),
         permissionPromptVisibility: getMediaPermissionPromptVisibility(state)
     };
 }

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

@@ -1,2 +1,4 @@
+export { default as AudioSettingsButton } from './AudioSettingsButton';
+export { default as VideoSettingsButton } from './VideoSettingsButton';
 export { default as ToolbarButton } from './ToolbarButton';
 export { default as Toolbox } from './Toolbox';