Refactored message attributes and rendering.

- set `username` on the message object,
  instead of always using `fullname` with fallback to `jid`.
- Distinguish better between `groupchat` messages and normal
  messages in `getMessageAttributesFromStanza`

spec/chatroom.js

@@ -864,7 +864,7 @@
 
                     message = '/me is as well';
                     msg = $msg({
-                        from: 'lounge@localhost/dummy',
+                        from: 'lounge@localhost/Max Mustermann',
                         id: (new Date()).getTime(),
                         to: 'dummy@localhost',
                         type: 'groupchat'

src/converse-chatboxes.js

@@ -275,7 +275,8 @@
                         is_spoiler = this.get('composing_spoiler');
 
                     return {
-                        'fullname': _.isEmpty(fullname) ? _converse.bare_jid : fullname,
+                        'fullname': fullname,
+                        'username': _.isEmpty(fullname) ? _converse.bare_jid : fullname,
                         'sender': 'me',
                         'time': moment().format(),
                         'message': text ? u.httpToGeoUri(emojione.shortnameToUnicode(text), _converse) : undefined,
@@ -362,50 +363,47 @@
                      *      that contains the message stanza, if it was
                      *      contained, otherwise it's the message stanza itself.
                      */
-                    const { _converse } = this.__super__,
-                          { __ } = _converse;
-
                     delay = delay || message.querySelector('delay');
-                    const type = message.getAttribute('type'),
-                        body = this.getMessageBody(message);
-
-                    const delayed = !_.isNull(delay),
-                        is_groupchat = type === 'groupchat',
-                        chat_state = message.getElementsByTagName(_converse.COMPOSING).length && _converse.COMPOSING ||
-                            message.getElementsByTagName(_converse.PAUSED).length && _converse.PAUSED ||
-                            message.getElementsByTagName(_converse.INACTIVE).length && _converse.INACTIVE ||
-                            message.getElementsByTagName(_converse.ACTIVE).length && _converse.ACTIVE ||
-                            message.getElementsByTagName(_converse.GONE).length && _converse.GONE;
-
-                    let from;
-                    if (is_groupchat) {
-                        from = Strophe.unescapeNode(Strophe.getResourceFromJid(message.getAttribute('from')));
-                    } else {
-                        from = Strophe.getBareJidFromJid(message.getAttribute('from'));
-                    }
-                    const time = delayed ? delay.getAttribute('stamp') : moment().format();
-                    let sender, fullname;
-                    if ((is_groupchat && from === this.get('nick')) || (!is_groupchat && from === _converse.bare_jid)) {
-                        sender = 'me';
-                        fullname = _converse.xmppstatus.get('fullname');
-                    } else {
-                        sender = 'them';
-                        fullname = this.get('fullname');
-                    }
 
-                    const spoiler = message.querySelector(`spoiler[xmlns="${Strophe.NS.SPOILER}"]`);
+                    const { _converse } = this.__super__,
+                          { __ } = _converse,
+                          spoiler = message.querySelector(`spoiler[xmlns="${Strophe.NS.SPOILER}"]`),
+                          chat_state = message.getElementsByTagName(_converse.COMPOSING).length && _converse.COMPOSING ||
+                                message.getElementsByTagName(_converse.PAUSED).length && _converse.PAUSED ||
+                                message.getElementsByTagName(_converse.INACTIVE).length && _converse.INACTIVE ||
+                                message.getElementsByTagName(_converse.ACTIVE).length && _converse.ACTIVE ||
+                                message.getElementsByTagName(_converse.GONE).length && _converse.GONE;
+
                     const attrs = {
-                        'type': type,
-                        'from': from,
+                        'type': message.getAttribute('type'),
                         'chat_state': chat_state,
-                        'delayed': delayed,
-                        'fullname': fullname,
-                        'message': body || undefined,
+                        'delayed': !_.isNull(delay),
+                        'message': this.getMessageBody(message) || undefined,
                         'msgid': message.getAttribute('id'),
-                        'sender': sender,
-                        'time': time,
+                        'time': delay ? delay.getAttribute('stamp') : moment().format(),
                         'is_spoiler': !_.isNull(spoiler)
                     };
+                    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 {
+                            attrs.sender = 'them';
+                        }
+                    } else {
+                        attrs.from = Strophe.getBareJidFromJid(message.getAttribute('from'));
+                        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) => {
                         attrs['oob_url'] = xform.querySelector('url').textContent;
                         attrs['oob_desc'] = xform.querySelector('url').textContent;

src/converse-chatview.js

@@ -579,14 +579,14 @@
                     return this.scrollDown();
                 },
 
-                clearChatStateNotification (from, isodate) {
+                clearChatStateNotification (username, isodate) {
                     if (isodate) {
                         _.each(
-                            sizzle(`.chat-state-notification[data-csn="${from}"][data-isodate="${isodate}"]`, this.content),
+                            sizzle(`.chat-state-notification[data-csn="${username}"][data-isodate="${isodate}"]`, this.content),
                             u.removeElement
                         );
                     } else {
-                        _.each(sizzle(`.chat-state-notification[data-csn="${from}"]`, this.content), u.removeElement);
+                        _.each(sizzle(`.chat-state-notification[data-csn="${username}"]`, this.content), u.removeElement);
                     }
                 },
 
@@ -594,9 +594,8 @@
                     /* Support for XEP-0085, Chat State Notifications */
                     let text;
                     const from = message.get('from'),
-                          username = message.get('fullname') || from,
-                          data = `data-csn=${from}`;
-                    this.clearChatStateNotification(from);
+                          username = message.get('username');
+                    this.clearChatStateNotification(username);
 
                     if (message.get('chat_state') === _converse.COMPOSING) {
                         if (message.get('sender') === 'me') {
@@ -619,6 +618,7 @@
                     this.content.insertAdjacentHTML(
                         'beforeend',
                         tpl_csn({
+                            'username': username,
                             'message': text,
                             'from': from,
                             'isodate': isodate
@@ -626,7 +626,7 @@
                     this.scrollDown();
 
                     this.clear_status_timeout = window.setTimeout(
-                        this.clearChatStateNotification.bind(this, from, isodate),
+                        this.clearChatStateNotification.bind(this, username, isodate),
                         30000
                     );
                     return message;
@@ -717,7 +717,7 @@
                     const view = new _converse.MessageView({'model': message});
                     this.insertMessage(view);
                     this.insertDayIndicator(view.el);
-                    this.clearChatStateNotification(message.get('from'));
+                    this.clearChatStateNotification(message.get('username'));
                     this.setScrollPosition(view.el);
 
                     if (u.isNewMessage(message)) {

src/converse-message-view.js

@@ -45,8 +45,14 @@
 
                 initialize () {
                     this.chatbox = this.model.collection.chatbox;
-                    this.chatbox.on('change:fullname', (chatbox) => this.model.save('fullname', chatbox.get('fullname')));
-
+                    this.chatbox.on('change:fullname', (chatbox) => {
+                        if (chatbox.get('type') !== 'chatroom') {
+                            this.model.save({
+                                'fullname': chatbox.get('fullname'),
+                                'username': chatbox.get('fullname')
+                            })
+                        }
+                    });
                     this.model.on('change:fullname', this.render, this);
                     this.model.on('change:progress', this.renderFileUploadProgresBar, this);
                     this.model.on('change:type', this.render, this);
@@ -60,18 +66,13 @@
                     } else if (this.model.get('type') === 'error') {
                         return this.renderErrorMessage();
                     }
-
-                    let template, username, image, image_type,
+                    let template, image, image_type,
                         text = this.model.get('message');
 
-                    // TODO: store proper username on the message itself
                     if (this.isMeCommand()) {
-                        const arr = this.getValuesForMeCommand();
-                        template = arr[0];
-                        username = arr[1];
-                        text = arr[2];
+                        template = tpl_action;
+                        text = this.model.get('message').replace(/^\/me/, '');
                     } else {
-                        username = this.model.get('fullname') || this.model.get('from');
                         template = this.model.get('is_spoiler') ? tpl_spoiler_message : tpl_message;
                         if (this.model.get('type') !== 'headline') {
                             if (this.model.get('sender') === 'me') {
@@ -88,7 +89,6 @@
                         _.extend(this.model.toJSON(), {
                             'pretty_time': moment_time.format(_converse.time_format),
                             'time': moment_time.format(),
-                            'username': username,
                             'extra_classes': this.getExtraMessageClasses(),
                             'label_show': __('Show more'),
                             'image_type': image_type,
@@ -168,21 +168,6 @@
                     return match && match[1] === 'me';
                 },
 
-                getValuesForMeCommand() {
-                    let username, text;
-                    const match = this.model.get('message').match(/^\/(.*?)(?: (.*))?$/);
-                    if (match && match[1] === 'me') {
-                        text = this.model.get('message').replace(/^\/me/, '');
-                    }
-                    if (this.model.get('sender') === 'me') {
-                        const fullname = _converse.xmppstatus.get('fullname') || this.model.get('fullname');
-                        username = _.isNil(fullname) ? _converse.bare_jid : fullname;
-                    } else {
-                        username = this.model.get('fullname') || this.model.get('from');
-                    }
-                    return [tpl_action, username, text]
-                },
-
                 processMessageText () {
                     var text = this.get('message');
                     text = u.geoUriToHttp(text, _converse.geouri_replacement);

src/converse-muc.js

@@ -305,6 +305,7 @@
                     const is_spoiler = this.get('composing_spoiler');
                     return {
                         '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.from}}}">{{{o.message}}}</div>
+     data-csn="{{{o.username}}}">{{{o.message}}}</div>