Fairly simple move of the call status widget to the header bar (and therefore into the index page rather than the rooms page).

This commit is contained in:
David Baker 2014-09-01 17:15:26 +01:00
parent 5a11a8ef69
commit 57f047a05a
5 changed files with 45 additions and 41 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', .controller('MatrixWebClientController', ['$scope', '$location', '$rootScope', 'matrixService', 'mPresence', 'eventStreamService', 'matrixPhoneService',
function($scope, $location, $rootScope, matrixService, mPresence, eventStreamService) { function($scope, $location, $rootScope, 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();
@ -88,7 +88,27 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
$scope.updateHeader = function() { $scope.updateHeader = function() {
$scope.user_id = matrixService.config().user_id; $scope.user_id = matrixService.config().user_id;
}; };
}]);
$rootScope.$on(matrixPhoneService.INCOMING_CALL_EVENT, function(ngEvent, call) {
console.trace("incoming call");
call.onError = $scope.onCallError;
call.onHangup = $scope.onCallHangup;
$rootScope.currentCall = call;
});
$scope.answerCall = function() {
$scope.currentCall.answer();
};
$scope.hangupCall = function() {
$scope.currentCall.hangup();
$scope.currentCall = undefined;
};
$rootScope.onCallError = function(errStr) {
$scope.feedback = errStr;
}
$rootScope.onCallHangup = function() {
}
}]);

View file

@ -43,6 +43,10 @@ a:active { color: #000; }
height: 32px; height: 32px;
} }
#callBar {
float: left;
}
#headerContent { #headerContent {
color: #ccc; color: #ccc;
max-width: 1280px; max-width: 1280px;

View file

@ -44,6 +44,19 @@
<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 ng-show="currentCall.state == 'ringing'">
Incoming call from {{ currentCall.user_id }}
<button ng-click="answerCall()">Answer</button>
<button ng-click="hangupCall()">Reject</button>
</div>
<button ng-click="hangupCall()" ng-show="currentCall && currentCall.state != 'ringing' && currentCall.state != 'ended' && currentCall.state != 'fledgling'">Hang up</button>
<span ng-show="currentCall.state == 'invite_sent'">Calling...</span>
<span ng-show="currentCall.state == 'connecting'">Call Connecting...</span>
<span ng-show="currentCall.state == 'connected'">Call Connected</span>
<span ng-show="currentCall.state == 'ended'">Call Ended</span>
<span style="display: none; ">{{ currentCall.state }}</span>
</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;
<button ng-click='goToPage("/")'>Home</button> <button ng-click='goToPage("/")'>Home</button>

View file

@ -82,13 +82,6 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
updatePresence(event); updatePresence(event);
}); });
$rootScope.$on(matrixPhoneService.INCOMING_CALL_EVENT, function(ngEvent, call) {
console.trace("incoming call");
call.onError = $scope.onCallError;
call.onHangup = $scope.onCallHangup;
$scope.currentCall = call;
});
$scope.memberCount = function() { $scope.memberCount = function() {
return Object.keys($scope.members).length; return Object.keys($scope.members).length;
}; };
@ -100,15 +93,6 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
} }
}; };
$scope.answerCall = function() {
$scope.currentCall.answer();
};
$scope.hangupCall = function() {
$scope.currentCall.hangup();
$scope.currentCall = undefined;
};
var paginate = function(numItems) { var paginate = function(numItems) {
// console.log("paginate " + numItems); // console.log("paginate " + numItems);
if ($scope.state.paginating || !$scope.room_id) { if ($scope.state.paginating || !$scope.room_id) {
@ -478,16 +462,10 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
$scope.startVoiceCall = function() { $scope.startVoiceCall = function() {
var call = new MatrixCall($scope.room_id); var call = new MatrixCall($scope.room_id);
call.onError = $scope.onCallError; call.onError = $rootScope.onCallError;
call.onHangup = $scope.onCallHangup; call.onHangup = $rootScope.onCallHangup;
call.placeCall(); call.placeCall();
$scope.currentCall = call; $rootScope.currentCall = call;
} }
$scope.onCallError = function(errStr) {
$scope.feedback = errStr;
}
$scope.onCallHangup = function() {
}
}]); }]);

View file

@ -101,17 +101,6 @@
</span> </span>
<button ng-click="leaveRoom()">Leave</button> <button ng-click="leaveRoom()">Leave</button>
<button ng-click="startVoiceCall()" ng-show="currentCall == undefined && memberCount() == 2">Voice Call</button> <button ng-click="startVoiceCall()" ng-show="currentCall == undefined && memberCount() == 2">Voice Call</button>
<div ng-show="currentCall.state == 'ringing'">
Incoming call from {{ currentCall.user_id }}
<button ng-click="answerCall()">Answer</button>
<button ng-click="hangupCall()">Reject</button>
</div>
<button ng-click="hangupCall()" ng-show="currentCall && currentCall.state != 'ringing' && currentCall.state != 'ended' && currentCall.state != 'fledgling'">Hang up</button>
<span ng-show="currentCall.state == 'invite_sent'">Calling...</span>
<span ng-show="currentCall.state == 'connecting'">Call Connecting...</span>
<span ng-show="currentCall.state == 'connected'">Call Connected</span>
<span ng-show="currentCall.state == 'ended'">Call Ended</span>
<span style="display: none; ">{{ currentCall.state }}</span>
</div> </div>
{{ feedback }} {{ feedback }}