Matrix-Mirrors/forked-synapse
1
0
Fork 0
mirror of https://mau.dev/maunium/synapse.git synced 2024-08-28 13:11:56 +00:00
Code Issues Packages 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

@ -26,6 +26,12 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
// Check current URL to avoid to display the logout button on the login page // Check current URL to avoid to display the logout button on the login page
$scope.location = $location.path(); $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 // Update the location state when the ng location changed
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) { $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
@ -147,8 +153,8 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
angular.element('#ringAudio')[0].pause(); angular.element('#ringAudio')[0].pause();
} else if (newVal == 'connected') { } else if (newVal == 'connected') {
$timeout(function() { $timeout(function() {
//if ($scope.currentCall.type == 'video') $scope.videoMode = 'large'; if ($scope.currentCall.type == 'video') $scope.videoMode = 'large';
}, 5000); }, 500);
} }
if ($rootScope.currentCall && $rootScope.currentCall.type == 'video' && $rootScope.currentCall.state != 'connected') { 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; z-index: 1;
background-color: rgba(0,0,0,0.0); background-color: rgba(0,0,0,0.0);
pointer-events: none; pointer-events: none;
transition: background-color linear 300ms; transition: background-color linear 500ms;
} }
#videoBackground.large { #videoBackground.large {
@ -107,19 +107,31 @@ a:active { color: #000; }
} }
#videoContainer { #videoContainer {
position: relative;
max-width: 1280px; max-width: 1280px;
margin: auto; 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 { #localVideo.mini {
position: relative; top: 0px;
left: 120px; left: 130px;
width: 128px; }
height: 72px;
#localVideo.large {
top: 70px;
left: 20px;
} }
#localVideo.ended { #localVideo.ended {
@ -128,19 +140,21 @@ a:active { color: #000; }
} }
#remoteVideo { #remoteVideo {
transition: all linear 300ms; position: relative;
height: auto;
transition: left linear 500ms, top linear 500ms, width linear 500ms, height linear 500ms;
} }
#remoteVideo.mini { #remoteVideo.mini {
position: relative; left: 260px;
left: 120px; top: 0px;
width: 128px; width: 128px;
height: 72px;
} }
#remoteVideo.large { #remoteVideo.large {
left: 0px;
top: 50px;
width: 100%; width: 100%;
height: auto;
} }
#remoteVideo.ended { #remoteVideo.ended {

3
webclient/index.html
View File

@ -47,8 +47,9 @@
<body> <body>
<div id="videoBackground" ng-class="videoMode"> <div id="videoBackground" ng-class="videoMode">
<div id="videoContainer" 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="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>
</div> </div>