From 84714ba3bd4c805874d1931d8fa2034cd57048c6 Mon Sep 17 00:00:00 2001 From: vp8x8 <37841821+vp8x8@users.noreply.github.com> Date: Tue, 7 Apr 2020 10:14:23 +0300 Subject: [PATCH] settings: enable settings buttons on permission grant Some CSS fixes are also included. --- css/_audio-preview.css | 5 +++++ css/_video-preview.css | 1 + react/features/overlay/functions.js | 10 +++++++++ react/features/settings/actionTypes.js | 8 +++++-- .../web/audio/AudioSettingsHeader.js | 1 - .../components/web/audio/MicrophoneEntry.js | 4 +--- .../components/web/AudioSettingsButton.js | 22 +++++++++++++++++-- .../components/web/VideoSettingsButton.js | 21 +++++++++++++++++- 8 files changed, 63 insertions(+), 9 deletions(-) diff --git a/css/_audio-preview.css b/css/_audio-preview.css index c6a31e5b4..e33cbbf7a 100644 --- a/css/_audio-preview.css +++ b/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 { diff --git a/css/_video-preview.css b/css/_video-preview.css index 084714dbb..e770d20c3 100644 --- a/css/_video-preview.css +++ b/css/_video-preview.css @@ -1,4 +1,5 @@ .video-preview { + background: none; max-height: 290px; overflow: auto; diff --git a/react/features/overlay/functions.js b/react/features/overlay/functions.js index 704aada97..ea1fb1f8a 100644 --- a/react/features/overlay/functions.js +++ b/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; +} diff --git a/react/features/settings/actionTypes.js b/react/features/settings/actionTypes.js index 58ed9c3c8..6766a437b 100644 --- a/react/features/settings/actionTypes.js +++ b/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'; diff --git a/react/features/settings/components/web/audio/AudioSettingsHeader.js b/react/features/settings/components/web/audio/AudioSettingsHeader.js index 105853ae9..7119e7ed1 100644 --- a/react/features/settings/components/web/audio/AudioSettingsHeader.js +++ b/react/features/settings/components/web/audio/AudioSettingsHeader.js @@ -29,7 +29,6 @@ export default function AudioSettingsHeader({ IconComponent, text }: Props) {
{ }
diff --git a/react/features/settings/components/web/audio/MicrophoneEntry.js b/react/features/settings/components/web/audio/MicrophoneEntry.js index 5b4f54824..56b689131 100644 --- a/react/features/settings/components/web/audio/MicrophoneEntry.js +++ b/react/features/settings/components/web/audio/MicrophoneEntry.js @@ -107,9 +107,7 @@ export default class MicrophoneEntry extends Component { * @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 }); diff --git a/react/features/toolbox/components/web/AudioSettingsButton.js b/react/features/toolbox/components/web/AudioSettingsButton.js index 4c29f804e..291e0cc91 100644 --- a/react/features/toolbox/components/web/AudioSettingsButton.js +++ b/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 { 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) }; } diff --git a/react/features/toolbox/components/web/VideoSettingsButton.js b/react/features/toolbox/components/web/VideoSettingsButton.js index b6b494106..ed105f300 100644 --- a/react/features/toolbox/components/web/VideoSettingsButton.js +++ b/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 { 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 { */ function mapStateToProps(state) { return { - hasDevices: hasAvailableDevices(state, 'videoInput') + hasDevices: hasAvailableDevices(state, 'videoInput'), + permissionPromptVisibility: getMediaPermissionPromptVisibility(state) }; }