summary refs log tree commit diff
path: root/webclient
diff options
context:
space:
mode:
authorDavid Baker <dbkr@matrix.org>2014-09-18 11:04:45 +0100
committerDavid Baker <dbkr@matrix.org>2014-09-18 11:04:45 +0100
commite932e5237eaea4c08e6f7bcd849e4be6bd2e3f98 (patch)
treeab22cc46fc524a81c986646a88c474cecfeaaca0 /webclient
parentVideo calling (in a tiny box at the moment) (diff)
downloadsynapse-e932e5237eaea4c08e6f7bcd849e4be6bd2e3f98.tar.xz
WIP video chat layout
Diffstat (limited to 'webclient')
-rw-r--r--webclient/app-controller.js7
-rwxr-xr-xwebclient/app.css28
-rw-r--r--webclient/components/matrix/matrix-call.js2
-rw-r--r--webclient/index.html5
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>
             &nbsp;