mirror of
https://mau.dev/maunium/synapse.git
synced 2024-12-18 15:44:13 +01:00
First working version of UI chrome for video calls.
This commit is contained in:
parent
0505014152
commit
da8b5a5367
3 changed files with 36 additions and 15 deletions
|
@ -27,6 +27,12 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
|
||||||
// Check current URL to avoid to display the logout button on the login page
|
// Check current URL to avoid to display the logout button on the login page
|
||||||
$scope.location = $location.path();
|
$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
|
// Update the location state when the ng location changed
|
||||||
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
|
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
|
||||||
$scope.location = $location.path();
|
$scope.location = $location.path();
|
||||||
|
@ -147,8 +153,8 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
|
||||||
angular.element('#ringAudio')[0].pause();
|
angular.element('#ringAudio')[0].pause();
|
||||||
} else if (newVal == 'connected') {
|
} else if (newVal == 'connected') {
|
||||||
$timeout(function() {
|
$timeout(function() {
|
||||||
//if ($scope.currentCall.type == 'video') $scope.videoMode = 'large';
|
if ($scope.currentCall.type == 'video') $scope.videoMode = 'large';
|
||||||
}, 5000);
|
}, 500);
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($rootScope.currentCall && $rootScope.currentCall.type == 'video' && $rootScope.currentCall.state != 'connected') {
|
if ($rootScope.currentCall && $rootScope.currentCall.type == 'video' && $rootScope.currentCall.state != 'connected') {
|
||||||
|
|
|
@ -98,7 +98,7 @@ a:active { color: #000; }
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
background-color: rgba(0,0,0,0.0);
|
background-color: rgba(0,0,0,0.0);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
transition: background-color linear 300ms;
|
transition: background-color linear 500ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
#videoBackground.large {
|
#videoBackground.large {
|
||||||
|
@ -107,19 +107,31 @@ a:active { color: #000; }
|
||||||
}
|
}
|
||||||
|
|
||||||
#videoContainer {
|
#videoContainer {
|
||||||
|
position: relative;
|
||||||
max-width: 1280px;
|
max-width: 1280px;
|
||||||
margin: auto;
|
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 {
|
#localVideo.mini {
|
||||||
position: relative;
|
top: 0px;
|
||||||
left: 120px;
|
left: 130px;
|
||||||
width: 128px;
|
}
|
||||||
height: 72px;
|
|
||||||
|
#localVideo.large {
|
||||||
|
top: 70px;
|
||||||
|
left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#localVideo.ended {
|
#localVideo.ended {
|
||||||
|
@ -128,19 +140,21 @@ a:active { color: #000; }
|
||||||
}
|
}
|
||||||
|
|
||||||
#remoteVideo {
|
#remoteVideo {
|
||||||
transition: all linear 300ms;
|
position: relative;
|
||||||
|
height: auto;
|
||||||
|
transition: left linear 500ms, top linear 500ms, width linear 500ms, height linear 500ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
#remoteVideo.mini {
|
#remoteVideo.mini {
|
||||||
position: relative;
|
left: 260px;
|
||||||
left: 120px;
|
top: 0px;
|
||||||
width: 128px;
|
width: 128px;
|
||||||
height: 72px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#remoteVideo.large {
|
#remoteVideo.large {
|
||||||
|
left: 0px;
|
||||||
|
top: 50px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#remoteVideo.ended {
|
#remoteVideo.ended {
|
||||||
|
|
|
@ -47,8 +47,9 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="videoBackground" ng-class="videoMode">
|
<div id="videoBackground" ng-class="videoMode">
|
||||||
<div id="videoContainer" 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="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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue