summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--CHANGELOG.md2
-rw-r--r--gui/packages/desktop/src/main/index.js50
-rw-r--r--gui/packages/desktop/src/renderer/components/Connect.js21
-rw-r--r--gui/packages/desktop/src/renderer/components/NotificationArea.js10
-rw-r--r--gui/packages/desktop/src/renderer/components/TunnelControl.js22
5 files changed, 89 insertions, 16 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 397e92724b..0e15f909c3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,8 @@ Line wrap the file at 100 chars. Th
## [Unreleased]
+### Fixed
+- Stop GUI from glitching during the short reconnect state.
## [2018.6-beta1] - 2018-12-05
diff --git a/gui/packages/desktop/src/main/index.js b/gui/packages/desktop/src/main/index.js
index 5cc11a29b1..92803129bd 100644
--- a/gui/packages/desktop/src/main/index.js
+++ b/gui/packages/desktop/src/main/index.js
@@ -22,7 +22,6 @@ import type {
Location,
RelayList,
Settings,
- TunnelState,
TunnelStateTransition,
} from './daemon-rpc';
@@ -455,7 +454,7 @@ const ApplicationMain = {
_setTunnelState(newState: TunnelStateTransition) {
this._tunnelState = newState;
- this._updateTrayIcon(newState.state);
+ this._updateTrayIcon(newState);
this._updateLocation();
if (!this._shouldSuppressNotifications()) {
@@ -649,13 +648,46 @@ const ApplicationMain = {
}
},
- _updateTrayIcon(tunnelState: TunnelState) {
- const iconTypes: { [TunnelState]: TrayIconType } = {
- connected: 'secured',
- connecting: 'securing',
- blocked: 'securing',
- };
- const type = iconTypes[tunnelState] || 'unsecured';
+ _trayIconType(tunnelState: TunnelStateTransition): TrayIconType {
+ switch (tunnelState.state) {
+ case 'connected':
+ return 'secured';
+
+ case 'connecting':
+ return 'securing';
+
+ case 'blocked':
+ return 'securing';
+
+ case 'disconnecting':
+ switch (tunnelState.details) {
+ case 'reconnect':
+ return 'securing';
+
+ case 'block':
+ return 'securing';
+
+ case 'nothing':
+ return 'unsecured';
+
+ default:
+ log.error(`Invalid after disconnect action: ${(tunnelState.details: empty)}`);
+ }
+ break;
+
+ case 'disconnected':
+ return 'unsecured';
+
+ default:
+ log.error(`Invalid tunnel state: ${(tunnelState.state: empty)}`);
+ }
+
+ // Unreachable, but flow doesn't agree
+ return 'unsecured';
+ },
+
+ _updateTrayIcon(tunnelState: TunnelStateTransition) {
+ const type = this._trayIconType(tunnelState);
if (this._trayIconController) {
this._trayIconController.animateToIcon(type);
diff --git a/gui/packages/desktop/src/renderer/components/Connect.js b/gui/packages/desktop/src/renderer/components/Connect.js
index 021dbd579f..ae83f0a1f0 100644
--- a/gui/packages/desktop/src/renderer/components/Connect.js
+++ b/gui/packages/desktop/src/renderer/components/Connect.js
@@ -30,6 +30,8 @@ type Props = {
onToggleConnectionInfo: (boolean) => void,
};
+type MarkerOrSpinner = 'marker' | 'spinner';
+
export default class Connect extends Component<Props> {
render() {
const error = this.checkForErrors();
@@ -89,8 +91,8 @@ export default class Connect extends Component<Props> {
if (typeof longitude === 'number' && typeof latitude === 'number') {
return {
center: [longitude, latitude],
- // do not show the marker when connecting
- showMarker: state !== 'connecting',
+ // do not show the marker when connecting or reconnecting
+ showMarker: this._showMarkerOrSpinner() === 'marker',
markerStyle: this._getMarkerStyle(),
// zoom in when connected
zoomLevel: state === 'connected' ? 'low' : 'medium',
@@ -135,6 +137,17 @@ export default class Connect extends Component<Props> {
}
}
+ _showMarkerOrSpinner(): MarkerOrSpinner {
+ const state = this.props.connection.status.state;
+ const details = this.props.connection.status.details;
+
+ if (state === 'connecting' || (state === 'disconnecting' && details === 'reconnect')) {
+ return 'spinner';
+ } else {
+ return 'marker';
+ }
+ }
+
renderMap() {
const tunnelState = this.props.connection.status.state;
const details = this.props.connection.status.details;
@@ -160,14 +173,14 @@ export default class Connect extends Component<Props> {
</View>
<View style={styles.container}>
{/* show spinner when connecting */}
- {tunnelState === 'connecting' ? (
+ {this._showMarkerOrSpinner() === 'spinner' ? (
<View style={styles.status_icon}>
<ImageView source="icon-spinner" height={60} width={60} alt="" />
</View>
) : null}
<TunnelControl
- tunnelState={this.props.connection.status.state}
+ tunnelState={this.props.connection.status}
selectedRelayName={this.props.selectedRelayName}
city={this.props.connection.city}
country={this.props.connection.country}
diff --git a/gui/packages/desktop/src/renderer/components/NotificationArea.js b/gui/packages/desktop/src/renderer/components/NotificationArea.js
index 8c99c31e26..1625d63431 100644
--- a/gui/packages/desktop/src/renderer/components/NotificationArea.js
+++ b/gui/packages/desktop/src/renderer/components/NotificationArea.js
@@ -79,6 +79,16 @@ export default class NotificationArea extends Component<Props, State> {
reason: getBlockReasonMessage(tunnelState.details),
};
+ case 'disconnecting':
+ if (tunnelState.details === 'reconnect') {
+ return {
+ visible: true,
+ type: 'blocking',
+ reason: '',
+ };
+ }
+ // fallthrough
+
default:
if (!version.consistent) {
return {
diff --git a/gui/packages/desktop/src/renderer/components/TunnelControl.js b/gui/packages/desktop/src/renderer/components/TunnelControl.js
index c2788501fe..6590a17818 100644
--- a/gui/packages/desktop/src/renderer/components/TunnelControl.js
+++ b/gui/packages/desktop/src/renderer/components/TunnelControl.js
@@ -6,7 +6,7 @@ import { ConnectionInfo, SecuredLabel, SecuredDisplayStyle, ImageView } from '@m
import * as AppButton from './AppButton';
import { colors } from '../../config';
-import type { TunnelState, RelayProtocol } from '../lib/daemon-rpc-proxy';
+import type { TunnelStateTransition, RelayProtocol } from '../lib/daemon-rpc-proxy';
export type RelayInAddress = {
ip: string,
@@ -20,7 +20,7 @@ export type RelayOutAddress = {
};
type TunnelControlProps = {
- tunnelState: TunnelState,
+ tunnelState: TunnelStateTransition,
selectedRelayName: string,
city: ?string,
country: ?string,
@@ -135,7 +135,23 @@ export default class TunnelControl extends Component<TunnelControlProps> {
/>
);
- switch (this.props.tunnelState) {
+ let state = this.props.tunnelState.state;
+
+ if (state === 'disconnecting') {
+ switch (this.props.tunnelState.details) {
+ case 'block':
+ state = 'blocked';
+ break;
+ case 'reconnect':
+ state = 'connecting';
+ break;
+ default:
+ state = 'disconnecting';
+ break;
+ }
+ }
+
+ switch (state) {
case 'connecting':
return (
<Wrapper>
Copyright © 2025 - 2026 Wayne Cole. WTFPL. Attribution appreciated. No warranty. Not liable for bodily damages.