forked from MirrorHub/synapse
First working version of UI chrome for video calls.
This commit is contained in:
parent
0505014152
commit
da8b5a5367
|
@ -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') {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in a new issue