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