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

2024-10-01 01:36:05 -04:00 · 2014-09-06 00:14:02 +01:00 · 2014-09-06 00:14:02 +01:00 · c03c255304
commit c03c255304
parent fc65b68f30
7 changed files with 112 additions and 18 deletions
--- 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);
    }
 }]);
--- 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 {
--- 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();
        }
    };
--- 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);
        },
        
--- a/webclient/img/green_phone.png
+++ b/webclient/img/green_phone.png
--- a/webclient/img/red_phone.png
+++ b/webclient/img/red_phone.png
--- 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>
            &nbsp;