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>