App loading screen: show messages processed so far
Also, show the same loading screen on index.js before we've bootstrapped the app. FREEBIE
This commit is contained in:
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'>
|
||||
|
|
11
index.html
11
index.html
|
@ -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…
Reference in New Issue