Make things mostly work

clientapp/helpers/xmppEventHandlers.js

@@ -336,13 +336,13 @@ module.exports = function (client, app) {
 
     client.on('jingle:incoming', function (session) {
         var contact = me.getContact(session.peer);
-        contact.callState = 'incoming';
+        contact.callState = 'incomingCall';
         contact.jingleCall = session;
     });
 
     client.on('jingle:outgoing', function (session) {
         var contact = me.getContact(session.peer);
-        contact.callState = 'outgoing';
+        contact.callState = 'outgoingCall';
         contact.jingleCall = session;
     });
 
@@ -354,7 +354,7 @@ module.exports = function (client, app) {
 
     client.on('jingle:accepted', function (session) {
         var contact = me.getContact(session.peer);
-        contact.callState = 'active';
+        contact.callState = 'activeCall';
     });
 
     client.on('jingle:localstream:added', function (stream) {
@@ -368,11 +368,13 @@ module.exports = function (client, app) {
     client.on('jingle:remotestream:added', function (session) {
         var contact = me.getContact(session.peer);
         contact.stream = session.stream;
+        contact.trigger('change:stream');
     });
 
     client.on('jingle:remotestream:removed', function (session) {
         var contact = me.getContact(session.peer);
         contact.stream = null;
+        contact.trigger('change:stream');
     });
 
     client.on('jingle:ringing', function (session) {

clientapp/models/contact.js

@@ -46,7 +46,7 @@ module.exports = HumanModel.define({
         topResource: 'string',
         unreadCount: ['number', true, 0],
         _forceUpdate: ['number', true, 0],
-        callState: 'string',
+        callState: ['string', true, ''],
         stream: 'object'
     },
     derived: {

clientapp/pages/chat.js

@@ -39,6 +39,9 @@ module.exports = BasePage.extend(chatHelpers).extend({
         displayName: 'header .name',
         formattedTZO: 'header .tzo'
     },
+    classBindings: {
+        callState: '.conversation'
+    },
     show: function (animation) {
         BasePage.prototype.show.apply(this, [animation]);
         client.sendMessage({
@@ -196,8 +199,9 @@ module.exports = BasePage.extend(chatHelpers).extend({
         this.$('button.call').prop('disabled', !resources.length);
     },
     handleStream: function () {
-        if (this.model.stream) {
+        this.attach = attachMediaStream;
-            attachMediaStream(this.model.stream, this.$('.remoteVideo'));
+        if (!!this.model.stream) {
+            attachMediaStream(this.model.stream, this.$('.remoteVideo')[0]);
         }
     },
     appendModel: function (model, preload) {

clientapp/templates.js

@@ -160,7 +160,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><img class="avatar"/><h1 class="name"></h1><div class="tzo"></div><button class="call">call</button></header><ul class="messages scroll-container"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
+        buf.push('<section class="page chat"><section class="conversation"><header><img class="avatar"/><h1 class="name"></h1><div class="tzo"></div><button class="call">call</button><video class="remoteVideo"></video></header><ul class="messages scroll-container"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
     }
     return buf.join("");
 };

clientapp/templates/pages/chat.jade

@@ -5,6 +5,7 @@ section.page.chat
       h1.name
       .tzo
       button.call call
+      video.remoteVideo
     ul.messages.scroll-container
     .chatBox
       form

public/css/app/chat.styl

@@ -16,6 +16,17 @@
   width: 100%
   borderbox()
 
+  .remoteVideo
+    display: none
+
+  &.activeCall
+    .remoteVideo
+      width: 100%
+      display: block
+
+    .messages
+      padding-top: 630px
+
   header
     padding: 5px
     border-bottom: 2px solid $grayOutline
@@ -44,7 +55,7 @@
     .tzo:not(:empty)
       position: absolute
       right: 15px
-      top: 50%
+      top: 25px
       height: 20px
       margin-top: -10px
       padding: 0 5px

public/css/otalk.css

@@ -652,6 +652,16 @@ h3 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
+.conversation .remoteVideo {
+  display: none;
+}
+.conversation.activeCall .remoteVideo {
+  width: 100%;
+  display: block;
+}
+.conversation.activeCall .messages {
+  padding-top: 630px;
+}
 .conversation header {
   padding: 5px;
   border-bottom: 2px solid #e4e4e4;
@@ -689,7 +699,7 @@ h3 {
 .conversation header .tzo:not(:empty) {
   position: absolute;
   right: 15px;
-  top: 50%;
+  top: 25px;
   height: 20px;
   margin-top: -10px;
   padding: 0 5px;

public/x-manifest.cache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 0.0.1 1381820535074
+# 0.0.1 1381823999689
 
 CACHE:
 /app.js