forked from MirrorHub/synapse
Better call bar (visually: still lacks ring[back] tones).
This commit is contained in:
parent
fc65b68f30
commit
c03c255304
|
@ -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);
|
||||
}
|
||||
}]);
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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);
|
||||
},
|
||||
|
||||
|
|
BIN
webclient/img/green_phone.png
Normal file
BIN
webclient/img/green_phone.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 434 B |
BIN
webclient/img/red_phone.png
Normal file
BIN
webclient/img/red_phone.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 378 B |
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in a new issue