2018-04-16 17:46:48 +02:00
|
|
|
// Converse.js
|
|
|
|
// https://conversejs.org
|
|
|
|
//
|
2019-02-18 19:17:06 +01:00
|
|
|
// Copyright (c) 2013-2019, the Converse.js developers
|
2018-04-16 17:46:48 +02:00
|
|
|
// Licensed under the Mozilla Public License (MPLv2)
|
2018-04-16 21:58:11 +02:00
|
|
|
|
2019-03-27 10:56:09 +01:00
|
|
|
import URI from "urijs";
|
2018-10-23 03:41:38 +02:00
|
|
|
import converse from "@converse/headless/converse-core";
|
|
|
|
import filesize from "filesize";
|
|
|
|
import html from "./utils/html";
|
|
|
|
import tpl_csn from "templates/csn.html";
|
|
|
|
import tpl_file_progress from "templates/file_progress.html";
|
|
|
|
import tpl_info from "templates/info.html";
|
|
|
|
import tpl_message from "templates/message.html";
|
|
|
|
import tpl_message_versions_modal from "templates/message_versions_modal.html";
|
2018-11-15 11:29:28 +01:00
|
|
|
import u from "@converse/headless/utils/emoji";
|
2019-05-13 18:50:25 +02:00
|
|
|
import xss from "xss/dist/xss";
|
2018-04-16 17:46:48 +02:00
|
|
|
|
2019-05-06 11:16:56 +02:00
|
|
|
const { Backbone, _, dayjs } = converse.env;
|
2018-04-16 17:46:48 +02:00
|
|
|
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
converse.plugins.add('converse-message-view', {
|
2018-04-16 17:46:48 +02:00
|
|
|
|
2019-02-08 23:33:53 +01:00
|
|
|
dependencies: ["converse-modal", "converse-chatboxviews"],
|
2018-11-02 11:58:38 +01:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
initialize () {
|
|
|
|
/* The initialize function gets called as soon as the plugin is
|
|
|
|
* loaded by converse.js's plugin machinery.
|
|
|
|
*/
|
|
|
|
const { _converse } = this,
|
|
|
|
{ __ } = _converse;
|
2018-07-06 01:35:58 +02:00
|
|
|
|
|
|
|
|
2019-03-27 10:56:09 +01:00
|
|
|
function onTagFoundDuringXSSFilter (tag, html, options) {
|
|
|
|
/* This function gets called by the XSS library whenever it finds
|
|
|
|
* what it thinks is a new HTML tag.
|
|
|
|
*
|
|
|
|
* It thinks that something like <https://example.com> is an HTML
|
|
|
|
* tag and then escapes the <> chars.
|
|
|
|
*
|
|
|
|
* We want to avoid this, because it prevents these URLs from being
|
|
|
|
* shown properly (whithout the trailing >).
|
|
|
|
*
|
|
|
|
* The URI lib correctly trims a trailing >, but not a trailing >
|
|
|
|
*/
|
|
|
|
if (options.isClosing) {
|
|
|
|
// Closing tags don't match our use-case
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const uri = new URI(tag);
|
|
|
|
const protocol = uri.protocol().toLowerCase();
|
|
|
|
if (!_.includes(["https", "http", "xmpp", "ftp"], protocol)) {
|
|
|
|
// Not a URL, the tag will get filtered as usual
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (uri.equals(tag) && `<${tag}>` === html.toLocaleLowerCase()) {
|
|
|
|
// We have something like <https://example.com>, and don't want
|
|
|
|
// to filter it.
|
|
|
|
return html;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
_converse.api.settings.update({
|
|
|
|
'show_images_inline': true
|
|
|
|
});
|
2018-07-06 01:35:58 +02:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
_converse.MessageVersionsModal = _converse.BootstrapModal.extend({
|
|
|
|
toHTML () {
|
2019-04-29 09:07:15 +02:00
|
|
|
return tpl_message_versions_modal(Object.assign(
|
2018-10-23 03:41:38 +02:00
|
|
|
this.model.toJSON(), {
|
2019-05-21 16:18:14 +02:00
|
|
|
'__': __,
|
|
|
|
'dayjs': dayjs
|
2018-10-23 03:41:38 +02:00
|
|
|
}));
|
|
|
|
}
|
|
|
|
});
|
2018-07-06 01:35:58 +02:00
|
|
|
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
_converse.MessageView = _converse.ViewWithAvatar.extend({
|
|
|
|
events: {
|
|
|
|
'click .chat-msg__edit-modal': 'showMessageVersionsModal'
|
|
|
|
},
|
2018-04-16 17:46:48 +02:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
initialize () {
|
2019-05-16 08:24:25 +02:00
|
|
|
this.debouncedRender = _.debounce(() => {
|
|
|
|
// If the model gets destroyed in the meantime,
|
|
|
|
// it no longer has a collection
|
|
|
|
if (this.model.collection) {
|
|
|
|
this.render();
|
|
|
|
}
|
|
|
|
}, 50);
|
2019-07-01 10:44:59 +02:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
if (this.model.vcard) {
|
2019-04-09 17:10:50 +02:00
|
|
|
this.model.vcard.on('change', this.debouncedRender, this);
|
2018-10-23 03:41:38 +02:00
|
|
|
}
|
2019-07-01 10:44:59 +02:00
|
|
|
|
|
|
|
if (this.model.rosterContactAdded) {
|
|
|
|
this.model.rosterContactAdded.then(() => {
|
|
|
|
this.model.contact.on('change:nickname', this.debouncedRender, this);
|
|
|
|
this.debouncedRender();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.model.occupantAdded) {
|
|
|
|
this.model.occupantAdded.then(() => {
|
|
|
|
this.model.occupant.on('change:role', this.debouncedRender, this);
|
|
|
|
this.model.occupant.on('change:affiliation', this.debouncedRender, this);
|
|
|
|
this.debouncedRender();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
this.model.on('change', this.onChanged, this);
|
2019-06-12 06:56:20 +02:00
|
|
|
this.model.on('destroy', this.fadeOut, this);
|
2018-10-23 03:41:38 +02:00
|
|
|
},
|
2018-05-04 17:26:43 +02:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
async render () {
|
|
|
|
const is_followup = u.hasClass('chat-msg--followup', this.el);
|
|
|
|
if (this.model.isOnlyChatStateNotification()) {
|
|
|
|
this.renderChatStateNotification()
|
|
|
|
} else if (this.model.get('file') && !this.model.get('oob_url')) {
|
2018-10-24 22:59:43 +02:00
|
|
|
if (!this.model.file) {
|
|
|
|
_converse.log("Attempted to render a file upload message with no file data");
|
|
|
|
return this.el;
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
this.renderFileUploadProgresBar();
|
|
|
|
} else if (this.model.get('type') === 'error') {
|
|
|
|
this.renderErrorMessage();
|
2019-06-11 12:16:27 +02:00
|
|
|
} else if (this.model.get('type') === 'info') {
|
|
|
|
this.renderInfoMessage();
|
2018-10-23 03:41:38 +02:00
|
|
|
} else {
|
|
|
|
await this.renderChatMessage();
|
|
|
|
}
|
|
|
|
if (is_followup) {
|
|
|
|
u.addClass('chat-msg--followup', this.el);
|
|
|
|
}
|
|
|
|
return this.el;
|
|
|
|
},
|
2018-07-08 13:43:28 +02:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
async onChanged (item) {
|
|
|
|
// Jot down whether it was edited because the `changed`
|
|
|
|
// attr gets removed when this.render() gets called further
|
|
|
|
// down.
|
|
|
|
const edited = item.changed.edited;
|
|
|
|
if (this.model.changed.progress) {
|
|
|
|
return this.renderFileUploadProgresBar();
|
|
|
|
}
|
2018-11-03 14:37:57 +01:00
|
|
|
if (_.filter(['correcting', 'message', 'type', 'upload', 'received'],
|
2018-10-23 03:41:38 +02:00
|
|
|
prop => Object.prototype.hasOwnProperty.call(this.model.changed, prop)).length) {
|
2019-04-09 17:10:50 +02:00
|
|
|
await this.debouncedRender();
|
2018-10-23 03:41:38 +02:00
|
|
|
}
|
|
|
|
if (edited) {
|
|
|
|
this.onMessageEdited();
|
|
|
|
}
|
|
|
|
},
|
2018-10-13 23:25:01 +02:00
|
|
|
|
2019-06-12 06:56:20 +02:00
|
|
|
fadeOut () {
|
|
|
|
if (_converse.animate) {
|
2019-06-14 13:46:15 +02:00
|
|
|
setTimeout(() => this.remove(), 600);
|
2019-06-12 06:56:20 +02:00
|
|
|
u.addClass('fade-out', this.el);
|
|
|
|
} else {
|
|
|
|
this.remove();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
onMessageEdited () {
|
|
|
|
if (this.model.get('is_archived')) {
|
|
|
|
return;
|
|
|
|
}
|
2019-06-12 06:56:20 +02:00
|
|
|
this.el.addEventListener(
|
|
|
|
'animationend',
|
|
|
|
() => u.removeClass('onload', this.el),
|
|
|
|
{'once': true}
|
|
|
|
);
|
2018-10-23 03:41:38 +02:00
|
|
|
u.addClass('onload', this.el);
|
|
|
|
},
|
2018-05-04 17:26:43 +02:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
replaceElement (msg) {
|
|
|
|
if (!_.isNil(this.el.parentElement)) {
|
|
|
|
this.el.parentElement.replaceChild(msg, this.el);
|
|
|
|
}
|
|
|
|
this.setElement(msg);
|
|
|
|
return this.el;
|
|
|
|
},
|
2018-05-01 18:18:02 +02:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
async renderChatMessage () {
|
2019-07-01 10:44:59 +02:00
|
|
|
const is_me_message = this.isMeCommand();
|
|
|
|
const time = dayjs(this.model.get('time'));
|
|
|
|
const role = this.model.vcard ? this.model.vcard.get('role') : null;
|
|
|
|
const roles = role ? role.split(',') : [];
|
2018-04-16 18:08:00 +02:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
const msg = u.stringToElement(tpl_message(
|
2019-04-29 09:07:15 +02:00
|
|
|
Object.assign(
|
2018-10-23 03:41:38 +02:00
|
|
|
this.model.toJSON(), {
|
|
|
|
'__': __,
|
2019-06-03 21:53:19 +02:00
|
|
|
'is_groupchat_message': this.model.get('type') === 'groupchat',
|
2019-07-01 10:44:59 +02:00
|
|
|
'occupant': this.model.occupant,
|
2018-10-23 03:41:38 +02:00
|
|
|
'is_me_message': is_me_message,
|
|
|
|
'roles': roles,
|
2019-05-05 19:05:45 +02:00
|
|
|
'pretty_time': time.format(_converse.time_format),
|
|
|
|
'time': time.toISOString(),
|
2018-10-23 03:41:38 +02:00
|
|
|
'extra_classes': this.getExtraMessageClasses(),
|
|
|
|
'label_show': __('Show more'),
|
|
|
|
'username': this.model.getDisplayName()
|
|
|
|
})
|
|
|
|
));
|
2018-04-18 16:55:26 +02:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
const url = this.model.get('oob_url');
|
|
|
|
if (url) {
|
|
|
|
msg.querySelector('.chat-msg__media').innerHTML = _.flow(
|
|
|
|
_.partial(u.renderFileURL, _converse),
|
|
|
|
_.partial(u.renderMovieURL, _converse),
|
|
|
|
_.partial(u.renderAudioURL, _converse),
|
|
|
|
_.partial(u.renderImageURL, _converse))(url);
|
|
|
|
}
|
|
|
|
|
|
|
|
let text = this.getMessageText();
|
|
|
|
const msg_content = msg.querySelector('.chat-msg__text');
|
|
|
|
if (text && text !== url) {
|
|
|
|
if (is_me_message) {
|
2018-11-03 12:43:24 +01:00
|
|
|
text = text.substring(4);
|
2018-05-01 18:18:02 +02:00
|
|
|
}
|
2019-03-27 10:56:09 +01:00
|
|
|
text = xss.filterXSS(text, {'whiteList': {}, 'onTag': onTagFoundDuringXSSFilter});
|
2018-10-23 03:41:38 +02:00
|
|
|
msg_content.innerHTML = _.flow(
|
|
|
|
_.partial(u.geoUriToHttp, _, _converse.geouri_replacement),
|
|
|
|
_.partial(u.addMentionsMarkup, _, this.model.get('references'), this.model.collection.chatbox),
|
|
|
|
u.addHyperlinks,
|
|
|
|
u.renderNewLines,
|
|
|
|
_.partial(u.addEmoji, _converse, _)
|
|
|
|
)(text);
|
|
|
|
}
|
2018-10-28 18:58:23 +01:00
|
|
|
const promise = u.renderImageURLs(_converse, msg_content);
|
2018-10-23 03:41:38 +02:00
|
|
|
if (this.model.get('type') !== 'headline') {
|
2018-10-28 18:58:23 +01:00
|
|
|
this.renderAvatar(msg);
|
2018-10-23 03:41:38 +02:00
|
|
|
}
|
2018-10-28 18:58:23 +01:00
|
|
|
await promise;
|
2018-10-23 03:41:38 +02:00
|
|
|
this.replaceElement(msg);
|
2019-05-16 08:24:25 +02:00
|
|
|
if (this.model.collection) {
|
|
|
|
// If the model gets destroyed in the meantime, it no
|
|
|
|
// longer has a collection.
|
|
|
|
this.model.collection.trigger('rendered', this);
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
},
|
2018-05-01 18:18:02 +02:00
|
|
|
|
2019-06-11 12:16:27 +02:00
|
|
|
renderInfoMessage () {
|
|
|
|
const msg = u.stringToElement(
|
|
|
|
tpl_info(Object.assign(this.model.toJSON(), {
|
|
|
|
'extra_classes': 'chat-info',
|
|
|
|
'isodate': dayjs(this.model.get('time')).toISOString()
|
|
|
|
}))
|
|
|
|
);
|
|
|
|
return this.replaceElement(msg);
|
|
|
|
},
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
renderErrorMessage () {
|
2019-05-05 19:05:45 +02:00
|
|
|
const msg = u.stringToElement(
|
|
|
|
tpl_info(Object.assign(this.model.toJSON(), {
|
|
|
|
'extra_classes': 'chat-error',
|
2019-05-06 11:16:56 +02:00
|
|
|
'isodate': dayjs(this.model.get('time')).toISOString()
|
2019-05-05 19:05:45 +02:00
|
|
|
}))
|
|
|
|
);
|
2018-10-23 03:41:38 +02:00
|
|
|
return this.replaceElement(msg);
|
|
|
|
},
|
2018-04-18 10:03:21 +02:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
renderChatStateNotification () {
|
|
|
|
let text;
|
|
|
|
const from = this.model.get('from'),
|
|
|
|
name = this.model.getDisplayName();
|
2018-05-04 17:26:43 +02:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
if (this.model.get('chat_state') === _converse.COMPOSING) {
|
|
|
|
if (this.model.get('sender') === 'me') {
|
|
|
|
text = __('Typing from another device');
|
2018-05-04 17:26:43 +02:00
|
|
|
} else {
|
2018-10-23 03:41:38 +02:00
|
|
|
text = __('%1$s is typing', name);
|
2018-05-04 17:26:43 +02:00
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
} else if (this.model.get('chat_state') === _converse.PAUSED) {
|
|
|
|
if (this.model.get('sender') === 'me') {
|
|
|
|
text = __('Stopped typing on the other device');
|
|
|
|
} else {
|
|
|
|
text = __('%1$s has stopped typing', name);
|
|
|
|
}
|
|
|
|
} else if (this.model.get('chat_state') === _converse.GONE) {
|
|
|
|
text = __('%1$s has gone away', name);
|
|
|
|
} else {
|
|
|
|
return;
|
|
|
|
}
|
2019-05-05 19:05:45 +02:00
|
|
|
const isodate = (new Date()).toISOString();
|
2018-10-23 03:41:38 +02:00
|
|
|
this.replaceElement(
|
|
|
|
u.stringToElement(
|
|
|
|
tpl_csn({
|
|
|
|
'message': text,
|
|
|
|
'from': from,
|
|
|
|
'isodate': isodate
|
2018-04-27 16:58:49 +02:00
|
|
|
})));
|
2018-10-23 03:41:38 +02:00
|
|
|
},
|
2018-04-16 17:46:48 +02:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
renderFileUploadProgresBar () {
|
|
|
|
const msg = u.stringToElement(tpl_file_progress(
|
2019-04-29 09:07:15 +02:00
|
|
|
Object.assign(this.model.toJSON(), {
|
2018-11-02 23:55:58 +01:00
|
|
|
'__': __,
|
2018-10-26 14:39:04 +02:00
|
|
|
'filename': this.model.file.name,
|
|
|
|
'filesize': filesize(this.model.file.size)
|
2018-10-23 03:41:38 +02:00
|
|
|
})));
|
|
|
|
this.replaceElement(msg);
|
|
|
|
this.renderAvatar();
|
|
|
|
},
|
2018-07-06 01:35:58 +02:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
showMessageVersionsModal (ev) {
|
|
|
|
ev.preventDefault();
|
|
|
|
if (_.isUndefined(this.model.message_versions_modal)) {
|
|
|
|
this.model.message_versions_modal = new _converse.MessageVersionsModal({'model': this.model});
|
|
|
|
}
|
|
|
|
this.model.message_versions_modal.show(ev);
|
|
|
|
},
|
2018-09-07 15:23:16 +02:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
getMessageText () {
|
|
|
|
if (this.model.get('is_encrypted')) {
|
|
|
|
return this.model.get('plaintext') ||
|
|
|
|
(_converse.debug ? __('Unencryptable OMEMO message') : null);
|
|
|
|
}
|
|
|
|
return this.model.get('message');
|
|
|
|
},
|
2018-04-17 15:17:39 +02:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
isMeCommand () {
|
|
|
|
const text = this.getMessageText();
|
|
|
|
if (!text) {
|
|
|
|
return false;
|
|
|
|
}
|
2018-11-03 12:43:24 +01:00
|
|
|
return text.startsWith('/me ');
|
2018-10-23 03:41:38 +02:00
|
|
|
},
|
2018-04-17 15:17:39 +02:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
processMessageText () {
|
|
|
|
var text = this.get('message');
|
|
|
|
text = u.geoUriToHttp(text, _converse.geouri_replacement);
|
|
|
|
},
|
|
|
|
|
|
|
|
getExtraMessageClasses () {
|
|
|
|
let extra_classes = this.model.get('is_delayed') && 'delayed' || '';
|
|
|
|
if (this.model.get('type') === 'groupchat' && this.model.get('sender') === 'them') {
|
|
|
|
if (this.model.collection.chatbox.isUserMentioned(this.model)) {
|
|
|
|
// Add special class to mark groupchat messages
|
|
|
|
// in which we are mentioned.
|
|
|
|
extra_classes += ' mentioned';
|
2018-07-08 10:13:15 +02:00
|
|
|
}
|
2018-04-16 17:46:48 +02:00
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
if (this.model.get('correcting')) {
|
|
|
|
extra_classes += ' correcting';
|
|
|
|
}
|
|
|
|
return extra_classes;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|