From 27896e74e6df489a1b60e0e99b44c005fa4395f0 Mon Sep 17 00:00:00 2001
From: prlanzarin <4529051+prlanzarin@users.noreply.github.com>
Date: Wed, 13 Jul 2022 14:32:48 +0000
Subject: [PATCH] fix(audio): block audio join while gUM isn't resolved (local
 echo)

The new local echo view doesn't block the "Join audio" button while
awaiting for getUserMedia permission to be granted/denied. That may
cause unexpected behavior when unattentive users just click "Join audio"
without granting or denying gUM.

This commit accounts for gUM resolution when deciding whether to block
the "Join audio" button. It also includes an extra "isConnecting" check
to it to avoid spam-clicking issues.
---
 .../audio/audio-settings/component.jsx        | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx b/bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx
index d0e801d7ef..1a2d77f78f 100644
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx
@@ -80,9 +80,9 @@ class AudioSettings extends React.Component {
     this.state = {
       inputDeviceId,
       outputDeviceId,
-      // If streams need to be produced, device selectors are blocked until
-      // at least one stream is generated
-      deviceSelectorsBlocked: props.produceStreams,
+      // If streams need to be produced, device selectors and audio join are
+      // blocked until at least one stream is generated
+      producingStreams: props.produceStreams,
       stream: null,
     };
 
@@ -154,7 +154,7 @@ class AudioSettings extends React.Component {
           // between stream vs chosen device
           inputDeviceId: MediaStreamUtils.extractDeviceIdFromStream(stream, 'audio'),
           stream,
-          deviceSelectorsBlocked: false,
+          producingStreams: false,
         });
       }).catch((error) => {
         logger.warn({
@@ -246,8 +246,9 @@ class AudioSettings extends React.Component {
   }
 
   renderDeviceSelectors() {
-    const { inputDeviceId, outputDeviceId, deviceSelectorsBlocked } = this.state;
-    const { intl } = this.props;
+    const { inputDeviceId, outputDeviceId, producingStreams } = this.state;
+    const { intl, isConnecting } = this.props;
+    const blocked = producingStreams || isConnecting;
 
     return (
       <Styled.Row>
@@ -259,7 +260,7 @@ class AudioSettings extends React.Component {
                 id="inputDeviceSelector"
                 deviceId={inputDeviceId}
                 kind="audioinput"
-                blocked={deviceSelectorsBlocked}
+                blocked={blocked}
                 onChange={this.handleInputChange}
                 intl={intl}
               />
@@ -274,7 +275,7 @@ class AudioSettings extends React.Component {
                 id="outputDeviceSelector"
                 deviceId={outputDeviceId}
                 kind="audiooutput"
-                blocked={deviceSelectorsBlocked}
+                blocked={blocked}
                 onChange={this.handleOutputChange}
                 intl={intl}
               />
@@ -291,6 +292,7 @@ class AudioSettings extends React.Component {
       intl,
       handleBack,
     } = this.props;
+    const { producingStreams } = this.state;
 
     return (
       <Styled.FormWrapper data-test="audioSettingsModal">
@@ -318,6 +320,7 @@ class AudioSettings extends React.Component {
             color="primary"
             label={intl.formatMessage(intlMessages.retryLabel)}
             onClick={this.handleConfirmationClick}
+            disabled={isConnecting || producingStreams}
           />
         </Styled.EnterAudio>
       </Styled.FormWrapper>