App loading screen: show messages processed so far

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

FREEBIE
pull/749/head
Scott Nonnenberg 7 years ago
parent e36aa524c9
commit 305bd6b3b8

@ -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": {
"message": "Me",
"description": "The label for yourself when shown in a group member list"

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

@ -12,6 +12,17 @@
<script type="text/javascript" src="js/chromium.js"></script>
</head>
<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>
</body>
</html>

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

@ -38245,6 +38245,8 @@ var TextSecureServer = (function() {
*/
function MessageReceiver(url, ports, username, password, signalingKey) {
this.count = 0;
this.url = url;
this.signalingKey = signalingKey;
this.username = username;
@ -38357,11 +38359,23 @@ MessageReceiver.prototype.extend({
}.bind(this);
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);
}.bind(this);
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() {
this.getAllFromCache().then(function(items) {
for (var i = 0, max = items.length; i < max; i += 1) {
@ -38446,6 +38460,7 @@ MessageReceiver.prototype.extend({
return textsecure.storage.unprocessed.remove(id);
},
queueDecryptedEnvelope: function(envelope, plaintext) {
var count = this.count += 1;
var id = this.getEnvelopeId(envelope);
console.log('queueing decrypted envelope', id);
@ -38454,11 +38469,14 @@ MessageReceiver.prototype.extend({
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);
});
},
queueEnvelope: function(envelope) {
var count = this.count += 1;
var id = this.getEnvelopeId(envelope);
console.log('queueing envelope', id);
@ -38467,7 +38485,9 @@ MessageReceiver.prototype.extend({
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);
});
},

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

@ -64,8 +64,14 @@
Whisper.AppLoadingScreen = Whisper.View.extend({
templateName: '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: {
loading: i18n('loading')
message: i18n('loading')
}
});
@ -171,6 +177,12 @@
view.remove();
}
},
onProgress: function(count) {
var view = this.appLoadingScreen;
if (view) {
view.updateProgress(count);
}
},
focusConversation: function(e) {
if (e && this.$(e.target).closest('.placeholder').length) {
return;

@ -3,6 +3,8 @@
*/
function MessageReceiver(url, ports, username, password, signalingKey) {
this.count = 0;
this.url = url;
this.signalingKey = signalingKey;
this.username = username;
@ -115,11 +117,23 @@ MessageReceiver.prototype.extend({
}.bind(this);
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);
}.bind(this);
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() {
this.getAllFromCache().then(function(items) {
for (var i = 0, max = items.length; i < max; i += 1) {
@ -204,6 +218,7 @@ MessageReceiver.prototype.extend({
return textsecure.storage.unprocessed.remove(id);
},
queueDecryptedEnvelope: function(envelope, plaintext) {
var count = this.count += 1;
var id = this.getEnvelopeId(envelope);
console.log('queueing decrypted envelope', id);
@ -212,11 +227,14 @@ MessageReceiver.prototype.extend({
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);
});
},
queueEnvelope: function(envelope) {
var count = this.count += 1;
var id = this.getEnvelopeId(envelope);
console.log('queueing envelope', id);
@ -225,7 +243,9 @@ MessageReceiver.prototype.extend({
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);
});
},

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

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

Loading…
Cancel
Save