diff options
| -rw-r--r-- | webclient/app-controller.js | 41 | ||||
| -rwxr-xr-x | webclient/app.css | 44 | ||||
| -rw-r--r-- | webclient/components/matrix/matrix-call.js | 5 | ||||
| -rw-r--r-- | webclient/components/matrix/matrix-service.js | 9 | ||||
| -rw-r--r-- | webclient/img/green_phone.png | bin | 0 -> 434 bytes | |||
| -rw-r--r-- | webclient/img/red_phone.png | bin | 0 -> 378 bytes | |||
| -rw-r--r-- | webclient/index.html | 31 |
7 files changed, 112 insertions, 18 deletions
diff --git a/webclient/app-controller.js b/webclient/app-controller.js index ea48cbb011..064bde3ab2 100644 --- a/webclient/app-controller.js +++ b/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', 'matrixPhoneService', - function($scope, $location, $rootScope, matrixService, mPresence, eventStreamService, matrixPhoneService) { +.controller('MatrixWebClientController', ['$scope', '$location', '$rootScope', '$timeout', '$animate', '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 $scope.location = $location.path(); @@ -89,6 +89,23 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even $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) { console.trace("incoming call"); call.onError = $scope.onCallError; @@ -97,12 +114,19 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even }); $scope.answerCall = function() { - $scope.currentCall.answer(); + $rootScope.currentCall.answer(); }; $scope.hangupCall = function() { - $scope.currentCall.hangup(); - $scope.currentCall = undefined; + $rootScope.currentCall.hangup(); + + $timeout(function() { + var icon = angular.element('#callEndedIcon'); + $animate.addClass(icon, 'callIconRotate'); + $timeout(function(){ + $rootScope.currentCall = undefined; + }, 2000); + }, 100); }; $rootScope.onCallError = function(errStr) { @@ -110,5 +134,12 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even } $rootScope.onCallHangup = function() { + $timeout(function() { + var icon = angular.element('#callEndedIcon'); + $animate.addClass(icon, 'callIconRotate'); + $timeout(function(){ + $rootScope.currentCall = undefined; + }, 2000); + }, 100); } }]); diff --git a/webclient/app.css b/webclient/app.css index dbee02f83d..e0ca2f77a8 100755 --- a/webclient/app.css +++ b/webclient/app.css @@ -44,7 +44,49 @@ a:active { color: #000; } } #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 { diff --git a/webclient/components/matrix/matrix-call.js b/webclient/components/matrix/matrix-call.js index 3e13e4e81f..3cb5e8b693 100644 --- a/webclient/components/matrix/matrix-call.js +++ b/webclient/components/matrix/matrix-call.js @@ -41,6 +41,7 @@ angular.module('MatrixCall', []) this.room_id = room_id; this.call_id = "c" + new Date().getTime(); this.state = 'fledgling'; + this.didConnect = false; } navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; @@ -52,6 +53,7 @@ angular.module('MatrixCall', []) matrixPhoneService.callPlaced(this); navigator.getUserMedia({audio: true, video: false}, function(s) { self.gotUserMediaForInvite(s); }, function(e) { self.getUserMediaFailed(e); }); self.state = 'wait_local_media'; + this.direction = 'outbound'; }; MatrixCall.prototype.initWithInvite = function(msg) { @@ -64,6 +66,7 @@ angular.module('MatrixCall', []) this.peerConn.onaddstream = function(s) { self.onAddStream(s); }; this.peerConn.setRemoteDescription(new RTCSessionDescription(this.msg.offer), self.onSetRemoteDescriptionSuccess, self.onSetRemoteDescriptionError); this.state = 'ringing'; + this.direction = 'inbound'; }; MatrixCall.prototype.answer = function() { @@ -204,10 +207,12 @@ angular.module('MatrixCall', []) }; 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); // 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(); } }; diff --git a/webclient/components/matrix/matrix-service.js b/webclient/components/matrix/matrix-service.js index 8a0223979c..55cbd4bc14 100644 --- a/webclient/components/matrix/matrix-service.js +++ b/webclient/components/matrix/matrix-service.js @@ -295,6 +295,11 @@ angular.module('matrixService', []) return doRequest("GET", path); }, + // get a user's profile + getProfile: function(userId) { + return this.getProfileInfo(userId); + }, + // get a display name for this user ID getDisplayName: function(userId) { return this.getProfileInfo(userId, "displayname"); @@ -328,8 +333,8 @@ angular.module('matrixService', []) }, getProfileInfo: function(userId, info_segment) { - var path = "/profile/$user_id/" + info_segment; - path = path.replace("$user_id", userId); + var path = "/profile/"+userId + if (info_segment) path += '/' + info_segment; return doRequest("GET", path); }, diff --git a/webclient/img/green_phone.png b/webclient/img/green_phone.png new file mode 100644 index 0000000000..28807c749b --- /dev/null +++ b/webclient/img/green_phone.png Binary files differdiff --git a/webclient/img/red_phone.png b/webclient/img/red_phone.png new file mode 100644 index 0000000000..11fc44940c --- /dev/null +++ b/webclient/img/red_phone.png Binary files differdiff --git a/webclient/index.html b/webclient/index.html index 91b6bf27be..a7ed9aa15f 100644 --- a/webclient/index.html +++ b/webclient/index.html @@ -45,18 +45,29 @@ <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 id="callBar" ng-show="currentCall"> + <img id="callPeerImage" ng-show="currentCall.userProfile.avatar_url" ngSrc="{{ currentCall.userProfile.avatar_url }}" /> + <img class="callIcon" src="img/green_phone.png" ng-show="currentCall.state != 'ended'" /> + <img class="callIcon" id="callEndedIcon" src="img/red_phone.png" ng-show="currentCall.state == 'ended'" /> + <div id="callPeerNameAndState"> + <span id="callPeerName">{{ currentCall.userProfile.displayname }}</span> + <br /> + <span id="callState"> + <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' && !currentCall.didConnect && currentCall.direction == 'outbound'">Call Rejected</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> - <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> |
