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>
|
