diff options
| author | David Baker <dbkr@matrix.org> | 2014-09-18 11:04:45 +0100 |
|---|---|---|
| committer | David Baker <dbkr@matrix.org> | 2014-09-18 11:04:45 +0100 |
| commit | e932e5237eaea4c08e6f7bcd849e4be6bd2e3f98 (patch) | |
| tree | ab22cc46fc524a81c986646a88c474cecfeaaca0 | |
| parent | Video calling (in a tiny box at the moment) (diff) | |
| download | synapse-e932e5237eaea4c08e6f7bcd849e4be6bd2e3f98.tar.xz | |
WIP video chat layout
| -rw-r--r-- | webclient/app-controller.js | 7 | ||||
| -rwxr-xr-x | webclient/app.css | 28 | ||||
| -rw-r--r-- | webclient/components/matrix/matrix-call.js | 2 | ||||
| -rw-r--r-- | webclient/index.html | 5 |
4 files changed, 38 insertions, 4 deletions
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> |