Render chatbox avatar via the vcards collection

src/converse-chatboxes.js

@@ -213,6 +213,11 @@
                 },
 
                 initialize () {
+                    this.vcard = _converse.vcards.findWhere({'jid': this.get('jid')});
+                    if (_.isNil(this.vcard)) {
+                        this.vcard = _converse.vcards.create({'jid': this.get('jid')});
+                    }
+
                     this.messages = new _converse.Messages();
                     this.messages.browserStorage = new Backbone.BrowserStorage[_converse.message_storage](
                         b64_sha1(`converse.messages${this.get('jid')}${_converse.bare_jid}`));

src/converse-chatview.js

@@ -102,8 +102,6 @@
             _converse.api.settings.update({
                 'use_emojione': false,
                 'emojione_image_path': emojione.imagePathPNG,
-                'chatview_avatar_height': 32,
-                'chatview_avatar_width': 32,
                 'show_toolbar': true,
                 'time_format': 'HH:mm',
                 'visible_toolbar_buttons': {
@@ -204,23 +202,24 @@
                 }
             });
 
-            _converse.ChatBoxHeading = Backbone.NativeView.extend({
+            _converse.ChatBoxHeading = _converse.ViewWithAvatar.extend({
 
                 initialize () {
-                    this.model.on('change:image', this.render, this);
                     this.model.on('change:status', this.onStatusMessageChanged, this);
-                    this.model.on('change:fullname', this.render, this);
+                    this.model.vcard.on('change', this.render, this);
                 },
 
                 render () {
                     this.el.innerHTML = tpl_chatbox_head(
-                        _.extend(this.model.toJSON(), {
-                            '_converse': _converse,
-                            'avatar_width': _converse.chatview_avatar_width,
-                            'avatar_height': _converse.chatview_avatar_height,
-                            'info_close': __('Close this chat box'),
-                        })
+                        _.extend(
+                            this.model.toJSON(),
+                            this.model.vcard.toJSON(),
+                            { '_converse': _converse,
+                              'info_close': __('Close this chat box')
+                            }
+                        )
                     );
+                    this.renderAvatar();
                     return this;
                 },
 

src/converse-message-view.js

@@ -41,7 +41,33 @@
             const { _converse } = this,
                 { __ } = _converse;
 
-            _converse.MessageView = Backbone.NativeView.extend({
+            _converse.ViewWithAvatar = Backbone.NativeView.extend({
+
+                renderAvatar () {
+                    const canvas_el = this.el.querySelector('canvas');
+                    if (_.isNull(canvas_el)) {
+                        return;
+                    }
+                    const image_type = this.model.vcard.get('image_type'),
+                          image = this.model.vcard.get('image'),
+                          img_src = "data:" + image_type + ";base64," + image,
+                          img = new Image();
+
+                    img.onload = () => {
+                        const ctx = canvas_el.getContext('2d'),
+                              ratio = img.width / img.height;
+                        ctx.clearRect(0, 0, canvas_el.width, canvas_el.height);
+                        if (ratio < 1) {
+                            ctx.drawImage(img, 0, 0, canvas_el.width, canvas_el.height * (1 / ratio));
+                        } else {
+                            ctx.drawImage(img, 0, 0, canvas_el.width, canvas_el.height * ratio);
+                        }
+                    };
+                    img.src = img_src;
+                },
+            });
+
+            _converse.MessageView = _converse.ViewWithAvatar.extend({
 
                 initialize () {
                     this.chatbox = this.model.collection.chatbox;
@@ -53,7 +79,7 @@
                             })
                         }
                     });
-                    this.model.vcard.on('change:image', () => this.renderAvatar());
+                    this.model.vcard.on('change:image', this.renderAvatar, this);
                     this.model.on('change:fullname', this.render, this);
                     this.model.on('change:progress', this.renderFileUploadProgresBar, this);
                     this.model.on('change:type', this.render, this);
@@ -121,29 +147,6 @@
                     }
                 },
 
-                renderAvatar () {
-                    const canvas_el = this.el.querySelector('canvas');
-                    if (_.isNull(canvas_el)) {
-                        return;
-                    }
-                    const image_type = this.model.vcard.get('image_type'),
-                          image = this.model.vcard.get('image'),
-                          img_src = "data:" + image_type + ";base64," + image,
-                          img = new Image();
-
-                    img.onload = () => {
-                        const ctx = canvas_el.getContext('2d'),
-                              ratio = img.width / img.height;
-                        ctx.clearRect(0, 0, canvas_el.width, canvas_el.height);
-                        if (ratio < 1) {
-                            ctx.drawImage(img, 0, 0, canvas_el.width, canvas_el.height * (1 / ratio));
-                        } else {
-                            ctx.drawImage(img, 0, 0, canvas_el.width, canvas_el.height * ratio);
-                        }
-                    };
-                    img.src = img_src;
-                },
-
                 replaceElement (msg) {
                     if (!_.isNil(this.el.parentElement)) {
                         this.el.parentElement.replaceChild(msg, this.el);

src/templates/chatbox_head.html

 <div class="chat-head chat-head-chatbox row no-gutters">
     <div class="col">
         <div class="row no-gutters">
+            <canvas class="avatar" height="36" width="36"></canvas>
             <div class="col chat-title" title="{{{o.jid}}}">
                 {[ if (o.url) { ]}
                     <a href="{{{o.url}}}" target="_blank" rel="noopener" class="user">