Fairly simple move of the call status widget to the header bar (and therefore...

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

webclient/app-controller.js

@@ -21,8 +21,8 @@ limitations under the License.
 'use strict';
 
 angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'eventStreamService'])
-.controller('MatrixWebClientController', ['$scope', '$location', '$rootScope', 'matrixService', 'mPresence', 'eventStreamService',
-                               function($scope, $location, $rootScope, matrixService, mPresence, eventStreamService) {
+.controller('MatrixWebClientController', ['$scope', '$location', '$rootScope', 'matrixService', 'mPresence', 'eventStreamService', 'matrixPhoneService',
+                               function($scope, $location, $rootScope, matrixService, mPresence, eventStreamService, matrixPhoneService) {
          
     // Check current URL to avoid to display the logout button on the login page
     $scope.location = $location.path();
@@ -88,7 +88,27 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
     $scope.updateHeader = function() {
         $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() {
+    }
+}]);

webclient/app.css

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

webclient/index.html

@@ -44,6 +44,19 @@
     <div id="header">
         <!-- Do not show buttons on the login page -->
         <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>
             &nbsp;
             <button ng-click='goToPage("/")'>Home</button>

webclient/room/room-controller.js

@@ -82,13 +82,6 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
         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() {
         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) {
         // console.log("paginate " + numItems);
         if ($scope.state.paginating || !$scope.room_id) {
@@ -478,16 +462,10 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
 
     $scope.startVoiceCall = function() {
         var call = new MatrixCall($scope.room_id);
-        call.onError = $scope.onCallError;
-        call.onHangup = $scope.onCallHangup;
+        call.onError = $rootScope.onCallError;
+        call.onHangup = $rootScope.onCallHangup;
         call.placeCall();
-        $scope.currentCall = call;
-    }
-
-    $scope.onCallError = function(errStr) {
-        $scope.feedback = errStr;
+        $rootScope.currentCall = call;
     }
 
-    $scope.onCallHangup = function() {
-    }
 }]);

webclient/room/room.html

@@ -101,17 +101,6 @@
                 </span>
                 <button ng-click="leaveRoom()">Leave</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>
         
             {{ feedback }}