Send contact state (typing, paused, gone)

clientapp/models/contact.js

@@ -175,6 +175,19 @@ module.exports = HumanModel.define({
                 return 'gone';
             }
         },
+        chatStateText: {
+            deps: ['topResource', 'lockedResource', '_forceUpdate'],
+            fn: function () {
+                var chatState = this.chatState;
+                if (chatState == 'composing')
+                    return this.displayName + ' is composing';
+                else if (chatState == 'paused')
+                    return this.displayName + ' stopped writting';
+                else if (chatState == 'gone')
+                    return this.displayName + ' is gone';
+                return '';
+            }
+        },
         supportsReceipts: {
             deps: ['lockedResource', '_forceUpdate'],
             fn: function () {
@@ -188,7 +201,7 @@ module.exports = HumanModel.define({
             fn: function () {
                 if (!this.lockedResource) return false;
                 var res = this.resources.get(this.lockedResource);
-                return res.supportsChatStates;
+                return res && res.supportsChatStates;
             }
         },
         hasUnread: {

clientapp/pages/chat.js

@@ -43,7 +43,8 @@ module.exports = BasePage.extend({
     textBindings: {
         displayName: 'header .name',
         formattedTZO: 'header .tzo',
-        status: 'header .status'
+        status: 'header .status',
+        chatStateText: '.chatBox .contactState'
     },
     classBindings: {
         chatState: 'header',
@@ -166,7 +167,7 @@ module.exports = BasePage.extend({
         }
     }, 3000),
     sendChatState: function (state) {
-        if (!this.model.supportsChatStates) return;
+        //if (!this.model.supportsChatStates) return;
         client.sendMessage({
             to: this.model.lockedResource || this.model.jid,
             chatState: state

clientapp/templates.js

@@ -539,7 +539,7 @@ exports.misc.growlMessage = function anonymous(locals) {
 exports.pages.chat = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<section class="page chat"><section class="conversation"><header><div class="title"><span class="prefix">@</span><span class="name"></span><i class="user_presence fa fa-circle"></i><span class="status"></span></div><div class="tzo"></div></header><ul class="messages scroll-container"></ul><div class="activeCall"><div class="container"><video autoplay="autoplay" class="remote"></video><video autoplay="autoplay" muted="muted" class="local"></video><aside class="button-wrap"><button class="accept primary">Accept</button><button class="end secondary">End</button><div class="button-group outlined"><button class="mute">Mute</button><button class="unmute">Unmute</button></div></aside></div></div><div class="chatBox"><form class="formwrap"><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form><button class="primary small call">Call</button></div></section></section>');
+        buf.push('<section class="page chat"><section class="conversation"><header><div class="title"><span class="prefix">@</span><span class="name"></span><i class="user_presence fa fa-circle"></i><span class="status"></span></div><div class="tzo"></div></header><ul class="messages scroll-container"></ul><div class="activeCall"><div class="container"><video autoplay="autoplay" class="remote"></video><video autoplay="autoplay" muted="muted" class="local"></video><aside class="button-wrap"><button class="accept primary">Accept</button><button class="end secondary">End</button><div class="button-group outlined"><button class="mute">Mute</button><button class="unmute">Unmute</button></div></aside></div></div><div class="chatBox"><form class="formwrap"><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form><button class="primary small call">Call</button><div class="contactState"></div></div></section></section>');
     }
     return buf.join("");
 };

clientapp/templates/pages/chat.jade

@@ -22,3 +22,4 @@ section.page.chat
       form.formwrap
         textarea(name='chatInput', type='text', placeholder='Send a message...', autocomplete='off')
       button.primary.small.call Call
+      .contactState

public/css/otalk.css

@@ -953,6 +953,12 @@ button.secondary:hover:not(:disabled) {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
+.conversation .contactState {
+  position: relative;
+  left: 24px;
+  color: #babbbf;
+  font-size: 12px;
+}
 .conversation header {
   padding: 0px;
   position: fixed;

public/css/pages/chat.styl

@@ -12,6 +12,12 @@
   overflow: hidden
   borderbox()
 
+  .contactState
+    position: relative
+    left: 24px
+    color: $gray-light
+    font-size: $font-size-small
+
   header
     padding: 0px
     position: fixed