diff --git a/clientapp/helpers/xmppEventHandlers.js b/clientapp/helpers/xmppEventHandlers.js
index c4bc88c..7b9d77e 100644
--- a/clientapp/helpers/xmppEventHandlers.js
+++ b/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) {
diff --git a/clientapp/models/contact.js b/clientapp/models/contact.js
index 0a2483f..fdafdcf 100644
--- a/clientapp/models/contact.js
+++ b/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: {
diff --git a/clientapp/pages/chat.js b/clientapp/pages/chat.js
index ba748d7..3b5a3ea 100644
--- a/clientapp/pages/chat.js
+++ b/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) {
- attachMediaStream(this.model.stream, this.$('.remoteVideo'));
+ this.attach = attachMediaStream;
+ if (!!this.model.stream) {
+ attachMediaStream(this.model.stream, this.$('.remoteVideo')[0]);
}
},
appendModel: function (model, preload) {
diff --git a/clientapp/templates.js b/clientapp/templates.js
index c2b0ad7..44813c4 100644
--- a/clientapp/templates.js
+++ b/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('');
+ buf.push('
');
}
return buf.join("");
};
diff --git a/clientapp/templates/pages/chat.jade b/clientapp/templates/pages/chat.jade
index aed9795..2a5aa9c 100644
--- a/clientapp/templates/pages/chat.jade
+++ b/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
diff --git a/public/css/app/chat.styl b/public/css/app/chat.styl
index 0019e87..d98bc05 100644
--- a/public/css/app/chat.styl
+++ b/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
diff --git a/public/css/otalk.css b/public/css/otalk.css
index 9a03b24..e7e8120 100644
--- a/public/css/otalk.css
+++ b/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;
diff --git a/public/x-manifest.cache b/public/x-manifest.cache
index 10c01e4..1b78766 100644
--- a/public/x-manifest.cache
+++ b/public/x-manifest.cache
@@ -1,5 +1,5 @@
CACHE MANIFEST
-# 0.0.1 1381820535074
+# 0.0.1 1381823999689
CACHE:
/app.js