buildling basic 'in call' video view

clientapp/models/contact.js

@@ -47,8 +47,7 @@ module.exports = HumanModel.define({
         topResource: 'string',
         unreadCount: ['number', true, 0],
         _forceUpdate: ['number', true, 0],
-        // options: incomingCall, ringing, activeCall, starting
-        callState: ['string', true, ''],
+        onCall: ['boolean', true, false],
         stream: 'object'
     },
     derived: {

clientapp/pages/chat.js

@@ -40,7 +40,7 @@ module.exports = BasePage.extend(chatHelpers).extend({
         formattedTZO: 'header .tzo'
     },
     classBindings: {
-        callState: '.conversation'
+        onCall: '.conversation'
     },
     show: function (animation) {
         BasePage.prototype.show.apply(this, [animation]);

clientapp/templates.js

@@ -169,7 +169,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><div class="activeCall"><video class="remote"></video><video class="local"></video><aside class="buttons"><button class="end">End</button><button class="mute">Mute</button><button class="unmute">Unmute</button></aside></div></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,13 @@ section.page.chat
       h1.name
       .tzo
       button.call call
+      .activeCall
+        video.remote
+        video.local
+        aside.buttons
+          button.end End
+          button.mute Mute
+          button.unmute Unmute
     ul.messages.scroll-container
     .chatBox
       form

public/css/app/chat.styl

@@ -14,14 +14,6 @@
   width: 100%
   borderbox()
   
-  .remoteVideo
-    display: none
-
-  &.activeCall
-    .remoteVideo
-      width: 100%
-      display: block
-
   header
     padding: 5px
     border-bottom: 2px solid $grayOutline
@@ -72,6 +64,40 @@
       line-height: 25px
       min-width: 60px
 
+    .activeCall
+      transition(height 250ms)
+      height: 0px
+      position: relative
+      top: 0px
+      
+      .remote
+        position: absolute
+        top: 60px
+        left: 10px
+        height: 50%
+        border: 2px solid $grayOutline
+
+      .local
+        position: absolute
+        bottom: 10px
+        right: 10px
+        height: 20%
+        border: 2px solid $grayOutline
+
+      .buttons
+        position: absolute
+        left: 10px
+        bottom: 10px
+
+        button
+          margin-right: 10px
+
+  // while on video call the parent has
+  // this class so we animate the height
+  &.onCall
+    .activeCall
+      height: 400px
+
 .messages
   margin: 0px
   padding: 0px

public/css/otalk.css

@@ -653,13 +653,6 @@ h3 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
-.conversation .remoteVideo {
-  display: none;
-}
-.conversation.activeCall .remoteVideo {
-  width: 100%;
-  display: block;
-}
 .conversation header {
   padding: 5px;
   border-bottom: 2px solid #e4e4e4;
@@ -725,6 +718,40 @@ h3 {
   line-height: 25px;
   min-width: 60px;
 }
+.conversation header .activeCall {
+  -webkit-transition: height 250ms;
+  -o-transition: height 250ms;
+  transition: height 250ms;
+  -moz-transition: height 250ms;
+  height: 0px;
+  position: relative;
+  top: 0px;
+}
+.conversation header .activeCall .remote {
+  position: absolute;
+  top: 60px;
+  left: 10px;
+  height: 50%;
+  border: 2px solid #e4e4e4;
+}
+.conversation header .activeCall .local {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  height: 20%;
+  border: 2px solid #e4e4e4;
+}
+.conversation header .activeCall .buttons {
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+}
+.conversation header .activeCall .buttons button {
+  margin-right: 10px;
+}
+.conversation.onCall .activeCall {
+  height: 400px;
+}
 .messages {
   margin: 0px;
   padding: 0px;

public/x-manifest.cache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 0.0.1 1381889614306
+# 0.0.1 1381892587123
 
 CACHE:
 /app.js