Skip to content

Commit

Permalink
set up a new view for displaying the network status
Browse files Browse the repository at this point in the history
// FREEBIE
  • Loading branch information
svevang authored and liliakai committed Apr 8, 2017
1 parent e4a21d1 commit ed49919
Show file tree
Hide file tree
Showing 13 changed files with 326 additions and 76 deletions.
19 changes: 19 additions & 0 deletions _locales/en/messages.json
Expand Up @@ -62,6 +62,25 @@
"disconnected": {
"message": "Disconnected"
},
"connecting": {
"message": "Connecting"
},
"offline": {
"message": "Offline"
},
"checkNetworkConnection": {
"message": "Check your network connection.",
"description": "Obvious instructions for when a user's computer loses its network connection"
},
"attemptingReconnection": {
"message": "Attempting reconnect in $reconnect_duration_in_seconds$ seconds",
"placeholders": {
"reconnect_duration_in_seconds": {
"content": "$1",
"example": "10"
}
}
},
"submitDebugLog": {
"message": "Submit debug log",
"description": "Menu item and header text for debug log modal, title case."
Expand Down
16 changes: 15 additions & 1 deletion background.html
Expand Up @@ -4,6 +4,7 @@
<meta charset='utf-8'>
<script type='text/x-tmpl-mustache' id='two-column'>
<div class='gutter'>
<div class='network-status-container'></div>
<div class='title-bar active' id='header'>
<div class='header-buttons right'>
<div class='vertical-align'>
Expand All @@ -15,7 +16,6 @@
<li class='restart-signal'>{{ restartSignal }}</li>
</ul>
</div>
<span class='socket-status'></span>
</div>
</div>
<h1>Signal</h1>
Expand Down Expand Up @@ -490,6 +490,19 @@ <h3>{{ sync }}</h3>
</p>
</div>
</script>

<script type='text/x-tmpl-mustache' id='networkStatus'>
<div class='network-status-message' style='{{^instructions}}margin-top:3px;{{/instructions}}{{#instructions}}margin-top:-6px{{/instructions}}'>
<h3 style='{{^instructions}}font-size:17px;{{/instructions}}'>{{ message }}</h3>
<span>{{ instructions }}</span>
</div>
{{ #reconnectDurationAsSeconds }}
<div class="network-status-message">
{{ attemptingReconnectionMessage }}
</div>
{{/reconnectDurationAsSeconds }}
</script>

<script type='text/javascript' src='js/components.js'></script>
<script type='text/javascript' src='js/database.js'></script>
<script type='text/javascript' src='js/debugLog.js'></script>
Expand Down Expand Up @@ -537,6 +550,7 @@ <h3>{{ sync }}</h3>
<script type='text/javascript' src='js/views/conversation_search_view.js'></script>
<script type='text/javascript' src='js/views/hint_view.js'></script>
<script type='text/javascript' src='js/views/inbox_view.js'></script>
<script type='text/javascript' src='js/views/network_status_view.js'></script>
<script type='text/javascript' src='js/views/confirmation_dialog_view.js'></script>
<script type='text/javascript' src='js/views/identicon_svg_view.js'></script>
<script type='text/javascript' src='js/views/settings_view.js'></script>
Expand Down
Binary file removed images/error_red.png
Binary file not shown.
1 change: 1 addition & 0 deletions images/error_red.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions js/background.js
Expand Up @@ -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();
Expand Down
6 changes: 6 additions & 0 deletions js/models/conversations.js
Expand Up @@ -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);
Expand Down
39 changes: 7 additions & 32 deletions js/views/inbox_view.js
Expand Up @@ -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) {
Expand Down Expand Up @@ -112,6 +81,11 @@
});

var inboxCollection = getInboxCollection();

inboxCollection.on('messageError', function() {
this.networkStatusView.render();
});

this.inboxListView = new Whisper.ConversationListView({
el : this.$('.inbox'),
collection : inboxCollection
Expand Down Expand Up @@ -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();
Expand Down
92 changes: 92 additions & 0 deletions js/views/network_status_view.js
@@ -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;
}
});



})();
42 changes: 25 additions & 17 deletions stylesheets/_index.scss
Expand Up @@ -28,25 +28,33 @@
height: 100%;
width: 100%;
}
}

.socket-status {
float: right;
line-height: $button-height;
.network-status-container {

.network-status {

height:2 * $button-height;
background: url('/images/error_red.svg') no-repeat left 10px center;
background-size: 25px 25px;
background-color: #fcd156;
padding-top: 0.5 * $button-height;
padding-left: 2 * $button-height;
display: none;

.network-status-message{
h3{
padding: 0px;
margin: 0px;
margin-bottom: 4px;
font-size: 14px;
}
span{
font-size: 12px;
}
}

}

* {
display: inline;
padding-left: 20px;
vertical-align: middle;
}
.connecting .icon {
background-color: $blue;
}
.closing {
background-color: $blue_l;
}
.closed {
background: url('/images/error_red.png') no-repeat left center;
}
}

Expand Down
6 changes: 0 additions & 6 deletions stylesheets/_ios.scss
Expand Up @@ -158,10 +158,4 @@ $ios-border-color: rgba(0,0,0,0.1);
.hourglass {
@include hourglass(#999);
}
.socket-status {
position: absolute;
padding-top:-3px;
top:0;
right:5px;
}
}
34 changes: 15 additions & 19 deletions stylesheets/manifest.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit ed49919

Please sign in to comment.