mirror of
https://mau.dev/maunium/synapse.git
synced 2024-08-28 13:11:56 +00:00
WIP video chat layout
This commit is contained in:
parent
1fb2c831e8
commit
e932e5237e
@ -126,6 +126,7 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
|
||||
angular.element('#ringAudio')[0].pause();
|
||||
angular.element('#ringbackAudio')[0].pause();
|
||||
angular.element('#callendAudio')[0].play();
|
||||
$scope.videoMode = undefined;
|
||||
} else if (newVal == 'ended' && oldVal == 'invite_sent' && $rootScope.currentCall.hangupParty == 'remote') {
|
||||
angular.element('#ringAudio')[0].pause();
|
||||
angular.element('#ringbackAudio')[0].pause();
|
||||
@ -138,6 +139,8 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
|
||||
angular.element('#ringbackAudio')[0].pause();
|
||||
} else if (oldVal == 'ringing') {
|
||||
angular.element('#ringAudio')[0].pause();
|
||||
} else if (newVal == 'connected') {
|
||||
$scope.videoMode = 'large';
|
||||
}
|
||||
});
|
||||
|
||||
@ -172,7 +175,7 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
|
||||
|
||||
$rootScope.onCallError = function(errStr) {
|
||||
$scope.feedback = errStr;
|
||||
}
|
||||
};
|
||||
|
||||
$rootScope.onCallHangup = function(call) {
|
||||
if (call == $rootScope.currentCall) {
|
||||
@ -180,5 +183,5 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
|
||||
if (call == $rootScope.currentCall) $rootScope.currentCall = undefined;
|
||||
}, 4070);
|
||||
}
|
||||
}
|
||||
};
|
||||
}]);
|
||||
|
@ -89,19 +89,47 @@ a:active { color: #000; }
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
#videoBackground {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 32px;
|
||||
left: 0px;
|
||||
z-index: 1;
|
||||
background-color: rgba(0,0,0,0.0);
|
||||
transition: background-color linear 300ms;
|
||||
}
|
||||
|
||||
#videoBackground.large {
|
||||
background-color: rgba(0,0,0,0.85);
|
||||
}
|
||||
|
||||
#localVideo {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
left: 160px;
|
||||
width: 128px;
|
||||
height: 72px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#remoteVideo {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
left: 300px;
|
||||
width: 128px;
|
||||
height: 72px;
|
||||
z-index: 2;
|
||||
transition: all linear 300ms;
|
||||
}
|
||||
|
||||
#remoteVideo.large {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#remoteVideo.ended {
|
||||
-webkit-filter: grayscale(1);
|
||||
}
|
||||
|
||||
#headerContent {
|
||||
|
@ -167,6 +167,8 @@ angular.module('MatrixCall', [])
|
||||
MatrixCall.prototype.hangup = function(suppressEvent) {
|
||||
console.log("Ending call "+this.call_id);
|
||||
|
||||
this.remoteVideoElement.pause();
|
||||
|
||||
this.stopAllMedia();
|
||||
if (this.peerConn) this.peerConn.close();
|
||||
|
||||
|
@ -45,6 +45,7 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="videoBackground" ng-class="videoMode" ng-show="videoMode == 'large' || videoMode == 'fullscreen'"></div>
|
||||
|
||||
<div id="header">
|
||||
<!-- Do not show buttons on the login page -->
|
||||
@ -93,8 +94,8 @@
|
||||
<source src="media/busy.mp3" type="audio/mpeg" />
|
||||
</audio>
|
||||
</div>
|
||||
<video id="localVideo" ng-show="currentCall && currentCall.type == 'video' && (currentCall.state == 'connected' || currentCall.state == 'connecting' || currentCall.state == 'invite_sent')"></video>
|
||||
<video id="remoteVideo" ng-show="currentCall && currentCall.type == 'video' && currentCall.state == 'connected'"></video>
|
||||
<video id="localVideo" ng-class="videoMode" ng-show="currentCall && currentCall.type == 'video' && (currentCall.state == 'connected' || currentCall.state == 'connecting' || currentCall.state == 'invite_sent')"></video>
|
||||
<video id="remoteVideo" ng-class="[videoMode, currentCall.state]" ng-show="currentCall && currentCall.type == 'video' && currentCall.state == 'connected' || currentCall.state == 'ended'"></video>
|
||||
|
||||
<a href id="headerUserId" ng-click='goToUserPage(user_id)'>{{ user_id }}</a>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user