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