diff options
| author | David Baker <dbkr@matrix.org> | 2014-09-19 16:18:15 +0100 |
|---|---|---|
| committer | David Baker <dbkr@matrix.org> | 2014-09-19 16:18:15 +0100 |
| commit | da8b5a53671911bd158865f7af4b04b3b0168dfa (patch) | |
| tree | 78ada3dfcabcdcae8dc0e46445c1bfed7dcb63ab /webclient | |
| parent | add unprefixed filter css as well (diff) | |
| download | synapse-da8b5a53671911bd158865f7af4b04b3b0168dfa.tar.xz | |
First working version of UI chrome for video calls.
Diffstat (limited to 'webclient')
| -rw-r--r-- | webclient/app-controller.js | 10 | ||||
| -rwxr-xr-x | webclient/app.css | 36 | ||||
| -rw-r--r-- | webclient/index.html | 3 |
3 files changed, 35 insertions, 14 deletions
diff --git a/webclient/app-controller.js b/webclient/app-controller.js index 7f48148aaa..0e823b43e7 100644 --- a/webclient/app-controller.js +++ b/webclient/app-controller.js @@ -26,6 +26,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) { @@ -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') { diff --git a/webclient/app.css b/webclient/app.css index fb92a0f432..03dd5ec8bd 100755 --- a/webclient/app.css +++ b/webclient/app.css @@ -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.mini { - position: relative; - left: 120px; +#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 { + 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 { diff --git a/webclient/index.html b/webclient/index.html index 78a68753d4..77686abcc2 100644 --- a/webclient/index.html +++ b/webclient/index.html @@ -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> |