1
0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-11-22 17:22:22 -05:00

better handling of incoming stuff

This commit is contained in:
Henrik Joreteg 2013-10-15 19:16:09 -07:00
parent 4c89141357
commit 5d7c9b6812
8 changed files with 102 additions and 43 deletions

View File

@ -337,14 +337,20 @@ module.exports = function (client, app) {
client.on('jingle:incoming', function (session) { client.on('jingle:incoming', function (session) {
var contact = me.getContact(session.peer); var contact = me.getContact(session.peer);
contact.callState = 'incomingCall'; me.calls.add({
contact.jingleCall = session; contact: contact,
state: 'incoming',
jingleSession: session
});
}); });
client.on('jingle:outgoing', function (session) { client.on('jingle:outgoing', function (session) {
var contact = me.getContact(session.peer); var contact = me.getContact(session.peer);
contact.callState = 'outgoingCall'; me.calls.add({
contact.jingleCall = session; contact: contact,
state: 'outgoing',
jingleSession: session
});
}); });
client.on('jingle:terminated', function (session) { client.on('jingle:terminated', function (session) {

View File

@ -72,7 +72,9 @@ module.exports = HumanModel.define({
if (this.isMe(jid)) { if (this.isMe(jid)) {
jid = alt || jid; jid = alt || jid;
} }
return this.contacts.get(jid.bare) || this.mucs.get(jid.bare) || undefined; return this.contacts.get(jid.bare) ||
this.mucs.get(jid.bare) ||
this.calls.findWhere('jid', jid);
}, },
setContact: function (data, create) { setContact: function (data, create) {
var contact = this.getContact(data.jid); var contact = this.getContact(data.jid);

View File

@ -46,7 +46,7 @@ exports.includes.bareMessage = function anonymous(locals) {
exports.includes.call = function anonymous(locals) { exports.includes.call = function anonymous(locals) {
var buf = []; var buf = [];
with (locals || {}) { with (locals || {}) {
buf.push('<div class="call"><img class="callerAvatar"/><h1 class="caller"><span class="callerName"></span><span class="callerNumber"></span></h1><h2 class="callTime"></h2><div class="callActions"><button class="answer">Answer</button><button class="ignore">Ignore</button><button class="cancel">Cancel</button><button class="end">End</button><button class="mute">Mute</button></div></div>'); buf.push('<div class="call"><img class="callerAvatar"/><h1 class="caller"><span class="callerName"></span><span class="callerNumber"></span></h1><h2 class="callTime"></h2><div class="callActions"><button class="answer">Answer</button><button class="ignore">Ignore</button><button class="cancel">Cancel</button><button class="end">End</button><button class="mute">Mute</button><button class="unmute">Unmute</button></div></div>');
} }
return buf.join(""); return buf.join("");
}; };

View File

@ -10,3 +10,4 @@
button.cancel Cancel button.cancel Cancel
button.end End button.end End
button.mute Mute button.mute Mute
button.unmute Unmute

View File

@ -11,6 +11,13 @@ module.exports = HumanView.extend({
classBindings: { classBindings: {
state: '' state: ''
}, },
events: {
'click .answer': 'handleAnswerClick',
'click .ignore': 'handleIgnoreClick',
'click .cancel': 'handleCancelClick',
'click .end': 'handleEndClick',
'click .mute': 'handleMuteClick'
},
render: function () { render: function () {
this.renderAndBind(); this.renderAndBind();
// register bindings for sub model // register bindings for sub model
@ -22,7 +29,52 @@ module.exports = HumanView.extend({
avatar: '.callerAvatar' avatar: '.callerAvatar'
} }
}); });
this.$buttons = this.$('button');
this.listenToAndRun(this.model, 'change:state', this.handleCallStateChange);
return this; return this;
},
handleAnswerClick: function (e) {
return false;
},
handleIgnoreClick: function (e) {
return false;
},
handleCancelClick: function (e) {
return false;
},
handleEndClick: function (e) {
return false;
},
handleMuteClick: function (e) {
return false;
},
// we want to make sure we show the appropriate buttons
// when in various stages of the call
handleCallStateChange: function (model, callState) {
var state = callState || this.model.state;
// hide all
this.$buttons.hide();
var map = {
incoming: '.ignore, .answer',
outgoing: '.cancel',
accepted: '.end, .mute',
terminated: '',
ringing: '.cancel',
mute: '.end, .unmute',
unmute: '.end, .mute',
//hold: '',
//resumed: ''
};
console.log('map[state]', map[state]);
this.$(map[state]).show();
} }
}); });

View File

@ -33,7 +33,7 @@ $callHeight = 80px
.callTime .callTime
display: none display: none
.callerName:before .callerName:before
content: "Incoming: " content: "Incoming Call: "
&.waiting &.waiting
background: $activeBlue background: $activeBlue
@ -42,34 +42,26 @@ $callHeight = 80px
background-color: #fff background-color: #fff
&.calling &.calling
callbar($blue) background: $activeBlue
.callTime .callTime
display: none display: none
.callerName:before .callerName:before
content: "Calling: " content: "Calling: "
&.active &.accepted
callbar($green) background: $sidebarActive
.callerName:before .callerName:before
content: "On Call: " content: "On Call: "
&.inactive
callbar(#fff)
&.remote
callbar($blue #333)
.callTime
display: none
&.ending &.ending
.callerName:before .callerName:before
content: "Call ending with: " content: "Call ending with: "
callbar($grey) background: $grayBackground
.callActions .callActions
position: absolute position: absolute
left: 10px left: 80px
top: 50px top: 38px
display: block display: block
width: 100% width: 100%
@ -104,10 +96,10 @@ $callHeight = 80px
.callerAvatar .callerAvatar
float: left float: left
width: 50px width: 60px
height: 50px height: 60px
margin-right: 10px margin: 10px
roundall(25px) roundall(30px)
.callerName, .callTime .callerName, .callTime
font-weight: bold font-weight: bold
@ -117,9 +109,9 @@ $callHeight = 80px
.caller .caller
margin: 0 margin: 0
padding: 5px 0 0 0
font-size: 20px font-size: 20px
padding-bottom: 0px padding-bottom: 0px
border-bottom: 2px groove rgba(255,255,255,.4)
.callerName .callerName
display: inline display: inline

View File

@ -1092,7 +1092,7 @@ a.button:hover {
display: none; display: none;
} }
#calls .call.incoming .callerName:before { #calls .call.incoming .callerName:before {
content: "Incoming: "; content: "Incoming Call: ";
} }
#calls .call.waiting { #calls .call.waiting {
background: #00aeef; background: #00aeef;
@ -1100,25 +1100,31 @@ a.button:hover {
#calls .call.waiting .spinner div { #calls .call.waiting .spinner div {
background-color: #fff; background-color: #fff;
} }
#calls .call.calling {
background: #00aeef;
}
#calls .call.calling .callTime { #calls .call.calling .callTime {
display: none; display: none;
} }
#calls .call.calling .callerName:before { #calls .call.calling .callerName:before {
content: "Calling: "; content: "Calling: ";
} }
#calls .call.active .callerName:before { #calls .call.accepted {
background: #1f2d49;
}
#calls .call.accepted .callerName:before {
content: "On Call: "; content: "On Call: ";
} }
#calls .call.remote .callTime { #calls .call.ending {
display: none; background: #f7f7f7;
} }
#calls .call.ending .callerName:before { #calls .call.ending .callerName:before {
content: "Call ending with: "; content: "Call ending with: ";
} }
#calls .call .callActions { #calls .call .callActions {
position: absolute; position: absolute;
left: 10px; left: 80px;
top: 50px; top: 38px;
display: block; display: block;
width: 100%; width: 100%;
} }
@ -1161,15 +1167,15 @@ rgba(0,0,0,0.2)
} }
#calls .callerAvatar { #calls .callerAvatar {
float: left; float: left;
width: 50px; width: 60px;
height: 50px; height: 60px;
margin-right: 10px; margin: 10px;
-moz-border-radius: 25px; -moz-border-radius: 30px;
-webkit-border-radius: 25px; -webkit-border-radius: 30px;
-khtml-border-radius: 25px; -khtml-border-radius: 30px;
-o-border-radius: 25px; -o-border-radius: 30px;
-border-radius: 25px; -border-radius: 30px;
border-radius: 25px; border-radius: 30px;
} }
#calls .callerName, #calls .callerName,
#calls .callTime { #calls .callTime {
@ -1180,9 +1186,9 @@ rgba(0,0,0,0.7)
} }
#calls .caller { #calls .caller {
margin: 0; margin: 0;
padding: 5px 0 0 0;
font-size: 20px; font-size: 20px;
padding-bottom: 0px; padding-bottom: 0px;
border-bottom: 2px groove rgba(255,255,255,0.4);
} }
#calls .callerName { #calls .callerName {
display: inline; display: inline;

View File

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