mirror of
https://github.com/signalapp/Signal-Desktop.git
synced 2025-12-27 05:38:12 +00:00
67cb9bdf54
Because we do a number of async checks before allowing the real send to begin, on a slow matchine or when doing a lot of work (like receiving a lot of messages) there can be a noticeable delay between hitting Enter and the clearing of the text in the message box. In fact, newly-typed text can be added to the previous message if the delay is long enough. This prevents any interaction with the message box until the send has either been prevented or has started. FREEBIE
1018 lines
36 KiB
JavaScript
1018 lines
36 KiB
JavaScript
/*
|
|
* vim: ts=4:sw=4:expandtab
|
|
*/
|
|
(function () {
|
|
'use strict';
|
|
window.Whisper = window.Whisper || {};
|
|
|
|
Whisper.ExpiredToast = Whisper.ToastView.extend({
|
|
render_attributes: function() {
|
|
return { toastMessage: i18n('expiredWarning') };
|
|
}
|
|
});
|
|
Whisper.BlockedToast = Whisper.ToastView.extend({
|
|
render_attributes: function() {
|
|
return { toastMessage: i18n('unblockToSend') };
|
|
}
|
|
});
|
|
Whisper.LeftGroupToast = Whisper.ToastView.extend({
|
|
render_attributes: function() {
|
|
return { toastMessage: i18n('youLeftTheGroup') };
|
|
}
|
|
});
|
|
|
|
var MenuView = Whisper.View.extend({
|
|
toggleMenu: function() {
|
|
this.$('.menu-list').toggle();
|
|
}
|
|
});
|
|
|
|
var TimerMenuView = MenuView.extend({
|
|
initialize: function() {
|
|
this.render();
|
|
this.listenTo(this.model, 'change:expireTimer', this.render);
|
|
},
|
|
events: {
|
|
'click button': 'toggleMenu',
|
|
'click li': 'setTimer'
|
|
},
|
|
setTimer: function(e) {
|
|
var seconds = this.$(e.target).data().seconds;
|
|
if (seconds > 0) {
|
|
this.model.updateExpirationTimer(seconds);
|
|
} else {
|
|
this.model.updateExpirationTimer(null);
|
|
}
|
|
},
|
|
render: function() {
|
|
var seconds = this.model.get('expireTimer');
|
|
if (seconds) {
|
|
var s = Whisper.ExpirationTimerOptions.getAbbreviated(seconds);
|
|
this.$el.attr('data-time', s);
|
|
this.$el.show();
|
|
} else {
|
|
this.$el.attr('data-time', null);
|
|
this.$el.hide();
|
|
}
|
|
}
|
|
});
|
|
|
|
Whisper.ConversationLoadingScreen = Whisper.View.extend({
|
|
templateName: 'conversation-loading-screen',
|
|
className: 'conversation-loading-screen'
|
|
});
|
|
|
|
Whisper.ConversationTitleView = Whisper.View.extend({
|
|
templateName: 'conversation-title',
|
|
initialize: function() {
|
|
this.listenTo(this.model, 'change', this.render);
|
|
},
|
|
render_attributes: function() {
|
|
return {
|
|
isVerified: this.model.isVerified(),
|
|
verified: i18n('verified'),
|
|
name: this.model.getName(),
|
|
number: this.model.getNumber(),
|
|
};
|
|
}
|
|
});
|
|
|
|
Whisper.ConversationView = Whisper.View.extend({
|
|
className: function() {
|
|
return [ 'conversation', this.model.get('type') ].join(' ');
|
|
},
|
|
id: function() {
|
|
return 'conversation-' + this.model.cid;
|
|
},
|
|
template: $('#conversation').html(),
|
|
render_attributes: function() {
|
|
return {
|
|
group: this.model.get('type') === 'group',
|
|
isMe: this.model.isMe(),
|
|
avatar: this.model.getAvatar(),
|
|
expireTimer: this.model.get('expireTimer'),
|
|
'show-members' : i18n('showMembers'),
|
|
'end-session' : i18n('resetSession'),
|
|
'show-identity' : i18n('showSafetyNumber'),
|
|
'destroy' : i18n('deleteMessages'),
|
|
'send-message' : i18n('sendMessage'),
|
|
'disappearing-messages': i18n('disappearingMessages'),
|
|
'android-length-warning': i18n('androidMessageLengthWarning'),
|
|
timer_options : Whisper.ExpirationTimerOptions.models
|
|
};
|
|
},
|
|
initialize: function(options) {
|
|
this.listenTo(this.model, 'destroy', this.stopListening);
|
|
this.listenTo(this.model, 'change:verified', this.onVerifiedChange);
|
|
this.listenTo(this.model, 'change:color', this.updateColor);
|
|
this.listenTo(this.model, 'newmessage', this.addMessage);
|
|
this.listenTo(this.model, 'delivered', this.updateMessage);
|
|
this.listenTo(this.model, 'opened', this.onOpened);
|
|
this.listenTo(this.model, 'expired', this.onExpired);
|
|
this.listenTo(this.model, 'prune', this.onPrune);
|
|
this.listenTo(this.model.messageCollection, 'expired', this.onExpiredCollection);
|
|
|
|
this.lazyUpdateVerified = _.debounce(
|
|
this.model.updateVerified.bind(this.model),
|
|
1000 // one second
|
|
);
|
|
this.throttledGetProfiles = _.throttle(
|
|
this.model.getProfiles.bind(this.model),
|
|
1000 * 60 * 5 // five minutes
|
|
);
|
|
|
|
this.render();
|
|
|
|
this.loadingScreen = new Whisper.ConversationLoadingScreen();
|
|
this.loadingScreen.render();
|
|
this.loadingScreen.$el.prependTo(this.el);
|
|
|
|
this.timerMenu = new TimerMenuView({ el: this.$('.timer-menu'), model: this.model });
|
|
|
|
emoji_util.parse(this.$('.conversation-name'));
|
|
|
|
this.window = options.window;
|
|
this.fileInput = new Whisper.FileInputView({
|
|
el: this.$('form.send'),
|
|
window: this.window
|
|
});
|
|
|
|
this.titleView = new Whisper.ConversationTitleView({
|
|
el: this.$('.conversation-title'),
|
|
model: this.model
|
|
});
|
|
this.titleView.render();
|
|
|
|
this.view = new Whisper.MessageListView({
|
|
collection: this.model.messageCollection,
|
|
window: this.window
|
|
});
|
|
this.$('.discussion-container').append(this.view.el);
|
|
this.view.render();
|
|
|
|
this.$messageField = this.$('.send-message');
|
|
|
|
this.onResize = this.forceUpdateMessageFieldSize.bind(this);
|
|
this.window.addEventListener('resize', this.onResize);
|
|
|
|
this.onFocus = function() {
|
|
if (this.$el.css('display') !== 'none') {
|
|
this.markRead();
|
|
}
|
|
}.bind(this);
|
|
this.window.addEventListener('focus', this.onFocus);
|
|
|
|
extension.windows.onClosed(function () {
|
|
this.unload('windows closed');
|
|
}.bind(this));
|
|
|
|
this.fetchMessages();
|
|
|
|
this.$('.send-message').focus(this.focusBottomBar.bind(this));
|
|
this.$('.send-message').blur(this.unfocusBottomBar.bind(this));
|
|
},
|
|
|
|
events: {
|
|
'submit .send': 'checkUnverifiedSendMessage',
|
|
'input .send-message': 'updateMessageFieldSize',
|
|
'keydown .send-message': 'updateMessageFieldSize',
|
|
'click .destroy': 'destroyMessages',
|
|
'click .end-session': 'endSession',
|
|
'click .leave-group': 'leaveGroup',
|
|
'click .update-group': 'newGroupUpdate',
|
|
'click .show-identity': 'showSafetyNumber',
|
|
'click .show-members': 'showMembers',
|
|
'click .conversation-menu .hamburger': 'toggleMenu',
|
|
'click .openInbox' : 'openInbox',
|
|
'click' : 'onClick',
|
|
'click .bottom-bar': 'focusMessageField',
|
|
'click .back': 'resetPanel',
|
|
'click .microphone': 'captureAudio',
|
|
'click .disappearing-messages': 'enableDisappearingMessages',
|
|
'click .scroll-down-button-view': 'scrollToBottom',
|
|
'focus .send-message': 'focusBottomBar',
|
|
'change .file-input': 'toggleMicrophone',
|
|
'blur .send-message': 'unfocusBottomBar',
|
|
'loadMore .message-list': 'loadMoreMessages',
|
|
'newOffscreenMessage .message-list': 'addScrollDownButtonWithCount',
|
|
'atBottom .message-list': 'removeScrollDownButton',
|
|
'farFromBottom .message-list': 'addScrollDownButton',
|
|
'lazyScroll .message-list': 'onLazyScroll',
|
|
'close .menu': 'closeMenu',
|
|
'select .message-list .entry': 'messageDetail',
|
|
'force-resize': 'forceUpdateMessageFieldSize',
|
|
'show-identity': 'showSafetyNumber'
|
|
},
|
|
|
|
onPrune: function() {
|
|
if (!this.model.messageCollection.length || !this.lastActivity) {
|
|
return;
|
|
}
|
|
|
|
var oneHourAgo = Date.now() - 60 * 60 * 1000;
|
|
if (this.isHidden() && this.lastActivity < oneHourAgo) {
|
|
this.unload('inactivity');
|
|
} else if (this.view.atBottom()) {
|
|
this.trim();
|
|
}
|
|
},
|
|
|
|
unload: function(reason) {
|
|
console.log('unloading conversation', this.model.id, 'due to:', reason);
|
|
|
|
this.timerMenu.remove();
|
|
this.fileInput.remove();
|
|
this.titleView.remove();
|
|
|
|
if (this.captureAudioView) {
|
|
this.captureAudioView.remove();
|
|
}
|
|
if (this.banner) {
|
|
this.banner.remove();
|
|
}
|
|
if (this.lastSeenIndicator) {
|
|
this.lastSeenIndicator.remove();
|
|
}
|
|
if (this.scrollDownButton) {
|
|
this.scrollDownButton.remove();
|
|
}
|
|
if (this.panels && this.panels.length) {
|
|
for (var i = 0, max = this.panels.length; i < max; i += 1) {
|
|
var panel = this.panels[i];
|
|
panel.remove();
|
|
}
|
|
}
|
|
|
|
this.window.removeEventListener('resize', this.onResize);
|
|
this.window.removeEventListener('focus', this.onFocus);
|
|
|
|
window.autosize.destroy(this.$messageField);
|
|
|
|
this.view.remove();
|
|
|
|
this.remove();
|
|
|
|
this.model.messageCollection.forEach(function(model) {
|
|
model.trigger('unload');
|
|
});
|
|
this.model.messageCollection.reset([]);
|
|
this.model.revokeAvatarUrl();
|
|
},
|
|
|
|
trim: function() {
|
|
var MAX = 100;
|
|
var toRemove = this.model.messageCollection.length - MAX;
|
|
if (toRemove <= 0) {
|
|
return;
|
|
}
|
|
|
|
var models = [];
|
|
for (var i = 0; i < toRemove; i += 1) {
|
|
var model = this.model.messageCollection.at(i);
|
|
models.push(model);
|
|
}
|
|
|
|
if (!models.length) {
|
|
return;
|
|
}
|
|
|
|
console.log('trimming conversation', this.model.id, 'of', models.length, 'old messages');
|
|
|
|
this.model.messageCollection.remove(models);
|
|
_.forEach(models, function(model) {
|
|
model.trigger('unload');
|
|
});
|
|
},
|
|
|
|
markAllAsVerifiedDefault: function(unverified) {
|
|
return Promise.all(unverified.map(function(contact) {
|
|
if (contact.isUnverified()) {
|
|
return contact.setVerifiedDefault();
|
|
}
|
|
}.bind(this)));
|
|
},
|
|
|
|
|
|
markAllAsApproved: function(untrusted) {
|
|
return Promise.all(untrusted.map(function(contact) {
|
|
return contact.setApproved();
|
|
}.bind(this)));
|
|
},
|
|
|
|
openSafetyNumberScreens: function(unverified) {
|
|
if (unverified.length === 1) {
|
|
this.showSafetyNumber(null, unverified.at(0));
|
|
return;
|
|
}
|
|
|
|
this.showMembers(null, unverified, {needVerify: true});
|
|
},
|
|
|
|
onVerifiedChange: function() {
|
|
if (this.model.isUnverified()) {
|
|
var unverified = this.model.getUnverified();
|
|
var message;
|
|
if (!unverified.length) {
|
|
return;
|
|
}
|
|
if (unverified.length > 1) {
|
|
message = i18n('multipleNoLongerVerified');
|
|
} else {
|
|
message = i18n('noLongerVerified', unverified.at(0).getTitle());
|
|
}
|
|
|
|
// Need to re-add, since unverified set may have changed
|
|
if (this.banner) {
|
|
this.banner.remove();
|
|
this.banner = null;
|
|
}
|
|
|
|
this.banner = new Whisper.BannerView({
|
|
message: message,
|
|
onDismiss: function() {
|
|
this.markAllAsVerifiedDefault(unverified);
|
|
}.bind(this),
|
|
onClick: function() {
|
|
this.openSafetyNumberScreens(unverified);
|
|
}.bind(this)
|
|
});
|
|
|
|
var container = this.$('.discussion-container');
|
|
container.append(this.banner.el);
|
|
} else if (this.banner) {
|
|
this.banner.remove();
|
|
this.banner = null;
|
|
}
|
|
},
|
|
|
|
enableDisappearingMessages: function() {
|
|
if (!this.model.get('expireTimer')) {
|
|
this.model.updateExpirationTimer(
|
|
moment.duration(1, 'day').asSeconds()
|
|
);
|
|
}
|
|
},
|
|
toggleMicrophone: function() {
|
|
if (this.$('.send-message').val().length > 0 || this.fileInput.hasFiles()) {
|
|
this.$('.capture-audio').hide();
|
|
} else {
|
|
this.$('.capture-audio').show();
|
|
}
|
|
},
|
|
toggleLengthWarning: function() {
|
|
if (this.$('.send-message').val().length > 2000) {
|
|
this.$('.android-length-warning').show();
|
|
} else {
|
|
this.$('.android-length-warning').hide();
|
|
}
|
|
},
|
|
captureAudio: function(e) {
|
|
e.preventDefault();
|
|
|
|
if (this.captureAudioView) {
|
|
this.captureAudioView.remove();
|
|
this.captureAudioView = null;
|
|
}
|
|
|
|
var view = this.captureAudioView = new Whisper.RecorderView();
|
|
view.render();
|
|
view.on('send', this.handleAudioCapture.bind(this));
|
|
view.on('closed', this.endCaptureAudio.bind(this));
|
|
view.$el.appendTo(this.$('.capture-audio'));
|
|
|
|
this.$('.send-message').attr('disabled','disabled');
|
|
this.$('.microphone').hide();
|
|
},
|
|
handleAudioCapture: function(blob) {
|
|
this.fileInput.file = blob;
|
|
this.fileInput.isVoiceNote = true;
|
|
this.fileInput.previewImages();
|
|
this.$('.bottom-bar form').submit();
|
|
},
|
|
endCaptureAudio: function() {
|
|
this.$('.send-message').removeAttr('disabled');
|
|
this.$('.microphone').show();
|
|
this.captureAudioView = null;
|
|
},
|
|
|
|
unfocusBottomBar: function() {
|
|
this.$('.bottom-bar form').removeClass('active');
|
|
},
|
|
focusBottomBar: function() {
|
|
this.$('.bottom-bar form').addClass('active');
|
|
},
|
|
|
|
onLazyScroll: function() {
|
|
// The in-progress fetch check is important, because while that happens, lots
|
|
// of messages are added to the DOM, one by one, changing window size and
|
|
// generating scroll events.
|
|
if (!this.isHidden() && window.isFocused() && !this.inProgressFetch) {
|
|
this.lastActivity = Date.now();
|
|
this.markRead();
|
|
}
|
|
},
|
|
updateUnread: function() {
|
|
this.resetLastSeenIndicator();
|
|
// Waiting for scrolling caused by resetLastSeenIndicator to settle down
|
|
setTimeout(this.markRead.bind(this), 1);
|
|
},
|
|
|
|
onLoaded: function () {
|
|
var view = this.loadingScreen;
|
|
if (view) {
|
|
this.loadingScreen = null;
|
|
view.remove();
|
|
}
|
|
},
|
|
|
|
onOpened: function() {
|
|
this.lastActivity = Date.now();
|
|
|
|
this.statusFetch = this.throttledGetProfiles().then(function() {
|
|
this.model.updateVerified().then(function() {
|
|
this.onVerifiedChange();
|
|
this.statusFetch = null;
|
|
console.log('done with status fetch');
|
|
}.bind(this));
|
|
}.bind(this));
|
|
|
|
Promise.all([this.statusFetch, this.inProgressFetch])
|
|
.then(this.onLoaded.bind(this), this.onLoaded.bind(this));
|
|
|
|
this.view.resetScrollPosition();
|
|
this.$el.trigger('force-resize');
|
|
this.focusMessageField();
|
|
|
|
if (this.inProgressFetch) {
|
|
this.inProgressFetch.then(this.updateUnread.bind(this));
|
|
} else {
|
|
this.updateUnread();
|
|
}
|
|
},
|
|
|
|
addScrollDownButtonWithCount: function() {
|
|
this.updateScrollDownButton(1);
|
|
},
|
|
|
|
addScrollDownButton: function() {
|
|
if (!this.scrollDownButton) {
|
|
this.updateScrollDownButton();
|
|
}
|
|
},
|
|
|
|
updateScrollDownButton: function(count) {
|
|
if (this.scrollDownButton) {
|
|
this.scrollDownButton.increment(count);
|
|
} else {
|
|
this.scrollDownButton = new Whisper.ScrollDownButtonView({count: count});
|
|
this.scrollDownButton.render();
|
|
var container = this.$('.discussion-container');
|
|
container.append(this.scrollDownButton.el);
|
|
}
|
|
},
|
|
|
|
removeScrollDownButton: function() {
|
|
if (this.scrollDownButton) {
|
|
var button = this.scrollDownButton;
|
|
this.scrollDownButton = null;
|
|
button.remove();
|
|
}
|
|
},
|
|
|
|
removeLastSeenIndicator: function() {
|
|
if (this.lastSeenIndicator) {
|
|
var indicator = this.lastSeenIndicator;
|
|
this.lastSeenIndicator = null;
|
|
indicator.remove();
|
|
}
|
|
},
|
|
|
|
scrollToBottom: function() {
|
|
// If we're above the last seen indicator, we should scroll there instead
|
|
// Note: if we don't end up at the bottom of the conversation, button will not go away!
|
|
if (this.lastSeenIndicator) {
|
|
var location = this.lastSeenIndicator.$el.position().top;
|
|
if (location > 0) {
|
|
this.lastSeenIndicator.el.scrollIntoView();
|
|
return;
|
|
} else {
|
|
this.removeLastSeenIndicator();
|
|
}
|
|
}
|
|
this.view.scrollToBottom();
|
|
},
|
|
|
|
resetLastSeenIndicator: function(options) {
|
|
options = options || {};
|
|
_.defaults(options, {scroll: true});
|
|
|
|
var unreadCount = 0;
|
|
var oldestUnread = null;
|
|
|
|
// We need to iterate here because unseen non-messages do not contribute to
|
|
// the badge number, but should be reflected in the indicator's count.
|
|
this.model.messageCollection.forEach(function(model) {
|
|
if (!model.get('unread')) {
|
|
return;
|
|
}
|
|
|
|
unreadCount += 1;
|
|
if (!oldestUnread) {
|
|
oldestUnread = model;
|
|
}
|
|
});
|
|
|
|
this.removeLastSeenIndicator();
|
|
|
|
if (oldestUnread) {
|
|
this.lastSeenIndicator = new Whisper.LastSeenIndicatorView({count: unreadCount});
|
|
var lastSeenEl = this.lastSeenIndicator.render().$el;
|
|
|
|
lastSeenEl.insertBefore(this.$('#' + oldestUnread.get('id')));
|
|
|
|
if (this.view.atBottom() || options.scroll) {
|
|
lastSeenEl[0].scrollIntoView();
|
|
}
|
|
|
|
// scrollIntoView is an async operation, but we have no way to listen for
|
|
// completion of the resultant scroll.
|
|
setTimeout(function() {
|
|
if (!this.view.atBottom()) {
|
|
this.addScrollDownButtonWithCount(unreadCount);
|
|
}
|
|
}.bind(this), 1);
|
|
}
|
|
},
|
|
|
|
focusMessageField: function() {
|
|
this.$messageField.prop('disabled', false);
|
|
this.$messageField.focus();
|
|
},
|
|
|
|
loadMoreMessages: function() {
|
|
if (this.inProgressFetch) {
|
|
return;
|
|
}
|
|
|
|
this.view.measureScrollPosition();
|
|
var startingHeight = this.view.scrollHeight;
|
|
|
|
this.fetchMessages().then(function() {
|
|
// We delay this work to let scrolling/layout settle down first
|
|
setTimeout(function() {
|
|
this.view.measureScrollPosition();
|
|
var endingHeight = this.view.scrollHeight;
|
|
var delta = endingHeight - startingHeight;
|
|
|
|
var newScrollPosition = this.view.scrollPosition + delta - this.view.outerHeight;
|
|
this.view.$el.scrollTop(newScrollPosition);
|
|
}.bind(this), 1);
|
|
}.bind(this));
|
|
},
|
|
|
|
fetchMessages: function() {
|
|
console.log('fetchMessages');
|
|
this.$('.bar-container').show();
|
|
if (this.inProgressFetch) {
|
|
console.log('Multiple fetchMessage calls!');
|
|
}
|
|
this.inProgressFetch = this.model.fetchContacts().then(function() {
|
|
return this.model.fetchMessages().then(function() {
|
|
this.$('.bar-container').hide();
|
|
this.model.messageCollection.where({unread: 1}).forEach(function(m) {
|
|
m.fetch();
|
|
});
|
|
this.inProgressFetch = null;
|
|
}.bind(this));
|
|
}.bind(this)).catch(function(error) {
|
|
console.log('fetchMessages error:', error && error.stack ? error.stack : error);
|
|
this.inProgressFetch = null;
|
|
}.bind(this));
|
|
|
|
return this.inProgressFetch;
|
|
},
|
|
|
|
onExpired: function(message) {
|
|
var mine = this.model.messageCollection.get(message.id);
|
|
if (mine && mine.cid !== message.cid) {
|
|
mine.trigger('expired', mine);
|
|
}
|
|
},
|
|
onExpiredCollection: function(message) {
|
|
console.log('removing message', message.get('sent_at'), 'from collection');
|
|
this.model.messageCollection.remove(message.id);
|
|
},
|
|
|
|
addMessage: function(message) {
|
|
// This is debounced, so it won't hit the database too often.
|
|
this.lazyUpdateVerified();
|
|
|
|
this.model.messageCollection.add(message, {merge: true});
|
|
message.setToExpire();
|
|
|
|
if (this.lastSeenIndicator) {
|
|
this.lastSeenIndicator.increment(1);
|
|
}
|
|
|
|
if (!this.isHidden() && !window.isFocused()) {
|
|
// The conversation is visible, but window is not focused
|
|
if (!this.lastSeenIndicator) {
|
|
this.resetLastSeenIndicator({scroll: false});
|
|
} else if (this.view.atBottom() && this.model.get('unreadCount') === this.lastSeenIndicator.getCount()) {
|
|
// The count check ensures that the last seen indicator is still in
|
|
// sync with the real number of unread, so we can scroll to it.
|
|
// We only do this if we're at the bottom, because that signals that
|
|
// the user is okay with us changing scroll around so they see the
|
|
// right unseen message first.
|
|
this.resetLastSeenIndicator({scroll: true});
|
|
}
|
|
}
|
|
else if (!this.isHidden() && window.isFocused()) {
|
|
// The conversation is visible and in focus
|
|
this.markRead();
|
|
|
|
// When we're scrolled up and we don't already have a last seen indicator
|
|
// we add a new one.
|
|
if (!this.view.atBottom() && !this.lastSeenIndicator) {
|
|
this.resetLastSeenIndicator({scroll: false});
|
|
}
|
|
}
|
|
},
|
|
updateMessage: function(message) {
|
|
this.model.messageCollection.add(message, {merge: true});
|
|
},
|
|
|
|
openInbox: function() {
|
|
openInbox();
|
|
},
|
|
|
|
onClick: function(e) {
|
|
// If there are sub-panels open, we don't want to respond to clicks
|
|
if (!this.panels || !this.panels.length) {
|
|
this.closeMenu(e);
|
|
this.markRead();
|
|
}
|
|
},
|
|
|
|
findNewestVisibleUnread: function() {
|
|
var collection = this.model.messageCollection;
|
|
var length = collection.length;
|
|
var viewportBottom = this.view.outerHeight;
|
|
var unreadCount = this.model.get('unreadCount') || 0;
|
|
|
|
// Start with the most recent message, search backwards in time
|
|
var foundUnread = 0;
|
|
for (var i = length - 1; i >= 0; i -= 1) {
|
|
// Search the latest 30, then stop if we believe we've covered all known
|
|
// unread messages. The unread should be relatively recent.
|
|
// Why? local notifications can be unread but won't be reflected the
|
|
// conversation's unread count.
|
|
if (i > 30 && foundUnread >= unreadCount) {
|
|
return;
|
|
}
|
|
|
|
var message = collection.at(i);
|
|
if (!message.get('unread')) {
|
|
continue;
|
|
}
|
|
|
|
foundUnread += 1;
|
|
|
|
var el = this.$('#' + message.id);
|
|
var position = el.position();
|
|
var top = position.top;
|
|
|
|
// We're fully below the viewport, continue searching up.
|
|
if (top > viewportBottom) {
|
|
continue;
|
|
}
|
|
|
|
// If the bottom fits on screen, we'll call it visible. Even if the
|
|
// message is really tall.
|
|
var height = el.height();
|
|
var bottom = top + height;
|
|
if (bottom <= viewportBottom) {
|
|
return message;
|
|
}
|
|
|
|
// Continue searching up.
|
|
}
|
|
},
|
|
|
|
markRead: function() {
|
|
var unread;
|
|
|
|
if (this.view.atBottom()) {
|
|
unread = this.model.messageCollection.last();
|
|
} else {
|
|
unread = this.findNewestVisibleUnread();
|
|
}
|
|
|
|
if (unread) {
|
|
this.model.markRead(unread.get('received_at'));
|
|
}
|
|
},
|
|
|
|
showMembers: function(e, members, options) {
|
|
options = options || {};
|
|
_.defaults(options, {needVerify: false});
|
|
|
|
members = members || this.model.contactCollection;
|
|
|
|
var view = new Whisper.GroupMemberList({
|
|
model: members,
|
|
// we pass this in to allow nested panels
|
|
listenBack: this.listenBack.bind(this),
|
|
needVerify: options.needVerify
|
|
});
|
|
|
|
this.listenBack(view);
|
|
},
|
|
|
|
showSafetyNumber: function(e, model) {
|
|
if (!model && this.model.isPrivate()) {
|
|
model = this.model;
|
|
}
|
|
if (model) {
|
|
var view = new Whisper.KeyVerificationPanelView({
|
|
model: model
|
|
});
|
|
this.listenBack(view);
|
|
}
|
|
},
|
|
|
|
messageDetail: function(e, data) {
|
|
var view = new Whisper.MessageDetailView({
|
|
model: data.message,
|
|
conversation: this.model,
|
|
// we pass these in to allow nested panels
|
|
listenBack: this.listenBack.bind(this),
|
|
resetPanel: this.resetPanel.bind(this)
|
|
});
|
|
this.listenBack(view);
|
|
view.render();
|
|
},
|
|
|
|
// not currently in use
|
|
newGroupUpdate: function() {
|
|
var view = new Whisper.NewGroupUpdateView({
|
|
model: this.model,
|
|
window: this.window
|
|
});
|
|
view.render();
|
|
this.listenBack(view);
|
|
},
|
|
|
|
listenBack: function(view) {
|
|
this.panels = this.panels || [];
|
|
if (this.panels.length > 0) {
|
|
this.panels[0].$el.hide();
|
|
}
|
|
this.panels.unshift(view);
|
|
|
|
if (this.panels.length === 1) {
|
|
this.$('.main.panel, .header-buttons.right').hide();
|
|
this.$('.back').show();
|
|
}
|
|
|
|
view.$el.insertBefore(this.$('.panel').first());
|
|
},
|
|
resetPanel: function() {
|
|
var view = this.panels.shift();
|
|
if (this.panels.length > 0) {
|
|
this.panels[0].$el.show();
|
|
}
|
|
view.remove();
|
|
|
|
if (this.panels.length === 0) {
|
|
this.$('.main.panel, .header-buttons.right').show();
|
|
this.$('.back').hide();
|
|
this.$el.trigger('force-resize');
|
|
}
|
|
},
|
|
|
|
closeMenu: function(e) {
|
|
if (e && !$(e.target).hasClass('hamburger')) {
|
|
this.$('.conversation-menu .menu-list').hide();
|
|
}
|
|
if (e && !$(e.target).hasClass('clock')) {
|
|
this.$('.timer-menu .menu-list').hide();
|
|
}
|
|
},
|
|
|
|
endSession: function() {
|
|
this.model.endSession();
|
|
this.$('.menu-list').hide();
|
|
},
|
|
|
|
leaveGroup: function() {
|
|
this.model.leaveGroup();
|
|
this.$('.menu-list').hide();
|
|
},
|
|
|
|
toggleMenu: function() {
|
|
this.$('.conversation-menu .menu-list').toggle();
|
|
},
|
|
|
|
destroyMessages: function(e) {
|
|
this.confirm(i18n('deleteConversationConfirmation')).then(function() {
|
|
this.model.destroyMessages();
|
|
this.remove();
|
|
}.bind(this)).catch(function() {
|
|
// clicked cancel, nothing to do.
|
|
});
|
|
this.$('.menu-list').hide();
|
|
},
|
|
|
|
showSendConfirmationDialog: function(e, contacts) {
|
|
var message;
|
|
var isUnverified = this.model.isUnverified();
|
|
|
|
if (contacts.length > 1) {
|
|
if (isUnverified) {
|
|
message = i18n('changedSinceVerifiedMultiple');
|
|
} else {
|
|
message = i18n('changedRecentlyMultiple');
|
|
}
|
|
} else {
|
|
if (isUnverified) {
|
|
message = i18n('changedSinceVerified', contacts.at(0).getTitle());
|
|
} else {
|
|
message = i18n('changedRecently', contacts.at(0).getTitle());
|
|
}
|
|
}
|
|
|
|
var dialog = new Whisper.ConfirmationDialogView({
|
|
message: message,
|
|
okText: i18n('sendAnyway'),
|
|
resolve: function() {
|
|
this.checkUnverifiedSendMessage(e, {force: true});
|
|
}.bind(this),
|
|
reject: function() {
|
|
this.focusMessageField();
|
|
}.bind(this)
|
|
});
|
|
|
|
this.$el.prepend(dialog.el);
|
|
dialog.focusCancel();
|
|
},
|
|
|
|
checkUnverifiedSendMessage: function(e, options) {
|
|
e.preventDefault();
|
|
this.$messageField.prop('disabled', true);
|
|
|
|
options = options || {};
|
|
_.defaults(options, {force: false});
|
|
|
|
// This will go to the trust store for the latest identity key information,
|
|
// and may result in the display of a new banner for this conversation.
|
|
this.model.updateVerified().then(function() {
|
|
var contacts = this.model.getUnverified();
|
|
if (!contacts.length) {
|
|
return this.checkUntrustedSendMessage(e, options);
|
|
}
|
|
|
|
if (options.force) {
|
|
return this.markAllAsVerifiedDefault(contacts).then(function() {
|
|
this.checkUnverifiedSendMessage(e, options);
|
|
}.bind(this));
|
|
}
|
|
|
|
this.showSendConfirmationDialog(e, contacts);
|
|
}.bind(this)).catch(function(error) {
|
|
this.focusMessageField();
|
|
console.log(
|
|
'checkUnverifiedSendMessage error:',
|
|
error && error.stack ? error.stack : error
|
|
);
|
|
}.bind(this));
|
|
},
|
|
|
|
checkUntrustedSendMessage: function(e, options) {
|
|
options = options || {};
|
|
_.defaults(options, {force: false});
|
|
|
|
this.model.getUntrusted().then(function(contacts) {
|
|
if (!contacts.length) {
|
|
return this.sendMessage(e);
|
|
}
|
|
|
|
if (options.force) {
|
|
return this.markAllAsApproved(contacts).then(function() {
|
|
this.sendMessage(e);
|
|
}.bind(this));
|
|
}
|
|
|
|
this.showSendConfirmationDialog(e, contacts);
|
|
}.bind(this)).catch(function(error) {
|
|
this.focusMessageField();
|
|
console.log(
|
|
'checkUntrustedSendMessage error:',
|
|
error && error.stack ? error.stack : error
|
|
);
|
|
}.bind(this));
|
|
},
|
|
|
|
sendMessage: function(e) {
|
|
this.removeLastSeenIndicator();
|
|
|
|
var toast;
|
|
if (extension.expired()) {
|
|
toast = new Whisper.ExpiredToast();
|
|
}
|
|
if (this.model.isPrivate() && storage.isBlocked(this.model.id)) {
|
|
toast = new Whisper.BlockedToast();
|
|
}
|
|
if (!this.model.isPrivate() && this.model.get('left')) {
|
|
toast = new Whisper.LeftGroupToast();
|
|
}
|
|
|
|
if (toast) {
|
|
toast.$el.insertAfter(this.$el);
|
|
toast.render();
|
|
this.focusMessageField();
|
|
return;
|
|
}
|
|
|
|
var input = this.$messageField;
|
|
var message = this.replace_colons(input.val()).trim();
|
|
|
|
if (message.length > 0 || this.fileInput.hasFiles()) {
|
|
this.fileInput.getFiles().then(function(attachments) {
|
|
this.model.sendMessage(message, attachments);
|
|
input.val("");
|
|
this.focusMessageField();
|
|
this.forceUpdateMessageFieldSize(e);
|
|
this.fileInput.deleteFiles();
|
|
}.bind(this)).catch(function() {
|
|
console.log('Error pulling attached files before send');
|
|
this.focusMessageField();
|
|
}.bind(this));
|
|
}
|
|
},
|
|
|
|
replace_colons: function(str) {
|
|
return str.replace(emoji.rx_colons, function(m) {
|
|
var idx = m.substr(1, m.length-2);
|
|
var val = emoji.map.colons[idx];
|
|
if (val) {
|
|
return emoji.data[val][0][0];
|
|
} else {
|
|
return m;
|
|
}
|
|
});
|
|
},
|
|
|
|
updateColor: function(model, color) {
|
|
var header = this.$('.conversation-header');
|
|
header.removeClass(Whisper.Conversation.COLORS);
|
|
if (color) {
|
|
header.addClass(color);
|
|
}
|
|
var avatarView = new (Whisper.View.extend({
|
|
templateName: 'avatar',
|
|
render_attributes: { avatar: this.model.getAvatar() }
|
|
}))();
|
|
header.find('.avatar').replaceWith(avatarView.render().$('.avatar'));
|
|
},
|
|
|
|
updateMessageFieldSize: function (event) {
|
|
var keyCode = event.which || event.keyCode;
|
|
|
|
if (keyCode === 13 && !event.altKey && !event.shiftKey && !event.ctrlKey) {
|
|
// enter pressed - submit the form now
|
|
event.preventDefault();
|
|
return this.$('.bottom-bar form').submit();
|
|
}
|
|
this.toggleMicrophone();
|
|
this.toggleLengthWarning();
|
|
|
|
this.view.measureScrollPosition();
|
|
window.autosize(this.$messageField);
|
|
|
|
var $attachmentPreviews = this.$('.attachment-previews'),
|
|
$bottomBar = this.$('.bottom-bar');
|
|
|
|
$bottomBar.outerHeight(
|
|
this.$messageField.outerHeight() +
|
|
$attachmentPreviews.outerHeight() +
|
|
parseInt($bottomBar.css('min-height')));
|
|
|
|
this.view.scrollToBottomIfNeeded();
|
|
},
|
|
|
|
forceUpdateMessageFieldSize: function (event) {
|
|
if (this.isHidden()) {
|
|
return;
|
|
}
|
|
this.view.scrollToBottomIfNeeded();
|
|
window.autosize.update(this.$messageField);
|
|
this.updateMessageFieldSize(event);
|
|
},
|
|
|
|
isHidden: function() {
|
|
return (this.$el.css('display') === 'none') || this.$('.panel').css('display') === 'none';
|
|
}
|
|
});
|
|
})();
|