set up a new view for displaying the network status

// FREEBIE
This commit is contained in:
Sam Vevang 2017-01-03 21:37:56 -06:00 committed by lilia
parent e4a21d1a53
commit ed4991974b
13 changed files with 326 additions and 76 deletions

View file

@ -232,6 +232,10 @@
if (navigator.onLine) {
console.log('retrying in 1 minute');
setTimeout(init, 60000);
if (owsDesktopApp.inboxView) {
owsDesktopApp.inboxView.networkStatusView.setSocketReconnectInterval(60000);
}
} else {
console.log('offline');
messageReceiver.close();

View file

@ -32,12 +32,18 @@
return { unreadCount : 0 };
},
handleMessageError: function(message, errors) {
this.trigger('messageError', message, errors);
},
initialize: function() {
this.contactCollection = new Backbone.Collection();
this.messageCollection = new Whisper.MessageCollection([], {
conversation: this
});
this.messageCollection.on('change:errors', this.handleMessageError, this);
this.on('change:avatar', this.updateAvatarUrl);
this.on('destroy', this.revokeAvatarUrl);
this.on('read', this.onReadMessage);

View file

@ -6,37 +6,6 @@
window.Whisper = window.Whisper || {};
var SocketView = Whisper.View.extend({
className: 'status',
initialize: function() {
setInterval(this.updateStatus.bind(this), 5000);
},
updateStatus: function() {
var className, message = '';
if (typeof getSocketStatus === 'function') {
switch(getSocketStatus()) {
case WebSocket.CONNECTING:
className = 'connecting';
break;
case WebSocket.OPEN:
className = 'open';
break;
case WebSocket.CLOSING:
className = 'closing';
break;
case WebSocket.CLOSED:
className = 'closed';
message = i18n('disconnected');
break;
}
if (!this.$el.hasClass(className)) {
this.$el.attr('class', className);
this.$el.text(message);
}
}
}
});
Whisper.ConversationStack = Whisper.View.extend({
className: 'conversation-stack',
open: function(conversation) {
@ -112,6 +81,11 @@
});
var inboxCollection = getInboxCollection();
inboxCollection.on('messageError', function() {
this.networkStatusView.render();
});
this.inboxListView = new Whisper.ConversationListView({
el : this.$('.inbox'),
collection : inboxCollection
@ -139,7 +113,8 @@
this.listenTo(this.searchView, 'open',
this.openConversation.bind(this, null));
new SocketView().render().$el.appendTo(this.$('.socket-status'));
this.networkStatusView = new Whisper.NetworkStatusView();
this.$el.find('.network-status-container').append(this.networkStatusView.render().el);
extension.windows.onClosed(function() {
this.inboxListView.stopListening();

View file

@ -0,0 +1,92 @@
(function () {
'use strict';
window.Whisper = window.Whisper || {};
Whisper.NetworkStatusView = Whisper.View.extend({
className: 'network-status',
initialize: function() {
this.$el.hide();
var renderIntervalHandle = setInterval(this.render.bind(this), 5000);
extension.windows.onClosed(function () { clearInterval(renderIntervalHandle); });
setTimeout(this.finishConnectingGracePeriod.bind(this), 5000);
this.withinConnectingGracePeriod = true;
this.setSocketReconnectInterval(null);
window.addEventListener('online', this.render.bind(this));
window.addEventListener('offline', this.render.bind(this));
},
finishConnectingGracePeriod: function() {
this.withinConnectingGracePeriod = false;
},
setSocketReconnectInterval: function(millis) {
this.socketReconnectWaitDuration = moment.duration(millis);
},
navigatorOnLine: function() { return navigator.onLine; },
getSocketStatus: function() { return window.getSocketStatus(); },
getNetworkStatus: function() {
var message = '';
var instructions = '';
var hasInterruption = false;
var socketStatus = this.getSocketStatus();
switch(socketStatus) {
case WebSocket.CONNECTING:
message = i18n('connecting');
this.setSocketReconnectInterval(null);
break;
case WebSocket.OPEN:
this.setSocketReconnectInterval(null);
break;
case WebSocket.CLOSING:
message = i18n('disconnected');
instructions = i18n('checkNetworkConnection');
hasInterruption = true;
break;
case WebSocket.CLOSED:
message = i18n('disconnected');
instructions = i18n('checkNetworkConnection');
hasInterruption = true;
break;
}
if (socketStatus == WebSocket.CONNECTING && !this.withinConnectingGracePeriod) {
hasInterruption = true;
}
if (this.socketReconnectWaitDuration.asSeconds() > 0) {
instructions = i18n('attemptingReconnection', [this.socketReconnectWaitDuration.asSeconds()]);
}
if (!this.navigatorOnLine()) {
hasInterruption = true;
message = i18n('offline');
instructions = i18n('checkNetworkConnection');
}
return {
message: message,
instructions: instructions,
hasInterruption: hasInterruption
};
},
render: function() {
var status = this.getNetworkStatus();
if (status.hasInterruption) {
this.$el.slideDown();
}
else {
this.$el.hide();
}
var template = Whisper.View.Templates['networkStatus'];
this.$el.html(Mustache.render(template, status, Whisper.View.Templates));
return this;
}
});
})();