Mirrors
/
synapse
mirror of https://github.com/element-hq/synapse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

WIP video chat layout

This commit is contained in:
David Baker 2014-09-18 11:04:45 +01:00
parent 1fb2c831e8
commit e932e5237e
4 changed files with 38 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
webclient/app-controller.js
View File

@ -126,6 +126,7 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
angular.element('#ringAudio')[0].pause();
angular.element('#ringbackAudio')[0].pause();
angular.element('#callendAudio')[0].play();
$scope.videoMode = undefined;
} else if (newVal == 'ended' && oldVal == 'invite_sent' && $rootScope.currentCall.hangupParty == 'remote') {
angular.element('#ringAudio')[0].pause();
angular.element('#ringbackAudio')[0].pause();
@ -138,6 +139,8 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
angular.element('#ringbackAudio')[0].pause();
} else if (oldVal == 'ringing') {
angular.element('#ringAudio')[0].pause();
} else if (newVal == 'connected') {
$scope.videoMode = 'large';
}
});
@ -172,7 +175,7 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
$rootScope.onCallError = function(errStr) {
$scope.feedback = errStr;
}
};
$rootScope.onCallHangup = function(call) {
if (call == $rootScope.currentCall) {
@ -180,5 +183,5 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
if (call == $rootScope.currentCall) $rootScope.currentCall = undefined;
}, 4070);
}
}
};
}]);

28
webclient/app.css
View File

@ -89,19 +89,47 @@ a:active { color: #000; }
font-size: 80%;
}
#videoBackground {
position: absolute;
height: 100%;
width: 100%;
top: 32px;
left: 0px;
z-index: 1;
background-color: rgba(0,0,0,0.0);
transition: background-color linear 300ms;
}
#videoBackground.large {
background-color: rgba(0,0,0,0.85);
}
#localVideo {
position: absolute;
top: 32px;
left: 160px;
width: 128px;
height: 72px;
z-index: 2;
}
#remoteVideo {
position: absolute;
top: 32px;
left: 300px;
width: 128px;
height: 72px;
z-index: 2;
transition: all linear 300ms;
}
#remoteVideo.large {
width: 100%;
height: auto;
}
#remoteVideo.ended {
-webkit-filter: grayscale(1);
}
#headerContent {

2
webclient/components/matrix/matrix-call.js
View File

@ -167,6 +167,8 @@ angular.module('MatrixCall', [])
MatrixCall.prototype.hangup = function(suppressEvent) {
console.log("Ending call "+this.call_id);
this.remoteVideoElement.pause();
this.stopAllMedia();
if (this.peerConn) this.peerConn.close();

5
webclient/index.html
View File

@ -45,6 +45,7 @@
</head>
<body>
<div id="videoBackground" ng-class="videoMode" ng-show="videoMode == 'large' || videoMode == 'fullscreen'"></div>
<div id="header">
<!-- Do not show buttons on the login page -->
@ -93,8 +94,8 @@
<source src="media/busy.mp3" type="audio/mpeg" />
</audio>
</div>
<video id="localVideo" ng-show="currentCall && currentCall.type == 'video' && (currentCall.state == 'connected' || currentCall.state == 'connecting' || currentCall.state == 'invite_sent')"></video>
<video id="remoteVideo" ng-show="currentCall && currentCall.type == 'video' && currentCall.state == 'connected'"></video>
<video id="localVideo" ng-class="videoMode" ng-show="currentCall && currentCall.type == 'video' && (currentCall.state == 'connected' || currentCall.state == 'connecting' || currentCall.state == 'invite_sent')"></video>
<video id="remoteVideo" ng-class="[videoMode, currentCall.state]" ng-show="currentCall && currentCall.type == 'video' && currentCall.state == 'connected' || currentCall.state == 'ended'"></video>
<a href id="headerUserId" ng-click='goToUserPage(user_id)'>{{ user_id }}</a>
&nbsp;