Call `initialize` in CustomElement's `connectedCallback` method

karma.conf.js

@@ -3,6 +3,7 @@ const path = require('path');
 
 module.exports = function(config) {
   config.set({
+
     // base path that will be used to resolve all patterns (eg. files, exclude)
     basePath: '',
     frameworks: ['jasmine'],

src/plugins/chatview/chat.js

@@ -14,11 +14,6 @@ import { _converse, api } from '@converse/headless/core';
 export default class ChatView extends BaseChatView {
     length = 200
 
-    connectedCallback () {
-        super.connectedCallback();
-        this.initialize();
-    }
-
     async initialize() {
         _converse.chatboxviews.add(this.jid, this);
         this.model = _converse.chatboxes.get(this.jid);

src/plugins/chatview/heading.js

@@ -9,11 +9,6 @@ import './styles/chat-head.scss';
 
 export default class ChatHeading extends CustomElement {
 
-    connectedCallback () {
-        super.connectedCallback();
-        this.initialize();
-    }
-
     initialize () {
         this.model = _converse.chatboxes.get(this.getAttribute('jid'));
         this.listenTo(this.model, 'change:status', this.requestUpdate);

src/plugins/headlines-view/view.js

@@ -5,11 +5,6 @@ import { _converse, api } from '@converse/headless/core';
 
 class HeadlinesView extends BaseChatView {
 
-    connectedCallback () {
-        super.connectedCallback();
-        this.initialize();
-    }
-
     async initialize() {
         _converse.chatboxviews.add(this.jid, this);
 

src/plugins/minimize/view.js

@@ -7,11 +7,6 @@ import { initStorage } from '@converse/headless/utils/storage.js';
 
 export default class MinimizedChats extends CustomElement {
 
-    constructor () {
-        super();
-        this.initialize();
-    }
-
     async initialize () {
         this.model = _converse.chatboxes;
         await this.initToggle();

src/plugins/muc-views/chatarea.js

@@ -17,11 +17,6 @@ export default class MUCChatArea extends CustomElement {
         }
     }
 
-    connectedCallback () {
-        super.connectedCallback();
-        this.initialize();
-    }
-
     async initialize () {
         this.model = await api.rooms.get(this.jid);
         this.listenTo(this.model, 'change:show_help_messages', () => this.requestUpdate());

src/plugins/muc-views/modtools.js

@@ -38,11 +38,6 @@ export default class ModeratorTools extends CustomElement {
         this.roles_filter = '';
     }
 
-    connectedCallback () {
-        super.connectedCallback();
-        this.initialize();
-    }
-
     updated (changed) {
         changed.has('role') && this.onSearchRoleChange();
         changed.has('affiliation') && this.onSearchAffiliationChange();

src/plugins/muc-views/muc.js

@@ -7,11 +7,6 @@ export default class MUCView extends BaseChatView {
     length = 300
     is_chatroom = true
 
-    connectedCallback () {
-        super.connectedCallback();
-        this.initialize();
-    }
-
     async initialize () {
         this.model = await api.rooms.get(this.jid);
         _converse.chatboxviews.add(this.jid, this);

src/plugins/rosterview/filterview.js

@@ -17,11 +17,6 @@ export const RosterFilter = Model.extend({
 
 export class RosterFilterView extends CustomElement {
 
-    constructor () {
-        super();
-        this.initialize();
-    }
-
     initialize () {
         const model = new _converse.RosterFilter();
         model.id = `_converse.rosterfilter-${_converse.bare_jid}`;

src/plugins/rosterview/rosterview.js

@@ -11,11 +11,6 @@ import { _converse, api } from "@converse/headless/core";
  */
 export default class RosterView extends CustomElement {
 
-    constructor () {
-        super();
-        this.initialize();
-    }
-
     async initialize () {
         await api.waitUntil('rosterInitialized')
         this.listenTo(_converse, 'rosterContactsFetched', this.requestUpdate);

src/shared/chat/chat-content.js

@@ -15,11 +15,6 @@ export default class ChatContent extends CustomElement {
         }
     }
 
-    connectedCallback () {
-        super.connectedCallback();
-        this.initialize();
-    }
-
     disconnectedCallback () {
         super.disconnectedCallback();
         this.removeEventListener('scroll', markScrolled);

src/shared/chat/message-actions.js

@@ -2,6 +2,7 @@ import log from '@converse/headless/log';
 import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
 import { _converse, api, converse } from '@converse/headless/core.js';
+import { getAppSettings } from '@converse/headless/shared/settings/utils.js';
 import { getMediaURLs } from '@converse/headless/shared/chat/utils.js';
 import { html } from 'lit';
 import { isMediaURLDomainAllowed } from '@converse/headless/utils/url.js';
@@ -22,6 +23,15 @@ class MessageActions extends CustomElement {
         };
     }
 
+    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());
+    }
+
+
     render () {
         return html`${until(this.renderActions(), '')}`;
     }

src/shared/chat/message-body.js

@@ -3,6 +3,7 @@ import ImageModal from 'modals/image.js';
 import renderRichText from 'shared/directives/rich-text.js';
 import { CustomElement } from 'shared/components/element.js';
 import { api } from "@converse/headless/core";
+import { getAppSettings } from '@converse/headless/shared/settings/utils.js';
 
 import './styles/message-body.scss';
 
@@ -21,6 +22,14 @@ export default class MessageBody extends CustomElement {
         }
     }
 
+    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());
+    }
+
     onImgClick (ev) { // eslint-disable-line class-methods-use-this
         ev.preventDefault();
         api.modal.create(ImageModal, {'src': ev.target.src}, ev).show(ev);

src/shared/chat/message.js

@@ -30,11 +30,6 @@ export default class Message extends CustomElement {
         }
     }
 
-    connectedCallback () {
-        super.connectedCallback();
-        this.initialize();
-    }
-
     async initialize () {
         await this.setModels();
         if (!this.model) {

src/shared/components/element.js

@@ -14,6 +14,11 @@ export class CustomElement extends LitElement {
         return this;
     }
 
+    connectedCallback () {
+        super.connectedCallback();
+        this.initialize?.();
+    }
+
     disconnectedCallback () {
         super.disconnectedCallback();
         this.stopListening();

src/shared/components/gif.js

@@ -6,7 +6,7 @@ import { html } from 'lit';
 
 import './styles/gif.scss';
 
-export default class ConverseGIF extends CustomElement {
+export default class ConverseGIFElement extends CustomElement {
     static get properties () {
         /**
          * @typedef { Object } ConverseGIFComponentProperties
@@ -33,7 +33,7 @@ export default class ConverseGIF extends CustomElement {
         this.fallback = 'url';
     }
 
-    initialize () {
+    initGIF () {
         const options = {
             'autoplay': this.autoplay,
             'loop': !this.noloop,
@@ -46,7 +46,7 @@ export default class ConverseGIF extends CustomElement {
 
     updated (changed) {
         if (!this.supergif || changed.has('src')) {
-            this.initialize();
+            this.initGIF();
             return;
         }
         if (changed.has('autoplay')) {
@@ -100,4 +100,4 @@ export default class ConverseGIF extends CustomElement {
     }
 }
 
-api.elements.define('converse-gif', ConverseGIF);
+api.elements.define('converse-gif', ConverseGIFElement);