Create `avatar` objects for all messages, not just groupchat

src/converse-chatboxes.js

@@ -95,11 +95,9 @@
                 },
 
                 initialize () {
-                    if (this.get('type') === 'groupchat') {
-                        this.avatar = _converse.avatars.findWhere({'muc_jid': this.get('from')});
+                    this.avatar = _converse.avatars.findWhere({'jid': this.get('from')});
                     if (_.isNil(this.avatar)) {
-                            this.avatar = _converse.avatars.create({'muc_jid': this.get('from')});
-                        }
+                        this.avatar = _converse.avatars.create({'jid': this.get('from')});
                     }
 
                     if (this.get('file')) {

src/converse-core.js

@@ -241,6 +241,44 @@
     _converse.router = new Backbone.Router();
 
 
+    _converse.ModelWithDefaultAvatar = Backbone.Model.extend({
+        defaults: {
+            'image': _converse.DEFAULT_IMAGE,
+            'image_type': _converse.DEFAULT_IMAGE_TYPE
+        },
+
+        set (key, val, options) {
+            // Override Backbone.Model.prototype.set to make sure that the
+            // default `image` and `image_type` values are maintained.
+            let attrs;
+            if (typeof key === 'object') {
+                attrs = key;
+                options = val;
+            } else {
+                (attrs = {})[key] = val;
+            }
+            if (_.has(attrs, 'image') && _.isUndefined(attrs['image'])) {
+                attrs['image'] = _converse.DEFAULT_IMAGE;
+                attrs['image_type'] = _converse.DEFAULT_IMAGE_TYPE;
+                return Backbone.Model.prototype.set.call(this, attrs, options);
+            } else {
+                return Backbone.Model.prototype.set.apply(this, arguments);
+            }
+        }
+    });
+
+
+    _converse.Avatars = Backbone.Collection.extend({
+        model: _converse.ModelWithDefaultAvatar,
+
+        initialize () {
+            this.on('add', (avatar) => {
+                _converse.api.vcard.update(avatar);
+            });
+        }
+    });
+
+
     _converse.initialize = function (settings, callback) {
         "use strict";
         settings = !_.isUndefined(settings) ? settings : {};
@@ -1504,33 +1542,6 @@
         this.connfeedback = new this.ConnectionFeedback();
 
 
-        this.ModelWithDefaultAvatar = Backbone.Model.extend({
-            defaults: {
-                'image': _converse.DEFAULT_IMAGE,
-                'image_type': _converse.DEFAULT_IMAGE_TYPE
-            },
-
-            set (key, val, options) {
-                // Override Backbone.Model.prototype.set to make sure that the
-                // default `image` and `image_type` values are maintained.
-                let attrs;
-                if (typeof key === 'object') {
-                    attrs = key;
-                    options = val;
-                } else {
-                    (attrs = {})[key] = val;
-                }
-                if (_.has(attrs, 'image') && _.isUndefined(attrs['image'])) {
-                    attrs['image'] = _converse.DEFAULT_IMAGE;
-                    attrs['image_type'] = _converse.DEFAULT_IMAGE_TYPE;
-                    return Backbone.Model.prototype.set.call(this, attrs, options);
-                } else {
-                    return Backbone.Model.prototype.set.apply(this, arguments);
-                }
-            }
-        });
-
-
         this.XMPPStatus = this.ModelWithDefaultAvatar.extend({
 
             defaults () {
@@ -1809,6 +1820,12 @@
             _converse.emit('connectionInitialized');
         };
 
+        this.initAvatars = function () {
+            _converse.avatars = new _converse.Avatars();
+            _converse.avatars.browserStorage = new Backbone.BrowserStorage.local(b64_sha1(`converse.avatars`));
+            _converse.avatars.fetch();
+        };
+
         this._tearDown = function () {
             /* Remove those views which are only allowed with a valid
              * connection.
@@ -1878,6 +1895,7 @@
         function finishInitialization () {
             _converse.initPlugins();
             _converse.initConnection();
+            _converse.initAvatars();
             _converse.setUpXMLLogging();
             _converse.logIn();
             _converse.registerGlobalEventHandlers();

src/converse-message-view.js

@@ -53,9 +53,9 @@
                             })
                         }
                     });
-                    if (this.model.get('type') === 'groupchat') {
-                        this.model.avatar.on('change:image', this.renderAvatar, this);
-                    }
+                    this.model.avatar.on('change:image', () => {
+                        this.renderAvatar();
+                    });
                     this.model.on('change:fullname', this.render, this);
                     this.model.on('change:progress', this.renderFileUploadProgresBar, this);
                     this.model.on('change:type', this.render, this);
@@ -128,21 +128,11 @@
                     if (_.isNull(canvas_el)) {
                         return;
                     }
-                    let image, image_type;
-
-                    if (this.chatbox.get('type') === 'chatroom') {
-                        image_type = this.model.avatar.get('image_type');
-                        image = this.model.avatar.get('image');
-                    } else if (this.model.get('sender') === 'me') {
-                        image_type = _converse.xmppstatus.get('image_type');
-                        image = _converse.xmppstatus.get('image');
-                    } else {
-                        image_type = this.chatbox.get('image_type');
-                        image = this.chatbox.get('image');
-                    }
-
-                    const img_src = "data:" + image_type + ";base64," + image,
+                    const image_type = this.model.avatar.get('image_type'),
+                          image = this.model.avatar.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;

src/converse-muc.js

@@ -67,7 +67,7 @@
          *
          * NB: These plugins need to have already been loaded via require.js.
          */
-        dependencies: ["converse-controlbox"],
+        dependencies: ["converse-chatboxes", "converse-controlbox"],
 
         overrides: {
             // Overrides mentioned here will be picked up by converse.js's
@@ -996,9 +996,7 @@
                 },
 
                 onAvatarChanged () {
-                    this.avatar = _converse.avatars.findWhere({
-                        'muc_jid': this.get('from')
-                    });
+                    this.avatar = _converse.avatars.findWhere({'jid': this.get('from')});
                     if (!this.avatar) { return; }
 
                     const hash = this.get('image_hash');
@@ -1026,15 +1024,6 @@
             });
 
 
-            _converse.Avatars = Backbone.Collection.extend({
-                model: _converse.ModelWithDefaultAvatar,
-
-                initialize () {
-                    this.on('add', (avatar) => _converse.api.vcard.update(avatar));
-                }
-            });
-
-
             _converse.RoomsPanelModel = Backbone.Model.extend({
                 defaults: {
                     'muc_domain': '',
@@ -1144,15 +1133,6 @@
             }
 
             /************************ BEGIN Event Handlers ************************/
-            _converse.initAvatars = function () {
-                if (_.isUndefined(_converse.avatars)) {
-                    _converse.avatars = new _converse.Avatars();
-                    _converse.avatars.browserStorage = new Backbone.BrowserStorage.local(b64_sha1(`converse.avatars`));
-                    _converse.avatars.fetch();
-                }
-            }
-            _converse.api.listen.on('connectionInitialized', _converse.initAvatars);
-
             _converse.on('addClientFeatures', () => {
                 if (_converse.allow_muc) {
                     _converse.connection.disco.addFeature(Strophe.NS.MUC);