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

Render animated hourglass when messages are expiring

Browse source
This commit is contained in:
lilia 2016-09-22 14:12:38 -07:00
parent 1383dc141f
commit 5f92ccd524
9 changed files with 121 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

26
js/models/messages.js
View file

@ -398,15 +398,25 @@
this.getConversation().trigger('expired', this);
},
isExpiring: function() {
return this.get('expireTimer') && this.get('expirationStartTimestamp');
},
msTilExpire: function() {
if (!this.isExpiring()) {
return Infinity;
}
var now = Date.now();
var start = this.get('expirationStartTimestamp');
var delta = this.get('expireTimer') * 1000;
var ms_from_now = start + delta - now;
if (ms_from_now < 0) {
ms_from_now = 0;
}
return ms_from_now;
},
setToExpire: function() {
if (this.get('expireTimer') && this.get('expirationStartTimestamp') && !this.expireTimer) {
var now = Date.now();
var start = this.get('expirationStartTimestamp');
var delta = this.get('expireTimer') * 1000;
var ms_from_now = start + delta - now;
if (ms_from_now < 0) {
ms_from_now = 0;
}
if (this.isExpiring() && !this.expireTimer) {
var ms_from_now = this.msTilExpire();
console.log('message', this.get('sent_at'), 'expires in', ms_from_now, 'ms');
this.expirationTimeout = setTimeout(this.markExpired.bind(this), ms_from_now);
}

16
js/views/message_view.js
View file

@ -33,6 +33,7 @@
this.listenTo(this.model, 'change:errors', this.onErrorsChanged);
this.listenTo(this.model, 'change:body', this.render);
this.listenTo(this.model, 'change:delivered', this.renderDelivered);
this.listenTo(this.model, 'change:expirationStartTimestamp', this.renderExpiring);
this.listenTo(this.model, 'change', this.renderSent);
this.listenTo(this.model, 'change:flags change:group_update', this.renderControl);
this.listenTo(this.model, 'destroy', this.onDestroy);
@ -65,8 +66,11 @@
},
onExpired: function() {
this.$el.addClass('expired');
this.$el.find('.bubble').one('webkitAnimationEnd animationend',
this.remove.bind(this));
this.$el.find('.bubble').one('webkitAnimationEnd animationend', function(e) {
if (e.target === this.$('.bubble')[0]) {
this.remove();
}
}.bind(this));
},
onDestroy: function() {
if (this.$el.hasClass('expired')) {
@ -129,6 +133,12 @@
this.$el.removeClass('control');
}
},
renderExpiring: function() {
if (this.model.isExpiring()) {
this.$('.hourglass').css('animation-duration', this.model.msTilExpire()*0.001 + 's');
this.$el.addClass('expiring');
}
},
render: function() {
var contact = this.model.isIncoming() ? this.model.getContact() : null;
this.$el.html(
@ -156,6 +166,8 @@
this.renderSent();
this.renderDelivered();
this.renderErrors();
this.renderExpiring();
this.loadAttachments();
return this;