MirrorHub/synapse
0
0
Fork 1
mirror of https://mau.dev/maunium/synapse.git synced 2024-12-18 17:24:19 +01:00
Code Issues Projects Releases Wiki Activity

First working version of UI chrome for video calls.

Browse source
This commit is contained in:
David Baker 2014-09-19 16:18:15 +01:00
parent 0505014152
commit da8b5a5367
3 changed files with 36 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
webclient/app-controller.js
View file

@ -27,6 +27,12 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
// Check current URL to avoid to display the logout button on the login page
$scope.location = $location.path();
// disable nganimate for the local and remote video elements because ngAnimate appears
// to be buggy and leaves animation classes on the video elements causing them to show
// when they should not (their animations are pure CSS3)
$animate.enabled(false, angular.element('#localVideo'));
$animate.enabled(false, angular.element('#remoteVideo'));
// Update the location state when the ng location changed
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
$scope.location = $location.path();
@ -147,8 +153,8 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
angular.element('#ringAudio')[0].pause();
} else if (newVal == 'connected') {
$timeout(function() {
//if ($scope.currentCall.type == 'video') $scope.videoMode = 'large';
}, 5000);
if ($scope.currentCall.type == 'video') $scope.videoMode = 'large';
}, 500);
}
if ($rootScope.currentCall && $rootScope.currentCall.type == 'video' && $rootScope.currentCall.state != 'connected') {

38
webclient/app.css
View file

@ -98,7 +98,7 @@ a:active { color: #000; }
z-index: 1;
background-color: rgba(0,0,0,0.0);
pointer-events: none;
transition: background-color linear 300ms;
transition: background-color linear 500ms;
}
#videoBackground.large {
@ -107,19 +107,31 @@ a:active { color: #000; }
}
#videoContainer {
position: relative;
max-width: 1280px;
margin: auto;
top: 32px;
}
#videoContainer.large {
#videoContainerPadding {
width: 1280px;
}
#localVideo {
position: absolute;
width: 128px;
height: 72px;
z-index: 1;
transition: left linear 500ms, top linear 500ms, width linear 500ms, height linear 500ms;
}
#localVideo.mini {
position: relative;
left: 120px;
width: 128px;
height: 72px;
top: 0px;
left: 130px;
}
#localVideo.large {
top: 70px;
left: 20px;
}
#localVideo.ended {
@ -128,19 +140,21 @@ a:active { color: #000; }
}
#remoteVideo {
transition: all linear 300ms;
position: relative;
height: auto;
transition: left linear 500ms, top linear 500ms, width linear 500ms, height linear 500ms;
}
#remoteVideo.mini {
position: relative;
left: 120px;
left: 260px;
top: 0px;
width: 128px;
height: 72px;
}
#remoteVideo.large {
left: 0px;
top: 50px;
width: 100%;
height: auto;
}
#remoteVideo.ended {

3
webclient/index.html
View file

@ -47,8 +47,9 @@
<body>
<div id="videoBackground" ng-class="videoMode">
<div id="videoContainer" ng-class="videoMode">
<div id="videoContainerPadding"></div>
<video id="localVideo" ng-class="[videoMode, currentCall.state]" ng-show="currentCall && currentCall.type == 'video' && (currentCall.state == 'connected' || currentCall.state == 'connecting' || currentCall.state == 'invite_sent' || currentCall.state == 'ended')"></video>
<video id="remoteVideo" ng-class="[videoMode, currentCall.state]" ng-show="currentCall && currentCall.type == 'video' && (currentCall.state == 'connected' || currentCall.state == 'ended')"></video>
<video id="remoteVideo" ng-class="[videoMode, currentCall.state]" ng-show="currentCall && currentCall.type == 'video' && (currentCall.state == 'connected' || (currentCall.state == 'ended' && currentCall.didConnect))"></video>
</div>
</div>