mirror of
https://mau.dev/maunium/synapse.git
synced 2024-12-14 07:43:48 +01:00
add sounds to the calling interface
This commit is contained in:
parent
1dc4ad1efa
commit
972f664b6b
11 changed files with 75 additions and 14 deletions
|
@ -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);
|
||||
}
|
||||
}]);
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -70,6 +70,22 @@
|
|||
<button ng-click="hangupCall()">Reject</button>
|
||||
</span>
|
||||
<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>
|
||||
<a href id="headerUserId" ng-click='goToUserPage(user_id)'>{{ user_id }}</a>
|
||||
|
||||
|
|
BIN
webclient/media/busy.mp3
Normal file
BIN
webclient/media/busy.mp3
Normal file
Binary file not shown.
BIN
webclient/media/busy.ogg
Normal file
BIN
webclient/media/busy.ogg
Normal file
Binary file not shown.
BIN
webclient/media/callend.mp3
Normal file
BIN
webclient/media/callend.mp3
Normal file
Binary file not shown.
BIN
webclient/media/callend.ogg
Normal file
BIN
webclient/media/callend.ogg
Normal file
Binary file not shown.
BIN
webclient/media/ring.mp3
Normal file
BIN
webclient/media/ring.mp3
Normal file
Binary file not shown.
BIN
webclient/media/ring.ogg
Normal file
BIN
webclient/media/ring.ogg
Normal file
Binary file not shown.
BIN
webclient/media/ringback.mp3
Normal file
BIN
webclient/media/ringback.mp3
Normal file
Binary file not shown.
BIN
webclient/media/ringback.ogg
Normal file
BIN
webclient/media/ringback.ogg
Normal file
Binary file not shown.
Loading…
Reference in a new issue