wire up audio errors to notifications. WIP

This commit is contained in:
gcampes 2017-10-11 09:05:57 -03:00
parent 675c890961
commit f8c50b8ef7
5 changed files with 22 additions and 135 deletions

View File

@ -176,7 +176,7 @@ class AudioModal extends Component {
if (isConnecting) {
return (
<span className={styles.connecting}>
{ isEchoTest ?
{ !isEchoTest ?
intl.formatMessage(intlMessages.connecting) :
intl.formatMessage(intlMessages.connectingEchoTest)
}

View File

@ -1,9 +1,9 @@
import React, { Component } from 'react';
import cx from 'classnames';
import Button from '/imports/ui/components/button/component';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import styles from './styles.scss';
import cx from 'classnames';
import Button from '/imports/ui/components/button/component';
const COLORS = [
'default', 'primary', 'danger', 'success',
@ -11,11 +11,13 @@ const COLORS = [
const propTypes = {
color: PropTypes.oneOf(COLORS),
handleClose: PropTypes.func.isRequired,
message: PropTypes.string,
};
const defaultProps = {
color: 'default',
color: 'danger',
message: null,
};
const intlMessages = defineMessages({
@ -39,11 +41,11 @@ class AudioNotification extends Component {
render() {
const {
color,
message,
error,
intl,
} = this.props;
if (!color || !message) {
if (!color || !error) {
return null;
}
return (
@ -51,7 +53,7 @@ class AudioNotification extends Component {
role="alert"
className={cx(styles.audioNotifications, styles[this.props.color])}
>
{message}
{error}
<Button
className={styles.closeBtn}
label={intl.formatMessage(intlMessages.closeLabel)}

View File

@ -1,140 +1,21 @@
import { createContainer } from 'meteor/react-meteor-data';
import Service from '/imports/ui/components/audio/service';
import React, { Component } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import AudioNotification from './component';
import AudioManager, { AudioErrorCodes } from '/imports/api/2.0/audio/client/manager';
const intlMessages = defineMessages({
[AudioErrorCodes.CODE_1001]: {
id: 'app.audioNotification.audioFailedError1001',
description: 'Audio connection failed with error 1001',
},
[AudioErrorCodes.CODE_1002]: {
id: 'app.audioNotification.audioFailedError1002',
description: 'Audio connection failed with error 1002',
},
[AudioErrorCodes.CODE_1003]: {
id: 'app.audioNotification.audioFailedError1003',
description: 'Audio connection failed with error 1003',
},
[AudioErrorCodes.CODE_1004]: {
id: 'app.audioNotification.audioFailedError1004',
description: 'Audio connection failed with error 1004',
},
[AudioErrorCodes.CODE_1005]: {
id: 'app.audioNotification.audioFailedError1005',
description: 'Audio connection failed with error 1005',
},
[AudioErrorCodes.CODE_1006]: {
id: 'app.audioNotification.audioFailedError1006',
description: 'Audio connection failed with error 1006',
},
[AudioErrorCodes.CODE_1007]: {
id: 'app.audioNotification.audioFailedError1007',
description: 'Audio connection failed with error 1007',
},
[AudioErrorCodes.CODE_1008]: {
id: 'app.audioNotification.audioFailedError1008',
description: 'Audio connection failed with error 1008',
},
[AudioErrorCodes.CODE_1009]: {
id: 'app.audioNotification.audioFailedError1009',
description: 'Audio connection failed with error 1009',
},
[AudioErrorCodes.CODE_1010]: {
id: 'app.audioNotification.audioFailedError1010',
description: 'Audio connection failed with error 1010',
},
[AudioErrorCodes.CODE_1011]: {
id: 'app.audioNotification.audioFailedError1011',
description: 'Audio connection failed with error 1011',
},
audioFailed: {
id: 'app.audioNotification.audioFailedMessage',
description: 'The audio could not connect',
},
mediaFailed: {
id: 'app.audioNotification.mediaFailedMessage',
description: 'Could not access getUserMicMedia',
},
});
class AudioNotificationContainer extends Component {
constructor(props) {
super(props);
this.color = null;
this.message = null;
this.state = {
status: null,
};
this.handleAudioFailure = this.handleAudioFailure.bind(this);
this.handleMediaFailure = this.handleMediaFailure.bind(this);
this.handleClose = this.handleClose.bind(this);
}
componentDidMount() {
window.addEventListener('bbb.webrtc.failed', this.handleAudioFailure);
window.addEventListener('bbb.webrtc.mediaFailed', this.handleMediaFailure);
window.addEventListener('bbb.webrtc.connected', this.handleClose);
}
componentWillUnmount() {
window.removeEventListener('bbb.webrtc.failed', this.handleAudioFailure);
window.removeEventListener('bbb.webrtc.mediaFailed', this.handleMediaFailure);
window.removeEventListener('bbb.webrtc.connected', this.handleClose);
}
handleClose() {
this.color = null;
this.message = null;
this.setState({ status: null });
}
handleAudioFailure(e) {
this.message = this.props.messages[e.detail.errorCode];
if (this.message == null || this.message == undefined) {
this.message = this.props.audioFailure;
}
this.setState({ status: 'failed' });
}
handleMediaFailure() {
this.message = this.props.mediaFailure;
this.setState({ status: 'failed' });
}
render() {
const handleClose = this.handleClose;
this.color = 'danger';
return (
<AudioNotification
color={this.color}
message={this.message}
handleClose={handleClose}
{...this.props}
/>
);
}
}
export default injectIntl(createContainer(({ intl }) => {
const messages = {};
messages[AudioErrorCodes.CODE_1001] = intl.formatMessage(intlMessages[AudioErrorCodes.CODE_1001]);
messages[AudioErrorCodes.CODE_1002] = intl.formatMessage(intlMessages[AudioErrorCodes.CODE_1002]);
messages[AudioErrorCodes.CODE_1003] = intl.formatMessage(intlMessages[AudioErrorCodes.CODE_1003]);
messages[AudioErrorCodes.CODE_1004] = intl.formatMessage(intlMessages[AudioErrorCodes.CODE_1004]);
messages[AudioErrorCodes.CODE_1005] = intl.formatMessage(intlMessages[AudioErrorCodes.CODE_1005]);
messages[AudioErrorCodes.CODE_1006] = intl.formatMessage(intlMessages[AudioErrorCodes.CODE_1006]);
messages[AudioErrorCodes.CODE_1007] = intl.formatMessage(intlMessages[AudioErrorCodes.CODE_1007]);
messages[AudioErrorCodes.CODE_1008] = intl.formatMessage(intlMessages[AudioErrorCodes.CODE_1008]);
messages[AudioErrorCodes.CODE_1009] = intl.formatMessage(intlMessages[AudioErrorCodes.CODE_1009]);
messages[AudioErrorCodes.CODE_1010] = intl.formatMessage(intlMessages[AudioErrorCodes.CODE_1010]);
messages[AudioErrorCodes.CODE_1011] = intl.formatMessage(intlMessages[AudioErrorCodes.CODE_1011]);
messages.audioFailure = intl.formatMessage(intlMessages.audioFailed);
messages.mediaFailure = intl.formatMessage(intlMessages.mediaFailed);
return { messages };
}, AudioNotificationContainer));
export default createContainer(() => {
return {
error: Service.error(),
};
}, AudioNotificationContainer);

View File

@ -42,4 +42,5 @@ export default {
inputDeviceId: () => AudioManager.inputDeviceId,
outputDeviceId: () => AudioManager.outputDeviceId,
isEchoTest: () => AudioManager.isEchoTest,
error: () => AudioManager.error,
};

View File

@ -39,7 +39,7 @@ class AudioManager {
const device = devices.find(d => d.label === deviceLabel);
this.changeInputDevice(device.deviceId);
});
}).catch(err => console.error(err));
}).catch((err) => { this.error = err; });
this.defineProperties({
@ -88,6 +88,7 @@ class AudioManager {
console.log('joinAudio', this, isListenOnly);
this.isConnecting = true;
this.error = null;
this.isListenOnly = isListenOnly;
this.isEchoTest = isEchoTest;
this.callbacks = callbacks;
@ -183,10 +184,12 @@ class AudioManager {
console.log('ENDED');
this.onAudioExit();
} else if (status === FAILED) {
console.log(error, 'KAAAAPPAAA');
this.error = ERROR_CODES[error].message;
console.log('FAILED');
this.onAudioExit();
}
})
});
}
set userData(value) {