From 972f664b6b38029cda46a6ba709b7fc8b6b6bdae Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 8 Sep 2014 16:10:36 +0100 Subject: add sounds to the calling interface --- webclient/app-controller.js | 27 +++++++++++++++-- webclient/components/matrix/matrix-call.js | 46 +++++++++++++++++++++-------- webclient/index.html | 16 ++++++++++ webclient/media/busy.mp3 | Bin 0 -> 24834 bytes webclient/media/busy.ogg | Bin 0 -> 13960 bytes webclient/media/callend.mp3 | Bin 0 -> 12971 bytes webclient/media/callend.ogg | Bin 0 -> 13932 bytes webclient/media/ring.mp3 | Bin 0 -> 19662 bytes webclient/media/ring.ogg | Bin 0 -> 20636 bytes webclient/media/ringback.mp3 | Bin 0 -> 18398 bytes webclient/media/ringback.ogg | Bin 0 -> 8352 bytes 11 files changed, 75 insertions(+), 14 deletions(-) create mode 100644 webclient/media/busy.mp3 create mode 100644 webclient/media/busy.ogg create mode 100644 webclient/media/callend.mp3 create mode 100644 webclient/media/callend.ogg create mode 100644 webclient/media/ring.mp3 create mode 100644 webclient/media/ring.ogg create mode 100644 webclient/media/ringback.mp3 create mode 100644 webclient/media/ringback.ogg (limited to 'webclient') diff --git a/webclient/app-controller.js b/webclient/app-controller.js index 064bde3ab2..20b5076727 100644 --- a/webclient/app-controller.js +++ b/webclient/app-controller.js @@ -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) { console.trace("incoming call"); @@ -125,7 +148,7 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even $animate.addClass(icon, 'callIconRotate'); $timeout(function(){ $rootScope.currentCall = undefined; - }, 2000); + }, 4070); }, 100); }; @@ -139,7 +162,7 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even $animate.addClass(icon, 'callIconRotate'); $timeout(function(){ $rootScope.currentCall = undefined; - }, 2000); + }, 4070); }, 100); } }]); diff --git a/webclient/components/matrix/matrix-call.js b/webclient/components/matrix/matrix-call.js index 3cb5e8b693..4eaed89bcf 100644 --- a/webclient/components/matrix/matrix-call.js +++ b/webclient/components/matrix/matrix-call.js @@ -120,7 +120,9 @@ angular.module('MatrixCall', []) }, function(e) { self.getLocalOfferFailed(e); }); - this.state = 'create_offer'; + $rootScope.$apply(function() { + self.state = 'create_offer'; + }); }; MatrixCall.prototype.gotUserMediaForAnswer = function(stream) { @@ -138,7 +140,9 @@ angular.module('MatrixCall', []) }, }; 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) { @@ -177,7 +181,11 @@ angular.module('MatrixCall', []) offer: description }; 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) { @@ -189,7 +197,10 @@ angular.module('MatrixCall', []) answer: description }; 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() { @@ -211,9 +222,11 @@ angular.module('MatrixCall', []) 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 if (this.peerConn.iceConnectionState == 'completed' || this.peerConn.iceConnectionState == 'connected') { - this.state = 'connected'; - this.didConnect = true; - $rootScope.$apply(); + self = this; + $rootScope.$apply(function() { + self.state = 'connected'; + self.didConnect = true; + }); } }; @@ -251,17 +264,26 @@ angular.module('MatrixCall', []) }; MatrixCall.prototype.onRemoteStreamStarted = function(event) { - this.state = 'connected'; + self = this; + $rootScope.$apply(function() { + self.state = 'connected'; + }); }; MatrixCall.prototype.onRemoteStreamEnded = function(event) { - this.state = 'ended'; - this.stopAllMedia(); - this.onHangup(); + self = this; + $rootScope.$apply(function() { + self.state = 'ended'; + self.stopAllMedia(); + self.onHangup(); + }); }; MatrixCall.prototype.onRemoteStreamTrackStarted = function(event) { - this.state = 'connected'; + self = this; + $rootScope.$apply(function() { + self.state = 'connected'; + }); }; MatrixCall.prototype.onHangupReceived = function() { diff --git a/webclient/index.html b/webclient/index.html index 81c7c7d06c..53ac1cb10e 100644 --- a/webclient/index.html +++ b/webclient/index.html @@ -70,6 +70,22 @@ + + + + {{ user_id }}   diff --git a/webclient/media/busy.mp3 b/webclient/media/busy.mp3 new file mode 100644 index 0000000000..fec27ba4c5 Binary files /dev/null and b/webclient/media/busy.mp3 differ diff --git a/webclient/media/busy.ogg b/webclient/media/busy.ogg new file mode 100644 index 0000000000..5d64a7d0d9 Binary files /dev/null and b/webclient/media/busy.ogg differ diff --git a/webclient/media/callend.mp3 b/webclient/media/callend.mp3 new file mode 100644 index 0000000000..50c34e5640 Binary files /dev/null and b/webclient/media/callend.mp3 differ diff --git a/webclient/media/callend.ogg b/webclient/media/callend.ogg new file mode 100644 index 0000000000..927ce1f634 Binary files /dev/null and b/webclient/media/callend.ogg differ diff --git a/webclient/media/ring.mp3 b/webclient/media/ring.mp3 new file mode 100644 index 0000000000..3c3cdde3f9 Binary files /dev/null and b/webclient/media/ring.mp3 differ diff --git a/webclient/media/ring.ogg b/webclient/media/ring.ogg new file mode 100644 index 0000000000..de49b8ae6f Binary files /dev/null and b/webclient/media/ring.ogg differ diff --git a/webclient/media/ringback.mp3 b/webclient/media/ringback.mp3 new file mode 100644 index 0000000000..6ee34bf395 Binary files /dev/null and b/webclient/media/ringback.mp3 differ diff --git a/webclient/media/ringback.ogg b/webclient/media/ringback.ogg new file mode 100644 index 0000000000..7dbfdcd017 Binary files /dev/null and b/webclient/media/ringback.ogg differ -- cgit 1.4.1