diff --git a/webclient/app-controller.js b/webclient/app-controller.js
index e9912f886d..f63bb32f4f 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 1845b34910..69e608287e 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 2f0bfddaf5..636259297e 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 19b1a3b288..05801a93bc 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -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>
|
