Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Re-render message if relevant config settings change

Browse Source
This commit is contained in:
JC Brand 2021-09-22 16:37:34 +02:00
parent 48f37aa1c0
commit 881a9a6d27
7 changed files with 38 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/plugins/chatview/tests/message-images.js
View File

@ -147,16 +147,10 @@ describe("A Chat Message", function () {
api.settings.set('allowed_image_domains', []);
// FIXME: remove once we can update based on settings change event
view.querySelector('converse-chat-message-body').requestUpdate();
view.querySelector('converse-message-actions').requestUpdate();
await u.waitUntil(() => view.querySelector('converse-chat-message-body .chat-image') === null);
expect(view.querySelector('.chat-msg__action-hide-previews')).toBe(null);
// FIXME: remove once we can update based on settings change event
api.settings.set('allowed_image_domains', null);
view.querySelector('converse-chat-message-body').requestUpdate();
view.querySelector('converse-message-actions').requestUpdate();
await u.waitUntil(() => view.querySelector('converse-chat-message-body .chat-image'));
expect(view.querySelector('.chat-msg__action-hide-previews')).not.toBe(null);
}));

16
src/plugins/muc-views/tests/unfurls.js
View File

@ -294,9 +294,11 @@ describe("A Groupchat Message", function () {
it("lets the user hide an unfurl",
mock.initConverse(['chatBoxesFetched'],
{'render_media': []},
{'render_media': true},
async function (_converse) {
const { api } = _converse;
const nick = 'romeo';
const muc_jid = 'lounge@montague.lit';
await mock.openAndEnterChatRoom(_converse, muc_jid, nick);
@ -327,10 +329,20 @@ describe("A Groupchat Message", function () {
_converse.connection._dataRecv(mock.createRequest(metadata_stanza));
await u.waitUntil(() => view.querySelector('converse-message-unfurl'));
const button = await u.waitUntil(() => view.querySelector('.chat-msg__content .chat-msg__action-hide-previews'));
let button = await u.waitUntil(() => view.querySelector('.chat-msg__content .chat-msg__action-hide-previews'));
expect(button.textContent.trim()).toBe('Hide URL previews');
button.click();
await u.waitUntil(() => view.querySelector('converse-message-unfurl') === null, 750);
button = view.querySelector('.chat-msg__content .chat-msg__action-hide-previews');
expect(button.textContent.trim()).toBe('Show URL preview');
button.click();
await u.waitUntil(() => view.querySelector('converse-message-unfurl'), 750);
// Check that the image doesn't render if the domain is not allowed
expect(view.querySelector('converse-message-unfurl .chat-image')).not.toBe(null);
api.settings.set('allowed_image_domains', []);
await u.waitUntil(() => view.querySelector('converse-message-unfurl .chat-image') === null);
api.settings.set('allowed_image_domains', undefined);
await u.waitUntil(() => view.querySelector('converse-message-unfurl .chat-image') !== null);
}));
});

1
src/shared/chat/message-actions.js
View File

@ -31,7 +31,6 @@ class MessageActions extends CustomElement {
this.listenTo(settings, 'change:render_media', () => this.requestUpdate());
}
render () {
return html`${until(this.renderActions(), '')}`;
}

16
src/shared/chat/message.js
View File

@ -17,6 +17,7 @@ import { _converse, api, converse } from '@converse/headless/core';
import { getHats } from './utils.js';
import { html } from 'lit';
import { renderAvatar } from 'shared/directives/avatar';
import { getAppSettings } from '@converse/headless/shared/settings/utils.js';
const { Strophe, dayjs } = converse.env;
@ -38,16 +39,21 @@ export default class Message extends CustomElement {
return;
}
this.listenTo(this.chatbox, 'change:first_unread_id', this.requestUpdate);
this.listenTo(this.model, 'change', this.requestUpdate);
this.model.vcard && this.listenTo(this.model.vcard, 'change', this.requestUpdate);
const settings = getAppSettings();
// Reset individual show/hide state of media when the `render_media` config setting changes.
this.listenTo(settings, 'change:render_media',
() => this.model.get('hide_url_previews') && this.model.save('hide_url_previews', undefined));
this.listenTo(this.chatbox, 'change:first_unread_id', () => this.requestUpdate());
this.listenTo(this.model, 'change', () => this.requestUpdate());
this.model.vcard && this.listenTo(this.model.vcard, 'change', () => this.requestUpdate());
if (this.model.get('type') === 'groupchat') {
if (this.model.occupant) {
this.listenTo(this.model.occupant, 'change', this.requestUpdate);
this.listenTo(this.model.occupant, 'change', () => this.requestUpdate());
} else {
this.listenTo(this.model, 'occupantAdded', () => {
this.listenTo(this.model.occupant, 'change', this.requestUpdate)
this.listenTo(this.model.occupant, 'change', () => this.requestUpdate())
});
}
}

1
src/shared/chat/templates/message-text.js
View File

@ -26,6 +26,7 @@ export default (el) => {
const spoiler_classes = el.model.get('is_spoiler') ? `spoiler ${el.model.get('is_spoiler_visible') ? '' : 'hidden'}` : '';
const text = el.model.getMessageText();
const show_oob = el.model.get('oob_url') && text !== el.model.get('oob_url');
return html`
${ el.model.get('is_spoiler') ? tpl_spoiler_hint : '' }
${ el.model.get('subject') ? html`<div class="chat-msg__subject">${el.model.get('subject')}</div>` : '' }

7
src/shared/chat/templates/unfurl.js
View File

@ -1,3 +1,4 @@
import { api } from '@converse/headless/core.js';
import { getURI, isAudioURL, isGIFURL, isVideoURL, isDomainAllowed } from '@converse/headless/utils/url.js';
import { html } from 'lit';
@ -22,11 +23,11 @@ const tpl_url_wrapper = (o, wrapped_template) =>
const tpl_image = (o) => html`<converse-rich-text class="card-img-top" text="${o.image}" show_images ?hide_media_urls=${shouldHideMediaURL(o.url)} .onImgLoad=${o.onload}></converse-rich-text>`;
export default (o) => {
const valid_image = isValidImage(o.image);
const show_image = isValidImage(o.image) && api.settings.get('render_media');
const has_body_info = o.title || o.description || o.url;
if (valid_image || has_body_info) {
if (show_image || has_body_info) {
return html`<div class="card card--unfurl">
${ valid_image ? tpl_url_wrapper(o, tpl_image) : '' }
${ show_image ? tpl_url_wrapper(o, tpl_image) : '' }
${ has_body_info ? html`
<div class="card-body">
${ o.title ? tpl_url_wrapper(o, o => html`<h5 class="card-title">${o.title}</h5>`) : ''}

9
src/shared/chat/unfurl.js
View File

@ -1,6 +1,7 @@
import tpl_unfurl from './templates/unfurl.js';
import { CustomElement } from 'shared/components/element.js';
import { api } from "@converse/headless/core";
import tpl_unfurl from './templates/unfurl.js';
import { getAppSettings } from '@converse/headless/shared/settings/utils.js';
import './styles/unfurl.scss';
@ -17,6 +18,12 @@ export default class MessageUnfurl extends CustomElement {
}
}
initialize () {
const settings = getAppSettings();
this.listenTo(settings, 'change:allowed_image_domains', () => this.requestUpdate());
this.listenTo(settings, 'change:render_media', () => this.requestUpdate());
}
render () {
return tpl_unfurl(Object.assign({
'onload': () => this.onImageLoad()