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