2021-03-12 09:58:17 +01:00
|
|
|
import 'shared/registry.js';
|
2022-08-21 13:03:32 +02:00
|
|
|
import ImageModal from 'shared/modals/image.js';
|
2021-03-24 11:27:19 +01:00
|
|
|
import renderRichText from 'shared/directives/rich-text.js';
|
2021-03-24 11:59:09 +01:00
|
|
|
import { CustomElement } from 'shared/components/element.js';
|
2020-12-03 13:40:30 +01:00
|
|
|
import { api } from "@converse/headless/core";
|
2021-09-23 13:57:46 +02:00
|
|
|
import { getAppSettings } from '@converse/headless/shared/settings/utils.js';
|
2020-07-14 15:45:16 +02:00
|
|
|
|
2021-06-17 14:37:43 +02:00
|
|
|
import './styles/message-body.scss';
|
|
|
|
|
2020-05-15 14:33:31 +02:00
|
|
|
|
2020-07-01 21:45:18 +02:00
|
|
|
export default class MessageBody extends CustomElement {
|
2020-05-15 14:33:31 +02:00
|
|
|
|
|
|
|
static get properties () {
|
|
|
|
return {
|
2021-09-09 16:20:33 +02:00
|
|
|
// We make this a string instead of a boolean, since we want to
|
|
|
|
// distinguish between true, false and undefined states
|
|
|
|
hide_url_previews: { type: String },
|
2020-07-14 15:45:16 +02:00
|
|
|
is_me_message: { type: Boolean },
|
2021-07-05 18:22:55 +02:00
|
|
|
model: { type: Object },
|
2020-05-15 14:33:31 +02:00
|
|
|
text: { type: String },
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-09-23 13:57:46 +02:00
|
|
|
initialize () {
|
|
|
|
const settings = getAppSettings();
|
|
|
|
this.listenTo(settings, 'change:allowed_audio_domains', () => this.requestUpdate());
|
|
|
|
this.listenTo(settings, 'change:allowed_image_domains', () => this.requestUpdate());
|
|
|
|
this.listenTo(settings, 'change:allowed_video_domains', () => this.requestUpdate());
|
|
|
|
this.listenTo(settings, 'change:render_media', () => this.requestUpdate());
|
|
|
|
}
|
|
|
|
|
2021-03-24 11:27:19 +01:00
|
|
|
onImgClick (ev) { // eslint-disable-line class-methods-use-this
|
2020-07-14 15:45:16 +02:00
|
|
|
ev.preventDefault();
|
2022-08-21 13:03:32 +02:00
|
|
|
api.modal.show('converse-image-modal', {'src': ev.target.src}, ev);
|
2020-07-14 15:45:16 +02:00
|
|
|
}
|
|
|
|
|
2021-03-24 11:27:19 +01:00
|
|
|
onImgLoad () {
|
|
|
|
this.dispatchEvent(new CustomEvent('imageLoaded', { detail: this, 'bubbles': true }));
|
|
|
|
}
|
|
|
|
|
2020-05-15 14:33:31 +02:00
|
|
|
render () {
|
2021-03-24 11:27:19 +01:00
|
|
|
const callback = () => this.model.collection?.trigger('rendered', this.model);
|
|
|
|
const offset = 0;
|
|
|
|
const options = {
|
2021-09-09 16:20:33 +02:00
|
|
|
'media_urls': this.model.get('media_urls'),
|
|
|
|
'mentions': this.model.get('references'),
|
2021-03-24 11:27:19 +01:00
|
|
|
'nick': this.model.collection.chatbox.get('nick'),
|
2021-06-23 13:24:05 +02:00
|
|
|
'onImgClick': (ev) => this.onImgClick(ev),
|
2021-03-24 11:27:19 +01:00
|
|
|
'onImgLoad': () => this.onImgLoad(),
|
|
|
|
'render_styling': !this.model.get('is_unstyled') && api.settings.get('allow_message_styling'),
|
2021-09-09 16:20:33 +02:00
|
|
|
'show_me_message': true,
|
|
|
|
}
|
|
|
|
if (this.hide_url_previews === "false") {
|
|
|
|
options.embed_audio = true;
|
|
|
|
options.embed_videos = true;
|
|
|
|
options.show_images = true;
|
|
|
|
} else if (this.hide_url_previews === "true") {
|
|
|
|
options.embed_audio = false;
|
|
|
|
options.embed_videos = false;
|
|
|
|
options.show_images = false;
|
2021-03-24 11:27:19 +01:00
|
|
|
}
|
2021-09-09 16:20:33 +02:00
|
|
|
return renderRichText(this.text, offset, options, callback);
|
2020-05-15 14:33:31 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-07-01 21:45:18 +02:00
|
|
|
api.elements.define('converse-chat-message-body', MessageBody);
|