From da8b5a53671911bd158865f7af4b04b3b0168dfa Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 19 Sep 2014 16:18:15 +0100 Subject: [PATCH] First working version of UI chrome for video calls. --- webclient/app-controller.js | 10 ++++++++-- webclient/app.css | 38 +++++++++++++++++++++++++------------ webclient/index.html | 3 ++- 3 files changed, 36 insertions(+), 15 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 { + 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 { 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 @@
+
- +