settings: enable settings buttons on permission grant

Some CSS fixes are also included.

css/_audio-preview.css

@@ -13,6 +13,7 @@
         padding: 16px;
 
         &-icon {
+            color: #A4B8D1;
             display: inline-block;
         }
 
@@ -66,6 +67,10 @@
             .audio-preview-test-button {
                 display: inline-block;
             }
+
+            .audio-preview-entry-text {
+                max-width: 196px;
+            }
         }
 
         .audio-preview-entry-text {

css/_video-preview.css

@@ -1,4 +1,5 @@
 .video-preview {
+    background: none;
     max-height: 290px;
     overflow: auto;
 

react/features/overlay/functions.js

@@ -21,3 +21,13 @@ export function getOverlayToRender(state: Object) {
 
     return undefined;
 }
+
+/**
+ * Returns the visibility of the media permissions prompt.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {boolean}
+ */
+export function getMediaPermissionPromptVisibility(state: Object) {
+    return state['features/overlay'].isMediaPermissionPromptVisible;
+}

react/features/settings/actionTypes.js

@@ -1,4 +1,6 @@
-// The type of (redux) action which sets the visibility of the audio settings popup.
+/**
+ * The type of (redux) action which sets the visibility of the audio settings popup.
+ */
 export const SET_AUDIO_SETTINGS_VISIBILITY = 'SET_AUDIO_SETTINGS_VISIBILITY';
 
 /**
@@ -12,5 +14,7 @@ export const SET_AUDIO_SETTINGS_VISIBILITY = 'SET_AUDIO_SETTINGS_VISIBILITY';
  */
 export const SET_SETTINGS_VIEW_VISIBLE = 'SET_SETTINGS_VIEW_VISIBLE';
 
-// The type of (redux) action which sets the visibility of the video settings popup.
+/**
+ * The type of (redux) action which sets the visibility of the video settings popup.
+ */
 export const SET_VIDEO_SETTINGS_VISIBILITY = 'SET_VIDEO_SETTINGS_VISIBILITY';

react/features/settings/components/web/audio/AudioSettingsHeader.js

@@ -29,7 +29,6 @@ export default function AudioSettingsHeader({ IconComponent, text }: Props) {
         <div className = 'audio-preview-header'>
             <div className = 'audio-preview-header-icon'>
                 { <Icon
-                    color = '#A4B8D1'
                     size = { 24 }
                     src = { IconComponent } />}
             </div>

react/features/settings/components/web/audio/MicrophoneEntry.js

@@ -107,9 +107,7 @@ export default class MicrophoneEntry extends Component<Props, State> {
      * @returns {void}
      */
     _stopListening(jitsiTrack) {
-        jitsiTrack && jitsiTrack.off(
-            JitsiTrackEvents.TRACK_AUDIO_LEVEL_CHANGED,
-            this._updateLevel);
+        jitsiTrack && jitsiTrack.off(JitsiTrackEvents.TRACK_AUDIO_LEVEL_CHANGED, this._updateLevel);
         this.setState({
             level: -1
         });

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

@@ -8,7 +8,7 @@ import { IconArrowDown } from '../../../base/icons';
 import JitsiMeetJS from '../../../base/lib-jitsi-meet/_';
 import { ToolboxButtonWithIcon } from '../../../base/toolbox';
 import { connect } from '../../../base/redux';
-
+import { getMediaPermissionPromptVisibility } from '../../../overlay';
 import { AudioSettingsPopup, toggleAudioSettings } from '../../../settings';
 
 type Props = {
@@ -18,6 +18,12 @@ type Props = {
      */
     onAudioOptionsClick: Function,
 
+    /**
+     * Whether the permission prompt is visible or not.
+     * Useful for enabling the button on permission grant.
+     */
+    permissionPromptVisibility: boolean,
+
     /**
      * If the user has audio input or audio output devices.
      */
@@ -81,6 +87,17 @@ class AudioSettingsButton extends Component<Props, State> {
         this._updatePermissions();
     }
 
+    /**
+     * Implements React's {@link Component#componentDidUpdate}.
+     *
+     * @inheritdoc
+     */
+    componentDidUpdate(prevProps) {
+        if (this.props.permissionPromptVisibility !== prevProps.permissionPromptVisibility) {
+            this._updatePermissions();
+        }
+    }
+
     /**
      * Implements React's {@link Component#render}.
      *
@@ -113,7 +130,8 @@ function mapStateToProps(state) {
     return {
         hasDevices:
             hasAvailableDevices(state, 'audioInput')
-            || hasAvailableDevices(state, 'audioOutput')
+            || hasAvailableDevices(state, 'audioOutput'),
+        permissionPromptVisibility: getMediaPermissionPromptVisibility(state)
     };
 }
 

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

@@ -9,6 +9,7 @@ import { hasAvailableDevices } from '../../../base/devices';
 import { IconArrowDown } from '../../../base/icons';
 import { connect } from '../../../base/redux';
 import { ToolboxButtonWithIcon } from '../../../base/toolbox';
+import { getMediaPermissionPromptVisibility } from '../../../overlay';
 
 type Props = {
 
@@ -17,6 +18,12 @@ type Props = {
      */
     onVideoOptionsClick: Function,
 
+    /**
+     * Whether the permission prompt is visible or not.
+     * Useful for enabling the button on initial permission grant.
+     */
+    permissionPromptVisibility: boolean,
+
     /**
      * If the user has any video devices.
      */
@@ -80,6 +87,17 @@ class VideoSettingsButton extends Component<Props, State> {
         this._updatePermissions();
     }
 
+    /**
+     * Implements React's {@link Component#componentDidUpdate}.
+     *
+     * @inheritdoc
+     */
+    componentDidUpdate(prevProps) {
+        if (this.props.permissionPromptVisibility !== prevProps.permissionPromptVisibility) {
+            this._updatePermissions();
+        }
+    }
+
     /**
      * Implements React's {@link Component#render}.
      *
@@ -110,7 +128,8 @@ class VideoSettingsButton extends Component<Props, State> {
  */
 function mapStateToProps(state) {
     return {
-        hasDevices: hasAvailableDevices(state, 'videoInput')
+        hasDevices: hasAvailableDevices(state, 'videoInput'),
+        permissionPromptVisibility: getMediaPermissionPromptVisibility(state)
     };
 }