Re-render message if relevant config settings change
This commit is contained in:
parent
48f37aa1c0
commit
881a9a6d27
|
@ -147,16 +147,10 @@ describe("A Chat Message", function () {
|
||||||
|
|
||||||
api.settings.set('allowed_image_domains', []);
|
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);
|
await u.waitUntil(() => view.querySelector('converse-chat-message-body .chat-image') === null);
|
||||||
expect(view.querySelector('.chat-msg__action-hide-previews')).toBe(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);
|
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'));
|
await u.waitUntil(() => view.querySelector('converse-chat-message-body .chat-image'));
|
||||||
expect(view.querySelector('.chat-msg__action-hide-previews')).not.toBe(null);
|
expect(view.querySelector('.chat-msg__action-hide-previews')).not.toBe(null);
|
||||||
}));
|
}));
|
||||||
|
|
|
@ -294,9 +294,11 @@ describe("A Groupchat Message", function () {
|
||||||
|
|
||||||
it("lets the user hide an unfurl",
|
it("lets the user hide an unfurl",
|
||||||
mock.initConverse(['chatBoxesFetched'],
|
mock.initConverse(['chatBoxesFetched'],
|
||||||
{'render_media': []},
|
{'render_media': true},
|
||||||
async function (_converse) {
|
async function (_converse) {
|
||||||
|
|
||||||
|
const { api } = _converse;
|
||||||
|
|
||||||
const nick = 'romeo';
|
const nick = 'romeo';
|
||||||
const muc_jid = 'lounge@montague.lit';
|
const muc_jid = 'lounge@montague.lit';
|
||||||
await mock.openAndEnterChatRoom(_converse, muc_jid, nick);
|
await mock.openAndEnterChatRoom(_converse, muc_jid, nick);
|
||||||
|
@ -327,10 +329,20 @@ describe("A Groupchat Message", function () {
|
||||||
_converse.connection._dataRecv(mock.createRequest(metadata_stanza));
|
_converse.connection._dataRecv(mock.createRequest(metadata_stanza));
|
||||||
|
|
||||||
await u.waitUntil(() => view.querySelector('converse-message-unfurl'));
|
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();
|
button.click();
|
||||||
await u.waitUntil(() => view.querySelector('converse-message-unfurl') === null, 750);
|
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();
|
button.click();
|
||||||
await u.waitUntil(() => view.querySelector('converse-message-unfurl'), 750);
|
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);
|
||||||
}));
|
}));
|
||||||
});
|
});
|
||||||
|
|
|
@ -31,7 +31,6 @@ class MessageActions extends CustomElement {
|
||||||
this.listenTo(settings, 'change:render_media', () => this.requestUpdate());
|
this.listenTo(settings, 'change:render_media', () => this.requestUpdate());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
return html`${until(this.renderActions(), '')}`;
|
return html`${until(this.renderActions(), '')}`;
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,6 +17,7 @@ import { _converse, api, converse } from '@converse/headless/core';
|
||||||
import { getHats } from './utils.js';
|
import { getHats } from './utils.js';
|
||||||
import { html } from 'lit';
|
import { html } from 'lit';
|
||||||
import { renderAvatar } from 'shared/directives/avatar';
|
import { renderAvatar } from 'shared/directives/avatar';
|
||||||
|
import { getAppSettings } from '@converse/headless/shared/settings/utils.js';
|
||||||
|
|
||||||
const { Strophe, dayjs } = converse.env;
|
const { Strophe, dayjs } = converse.env;
|
||||||
|
|
||||||
|
@ -38,16 +39,21 @@ export default class Message extends CustomElement {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.listenTo(this.chatbox, 'change:first_unread_id', this.requestUpdate);
|
const settings = getAppSettings();
|
||||||
this.listenTo(this.model, 'change', this.requestUpdate);
|
// Reset individual show/hide state of media when the `render_media` config setting changes.
|
||||||
this.model.vcard && this.listenTo(this.model.vcard, 'change', this.requestUpdate);
|
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.get('type') === 'groupchat') {
|
||||||
if (this.model.occupant) {
|
if (this.model.occupant) {
|
||||||
this.listenTo(this.model.occupant, 'change', this.requestUpdate);
|
this.listenTo(this.model.occupant, 'change', () => this.requestUpdate());
|
||||||
} else {
|
} else {
|
||||||
this.listenTo(this.model, 'occupantAdded', () => {
|
this.listenTo(this.model, 'occupantAdded', () => {
|
||||||
this.listenTo(this.model.occupant, 'change', this.requestUpdate)
|
this.listenTo(this.model.occupant, 'change', () => this.requestUpdate())
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -26,6 +26,7 @@ export default (el) => {
|
||||||
const spoiler_classes = el.model.get('is_spoiler') ? `spoiler ${el.model.get('is_spoiler_visible') ? '' : 'hidden'}` : '';
|
const spoiler_classes = el.model.get('is_spoiler') ? `spoiler ${el.model.get('is_spoiler_visible') ? '' : 'hidden'}` : '';
|
||||||
const text = el.model.getMessageText();
|
const text = el.model.getMessageText();
|
||||||
const show_oob = el.model.get('oob_url') && text !== el.model.get('oob_url');
|
const show_oob = el.model.get('oob_url') && text !== el.model.get('oob_url');
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
${ el.model.get('is_spoiler') ? tpl_spoiler_hint : '' }
|
${ el.model.get('is_spoiler') ? tpl_spoiler_hint : '' }
|
||||||
${ el.model.get('subject') ? html`<div class="chat-msg__subject">${el.model.get('subject')}</div>` : '' }
|
${ el.model.get('subject') ? html`<div class="chat-msg__subject">${el.model.get('subject')}</div>` : '' }
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
import { api } from '@converse/headless/core.js';
|
||||||
import { getURI, isAudioURL, isGIFURL, isVideoURL, isDomainAllowed } from '@converse/headless/utils/url.js';
|
import { getURI, isAudioURL, isGIFURL, isVideoURL, isDomainAllowed } from '@converse/headless/utils/url.js';
|
||||||
import { html } from 'lit';
|
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>`;
|
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) => {
|
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;
|
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">
|
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`
|
${ has_body_info ? html`
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
${ o.title ? tpl_url_wrapper(o, o => html`<h5 class="card-title">${o.title}</h5>`) : ''}
|
${ o.title ? tpl_url_wrapper(o, o => html`<h5 class="card-title">${o.title}</h5>`) : ''}
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
|
import tpl_unfurl from './templates/unfurl.js';
|
||||||
import { CustomElement } from 'shared/components/element.js';
|
import { CustomElement } from 'shared/components/element.js';
|
||||||
import { api } from "@converse/headless/core";
|
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';
|
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 () {
|
render () {
|
||||||
return tpl_unfurl(Object.assign({
|
return tpl_unfurl(Object.assign({
|
||||||
'onload': () => this.onImageLoad()
|
'onload': () => this.onImageLoad()
|
||||||
|
|
Loading…
Reference in New Issue
Block a user