BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(audio): block audio join while gUM isn't resolved (local echo)

Browse Source 
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.
This commit is contained in:
prlanzarin 2022-07-13 14:32:48 +00:00
parent 7b76d2e88f
commit 27896e74e6
1 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx
View File

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