add sounds to the calling interface

This commit is contained in:
David Baker 2014-09-08 16:10:36 +01:00
parent 1dc4ad1efa
commit 972f664b6b
11 changed files with 75 additions and 14 deletions

View File

@ -105,6 +105,29 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
} }
); );
}); });
$rootScope.$watch('currentCall.state', function(newVal, oldVal) {
if (newVal == 'ringing') {
angular.element('#ringbackAudio')[0].pause();
angular.element('#ringAudio')[0].load();
angular.element('#ringAudio')[0].play();
} else if (newVal == 'invite_sent') {
angular.element('#ringAudio')[0].pause();
angular.element('#ringbackAudio')[0].load();
angular.element('#ringbackAudio')[0].play();
} else if (newVal == 'ended' && oldVal == 'connected') {
angular.element('#ringAudio')[0].pause();
angular.element('#ringbackAudio')[0].pause();
angular.element('#callendAudio')[0].play();
} else if (newVal == 'ended' && oldVal == 'invite_sent') {
angular.element('#ringAudio')[0].pause();
angular.element('#ringbackAudio')[0].pause();
angular.element('#busyAudio')[0].play();
} else if (oldVal == 'invite_sent') {
angular.element('#ringbackAudio')[0].pause();
} else if (oldVal == 'ringing') {
angular.element('#ringAudio')[0].pause();
}
});
$rootScope.$on(matrixPhoneService.INCOMING_CALL_EVENT, function(ngEvent, call) { $rootScope.$on(matrixPhoneService.INCOMING_CALL_EVENT, function(ngEvent, call) {
console.trace("incoming call"); console.trace("incoming call");
@ -125,7 +148,7 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
$animate.addClass(icon, 'callIconRotate'); $animate.addClass(icon, 'callIconRotate');
$timeout(function(){ $timeout(function(){
$rootScope.currentCall = undefined; $rootScope.currentCall = undefined;
}, 2000); }, 4070);
}, 100); }, 100);
}; };
@ -139,7 +162,7 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
$animate.addClass(icon, 'callIconRotate'); $animate.addClass(icon, 'callIconRotate');
$timeout(function(){ $timeout(function(){
$rootScope.currentCall = undefined; $rootScope.currentCall = undefined;
}, 2000); }, 4070);
}, 100); }, 100);
} }
}]); }]);

View File

@ -120,7 +120,9 @@ angular.module('MatrixCall', [])
}, function(e) { }, function(e) {
self.getLocalOfferFailed(e); self.getLocalOfferFailed(e);
}); });
this.state = 'create_offer'; $rootScope.$apply(function() {
self.state = 'create_offer';
});
}; };
MatrixCall.prototype.gotUserMediaForAnswer = function(stream) { MatrixCall.prototype.gotUserMediaForAnswer = function(stream) {
@ -138,7 +140,9 @@ angular.module('MatrixCall', [])
}, },
}; };
this.peerConn.createAnswer(function(d) { self.createdAnswer(d); }, function(e) {}, constraints); this.peerConn.createAnswer(function(d) { self.createdAnswer(d); }, function(e) {}, constraints);
this.state = 'create_answer'; $rootScope.$apply(function() {
self.state = 'create_answer';
});
}; };
MatrixCall.prototype.gotLocalIceCandidate = function(event) { MatrixCall.prototype.gotLocalIceCandidate = function(event) {
@ -177,7 +181,11 @@ angular.module('MatrixCall', [])
offer: description offer: description
}; };
matrixService.sendEvent(this.room_id, 'm.call.invite', undefined, content).then(this.messageSent, this.messageSendFailed); matrixService.sendEvent(this.room_id, 'm.call.invite', undefined, content).then(this.messageSent, this.messageSendFailed);
this.state = 'invite_sent';
self = this;
$rootScope.$apply(function() {
self.state = 'invite_sent';
});
}; };
MatrixCall.prototype.createdAnswer = function(description) { MatrixCall.prototype.createdAnswer = function(description) {
@ -189,7 +197,10 @@ angular.module('MatrixCall', [])
answer: description answer: description
}; };
matrixService.sendEvent(this.room_id, 'm.call.answer', undefined, content).then(this.messageSent, this.messageSendFailed); matrixService.sendEvent(this.room_id, 'm.call.answer', undefined, content).then(this.messageSent, this.messageSendFailed);
this.state = 'connecting'; self = this;
$rootScope.$apply(function() {
self.state = 'connecting';
});
}; };
MatrixCall.prototype.messageSent = function() { MatrixCall.prototype.messageSent = function() {
@ -211,9 +222,11 @@ angular.module('MatrixCall', [])
console.trace("Ice connection state changed to: "+this.peerConn.iceConnectionState); console.trace("Ice connection state changed to: "+this.peerConn.iceConnectionState);
// ideally we'd consider the call to be connected when we get media but chrome doesn't implement nay of the 'onstarted' events yet // ideally we'd consider the call to be connected when we get media but chrome doesn't implement nay of the 'onstarted' events yet
if (this.peerConn.iceConnectionState == 'completed' || this.peerConn.iceConnectionState == 'connected') { if (this.peerConn.iceConnectionState == 'completed' || this.peerConn.iceConnectionState == 'connected') {
this.state = 'connected'; self = this;
this.didConnect = true; $rootScope.$apply(function() {
$rootScope.$apply(); self.state = 'connected';
self.didConnect = true;
});
} }
}; };
@ -251,17 +264,26 @@ angular.module('MatrixCall', [])
}; };
MatrixCall.prototype.onRemoteStreamStarted = function(event) { MatrixCall.prototype.onRemoteStreamStarted = function(event) {
this.state = 'connected'; self = this;
$rootScope.$apply(function() {
self.state = 'connected';
});
}; };
MatrixCall.prototype.onRemoteStreamEnded = function(event) { MatrixCall.prototype.onRemoteStreamEnded = function(event) {
this.state = 'ended'; self = this;
this.stopAllMedia(); $rootScope.$apply(function() {
this.onHangup(); self.state = 'ended';
self.stopAllMedia();
self.onHangup();
});
}; };
MatrixCall.prototype.onRemoteStreamTrackStarted = function(event) { MatrixCall.prototype.onRemoteStreamTrackStarted = function(event) {
this.state = 'connected'; self = this;
$rootScope.$apply(function() {
self.state = 'connected';
});
}; };
MatrixCall.prototype.onHangupReceived = function() { MatrixCall.prototype.onHangupReceived = function() {

View File

@ -70,6 +70,22 @@
<button ng-click="hangupCall()">Reject</button> <button ng-click="hangupCall()">Reject</button>
</span> </span>
<button ng-click="hangupCall()" ng-show="currentCall && currentCall.state != 'ringing' && currentCall.state != 'ended' && currentCall.state != 'fledgling'">Hang up</button> <button ng-click="hangupCall()" ng-show="currentCall && currentCall.state != 'ringing' && currentCall.state != 'ended' && currentCall.state != 'fledgling'">Hang up</button>
<audio id="ringAudio" loop>
<source src="media/ring.ogg" type="audio/ogg" />
<source src="media/ring.mp3" type="audio/mpeg" />
</audio>
<audio id="ringbackAudio" loop>
<source src="media/ringback.ogg" type="audio/ogg" />
<source src="media/ringback.mp3" type="audio/mpeg" />
</audio>
<audio id="callendAudio">
<source src="media/callend.ogg" type="audio/ogg" />
<source src="media/callend.mp3" type="audio/mpeg" />
</audio>
<audio id="busyAudio">
<source src="media/busy.ogg" type="audio/ogg" />
<source src="media/busy.mp3" type="audio/mpeg" />
</audio>
</div> </div>
<a href id="headerUserId" ng-click='goToUserPage(user_id)'>{{ user_id }}</a> <a href id="headerUserId" ng-click='goToUserPage(user_id)'>{{ user_id }}</a>
&nbsp; &nbsp;

BIN
webclient/media/busy.mp3 Normal file

Binary file not shown.

BIN
webclient/media/busy.ogg Normal file

Binary file not shown.

BIN
webclient/media/callend.mp3 Normal file

Binary file not shown.

BIN
webclient/media/callend.ogg Normal file

Binary file not shown.

BIN
webclient/media/ring.mp3 Normal file

Binary file not shown.

BIN
webclient/media/ring.ogg Normal file

Binary file not shown.

Binary file not shown.

Binary file not shown.