Better call bar (visually: still lacks ring[back] tones).

This commit is contained in:
David Baker 2014-09-06 00:14:02 +01:00
parent fc65b68f30
commit c03c255304
7 changed files with 112 additions and 18 deletions

View File

@ -21,8 +21,8 @@ limitations under the License.
'use strict'; 'use strict';
angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'eventStreamService']) angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'eventStreamService'])
.controller('MatrixWebClientController', ['$scope', '$location', '$rootScope', 'matrixService', 'mPresence', 'eventStreamService', 'matrixPhoneService', .controller('MatrixWebClientController', ['$scope', '$location', '$rootScope', '$timeout', '$animate', 'matrixService', 'mPresence', 'eventStreamService', 'matrixPhoneService',
function($scope, $location, $rootScope, matrixService, mPresence, eventStreamService, matrixPhoneService) { function($scope, $location, $rootScope, $timeout, $animate, matrixService, mPresence, eventStreamService, matrixPhoneService) {
// Check current URL to avoid to display the logout button on the login page // Check current URL to avoid to display the logout button on the login page
$scope.location = $location.path(); $scope.location = $location.path();
@ -89,6 +89,23 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
$scope.user_id = matrixService.config().user_id; $scope.user_id = matrixService.config().user_id;
}; };
$rootScope.$watch('currentCall', function(newVal, oldVal) {
if (!$rootScope.currentCall) return;
var roomMembers = angular.copy($rootScope.events.rooms[$rootScope.currentCall.room_id].members);
delete roomMembers[matrixService.config().user_id];
$rootScope.currentCall.user_id = Object.keys(roomMembers)[0];
matrixService.getProfile($rootScope.currentCall.user_id).then(
function(response) {
$rootScope.currentCall.userProfile = response.data;
},
function(error) {
$scope.feedback = "Can't load user profile";
}
);
});
$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");
call.onError = $scope.onCallError; call.onError = $scope.onCallError;
@ -97,12 +114,19 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
}); });
$scope.answerCall = function() { $scope.answerCall = function() {
$scope.currentCall.answer(); $rootScope.currentCall.answer();
}; };
$scope.hangupCall = function() { $scope.hangupCall = function() {
$scope.currentCall.hangup(); $rootScope.currentCall.hangup();
$scope.currentCall = undefined;
$timeout(function() {
var icon = angular.element('#callEndedIcon');
$animate.addClass(icon, 'callIconRotate');
$timeout(function(){
$rootScope.currentCall = undefined;
}, 2000);
}, 100);
}; };
$rootScope.onCallError = function(errStr) { $rootScope.onCallError = function(errStr) {
@ -110,5 +134,12 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
} }
$rootScope.onCallHangup = function() { $rootScope.onCallHangup = function() {
$timeout(function() {
var icon = angular.element('#callEndedIcon');
$animate.addClass(icon, 'callIconRotate');
$timeout(function(){
$rootScope.currentCall = undefined;
}, 2000);
}, 100);
} }
}]); }]);

View File

@ -45,6 +45,48 @@ a:active { color: #000; }
#callBar { #callBar {
float: left; float: left;
height: 32px;
margin: auto;
text-align: right;
line-height: 16px;
}
.callIcon {
margin-left: 4px;
margin-right: 4px;
margin-top: 8px;
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.callIconRotate {
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
#callPeerImage {
width: 32px;
height: 32px;
border: none;
float: left;
}
#callPeerNameAndState {
float: left;
margin-left: 4px;
}
#callState {
font-size: 60%;
}
#callPeerName {
font-size: 80%;
} }
#headerContent { #headerContent {

View File

@ -41,6 +41,7 @@ angular.module('MatrixCall', [])
this.room_id = room_id; this.room_id = room_id;
this.call_id = "c" + new Date().getTime(); this.call_id = "c" + new Date().getTime();
this.state = 'fledgling'; this.state = 'fledgling';
this.didConnect = false;
} }
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
@ -52,6 +53,7 @@ angular.module('MatrixCall', [])
matrixPhoneService.callPlaced(this); matrixPhoneService.callPlaced(this);
navigator.getUserMedia({audio: true, video: false}, function(s) { self.gotUserMediaForInvite(s); }, function(e) { self.getUserMediaFailed(e); }); navigator.getUserMedia({audio: true, video: false}, function(s) { self.gotUserMediaForInvite(s); }, function(e) { self.getUserMediaFailed(e); });
self.state = 'wait_local_media'; self.state = 'wait_local_media';
this.direction = 'outbound';
}; };
MatrixCall.prototype.initWithInvite = function(msg) { MatrixCall.prototype.initWithInvite = function(msg) {
@ -64,6 +66,7 @@ angular.module('MatrixCall', [])
this.peerConn.onaddstream = function(s) { self.onAddStream(s); }; this.peerConn.onaddstream = function(s) { self.onAddStream(s); };
this.peerConn.setRemoteDescription(new RTCSessionDescription(this.msg.offer), self.onSetRemoteDescriptionSuccess, self.onSetRemoteDescriptionError); this.peerConn.setRemoteDescription(new RTCSessionDescription(this.msg.offer), self.onSetRemoteDescriptionSuccess, self.onSetRemoteDescriptionError);
this.state = 'ringing'; this.state = 'ringing';
this.direction = 'inbound';
}; };
MatrixCall.prototype.answer = function() { MatrixCall.prototype.answer = function() {
@ -204,10 +207,12 @@ angular.module('MatrixCall', [])
}; };
MatrixCall.prototype.onIceConnectionStateChanged = function() { MatrixCall.prototype.onIceConnectionStateChanged = function() {
if (this.state == 'ended') return; // because ICE can still complete as we're ending the call
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'; this.state = 'connected';
this.didConnect = true;
$rootScope.$apply(); $rootScope.$apply();
} }
}; };

View File

@ -295,6 +295,11 @@ angular.module('matrixService', [])
return doRequest("GET", path); return doRequest("GET", path);
}, },
// get a user's profile
getProfile: function(userId) {
return this.getProfileInfo(userId);
},
// get a display name for this user ID // get a display name for this user ID
getDisplayName: function(userId) { getDisplayName: function(userId) {
return this.getProfileInfo(userId, "displayname"); return this.getProfileInfo(userId, "displayname");
@ -328,8 +333,8 @@ angular.module('matrixService', [])
}, },
getProfileInfo: function(userId, info_segment) { getProfileInfo: function(userId, info_segment) {
var path = "/profile/$user_id/" + info_segment; var path = "/profile/"+userId
path = path.replace("$user_id", userId); if (info_segment) path += '/' + info_segment;
return doRequest("GET", path); return doRequest("GET", path);
}, },

Binary file not shown.

After

Width:  |  Height:  |  Size: 434 B

BIN
webclient/img/red_phone.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 378 B

View File

@ -45,18 +45,29 @@
<div id="header"> <div id="header">
<!-- Do not show buttons on the login page --> <!-- Do not show buttons on the login page -->
<div id="headerContent" ng-hide="'/login' == location || '/register' == location"> <div id="headerContent" ng-hide="'/login' == location || '/register' == location">
<div id="callBar"> <div id="callBar" ng-show="currentCall">
<div ng-show="currentCall.state == 'ringing'"> <img id="callPeerImage" ng-show="currentCall.userProfile.avatar_url" ngSrc="{{ currentCall.userProfile.avatar_url }}" />
Incoming call from {{ currentCall.user_id }} <img class="callIcon" src="img/green_phone.png" ng-show="currentCall.state != 'ended'" />
<button ng-click="answerCall()">Answer</button> <img class="callIcon" id="callEndedIcon" src="img/red_phone.png" ng-show="currentCall.state == 'ended'" />
<button ng-click="hangupCall()">Reject</button> <div id="callPeerNameAndState">
</div> <span id="callPeerName">{{ currentCall.userProfile.displayname }}</span>
<button ng-click="hangupCall()" ng-show="currentCall && currentCall.state != 'ringing' && currentCall.state != 'ended' && currentCall.state != 'fledgling'">Hang up</button> <br />
<span id="callState">
<span ng-show="currentCall.state == 'invite_sent'">Calling...</span> <span ng-show="currentCall.state == 'invite_sent'">Calling...</span>
<span ng-show="currentCall.state == 'connecting'">Call Connecting...</span> <span ng-show="currentCall.state == 'connecting'">Call Connecting...</span>
<span ng-show="currentCall.state == 'connected'">Call Connected</span> <span ng-show="currentCall.state == 'connected'">Call Connected</span>
<span ng-show="currentCall.state == 'ended'">Call Ended</span> <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'outbound'">Call Rejected</span>
<span style="display: none; ">{{ currentCall.state }}</span> <span ng-show="currentCall.state == 'ended' && currentCall.didConnect && currentCall.direction == 'outbound'">Call Ended</span>
<span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'inbound'">Call Canceled</span>
<span ng-show="currentCall.state == 'ended' && currentCall.didConnect && currentCall.direction == 'inbound'">Call Ended</span>
<span ng-show="currentCall.state == 'wait_local_media'">Waiting for media permission...</span>
</span>
</div>
<span ng-show="currentCall.state == 'ringing'">
<button ng-click="answerCall()">Answer</button>
<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>
</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;