Add sender to muc messages

clientapp/models/me.js

@@ -94,7 +94,6 @@ module.exports = HumanModel.define({
                 self.contacts.add(contact);
             });
         });
- 
     },
     isMe: function (jid) {
         return jid.bare === this.jid.bare;

clientapp/models/message.js

@@ -66,6 +66,22 @@ module.exports = HumanModel.define({
             fn: function () {
                 return !this.acked;
             }
+        },
+        nick: {
+            deps: ['mine', 'type'],
+            fn: function () {
+                if (this.mine) {
+                    if (this.type === 'groupchat') {
+                        return me.mucs.get(this.to.bare).nick;
+                    } else {
+                        return 'me';
+                    }
+                }
+                if (this.type === 'groupchat') {
+                    return this.from.resource;
+                }
+                return me.getContact(this.from.bare).displayName;
+            }
         }
     },
     session: {

clientapp/pages/groupchat.js

@@ -3,7 +3,7 @@
 
 var BasePage = require('./base');
 var templates = require('../templates');
-var Message = require('../views/message');
+var Message = require('../views/mucMessage');
 var MessageModel = require('../models/message');
 
 
@@ -23,7 +23,7 @@ module.exports = BasePage.extend({
         avatar: 'header .avatar'
     },
     textBindings: {
-        displayName: 'header .name',
+        displayName: 'header .name'
     },
     show: function (animation) {
         BasePage.prototype.show.apply(this, [animation]);
@@ -124,7 +124,7 @@ module.exports = BasePage.extend({
 
         if (val) {
             message = {
-                to: this.model.lockedResource || this.model.jid,
+                to: this.model.jid,
                 type: 'groupchat',
                 body: val,
                 chatState: 'active'

clientapp/templates.js

@@ -77,7 +77,7 @@ exports.includes.mucListItem = function anonymous(locals) {
 exports.includes.mucMessage = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<li><div class="message"><span class="sender">' + jade.escape(null == (jade.interp = message.nick) ? "" : jade.interp) + '</span><span class="timestamp">' + jade.escape(null == (jade.interp = message.created) ? "" : jade.interp) + '</span><p class="body">' + jade.escape(null == (jade.interp = message.body) ? "" : jade.interp) + "</p></div></li>");
+        buf.push('<li><div class="message"><span class="timestamp">' + jade.escape(null == (jade.interp = message.created) ? "" : jade.interp) + '</span><p class="body">' + jade.escape(null == (jade.interp = message.body) ? "" : jade.interp) + '</p><span class="sender">' + jade.escape(null == (jade.interp = message.nick) ? "" : jade.interp) + "</span></div></li>");
     }
     return buf.join("");
 };

clientapp/templates/includes/mucMessage.jade

@@ -0,0 +1,5 @@
+li
+  .message
+    span.timestamp=message.created
+    p.body=message.body
+    span.sender=message.nick

clientapp/views/mucMessage.js

@@ -0,0 +1,29 @@
+/*global $*/
+"use strict";
+
+var _ = require('underscore');
+var HumanView = require('human-view');
+var templates = require('../templates');
+
+
+module.exports = HumanView.extend({
+    template: templates.includes.mucMessage,
+    initialize: function (opts) {
+        this.render();
+    },
+    classBindings: {
+        mine: '.message',
+        acked: '.message',
+        delayed: '.message',
+        edited: '.message'
+    },
+    textBindings: {
+        body: '.body',
+        nick: '.nick',
+        formattedTime: '.timestamp'
+    },
+    render: function () {
+        this.renderAndBind({message: this.model});
+        return this;
+    }
+});

public/css/app/chat.styl

@@ -124,6 +124,9 @@
       float: right
       display: block
 
+    .sender
+      display: block
+
 .chatBox
   borderbox()
   border-top: 1px solid $grayOutline

public/css/otalk.css

@@ -738,6 +738,9 @@ h4 {
   float: right;
   display: block;
 }
+.messages .message .sender {
+  display: block;
+}
 .chatBox {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;