mirror of
https://github.com/moparisthebest/kaiwa
synced 2024-11-12 04:25:05 -05:00
better handling of incoming stuff
This commit is contained in:
parent
4c89141357
commit
5d7c9b6812
@ -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) {
|
||||||
|
@ -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);
|
||||||
|
@ -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("");
|
||||||
};
|
};
|
||||||
|
@ -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
|
||||||
|
@ -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();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -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
|
||||||
|
@ -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;
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
CACHE MANIFEST
|
CACHE MANIFEST
|
||||||
# 0.0.1 1381879352769
|
# 0.0.1 1381889614306
|
||||||
|
|
||||||
CACHE:
|
CACHE:
|
||||||
/app.js
|
/app.js
|
||||||
|
Loading…
Reference in New Issue
Block a user