Use vcard from the collection for rendering messages

spec/chatbox.js

@@ -85,7 +85,9 @@
                         message = '/me is as well';
                         test_utils.sendMessage(view, message);
                         expect(view.el.querySelectorAll('.chat-action').length).toBe(2);
-                        expect(_.includes($(view.el).find('.chat-msg-author:last').text(), '**Max Mustermann')).toBeTruthy();
+
+                        return test_utils.waitUntil(() => $(view.el).find('.chat-msg-author:last').text() === '**Max Mustermann');
+                    }).then(function () {
                         expect($(view.el).find('.chat-msg-text:last').text()).toBe(' is as well');
                         expect($(view.el).find('.chat-msg:last').hasClass('chat-msg-followup')).toBe(false);
 

spec/messages.js

@@ -67,8 +67,11 @@
                     var chat_content = chatboxview.el.querySelector('.chat-content');
                     expect(chat_content.querySelector('.chat-msg .chat-msg-text').textContent).toEqual(message);
                     expect(chat_content.querySelector('.chat-msg-time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
-                    expect(chat_content.querySelector('span.chat-msg-author').textContent).toBe('Max Frankfurter');
-                    done();
+                    return test_utils.waitUntil(() => chatbox.vcard.get('fullname') === mock.cur_names[0])
+                    .then(function () {
+                        expect(chat_content.querySelector('span.chat-msg-author').textContent).toBe('Max Frankfurter');
+                        done();
+                    });
                 });
             }));
 
@@ -120,9 +123,7 @@
                     test_utils.waitUntil(function () { return vcard_fetched; }, 100)
                     .then(function () {
                         expect(_converse.api.vcard.get).toHaveBeenCalled();
-                        return test_utils.waitUntil(function () {
-                            return chatbox.get('fullname') === mock.cur_names[0];
-                        }, 100);
+                        return test_utils.waitUntil(() => chatbox.vcard.get('fullname') === mock.cur_names[0])
                     }).then(function () {
                         var author_el = chatboxview.el.querySelector('.chat-msg-author');
                         expect( _.includes(author_el.textContent, 'Max Frankfurter')).toBeTruthy();
@@ -696,8 +697,11 @@
             var chat_content = chatboxview.el.querySelector('.chat-content');
             expect(chat_content.querySelector('.chat-msg .chat-msg-text').textContent).toEqual(msgtext);
             expect(chat_content.querySelector('.chat-msg-time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
-            expect(chat_content.querySelector('span.chat-msg-author').textContent).toBe('Candice van der Knijff');
-            done();
+            return test_utils.waitUntil(() => chatbox.vcard.get('fullname') === 'Candice van der Knijff')
+            .then(function () {
+                expect(chat_content.querySelector('span.chat-msg-author').textContent).toBe('Candice van der Knijff');
+                done();
+            });
         }));
 
         it("can be a carbon message that this user sent from a different client, as defined in XEP-0280",
@@ -899,56 +903,59 @@
                 expect(msg_obj.get('sender')).toEqual('them');
                 expect(msg_obj.get('delayed')).toEqual(true);
 
-                var chat_content = chatboxview.el.querySelector('.chat-content');
-                expect(chat_content.querySelector('.chat-msg .chat-msg-text').textContent).toEqual(message);
-                expect(chat_content.querySelector('.chat-msg-time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
-                expect(chat_content.querySelector('span.chat-msg-author').textContent).toBe('Candice van der Knijff');
-
-                var $day = $chat_content.find('.date-separator');
-                expect($day.length).toEqual(1);
-                expect($day.attr('class')).toEqual('message date-separator');
-                expect($day.data('isodate')).toEqual(moment(one_day_ago.startOf('day')).format());
-
-                var $time = $chat_content.find('time.separator-text');
-                expect($time.text()).toEqual(moment(one_day_ago.startOf('day')).format("dddd MMM Do YYYY"));
-
-                message = 'This is a current message';
-                msg = $msg({
-                    from: contact_jid,
-                    to: _converse.connection.jid,
-                    type: 'chat',
-                    id: new Date().getTime()
-                }).c('body').t(message).up()
-                .c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree();
-                _converse.chatboxes.onMessage(msg);
-                expect(_converse.emit).toHaveBeenCalledWith('message', jasmine.any(Object));
-                // Check that there is a <time> element, with the required
-                // props.
-                expect($chat_content[0].querySelectorAll('time').length).toEqual(2); // There are now two time elements
+                return test_utils.waitUntil(() => chatbox.vcard.get('fullname') === 'Candice van der Knijff')
+                .then(function () {
+                    var chat_content = chatboxview.el.querySelector('.chat-content');
+                    expect(chat_content.querySelector('.chat-msg .chat-msg-text').textContent).toEqual(message);
+                    expect(chat_content.querySelector('.chat-msg-time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
+                    expect(chat_content.querySelector('span.chat-msg-author').textContent).toBe('Candice van der Knijff');
 
-                var message_date = new Date();
-                $day = $chat_content.find('.date-separator:last');
-                expect($day.length).toEqual(1);
-                expect($day.attr('class')).toEqual('message date-separator');
-                expect($day.data('isodate')).toEqual(moment(message_date).startOf('day').format());
+                    var $day = $chat_content.find('.date-separator');
+                    expect($day.length).toEqual(1);
+                    expect($day.attr('class')).toEqual('message date-separator');
+                    expect($day.data('isodate')).toEqual(moment(one_day_ago.startOf('day')).format());
 
-                $time = $chat_content.find('time.separator-text:last');
-                expect($time.text()).toEqual(moment(message_date).startOf('day').format("dddd MMM Do YYYY"));
+                    var $time = $chat_content.find('time.separator-text');
+                    expect($time.text()).toEqual(moment(one_day_ago.startOf('day')).format("dddd MMM Do YYYY"));
 
-                // Normal checks for the 2nd message
-                expect(chatbox.messages.length).toEqual(2);
-                msg_obj = chatbox.messages.models[1];
-                expect(msg_obj.get('message')).toEqual(message);
-                expect(msg_obj.get('fullname')).toEqual(contact_name);
-                expect(msg_obj.get('sender')).toEqual('them');
-                expect(msg_obj.get('delayed')).toEqual(false);
-                msg_txt = $chat_content.find('.chat-msg').last().find('.chat-msg-text').text();
-                expect(msg_txt).toEqual(message);
+                    message = 'This is a current message';
+                    msg = $msg({
+                        from: contact_jid,
+                        to: _converse.connection.jid,
+                        type: 'chat',
+                        id: new Date().getTime()
+                    }).c('body').t(message).up()
+                    .c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree();
+                    _converse.chatboxes.onMessage(msg);
+                    expect(_converse.emit).toHaveBeenCalledWith('message', jasmine.any(Object));
+                    // Check that there is a <time> element, with the required
+                    // props.
+                    expect($chat_content[0].querySelectorAll('time').length).toEqual(2); // There are now two time elements
+
+                    var message_date = new Date();
+                    $day = $chat_content.find('.date-separator:last');
+                    expect($day.length).toEqual(1);
+                    expect($day.attr('class')).toEqual('message date-separator');
+                    expect($day.data('isodate')).toEqual(moment(message_date).startOf('day').format());
+
+                    $time = $chat_content.find('time.separator-text:last');
+                    expect($time.text()).toEqual(moment(message_date).startOf('day').format("dddd MMM Do YYYY"));
+
+                    // Normal checks for the 2nd message
+                    expect(chatbox.messages.length).toEqual(2);
+                    msg_obj = chatbox.messages.models[1];
+                    expect(msg_obj.get('message')).toEqual(message);
+                    expect(msg_obj.get('fullname')).toEqual(contact_name);
+                    expect(msg_obj.get('sender')).toEqual('them');
+                    expect(msg_obj.get('delayed')).toEqual(false);
+                    msg_txt = $chat_content.find('.chat-msg').last().find('.chat-msg-text').text();
+                    expect(msg_txt).toEqual(message);
 
-                expect(chat_content.querySelector('.chat-msg:last-child .chat-msg-text').textContent).toEqual(message);
-                expect(chat_content.querySelector('.chat-msg:last-child .chat-msg-time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
-                expect(chat_content.querySelector('.chat-msg:last-child .chat-msg-author').textContent).toBe('Candice van der Knijff');
-                done();
+                    expect(chat_content.querySelector('.chat-msg:last-child .chat-msg-text').textContent).toEqual(message);
+                    expect(chat_content.querySelector('.chat-msg:last-child .chat-msg-time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
+                    expect(chat_content.querySelector('.chat-msg:last-child .chat-msg-author').textContent).toBe('Candice van der Knijff');
+                    done();
+                });
             });
         }));
 

spec/spoilers.js

@@ -44,14 +44,18 @@
             _converse.chatboxes.onMessage(msg);
 
             var view = _converse.chatboxviews.get(sender_jid);
-            expect(view.el.querySelector('.chat-msg-author').textContent).toBe('Max Frankfurter');
 
-            var message_content = view.el.querySelector('.chat-msg-text');
-            expect(message_content.textContent).toBe(spoiler);
+            return test_utils.waitUntil(() => view.model.vcard.get('fullname') === 'Max Frankfurter')
+            .then(function () {
+                expect(view.el.querySelector('.chat-msg-author').textContent).toBe('Max Frankfurter');
 
-            var spoiler_hint_el = view.el.querySelector('.spoiler-hint');
-            expect(spoiler_hint_el.textContent).toBe(spoiler_hint);
-            done();
+                var message_content = view.el.querySelector('.chat-msg-text');
+                expect(message_content.textContent).toBe(spoiler);
+
+                var spoiler_hint_el = view.el.querySelector('.spoiler-hint');
+                expect(spoiler_hint_el.textContent).toBe(spoiler_hint);
+                done();
+            });
         }));
 
         it("can be received without a hint",
@@ -80,14 +84,17 @@
             _converse.chatboxes.onMessage(msg);
 
             var view = _converse.chatboxviews.get(sender_jid);
-            expect(_.includes(view.el.querySelector('.chat-msg-author').textContent, 'Max Frankfurter')).toBeTruthy();
+            return test_utils.waitUntil(() => view.model.vcard.get('fullname') === 'Max Frankfurter')
+            .then(function () {
+                expect(_.includes(view.el.querySelector('.chat-msg-author').textContent, 'Max Frankfurter')).toBeTruthy();
 
-            var message_content = view.el.querySelector('.chat-msg-text');
-            expect(message_content.textContent).toBe(spoiler);
+                var message_content = view.el.querySelector('.chat-msg-text');
+                expect(message_content.textContent).toBe(spoiler);
 
-            var spoiler_hint_el = view.el.querySelector('.spoiler-hint');
-            expect(spoiler_hint_el.textContent).toBe('');
-            done();
+                var spoiler_hint_el = view.el.querySelector('.spoiler-hint');
+                expect(spoiler_hint_el.textContent).toBe('');
+                done();
+            });
         }));
 
         it("can be sent without a hint",

src/converse-chatboxes.js

@@ -111,6 +111,14 @@
                     }
                 },
 
+                getDisplayName () {
+                    if (this.get('type') === 'groupchat') {
+                        return this.get('nick');
+                    } else {
+                        return this.vcard.get('fullname') || this.get('from');
+                    }
+                },
+
                 sendSlotRequestStanza () {
                     /* Send out an IQ stanza to request a file upload slot.
                      *
@@ -294,7 +302,7 @@
 
                     return {
                         'fullname': fullname,
-                        'username': _.isEmpty(fullname) ? _converse.bare_jid : fullname,
+                        'from': _converse.bare_jid,
                         'sender': 'me',
                         'time': moment().format(),
                         'message': text ? u.httpToGeoUri(emojione.shortnameToUnicode(text), _converse) : undefined,
@@ -404,7 +412,6 @@
                     if (attrs.type === 'groupchat') {
                         attrs.from = message.getAttribute('from');
                         attrs.nick = Strophe.unescapeNode(Strophe.getResourceFromJid(attrs.from));
-                        attrs.username = attrs.nick;
                         if (attrs.from === this.get('nick')) {
                             attrs.sender = 'me';
                         } else {
@@ -415,11 +422,9 @@
                         if (attrs.from === _converse.bare_jid) {
                             attrs.sender = 'me';
                             attrs.fullname = _converse.xmppstatus.get('fullname');
-                            attrs.username = attrs.fullname || attrs.from;
                         } else {
                             attrs.sender = 'them';
                             attrs.fullname = this.get('fullname');
-                            attrs.username = attrs.fullname || attrs.from;
                         }
                     }
                     _.each(sizzle(`x[xmlns="${Strophe.NS.OUTOFBAND}"]`, message), (xform) => {

src/converse-chatview.js

@@ -578,14 +578,14 @@
                     return this.scrollDown();
                 },
 
-                clearChatStateNotification (username, isodate) {
+                clearChatStateNotification (message, isodate) {
                     if (isodate) {
                         _.each(
-                            sizzle(`.chat-state-notification[data-csn="${username}"][data-isodate="${isodate}"]`, this.content),
+                            sizzle(`.chat-state-notification[data-csn="${message.get('from')}"][data-isodate="${isodate}"]`, this.content),
                             u.removeElement
                         );
                     } else {
-                        _.each(sizzle(`.chat-state-notification[data-csn="${username}"]`, this.content), u.removeElement);
+                        _.each(sizzle(`.chat-state-notification[data-csn="${message.get('from')}"]`, this.content), u.removeElement);
                     }
                 },
 
@@ -593,23 +593,24 @@
                     /* Support for XEP-0085, Chat State Notifications */
                     let text;
                     const from = message.get('from'),
-                          username = message.get('username');
-                    this.clearChatStateNotification(username);
+                          name = message.getDisplayName();
+
+                    this.clearChatStateNotification(message);
 
                     if (message.get('chat_state') === _converse.COMPOSING) {
                         if (message.get('sender') === 'me') {
                             text = __('Typing from another device');
                         } else {
-                            text = username +' '+__('is typing');
+                            text = name +' '+__('is typing');
                         }
                     } else if (message.get('chat_state') === _converse.PAUSED) {
                         if (message.get('sender') === 'me') {
                             text = __('Stopped typing on the other device');
                         } else {
-                            text = username +' '+__('has stopped typing');
+                            text = name +' '+__('has stopped typing');
                         }
                     } else if (message.get('chat_state') === _converse.GONE) {
-                        text = username +' '+__('has gone away');
+                        text = name +' '+__('has gone away');
                     } else {
                         return;
                     }
@@ -617,7 +618,6 @@
                     this.content.insertAdjacentHTML(
                         'beforeend',
                         tpl_csn({
-                            'username': username,
                             'message': text,
                             'from': from,
                             'isodate': isodate
@@ -625,7 +625,7 @@
                     this.scrollDown();
 
                     this.clear_status_timeout = window.setTimeout(
-                        this.clearChatStateNotification.bind(this, username, isodate),
+                        this.clearChatStateNotification.bind(this, message, isodate),
                         30000
                     );
                     return message;
@@ -713,7 +713,7 @@
                     const view = new _converse.MessageView({'model': message});
                     this.insertMessage(view);
                     this.insertDayIndicator(view.el);
-                    this.clearChatStateNotification(message.get('username'));
+                    this.clearChatStateNotification(message);
                     this.setScrollPosition(view.el);
 
                     if (u.isNewMessage(message)) {

src/converse-message-view.js

@@ -70,17 +70,7 @@
             _converse.MessageView = _converse.ViewWithAvatar.extend({
 
                 initialize () {
-                    this.chatbox = this.model.collection.chatbox;
-                    this.chatbox.on('change:fullname', (chatbox) => {
-                        if (chatbox.get('type') !== 'chatroom') {
-                            this.model.save({
-                                'fullname': chatbox.get('fullname'),
-                                'username': chatbox.get('fullname')
-                            })
-                        }
-                    });
-                    this.model.vcard.on('change:image', this.renderAvatar, this);
-                    this.model.on('change:fullname', this.render, this);
+                    this.model.vcard.on('change', this.render, this);
                     this.model.on('change:progress', this.renderFileUploadProgresBar, this);
                     this.model.on('change:type', this.render, this);
                     this.model.on('change:upload', this.render, this);
@@ -101,20 +91,14 @@
                         template = this.model.get('is_spoiler') ? tpl_spoiler_message : tpl_message;
                     }
 
-                    let username;
-                    if (this.chatbox.get('type') === 'chatroom') {
-                        username = this.model.get('nick');
-                    } else {
-                        username = this.model.get('fullname') || this.model.get('from');
-                    }
-
                     const moment_time = moment(this.model.get('time'));
                     const msg = u.stringToElement(template(
                         _.extend(this.model.toJSON(), {
                             'pretty_time': moment_time.format(_converse.time_format),
                             'time': moment_time.format(),
                             'extra_classes': this.getExtraMessageClasses(),
-                            'label_show': __('Show more')
+                            'label_show': __('Show more'),
+                            'username': this.model.getDisplayName()
                         })
                     ));
 
@@ -167,21 +151,12 @@
                 },
 
                 renderFileUploadProgresBar () {
-                    let image, image_type;
-                    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 msg = u.stringToElement(tpl_file_progress(
                         _.extend(this.model.toJSON(), {
                             'filesize': filesize(this.model.get('file').size),
-                            'image': image,
-                            'image_type': image_type
                         })));
-                    return this.replaceElement(msg);
+                    this.replaceElement(msg);
+                    this.renderAvatar();
                 },
 
                 isMeCommand () {

src/converse-minimize.js

@@ -169,6 +169,25 @@
                 },
             },
 
+            ChatBoxHeading: {
+
+                render () {
+                    const { _converse } = this.__super__,
+                        { __ } = _converse;
+                    const result = this.__super__.render.apply(this, arguments);
+                    const new_html = tpl_chatbox_minimize(
+                        {info_minimize: __('Minimize this chat box')}
+                    );
+                    const el = this.el.querySelector('.toggle-chatbox-button');
+                    if (el) {
+                        el.outerHTML = new_html;
+                    } else {
+                        const button = this.el.querySelector('.close-chatbox-button');
+                        button.insertAdjacentHTML('afterEnd', new_html);
+                    }
+                }
+            },
+
             ChatRoomView: {
                 events: {
                     'click .toggle-chatbox-button': 'minimize',
@@ -522,20 +541,6 @@
                 _converse.emit('minimizedChatsInitialized');
             }).catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
 
-            _converse.on('chatBoxOpened', function renderMinimizeButton (view) {
-                // Inserts a "minimize" button in the chatview's header
-                const new_html = tpl_chatbox_minimize(
-                    {info_minimize: __('Minimize this chat box')}
-                );
-                const el = view.el.querySelector('.toggle-chatbox-button');
-                if (el) {
-                    el.outerHTML = new_html;
-                } else {
-                    const button = view.el.querySelector('.close-chatbox-button');
-                    button.insertAdjacentHTML('afterEnd', new_html);
-                }
-            });
-
             _converse.on('controlBoxOpened', function (chatbox) {
                 // Wrapped in anon method because at scan time, chatboxviews
                 // attr not set yet.

src/converse-muc.js

@@ -307,7 +307,6 @@
                     return {
                         'from': `${this.get('jid')}/${this.get('nick')}`,
                         'fullname': this.get('nick'),
-                        'username': this.get('nick'),
                         'is_spoiler': is_spoiler,
                         'message': text ? u.httpToGeoUri(emojione.shortnameToUnicode(text), _converse) : undefined,
                         'sender': 'me',

src/templates/csn.html

@@ -1,3 +1,3 @@
 <div class="message chat-info chat-state-notification"
      data-isodate="{{{o.isodate}}}"
-     data-csn="{{{o.username}}}">{{{o.message}}}</div>
+     data-csn="{{{o.from}}}">{{{o.message}}}</div>

src/templates/file_progress.html

@@ -1,5 +1,5 @@
 <div class="message chat-msg" data-isodate="{{{o.time}}}" data-msgid="{{{o.msgid}}}">
-    <img alt="User Avatar" class="avatar" height="36px" width="36px" src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>
+    <canvas class="avatar" height="36" width="36"></canvas>
     <div class="chat-msg-content">
         <span class="chat-msg-text">Uploading file: <strong>{{{o.file.name}}}</strong>, {{{o.filesize}}}</span>
         <progress value="{{{o.progress}}}"/>