From c03c25530487e5051affb9685f6f7b0c37abf8e5 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@matrix.org>
Date: Sat, 6 Sep 2014 00:14:02 +0100
Subject: [PATCH] Better call bar (visually: still lacks ring[back] tones).
---
webclient/app-controller.js | 41 ++++++++++++++--
webclient/app.css | 44 +++++++++++++++++-
webclient/components/matrix/matrix-call.js | 5 ++
webclient/components/matrix/matrix-service.js | 9 +++-
webclient/img/green_phone.png | Bin 0 -> 434 bytes
webclient/img/red_phone.png | Bin 0 -> 378 bytes
webclient/index.html | 31 ++++++++----
7 files changed, 112 insertions(+), 18 deletions(-)
create mode 100644 webclient/img/green_phone.png
create mode 100644 webclient/img/red_phone.png
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 0000000000000000000000000000000000000000..28807c749b91fd7a9a12ee95b53874cd5baedd0e
GIT binary patch
literal 434
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`EX7WqAsj$Z!;#Vf<Z~8yL>2?-
z3=n2q{H)3b$dD{?jVKAuPb(=;EJ|f4FE7{2%*!rLPAo{(%P&fw{mw>;fq_xq)5S5w
zqIc?~{n|$gWsb$4zs@TWxM^d=3Hbvmu98c5x>%bJCI|}etDWkzF0Yg=b+dQZM<c0{
zxi6=<o;<SP&IgHi?((}HSNqqtJ^#69e)xO4+LYO0L5l(tIA^f!YVdh`M`+^bdEHrT
z7aFG-S|5n;t_po_&)_wMv9IxLeOKvJDF)S7jCu_#6BaPc5iIO~dANt6-9bITQ75J8
z;h*)NG?{ZM?oL(MeXY@JhK%6qd&Q310vAO-Fp{`a^d@KZ-qw^=tGjh#_XM-FWqlX#
z+dJbEZ^w@WJB@m#+nJ|B8)kC+=}flY&ff5`O<4c!l-CUp+l-B^g4R#C#W;o8{-k)m
z%9N=qtaTr3^tAI}|C`BZ?)xeH{Vz>f1vUN{)|rCYnWq>6-@315C_lh#@Vqwu-%YMB
Zyn42AHwsql=L3c>gQu&X%Q~loCIBpAtk?hm
literal 0
HcmV?d00001
diff --git a/webclient/img/red_phone.png b/webclient/img/red_phone.png
new file mode 100644
index 0000000000000000000000000000000000000000..11fc44940cb35654bc24874c4cd3c2377dbb353f
GIT binary patch
literal 378
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`EX7WqAsj$Z!;#Vf<Z~8yL>2?-
z3=n2q{H)3b$dD{?jVKAuPb(=;EJ|f4FE7{2%*!rLPAo{(%P&fw{mw=TsOY<=i(`mI
z@6<`Vy__9IT(7r895HGtOG-^mpZ<j{UVg#0I>&!1xo_U+<g86n|Hjo7A+bU54+AUr
zbk}!B6OAtJWR`xm)vWm3n+2N+S~jrCFk3sYXN2!!b9=%3YR?0g9m0RypKIO_b7M_d
zdtBlj*W@RMdJD92xS10*YQoav4<+Ul%sh~OC}`Q9*oToXtaoc3ieuv6y!WRm=U179
z%6nWs9GzdF)Uuf4pTM=*5?dPTzI;ypQd(&6%$@s%>+9`m1-Tm}*Rr>4aN<~a!*R!X
zmJ}_W>E9k`KHkl^X6iJ9lW+DfzI;ijsX)~BfAkIg^9OYzS0Bo~+TW~Z`GfJKc8`$R
T(~5b(AYkxx^>bP0l+XkKHXN5X
literal 0
HcmV?d00001
diff --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>
--
GitLab