95 lines
3.7 KiB
JavaScript
Executable file
95 lines
3.7 KiB
JavaScript
Executable file
import React from 'react';
|
|
import Flux from '../lib/flux';
|
|
import i18n from '../i18n';
|
|
import {Sparklines, SparklinesLine, SparklinesReferenceLine} from 'react-sparklines';
|
|
import RTCConnectionStore from '../stores/RTCConnectionStore';
|
|
import MediaEngineStore from '../stores/MediaEngineStore';
|
|
import HelpdeskUtils from '../utils/HelpdeskUtils';
|
|
import ModalActionCreators from '../actions/ModalActionCreators';
|
|
import {RTCConnectionStates} from '../Constants';
|
|
import RTCDebugModal from './RTCDebugModal';
|
|
import {MediaEngineFeatures} from '../lib/MediaEngine';
|
|
import '../styles/rtc_connection_popout.styl';
|
|
|
|
const RTCConnectionPopout = React.createClass({
|
|
mixins: [Flux.StoreListenerMixin(RTCConnectionStore)],
|
|
|
|
getStateFromStores() {
|
|
return {
|
|
connectionState: RTCConnectionStore.getState(),
|
|
hostname: RTCConnectionStore.getHostname(),
|
|
pings: [].concat(RTCConnectionStore.getPings()),
|
|
averagePing: RTCConnectionStore.getAveragePing(),
|
|
lastPing: RTCConnectionStore.getLastPing(),
|
|
};
|
|
},
|
|
openDebugPanel() {
|
|
this.props.onClose();
|
|
ModalActionCreators.push(RTCDebugModal);
|
|
},
|
|
|
|
renderVoiceConnected() {
|
|
return (
|
|
<div>
|
|
<div className="sparkline">
|
|
<Sparklines data={this.state.pings} width={210} height={30}>
|
|
<SparklinesLine />
|
|
<SparklinesReferenceLine type="mean" />
|
|
</Sparklines>
|
|
</div>
|
|
{i18n.Messages.RTC_CONNECTION_STATE_RTC_CONNECTED.format({
|
|
// Hacky way to only show the region to make it harder for new user script kiddies
|
|
// from figuring out what to DDoS.
|
|
hostname: this.state.hostname.split('.')[0],
|
|
badPing: 250,
|
|
averagePing: this.state.averagePing.toFixed(0),
|
|
lastPing: (this.state.lastPing || 0).toFixed(0),
|
|
})}
|
|
</div>
|
|
);
|
|
},
|
|
|
|
render() {
|
|
const renderInfo = {
|
|
[RTCConnectionStates.AWAITING_ENDPOINT]: i18n.Messages.RTC_CONNECTION_STATE_AWAITING_ENDPOINT.format({
|
|
url: 'https://status.discordapp.com',
|
|
}),
|
|
[RTCConnectionStates.CONNECTING]: i18n.Messages.RTC_CONNECTION_STATE_CONNECTING,
|
|
[RTCConnectionStates.AUTHENTICATING]: i18n.Messages.RTC_CONNECTION_STATE_AUTHENTICATING,
|
|
[RTCConnectionStates.CONNECTED]: i18n.Messages.RTC_CONNECTION_STATE_RTC_CONNECTING,
|
|
[RTCConnectionStates.DISCONNECTED]: i18n.Messages.RTC_CONNECTION_STATE_DISCONNECTED,
|
|
[RTCConnectionStates.RTC_CONNECTING]: i18n.Messages.RTC_CONNECTION_STATE_RTC_CONNECTING,
|
|
[RTCConnectionStates.ICE_CHECKING]: i18n.Messages.RTC_CONNECTION_STATE_ICE_CHECKING.format({
|
|
url: HelpdeskUtils.getArticleURL(208527808),
|
|
}),
|
|
[RTCConnectionStates.RTC_CONNECTED]: this.renderVoiceConnected,
|
|
[RTCConnectionStates.NO_ROUTE]: i18n.Messages.RTC_CONNECTION_STATE_NO_ROUTE.format({
|
|
url: HelpdeskUtils.getArticleURL(209221787),
|
|
}),
|
|
[RTCConnectionStates.RTC_DISCONNECTED]: i18n.Messages.RTC_CONNECTION_STATE_DISCONNECTED,
|
|
}[this.state.connectionState];
|
|
return (
|
|
<div id="rtc-connection-popout" {...this.props}>
|
|
<header>{i18n.Messages.RTC_CONNECTION}</header>
|
|
<section>
|
|
{typeof renderInfo === 'function' ? renderInfo() : <p>{renderInfo}</p>}
|
|
<hr />
|
|
<div className="popout-bottom">
|
|
<span className="secured">{i18n.Messages.IP_ADDRESS_SECURED}</span>
|
|
{MediaEngineStore.supports(MediaEngineFeatures.DIAGNOSTICS) &&
|
|
<a className="debug-button" onClick={this.openDebugPanel}>
|
|
{i18n.Messages.DEBUG}
|
|
</a>}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
},
|
|
});
|
|
|
|
export default RTCConnectionPopout;
|
|
|
|
|
|
|
|
// WEBPACK FOOTER //
|
|
// ./discord_app/components/RTCConnectionPopout.js
|