mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

App loading screen: show messages processed so far

Browse source 
Also, show the same loading screen on index.js before we've bootstrapped
the app.

FREEBIE
This commit is contained in:
Scott Nonnenberg 2017-07-25 16:00:06 -07:00
parent e36aa524c9
commit 305bd6b3b8
10 changed files with 110 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

18
_locales/en/messages.json
View file

@ -1,4 +1,22 @@
{ {
"loading": {
"message": "Loading...",
"description": "Message shown on the loading screen before we've loaded any messages"
},
"upgradingDatabase": {
"message": "Upgrading database. This may take some time...",
"description": "Message shown on the loading screen when we're changing database structure on first run of a new version"
},
"loadingMessages": {
"message": "Loading messages. $count$ so far...",
"description": "Message shown on the loading screen when we're catching up on the backlog of messages",
"placeholders": {
"count": {
"content": "$1",
"example": "5"
}
}
},
"me": { "me": {
"message": "Me", "message": "Me",
"description": "The label for yourself when shown in a group member list" "description": "The label for yourself when shown in a group member list"

1
background.html
View file

@ -10,6 +10,7 @@
<span class='dot'></span> <span class='dot'></span>
<span class='dot'></span> <span class='dot'></span>
</div> </div>
<div class='message'>{{ message }}</div>
</div> </div>
</script> </script>
<script type='text/x-tmpl-mustache' id='conversation-loading-screen'> <script type='text/x-tmpl-mustache' id='conversation-loading-screen'>

11
index.html
View file

@ -12,6 +12,17 @@
<script type="text/javascript" src="js/chromium.js"></script> <script type="text/javascript" src="js/chromium.js"></script>
</head> </head>
<body id="signal-container" class='signal index'> <body id="signal-container" class='signal index'>
<div class='app-loading-screen'>
<div class='content'>
<img src='/images/icon_128.png'>
<div class='container'>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
</div>
<div class='message'>Loading...</div>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script> <script type="text/javascript" src="js/index.js"></script>
</body> </body>
</html> </html>

9
js/background.js
View file

@ -123,6 +123,7 @@
messageReceiver.addEventListener('verified', onVerified); messageReceiver.addEventListener('verified', onVerified);
messageReceiver.addEventListener('error', onError); messageReceiver.addEventListener('error', onError);
messageReceiver.addEventListener('empty', onEmpty); messageReceiver.addEventListener('empty', onEmpty);
messageReceiver.addEventListener('progress', onProgress);
window.textsecure.messaging = new textsecure.MessageSender( window.textsecure.messaging = new textsecure.MessageSender(
SERVER_URL, SERVER_PORTS, USERNAME, PASSWORD SERVER_URL, SERVER_PORTS, USERNAME, PASSWORD
@ -158,6 +159,14 @@
} }
}, 500); }, 500);
} }
function onProgress(ev) {
var count = ev.count;
var view = window.owsDesktopApp.inboxView;
if (view) {
view.onProgress(count);
}
}
function onContactReceived(ev) { function onContactReceived(ev) {
var details = ev.contactDetails; var details = ev.contactDetails;

24
js/libtextsecure.js
View file

@ -38245,6 +38245,8 @@ var TextSecureServer = (function() {
*/ */
function MessageReceiver(url, ports, username, password, signalingKey) { function MessageReceiver(url, ports, username, password, signalingKey) {
this.count = 0;
this.url = url; this.url = url;
this.signalingKey = signalingKey; this.signalingKey = signalingKey;
this.username = username; this.username = username;
@ -38357,11 +38359,23 @@ MessageReceiver.prototype.extend({
}.bind(this); }.bind(this);
var scheduleDispatch = function() { var scheduleDispatch = function() {
// resetting count to zero so everything queued after this starts over again
this.count = 0;
this.pending = this.pending.then(dispatchEmpty, dispatchEmpty); this.pending = this.pending.then(dispatchEmpty, dispatchEmpty);
}.bind(this); }.bind(this);
Promise.all(incoming).then(scheduleDispatch, scheduleDispatch); Promise.all(incoming).then(scheduleDispatch, scheduleDispatch);
}, },
updateProgress: function(count) {
// count by 10s
if (count % 10 !== 0) {
return;
}
var ev = new Event('progress');
ev.count = count;
this.dispatchEvent(ev);
},
queueAllCached: function() { queueAllCached: function() {
this.getAllFromCache().then(function(items) { this.getAllFromCache().then(function(items) {
for (var i = 0, max = items.length; i < max; i += 1) { for (var i = 0, max = items.length; i < max; i += 1) {
@ -38446,6 +38460,7 @@ MessageReceiver.prototype.extend({
return textsecure.storage.unprocessed.remove(id); return textsecure.storage.unprocessed.remove(id);
}, },
queueDecryptedEnvelope: function(envelope, plaintext) { queueDecryptedEnvelope: function(envelope, plaintext) {
var count = this.count += 1;
var id = this.getEnvelopeId(envelope); var id = this.getEnvelopeId(envelope);
console.log('queueing decrypted envelope', id); console.log('queueing decrypted envelope', id);
@ -38454,11 +38469,14 @@ MessageReceiver.prototype.extend({
this.pending = this.pending.then(taskWithTimeout, taskWithTimeout); this.pending = this.pending.then(taskWithTimeout, taskWithTimeout);
return this.pending.catch(function(error) { return this.pending.then(function() {
this.updateProgress(count);
}.bind(this), function(error) {
console.log('queueDecryptedEnvelope error handling envelope', id, ':', error && error.stack ? error.stack : error); console.log('queueDecryptedEnvelope error handling envelope', id, ':', error && error.stack ? error.stack : error);
}); });
}, },
queueEnvelope: function(envelope) { queueEnvelope: function(envelope) {
var count = this.count += 1;
var id = this.getEnvelopeId(envelope); var id = this.getEnvelopeId(envelope);
console.log('queueing envelope', id); console.log('queueing envelope', id);
@ -38467,7 +38485,9 @@ MessageReceiver.prototype.extend({
this.pending = this.pending.then(taskWithTimeout, taskWithTimeout); this.pending = this.pending.then(taskWithTimeout, taskWithTimeout);
return this.pending.catch(function(error) { return this.pending.then(function() {
this.updateProgress(count);
}.bind(this), function(error) {
console.log('queueEnvelope error handling envelope', id, ':', error && error.stack ? error.stack : error); console.log('queueEnvelope error handling envelope', id, ':', error && error.stack ? error.stack : error);
}); });
}, },

5
js/views/conversation_view.js
View file

@ -59,10 +59,7 @@
Whisper.ConversationLoadingScreen = Whisper.View.extend({ Whisper.ConversationLoadingScreen = Whisper.View.extend({
templateName: 'conversation-loading-screen', templateName: 'conversation-loading-screen',
className: 'conversation-loading-screen', className: 'conversation-loading-screen'
render_attributes: {
loading: i18n('loading')
}
}); });
Whisper.ConversationTitleView = Whisper.View.extend({ Whisper.ConversationTitleView = Whisper.View.extend({

14
js/views/inbox_view.js
View file

@ -64,8 +64,14 @@
Whisper.AppLoadingScreen = Whisper.View.extend({ Whisper.AppLoadingScreen = Whisper.View.extend({
templateName: 'app-loading-screen', templateName: 'app-loading-screen',
className: 'app-loading-screen', className: 'app-loading-screen',
updateProgress: function(count) {
if (count > 0) {
var message = i18n('loadingMessages', count.toString());
this.$('.message').text(message);
}
},
render_attributes: { render_attributes: {
loading: i18n('loading') message: i18n('loading')
} }
}); });
@ -171,6 +177,12 @@
view.remove(); view.remove();
} }
}, },
onProgress: function(count) {
var view = this.appLoadingScreen;
if (view) {
view.updateProgress(count);
}
},
focusConversation: function(e) { focusConversation: function(e) {
if (e && this.$(e.target).closest('.placeholder').length) { if (e && this.$(e.target).closest('.placeholder').length) {
return; return;

24
libtextsecure/message_receiver.js
View file

@ -3,6 +3,8 @@
*/ */
function MessageReceiver(url, ports, username, password, signalingKey) { function MessageReceiver(url, ports, username, password, signalingKey) {
this.count = 0;
this.url = url; this.url = url;
this.signalingKey = signalingKey; this.signalingKey = signalingKey;
this.username = username; this.username = username;
@ -115,11 +117,23 @@ MessageReceiver.prototype.extend({
}.bind(this); }.bind(this);
var scheduleDispatch = function() { var scheduleDispatch = function() {
// resetting count to zero so everything queued after this starts over again
this.count = 0;
this.pending = this.pending.then(dispatchEmpty, dispatchEmpty); this.pending = this.pending.then(dispatchEmpty, dispatchEmpty);
}.bind(this); }.bind(this);
Promise.all(incoming).then(scheduleDispatch, scheduleDispatch); Promise.all(incoming).then(scheduleDispatch, scheduleDispatch);
}, },
updateProgress: function(count) {
// count by 10s
if (count % 10 !== 0) {
return;
}
var ev = new Event('progress');
ev.count = count;
this.dispatchEvent(ev);
},
queueAllCached: function() { queueAllCached: function() {
this.getAllFromCache().then(function(items) { this.getAllFromCache().then(function(items) {
for (var i = 0, max = items.length; i < max; i += 1) { for (var i = 0, max = items.length; i < max; i += 1) {
@ -204,6 +218,7 @@ MessageReceiver.prototype.extend({
return textsecure.storage.unprocessed.remove(id); return textsecure.storage.unprocessed.remove(id);
}, },
queueDecryptedEnvelope: function(envelope, plaintext) { queueDecryptedEnvelope: function(envelope, plaintext) {
var count = this.count += 1;
var id = this.getEnvelopeId(envelope); var id = this.getEnvelopeId(envelope);
console.log('queueing decrypted envelope', id); console.log('queueing decrypted envelope', id);
@ -212,11 +227,14 @@ MessageReceiver.prototype.extend({
this.pending = this.pending.then(taskWithTimeout, taskWithTimeout); this.pending = this.pending.then(taskWithTimeout, taskWithTimeout);
return this.pending.catch(function(error) { return this.pending.then(function() {
this.updateProgress(count);
}.bind(this), function(error) {
console.log('queueDecryptedEnvelope error handling envelope', id, ':', error && error.stack ? error.stack : error); console.log('queueDecryptedEnvelope error handling envelope', id, ':', error && error.stack ? error.stack : error);
}); });
}, },
queueEnvelope: function(envelope) { queueEnvelope: function(envelope) {
var count = this.count += 1;
var id = this.getEnvelopeId(envelope); var id = this.getEnvelopeId(envelope);
console.log('queueing envelope', id); console.log('queueing envelope', id);
@ -225,7 +243,9 @@ MessageReceiver.prototype.extend({
this.pending = this.pending.then(taskWithTimeout, taskWithTimeout); this.pending = this.pending.then(taskWithTimeout, taskWithTimeout);
return this.pending.catch(function(error) { return this.pending.then(function() {
this.updateProgress(count);
}.bind(this), function(error) {
console.log('queueEnvelope error handling envelope', id, ':', error && error.stack ? error.stack : error); console.log('queueEnvelope error handling envelope', id, ':', error && error.stack ? error.stack : error);
}); });
}, },

14
stylesheets/_global.scss
View file

@ -565,17 +565,15 @@ input[type=text], input[type=search], textarea {
align-items: center; align-items: center;
.content { .content {
position: absolute; margin-left: auto;
top: 50%; margin-right: auto;
left: 50%; text-align: center;
transform: translate(-50%, -50%);
} }
.container { .container {
position: absolute; margin-left: auto;
left: 50%; margin-right: auto;
transform: translate(-50%, 0);
width: 78px; width: 78px;
height: 22px;
} }
.dot { .dot {

15
stylesheets/manifest.css
View file

@ -504,15 +504,14 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
display: flex; display: flex;
align-items: center; } align-items: center; }
.app-loading-screen .content { .app-loading-screen .content {
position: absolute; margin-left: auto;
top: 50%; margin-right: auto;
left: 50%; text-align: center; }
transform: translate(-50%, -50%); }
.app-loading-screen .container { .app-loading-screen .container {
position: absolute; margin-left: auto;
left: 50%; margin-right: auto;
transform: translate(-50%, 0); width: 78px;
width: 78px; } height: 22px; }
.app-loading-screen .dot { .app-loading-screen .dot {
width: 14px; width: 14px;
height: 14px; height: 14px;