diff --git a/webclient/app-controller.js b/webclient/app-controller.js index e9912f886..f63bb32f4 100644 --- a/webclient/app-controller.js +++ b/webclient/app-controller.js @@ -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); } - } + }; }]); diff --git a/webclient/app.css b/webclient/app.css index 1845b3491..69e608287 100755 --- a/webclient/app.css +++ b/webclient/app.css @@ -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 { diff --git a/webclient/components/matrix/matrix-call.js b/webclient/components/matrix/matrix-call.js index 2f0bfddaf..636259297 100644 --- a/webclient/components/matrix/matrix-call.js +++ b/webclient/components/matrix/matrix-call.js @@ -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(); diff --git a/webclient/index.html b/webclient/index.html index 19b1a3b28..05801a93b 100644 --- a/webclient/index.html +++ b/webclient/index.html @@ -45,6 +45,7 @@
+