f55bd7b114
I/O device IDs are logged in some specific logCodes, but they aren't too useful on their own without the rest of the MediaDeviceInfo object. We need that extra data (label, group) to be able to better investigate incorrect device issues and NotFoundError occurrences. Register full I/O device info whenever the client fetches them and add those, unfiltered, to the following logCodes: - audiomanager_error_getting_device - audiomanager_error_device_not_found - audiomanager_error_unknown - audio_joined - audio_ended - audio_failure - audiomanager_input_live_device_change_failure - audiomanager_output_device_change_failure
725 lines
21 KiB
JavaScript
Executable File
725 lines
21 KiB
JavaScript
Executable File
import React, {
|
|
useCallback,
|
|
useEffect,
|
|
useState,
|
|
} from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import {
|
|
defineMessages, injectIntl, FormattedMessage,
|
|
} from 'react-intl';
|
|
import { useMutation } from '@apollo/client';
|
|
import Styled from './styles';
|
|
import AudioSettings from '../audio-settings/component';
|
|
import EchoTest from '../echo-test/component';
|
|
import Help from '../help/component';
|
|
import AudioDial from '../audio-dial/component';
|
|
import AudioAutoplayPrompt from '../autoplay/component';
|
|
import { getSettingsSingletonInstance } from '/imports/ui/services/settings';
|
|
import usePreviousValue from '/imports/ui/hooks/usePreviousValue';
|
|
import { SET_AWAY } from '/imports/ui/components/user-list/user-list-content/user-participants/user-list-participants/user-actions/mutations';
|
|
import VideoService from '/imports/ui/components/video-provider/service';
|
|
import AudioCaptionsSelectContainer from '../audio-graphql/audio-captions/captions/component';
|
|
import useToggleVoice from '/imports/ui/components/audio/audio-graphql/hooks/useToggleVoice';
|
|
import {
|
|
muteAway,
|
|
} from '/imports/ui/components/audio/audio-graphql/audio-controls/input-stream-live-selector/service';
|
|
import Session from '/imports/ui/services/storage/in-memory';
|
|
import logger from '/imports/startup/client/logger';
|
|
|
|
const propTypes = {
|
|
intl: PropTypes.shape({
|
|
formatMessage: PropTypes.func.isRequired,
|
|
}).isRequired,
|
|
closeModal: PropTypes.func.isRequired,
|
|
joinMicrophone: PropTypes.func.isRequired,
|
|
joinListenOnly: PropTypes.func.isRequired,
|
|
joinEchoTest: PropTypes.func.isRequired,
|
|
exitAudio: PropTypes.func.isRequired,
|
|
leaveEchoTest: PropTypes.func.isRequired,
|
|
changeInputDevice: PropTypes.func.isRequired,
|
|
changeOutputDevice: PropTypes.func.isRequired,
|
|
updateInputDevices: PropTypes.func.isRequired,
|
|
updateOutputDevices: PropTypes.func.isRequired,
|
|
isEchoTest: PropTypes.bool.isRequired,
|
|
isConnecting: PropTypes.bool.isRequired,
|
|
isConnected: PropTypes.bool.isRequired,
|
|
isUsingAudio: PropTypes.bool.isRequired,
|
|
isListenOnly: PropTypes.bool.isRequired,
|
|
isMuted: PropTypes.bool.isRequired,
|
|
toggleMuteMicrophoneSystem: PropTypes.func.isRequired,
|
|
inputDeviceId: PropTypes.string,
|
|
outputDeviceId: PropTypes.string,
|
|
formattedDialNum: PropTypes.string.isRequired,
|
|
listenOnlyMode: PropTypes.bool.isRequired,
|
|
joinFullAudioImmediately: PropTypes.bool,
|
|
forceListenOnlyAttendee: PropTypes.bool.isRequired,
|
|
audioLocked: PropTypes.bool.isRequired,
|
|
resolve: PropTypes.func,
|
|
isMobileNative: PropTypes.bool.isRequired,
|
|
isIE: PropTypes.bool.isRequired,
|
|
formattedTelVoice: PropTypes.string.isRequired,
|
|
autoplayBlocked: PropTypes.bool.isRequired,
|
|
handleAllowAutoplay: PropTypes.func.isRequired,
|
|
changeInputStream: PropTypes.func.isRequired,
|
|
localEchoEnabled: PropTypes.bool.isRequired,
|
|
notify: PropTypes.func.isRequired,
|
|
isRTL: PropTypes.bool.isRequired,
|
|
priority: PropTypes.string.isRequired,
|
|
isOpen: PropTypes.bool.isRequired,
|
|
setIsOpen: PropTypes.func.isRequired,
|
|
AudioError: PropTypes.shape({
|
|
MIC_ERROR: PropTypes.shape({
|
|
UNKNOWN: PropTypes.number,
|
|
NO_SSL: PropTypes.number,
|
|
MAC_OS_BLOCK: PropTypes.number,
|
|
NO_PERMISSION: PropTypes.number,
|
|
DEVICE_NOT_FOUND: PropTypes.number,
|
|
}),
|
|
}).isRequired,
|
|
getTroubleshootingLink: PropTypes.func.isRequired,
|
|
away: PropTypes.bool,
|
|
doGUM: PropTypes.func.isRequired,
|
|
hasMicrophonePermission: PropTypes.func.isRequired,
|
|
permissionStatus: PropTypes.string,
|
|
liveChangeInputDevice: PropTypes.func.isRequired,
|
|
content: PropTypes.string,
|
|
unmuteOnExit: PropTypes.bool,
|
|
supportsTransparentListenOnly: PropTypes.bool.isRequired,
|
|
getAudioConstraints: PropTypes.func.isRequired,
|
|
isTranscriptionEnabled: PropTypes.bool.isRequired,
|
|
};
|
|
|
|
const intlMessages = defineMessages({
|
|
microphoneLabel: {
|
|
id: 'app.audioModal.microphoneLabel',
|
|
description: 'Join mic audio button label',
|
|
},
|
|
listenOnlyLabel: {
|
|
id: 'app.audioModal.listenOnlyLabel',
|
|
description: 'Join listen only audio button label',
|
|
},
|
|
listenOnlyDesc: {
|
|
id: 'app.audioModal.listenOnlyDesc',
|
|
description: 'Join listen only audio button description',
|
|
},
|
|
microphoneDesc: {
|
|
id: 'app.audioModal.microphoneDesc',
|
|
description: 'Join mic audio button description',
|
|
},
|
|
closeLabel: {
|
|
id: 'app.audioModal.closeLabel',
|
|
description: 'close audio modal button label',
|
|
},
|
|
audioChoiceLabel: {
|
|
id: 'app.audioModal.audioChoiceLabel',
|
|
description: 'Join audio modal title',
|
|
},
|
|
iOSError: {
|
|
id: 'app.audioModal.iOSBrowser',
|
|
description: 'Audio/Video Not supported warning',
|
|
},
|
|
iOSErrorDescription: {
|
|
id: 'app.audioModal.iOSErrorDescription',
|
|
description: 'Audio/Video not supported description',
|
|
},
|
|
iOSErrorRecommendation: {
|
|
id: 'app.audioModal.iOSErrorRecommendation',
|
|
description: 'Audio/Video recommended action',
|
|
},
|
|
echoTestTitle: {
|
|
id: 'app.audioModal.echoTestTitle',
|
|
description: 'Title for the echo test',
|
|
},
|
|
settingsTitle: {
|
|
id: 'app.audio.audioSettings.titleLabel',
|
|
description: 'Title for the audio modal',
|
|
},
|
|
helpTitle: {
|
|
id: 'app.audioModal.helpTitle',
|
|
description: 'Title for the audio help',
|
|
},
|
|
audioDialTitle: {
|
|
id: 'app.audioModal.audioDialTitle',
|
|
description: 'Title for the audio dial',
|
|
},
|
|
connecting: {
|
|
id: 'app.audioModal.connecting',
|
|
description: 'Message for audio connecting',
|
|
},
|
|
ariaModalTitle: {
|
|
id: 'app.audioModal.ariaTitle',
|
|
description: 'aria label for modal title',
|
|
},
|
|
autoplayPromptTitle: {
|
|
id: 'app.audioModal.autoplayBlockedDesc',
|
|
description: 'Message for autoplay audio block',
|
|
},
|
|
findingDevicesTitle: {
|
|
id: 'app.audio.audioSettings.findingDevicesTitle',
|
|
description: 'Message for finding audio devices',
|
|
},
|
|
});
|
|
|
|
const AudioModal = ({
|
|
forceListenOnlyAttendee,
|
|
joinFullAudioImmediately = false,
|
|
listenOnlyMode,
|
|
audioLocked,
|
|
isUsingAudio,
|
|
isListenOnly,
|
|
isMuted,
|
|
toggleMuteMicrophoneSystem,
|
|
autoplayBlocked,
|
|
closeModal,
|
|
isEchoTest,
|
|
exitAudio,
|
|
resolve = null,
|
|
leaveEchoTest,
|
|
AudioError,
|
|
joinEchoTest,
|
|
isConnecting,
|
|
localEchoEnabled,
|
|
joinListenOnly,
|
|
changeInputStream,
|
|
joinMicrophone,
|
|
intl,
|
|
isMobileNative,
|
|
formattedDialNum,
|
|
isRTL,
|
|
isConnected,
|
|
inputDeviceId = null,
|
|
outputDeviceId = null,
|
|
changeInputDevice,
|
|
changeOutputDevice,
|
|
notify,
|
|
formattedTelVoice,
|
|
handleAllowAutoplay,
|
|
isIE,
|
|
isOpen,
|
|
priority,
|
|
setIsOpen,
|
|
getTroubleshootingLink,
|
|
away = false,
|
|
doGUM,
|
|
getAudioConstraints,
|
|
hasMicrophonePermission,
|
|
liveChangeInputDevice,
|
|
content: initialContent,
|
|
supportsTransparentListenOnly,
|
|
unmuteOnExit = false,
|
|
permissionStatus = null,
|
|
isTranscriptionEnabled,
|
|
updateInputDevices,
|
|
updateOutputDevices,
|
|
}) => {
|
|
const [content, setContent] = useState(initialContent);
|
|
const [hasError, setHasError] = useState(false);
|
|
const [disableActions, setDisableActions] = useState(false);
|
|
const [errorInfo, setErrorInfo] = useState(null);
|
|
const [autoplayChecked, setAutoplayChecked] = useState(false);
|
|
const [findingDevices, setFindingDevices] = useState(false);
|
|
const [setAway] = useMutation(SET_AWAY);
|
|
const voiceToggle = useToggleVoice();
|
|
|
|
const prevAutoplayBlocked = usePreviousValue(autoplayBlocked);
|
|
|
|
useEffect(() => {
|
|
if (prevAutoplayBlocked && !autoplayBlocked) {
|
|
setAutoplayChecked(true);
|
|
}
|
|
}, [autoplayBlocked]);
|
|
|
|
const handleJoinAudioError = (err) => {
|
|
const { type, errCode, errMessage } = err;
|
|
|
|
switch (type) {
|
|
case 'MEDIA_ERROR':
|
|
setContent('help');
|
|
setErrorInfo({
|
|
errCode,
|
|
errMessage,
|
|
});
|
|
setDisableActions(false);
|
|
break;
|
|
case 'CONNECTION_ERROR':
|
|
default:
|
|
setErrorInfo({
|
|
errCode,
|
|
errMessage: type,
|
|
});
|
|
setDisableActions(false);
|
|
break;
|
|
}
|
|
};
|
|
|
|
const handleGoToLocalEcho = () => {
|
|
// Simplified echo test: this will return the AudioSettings with:
|
|
// - withEcho: true
|
|
// Echo test will be local and done in the AudioSettings view instead of the
|
|
// old E2E -> yes/no -> join view
|
|
setContent('settings');
|
|
};
|
|
|
|
const handleGoToEchoTest = () => {
|
|
const { MIC_ERROR } = AudioError;
|
|
const noSSL = !window.location.protocol.includes('https');
|
|
|
|
if (noSSL) {
|
|
setContent('help');
|
|
setErrorInfo({
|
|
errCode: MIC_ERROR.NO_SSL,
|
|
errMessage: 'NoSSL',
|
|
});
|
|
return null;
|
|
}
|
|
|
|
if (disableActions && isConnecting) return null;
|
|
|
|
if (localEchoEnabled) return handleGoToLocalEcho();
|
|
|
|
setHasError(false);
|
|
setDisableActions(true);
|
|
|
|
return joinEchoTest().then(() => {
|
|
setContent('echoTest');
|
|
setDisableActions(true);
|
|
}).catch((err) => {
|
|
handleJoinAudioError(err);
|
|
});
|
|
};
|
|
|
|
const handleGUMFailure = (error) => {
|
|
const { MIC_ERROR } = AudioError;
|
|
|
|
logger.error({
|
|
logCode: 'audio_gum_failed',
|
|
extraInfo: {
|
|
errorMessage: error.message,
|
|
errorName: error.name,
|
|
},
|
|
}, `Audio gUM failed: ${error.name}`);
|
|
|
|
setContent('help');
|
|
setDisableActions(false);
|
|
setHasError(true);
|
|
setErrorInfo({
|
|
errCode: error?.name === 'NotAllowedError'
|
|
? MIC_ERROR.NO_PERMISSION
|
|
: 0,
|
|
errMessage: error?.name || 'NotAllowedError',
|
|
});
|
|
};
|
|
|
|
const checkMicrophonePermission = (options) => {
|
|
setFindingDevices(true);
|
|
|
|
return hasMicrophonePermission(options)
|
|
.then((hasPermission) => {
|
|
// null means undetermined, so we don't want to show the error modal
|
|
// and let downstream components figure it out
|
|
if (hasPermission === true || hasPermission === null) {
|
|
return hasPermission;
|
|
}
|
|
|
|
handleGUMFailure(new DOMException(
|
|
'Permissions API says denied',
|
|
'NotAllowedError',
|
|
));
|
|
|
|
return false;
|
|
})
|
|
.catch((error) => {
|
|
handleGUMFailure(error);
|
|
return null;
|
|
})
|
|
.finally(() => {
|
|
setFindingDevices(false);
|
|
});
|
|
};
|
|
|
|
const handleGoToAudioOptions = () => {
|
|
setContent(null);
|
|
setDisableActions(false);
|
|
};
|
|
|
|
const handleGoToAudioSettings = () => {
|
|
leaveEchoTest().then(() => {
|
|
setContent('settings');
|
|
});
|
|
};
|
|
|
|
const handleRetryGoToEchoTest = () => {
|
|
setHasError(false);
|
|
setContent(null);
|
|
setErrorInfo(null);
|
|
|
|
return handleGoToEchoTest();
|
|
};
|
|
|
|
const disableAwayMode = () => {
|
|
if (!away) return;
|
|
|
|
muteAway(false, true, voiceToggle);
|
|
setAway({
|
|
variables: {
|
|
away: false,
|
|
},
|
|
});
|
|
VideoService.setTrackEnabled(true);
|
|
};
|
|
|
|
const handleJoinListenOnly = () => {
|
|
if (disableActions && isConnecting) return null;
|
|
|
|
setDisableActions(true);
|
|
setHasError(false);
|
|
setErrorInfo(null);
|
|
|
|
return joinListenOnly().then(() => {
|
|
setDisableActions(false);
|
|
disableAwayMode();
|
|
}).catch((err) => {
|
|
handleJoinAudioError(err);
|
|
});
|
|
};
|
|
|
|
const handleJoinMicrophone = () => {
|
|
if (disableActions && isConnecting) return;
|
|
|
|
setHasError(false);
|
|
setDisableActions(true);
|
|
setErrorInfo(null);
|
|
|
|
joinMicrophone().then(() => {
|
|
setDisableActions(false);
|
|
}).catch((err) => {
|
|
handleJoinAudioError(err);
|
|
});
|
|
};
|
|
|
|
const handleAudioSettingsConfirmation = useCallback((inputStream) => {
|
|
// Reset the modal to a connecting state - this kind of sucks?
|
|
// prlanzarin Apr 04 2022
|
|
setContent(null);
|
|
if (inputStream) changeInputStream(inputStream);
|
|
|
|
if (!isConnected) {
|
|
handleJoinMicrophone();
|
|
disableAwayMode();
|
|
} else {
|
|
closeModal();
|
|
}
|
|
}, [changeInputStream, isConnected]);
|
|
|
|
const skipAudioOptions = useCallback(
|
|
// eslint-disable-next-line max-len
|
|
() => !hasError && (isConnecting || (forceListenOnlyAttendee && !autoplayChecked) || !listenOnlyMode),
|
|
[hasError, isConnecting, forceListenOnlyAttendee, autoplayChecked, listenOnlyMode],
|
|
);
|
|
|
|
const renderAudioOptions = () => {
|
|
const hideMicrophone = forceListenOnlyAttendee || audioLocked;
|
|
const arrow = isRTL ? '←' : '→';
|
|
const dialAudioLabel = `${intl.formatMessage(intlMessages.audioDialTitle)} ${arrow}`;
|
|
|
|
return (
|
|
<div>
|
|
<Styled.AudioOptions data-test="audioModalOptions">
|
|
{!hideMicrophone && !isMobileNative && (
|
|
<>
|
|
<Styled.AudioModalButton
|
|
label={intl.formatMessage(intlMessages.microphoneLabel)}
|
|
data-test="microphoneBtn"
|
|
aria-describedby="mic-description"
|
|
icon="unmute"
|
|
circle
|
|
size="jumbo"
|
|
disabled={audioLocked}
|
|
onClick={
|
|
joinFullAudioImmediately
|
|
? handleJoinMicrophone
|
|
: handleGoToEchoTest
|
|
}
|
|
/>
|
|
<span className="sr-only" id="mic-description">
|
|
{intl.formatMessage(intlMessages.microphoneDesc)}
|
|
</span>
|
|
</>
|
|
)}
|
|
{listenOnlyMode && (
|
|
<>
|
|
<Styled.AudioModalButton
|
|
label={intl.formatMessage(intlMessages.listenOnlyLabel)}
|
|
data-test="listenOnlyBtn"
|
|
aria-describedby="listenOnly-description"
|
|
icon="listen"
|
|
circle
|
|
size="jumbo"
|
|
onClick={handleJoinListenOnly}
|
|
/>
|
|
<span className="sr-only" id="listenOnly-description">
|
|
{intl.formatMessage(intlMessages.listenOnlyDesc)}
|
|
</span>
|
|
</>
|
|
)}
|
|
</Styled.AudioOptions>
|
|
{formattedDialNum ? (
|
|
<Styled.AudioDial
|
|
label={dialAudioLabel}
|
|
size="md"
|
|
color="secondary"
|
|
onClick={() => {
|
|
setContent('audioDial');
|
|
}}
|
|
/>
|
|
) : null}
|
|
{joinFullAudioImmediately && <AudioCaptionsSelectContainer />}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const renderEchoTest = () => (
|
|
<EchoTest
|
|
handleNo={handleGoToAudioSettings}
|
|
handleYes={handleJoinMicrophone}
|
|
/>
|
|
);
|
|
|
|
const handleBack = useCallback(() => {
|
|
// If audio is active, audio options are flagged to be skipped (see skipAudioOptions)
|
|
// or listen only mode is deactivated (which means there are no actual options
|
|
// in the base modal), clicking back on any of the sub-modals should close the base modal
|
|
if (isConnecting
|
|
|| isConnected
|
|
|| skipAudioOptions()) {
|
|
closeModal();
|
|
} else {
|
|
handleGoToAudioOptions();
|
|
}
|
|
}, [isConnecting, isConnected, skipAudioOptions, listenOnlyMode]);
|
|
|
|
const renderAudioSettings = () => {
|
|
const { animations } = getSettingsSingletonInstance().application;
|
|
const confirmationCallback = !localEchoEnabled
|
|
? handleRetryGoToEchoTest
|
|
: handleAudioSettingsConfirmation;
|
|
|
|
return (
|
|
<AudioSettings
|
|
animations={animations}
|
|
handleBack={handleBack}
|
|
handleConfirmation={confirmationCallback}
|
|
handleGUMFailure={handleGUMFailure}
|
|
joinEchoTest={joinEchoTest}
|
|
changeInputDevice={changeInputDevice}
|
|
liveChangeInputDevice={liveChangeInputDevice}
|
|
changeOutputDevice={changeOutputDevice}
|
|
isConnecting={isConnecting}
|
|
isConnected={isConnected}
|
|
isMuted={isMuted}
|
|
toggleMuteMicrophoneSystem={toggleMuteMicrophoneSystem}
|
|
inputDeviceId={inputDeviceId}
|
|
outputDeviceId={outputDeviceId}
|
|
withEcho={localEchoEnabled}
|
|
produceStreams
|
|
notify={notify}
|
|
unmuteOnExit={unmuteOnExit}
|
|
doGUM={doGUM}
|
|
getAudioConstraints={getAudioConstraints}
|
|
checkMicrophonePermission={checkMicrophonePermission}
|
|
supportsTransparentListenOnly={supportsTransparentListenOnly}
|
|
toggleVoice={voiceToggle}
|
|
permissionStatus={permissionStatus}
|
|
isTranscriptionEnabled={isTranscriptionEnabled}
|
|
skipAudioOptions={skipAudioOptions}
|
|
updateInputDevices={updateInputDevices}
|
|
updateOutputDevices={updateOutputDevices}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const renderHelp = () => {
|
|
const audioErr = {
|
|
...AudioError,
|
|
code: errorInfo?.errCode,
|
|
message: errorInfo?.errMessage,
|
|
};
|
|
|
|
const _joinListenOnly = () => {
|
|
// Erase the content state so that the modal transitions to the connecting
|
|
// state if the user chooses listen only
|
|
setContent(null);
|
|
handleJoinListenOnly();
|
|
};
|
|
|
|
return (
|
|
<Help
|
|
isConnected={isConnected}
|
|
handleBack={handleBack}
|
|
handleJoinListenOnly={_joinListenOnly}
|
|
handleRetryMic={handleGoToAudioSettings}
|
|
audioErr={audioErr}
|
|
isListenOnly={isListenOnly}
|
|
troubleshootingLink={getTroubleshootingLink(errorInfo?.errCode)}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const renderAudioDial = () => (
|
|
<AudioDial
|
|
formattedDialNum={formattedDialNum}
|
|
telVoice={formattedTelVoice}
|
|
handleBack={handleGoToAudioOptions}
|
|
/>
|
|
);
|
|
|
|
const renderAutoplayOverlay = () => (
|
|
<AudioAutoplayPrompt
|
|
handleAllowAutoplay={handleAllowAutoplay}
|
|
/>
|
|
);
|
|
|
|
const contents = {
|
|
echoTest: {
|
|
title: intlMessages.echoTestTitle,
|
|
component: renderEchoTest,
|
|
},
|
|
settings: {
|
|
title: intlMessages.settingsTitle,
|
|
component: renderAudioSettings,
|
|
},
|
|
help: {
|
|
title: intlMessages.helpTitle,
|
|
component: renderHelp,
|
|
},
|
|
audioDial: {
|
|
title: intlMessages.audioDialTitle,
|
|
component: renderAudioDial,
|
|
},
|
|
autoplayBlocked: {
|
|
title: intlMessages.autoplayPromptTitle,
|
|
component: renderAutoplayOverlay,
|
|
},
|
|
};
|
|
|
|
const renderContent = () => {
|
|
const { animations } = getSettingsSingletonInstance().application;
|
|
|
|
if (content == null) {
|
|
if (findingDevices) {
|
|
return (
|
|
<Styled.Connecting role="alert">
|
|
<span data-test="findingDevicesLabel">
|
|
{intl.formatMessage(intlMessages.findingDevicesTitle)}
|
|
</span>
|
|
<Styled.ConnectingAnimation animations={animations} />
|
|
</Styled.Connecting>
|
|
);
|
|
}
|
|
|
|
if (skipAudioOptions()) {
|
|
return (
|
|
<Styled.Connecting role="alert">
|
|
<span data-test={!isEchoTest ? 'establishingAudioLabel' : 'connectingToEchoTest'}>
|
|
{intl.formatMessage(intlMessages.connecting)}
|
|
</span>
|
|
<Styled.ConnectingAnimation animations={animations} />
|
|
</Styled.Connecting>
|
|
);
|
|
}
|
|
}
|
|
|
|
return content ? contents[content].component() : renderAudioOptions();
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!isUsingAudio) {
|
|
if (forceListenOnlyAttendee || audioLocked) {
|
|
handleJoinListenOnly();
|
|
} else if (!listenOnlyMode) {
|
|
if (joinFullAudioImmediately) {
|
|
checkMicrophonePermission({ doGUM: true, permissionStatus })
|
|
.then((hasPermission) => {
|
|
// No permission - let the Help screen be shown as it's triggered
|
|
// by the checkMicrophonePermission function
|
|
if (hasPermission === false) return;
|
|
|
|
// Permission is granted or undetermined, so we can proceed
|
|
handleJoinMicrophone();
|
|
});
|
|
} else {
|
|
// No need to check for permission here since the AudioSettings
|
|
// component will handle it
|
|
handleGoToEchoTest();
|
|
}
|
|
}
|
|
}
|
|
}, [
|
|
audioLocked,
|
|
isUsingAudio,
|
|
forceListenOnlyAttendee,
|
|
joinFullAudioImmediately,
|
|
listenOnlyMode,
|
|
]);
|
|
|
|
useEffect(() => {
|
|
if (autoplayBlocked) {
|
|
setContent('autoplayBlocked');
|
|
} else if (prevAutoplayBlocked) {
|
|
closeModal();
|
|
}
|
|
}, [autoplayBlocked]);
|
|
|
|
useEffect(() => () => {
|
|
if (isEchoTest) {
|
|
exitAudio();
|
|
}
|
|
if (resolve) resolve();
|
|
Session.setItem('audioModalIsOpen', false);
|
|
}, []);
|
|
|
|
let title = content
|
|
? intl.formatMessage(contents[content].title)
|
|
: intl.formatMessage(intlMessages.audioChoiceLabel);
|
|
title = (!skipAudioOptions() && !findingDevices) || content
|
|
? title
|
|
: null;
|
|
|
|
return (
|
|
<Styled.Background isBlurred={Session.getItem('audioModalIsOpen')}>
|
|
<Styled.AudioModal
|
|
modalName="AUDIO"
|
|
onRequestClose={closeModal}
|
|
data-test="audioModal"
|
|
contentLabel={intl.formatMessage(intlMessages.ariaModalTitle)}
|
|
title={title}
|
|
{...{
|
|
setIsOpen,
|
|
isOpen,
|
|
priority,
|
|
}}
|
|
>
|
|
{isIE ? (
|
|
<Styled.BrowserWarning>
|
|
<FormattedMessage
|
|
id="app.audioModal.unsupportedBrowserLabel"
|
|
description="Warning when someone joins with a browser that isn't supported"
|
|
values={{
|
|
0: <a href="https://www.google.com/chrome/">Chrome</a>,
|
|
1: <a href="https://getfirefox.com">Firefox</a>,
|
|
}}
|
|
/>
|
|
</Styled.BrowserWarning>
|
|
) : null}
|
|
<Styled.Content>
|
|
{renderContent()}
|
|
</Styled.Content>
|
|
</Styled.AudioModal>
|
|
</Styled.Background>
|
|
);
|
|
};
|
|
|
|
AudioModal.propTypes = propTypes;
|
|
|
|
export default injectIntl(AudioModal);
|