MirrorHub/synapse
0
0
Fork 1
mirror of https://mau.dev/maunium/synapse.git synced 2024-12-24 16:14:15 +01:00
Code Issues Projects Releases Wiki Activity

WIP video chat layout

Browse source
This commit is contained in:
David Baker 2014-09-18 11:04:45 +01:00
parent 1fb2c831e8
commit e932e5237e
4 changed files with 38 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
webclient/app-controller.js
View file

@ -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);
} }
} };
}]); }]);

28
webclient/app.css
View file

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

2
webclient/components/matrix/matrix-call.js
View file

@ -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();

5
webclient/index.html
View file

@ -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>
&nbsp; &nbsp;