diff --git a/src/plugins/chatview/tests/message-images.js b/src/plugins/chatview/tests/message-images.js index dfbfe4b53..1cb167da0 100644 --- a/src/plugins/chatview/tests/message-images.js +++ b/src/plugins/chatview/tests/message-images.js @@ -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); })); diff --git a/src/plugins/muc-views/tests/unfurls.js b/src/plugins/muc-views/tests/unfurls.js index d3cb5434a..5138603ad 100644 --- a/src/plugins/muc-views/tests/unfurls.js +++ b/src/plugins/muc-views/tests/unfurls.js @@ -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); })); }); diff --git a/src/shared/chat/message-actions.js b/src/shared/chat/message-actions.js index d2c963606..eeec6f3a8 100644 --- a/src/shared/chat/message-actions.js +++ b/src/shared/chat/message-actions.js @@ -31,7 +31,6 @@ class MessageActions extends CustomElement { this.listenTo(settings, 'change:render_media', () => this.requestUpdate()); } - render () { return html`${until(this.renderActions(), '')}`; } diff --git a/src/shared/chat/message.js b/src/shared/chat/message.js index 885edf074..253259d2e 100644 --- a/src/shared/chat/message.js +++ b/src/shared/chat/message.js @@ -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()) }); } } diff --git a/src/shared/chat/templates/message-text.js b/src/shared/chat/templates/message-text.js index 7942e22da..16402ad2c 100644 --- a/src/shared/chat/templates/message-text.js +++ b/src/shared/chat/templates/message-text.js @@ -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`
${el.model.get('subject')}
` : '' } diff --git a/src/shared/chat/templates/unfurl.js b/src/shared/chat/templates/unfurl.js index 054c23314..c59019af1 100644 --- a/src/shared/chat/templates/unfurl.js +++ b/src/shared/chat/templates/unfurl.js @@ -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``; 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`
- ${ valid_image ? tpl_url_wrapper(o, tpl_image) : '' } + ${ show_image ? tpl_url_wrapper(o, tpl_image) : '' } ${ has_body_info ? html`
${ o.title ? tpl_url_wrapper(o, o => html`
${o.title}
`) : ''} diff --git a/src/shared/chat/unfurl.js b/src/shared/chat/unfurl.js index d4ecb9646..d59ca9b23 100644 --- a/src/shared/chat/unfurl.js +++ b/src/shared/chat/unfurl.js @@ -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()