From 0280176ccddb9a1f142ad14a9a8a6e97686b0a4d Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Fri, 5 Sep 2014 13:31:47 -0700
Subject: Added basic captcha, not hooked up

---
 webclient/index.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'webclient/index.html')

diff --git a/webclient/index.html b/webclient/index.html
index 91b6bf27be..fe62d95bb8 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -10,7 +10,8 @@
    
     <meta name="viewport" content="width=device-width">
    
-    <script type='text/javascript' src='js/jquery-1.8.3.min.js'></script> 
+    <script type='text/javascript' src='js/jquery-1.8.3.min.js'></script>
+    <script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script> 
     <script src="js/angular.min.js"></script>
     <script src="js/angular-route.min.js"></script>
     <script src="js/angular-sanitize.min.js"></script>
-- 
cgit 1.4.1


From c03c25530487e5051affb9685f6f7b0c37abf8e5 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@matrix.org>
Date: Sat, 6 Sep 2014 00:14:02 +0100
Subject: Better call bar (visually: still lacks ring[back] tones).

---
 webclient/app-controller.js                   |  41 +++++++++++++++++++++---
 webclient/app.css                             |  44 +++++++++++++++++++++++++-
 webclient/components/matrix/matrix-call.js    |   5 +++
 webclient/components/matrix/matrix-service.js |   9 ++++--
 webclient/img/green_phone.png                 | Bin 0 -> 434 bytes
 webclient/img/red_phone.png                   | Bin 0 -> 378 bytes
 webclient/index.html                          |  31 ++++++++++++------
 7 files changed, 112 insertions(+), 18 deletions(-)
 create mode 100644 webclient/img/green_phone.png
 create mode 100644 webclient/img/red_phone.png

(limited to 'webclient/index.html')

diff --git a/webclient/app-controller.js b/webclient/app-controller.js
index ea48cbb011..064bde3ab2 100644
--- a/webclient/app-controller.js
+++ b/webclient/app-controller.js
@@ -21,8 +21,8 @@ limitations under the License.
 'use strict';
 
 angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'eventStreamService'])
-.controller('MatrixWebClientController', ['$scope', '$location', '$rootScope', 'matrixService', 'mPresence', 'eventStreamService', 'matrixPhoneService',
-                               function($scope, $location, $rootScope, matrixService, mPresence, eventStreamService, matrixPhoneService) {
+.controller('MatrixWebClientController', ['$scope', '$location', '$rootScope', '$timeout', '$animate', 'matrixService', 'mPresence', 'eventStreamService', 'matrixPhoneService',
+                               function($scope, $location, $rootScope, $timeout, $animate, matrixService, mPresence, eventStreamService, matrixPhoneService) {
          
     // Check current URL to avoid to display the logout button on the login page
     $scope.location = $location.path();
@@ -89,6 +89,23 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
         $scope.user_id = matrixService.config().user_id;
     };
 
+    $rootScope.$watch('currentCall', function(newVal, oldVal) {
+        if (!$rootScope.currentCall) return;
+
+        var roomMembers = angular.copy($rootScope.events.rooms[$rootScope.currentCall.room_id].members);
+        delete roomMembers[matrixService.config().user_id];
+
+        $rootScope.currentCall.user_id = Object.keys(roomMembers)[0];
+        matrixService.getProfile($rootScope.currentCall.user_id).then(
+            function(response) {
+                $rootScope.currentCall.userProfile = response.data;
+            },
+            function(error) {
+                $scope.feedback = "Can't load user profile";
+            }
+        );
+    });
+
     $rootScope.$on(matrixPhoneService.INCOMING_CALL_EVENT, function(ngEvent, call) {
         console.trace("incoming call");
         call.onError = $scope.onCallError;
@@ -97,12 +114,19 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
     });
 
     $scope.answerCall = function() {
-        $scope.currentCall.answer();
+        $rootScope.currentCall.answer();
     };
 
     $scope.hangupCall = function() {
-        $scope.currentCall.hangup();
-        $scope.currentCall = undefined;
+        $rootScope.currentCall.hangup();
+
+        $timeout(function() {
+            var icon = angular.element('#callEndedIcon');
+            $animate.addClass(icon, 'callIconRotate');
+            $timeout(function(){
+                $rootScope.currentCall = undefined;
+            }, 2000);
+        }, 100);
     };
     
     $rootScope.onCallError = function(errStr) {
@@ -110,5 +134,12 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
     }
 
     $rootScope.onCallHangup = function() {
+        $timeout(function() {
+            var icon = angular.element('#callEndedIcon');
+            $animate.addClass(icon, 'callIconRotate');
+            $timeout(function(){
+                $rootScope.currentCall = undefined;
+            }, 2000);
+        }, 100);
     }
 }]);
diff --git a/webclient/app.css b/webclient/app.css
index dbee02f83d..e0ca2f77a8 100755
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -44,7 +44,49 @@ a:active  { color: #000; }
 }
 
 #callBar {
-   float: left;
+    float: left;
+    height: 32px;
+    margin: auto;
+    text-align: right;
+    line-height: 16px;
+}
+
+.callIcon {
+    margin-left: 4px;
+    margin-right: 4px;
+    margin-top: 8px;
+    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
+    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
+    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
+    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
+}
+
+.callIconRotate {
+    -webkit-transform: rotateZ(45deg);
+    -moz-transform: rotateZ(45deg);
+    -ms-transform: rotateZ(45deg);
+    -o-transform: rotateZ(45deg);
+    transform: rotateZ(45deg);
+}
+
+#callPeerImage {
+    width: 32px;
+    height: 32px;
+    border: none;
+    float: left;
+}
+
+#callPeerNameAndState {
+    float: left;
+    margin-left: 4px;
+}
+
+#callState {
+    font-size: 60%;
+}
+
+#callPeerName {
+    font-size: 80%;
 }
 
 #headerContent {
diff --git a/webclient/components/matrix/matrix-call.js b/webclient/components/matrix/matrix-call.js
index 3e13e4e81f..3cb5e8b693 100644
--- a/webclient/components/matrix/matrix-call.js
+++ b/webclient/components/matrix/matrix-call.js
@@ -41,6 +41,7 @@ angular.module('MatrixCall', [])
         this.room_id = room_id;
         this.call_id = "c" + new Date().getTime();
         this.state = 'fledgling';
+        this.didConnect = false;
     }
 
     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
@@ -52,6 +53,7 @@ angular.module('MatrixCall', [])
         matrixPhoneService.callPlaced(this);
         navigator.getUserMedia({audio: true, video: false}, function(s) { self.gotUserMediaForInvite(s); }, function(e) { self.getUserMediaFailed(e); });
         self.state = 'wait_local_media';
+        this.direction = 'outbound';
     };
 
     MatrixCall.prototype.initWithInvite = function(msg) {
@@ -64,6 +66,7 @@ angular.module('MatrixCall', [])
         this.peerConn.onaddstream = function(s) { self.onAddStream(s); };
         this.peerConn.setRemoteDescription(new RTCSessionDescription(this.msg.offer), self.onSetRemoteDescriptionSuccess, self.onSetRemoteDescriptionError);
         this.state = 'ringing';
+        this.direction = 'inbound';
     };
 
     MatrixCall.prototype.answer = function() {
@@ -204,10 +207,12 @@ angular.module('MatrixCall', [])
     };
 
     MatrixCall.prototype.onIceConnectionStateChanged = function() {
+        if (this.state == 'ended') return; // because ICE can still complete as we're ending the call
         console.trace("Ice connection state changed to: "+this.peerConn.iceConnectionState);
         // ideally we'd consider the call to be connected when we get media but chrome doesn't implement nay of the 'onstarted' events yet
         if (this.peerConn.iceConnectionState == 'completed' || this.peerConn.iceConnectionState == 'connected') {
             this.state = 'connected';
+            this.didConnect = true;
             $rootScope.$apply();
         }
     };
diff --git a/webclient/components/matrix/matrix-service.js b/webclient/components/matrix/matrix-service.js
index 8a0223979c..55cbd4bc14 100644
--- a/webclient/components/matrix/matrix-service.js
+++ b/webclient/components/matrix/matrix-service.js
@@ -295,6 +295,11 @@ angular.module('matrixService', [])
             return doRequest("GET", path);
         },
         
+        // get a user's profile
+        getProfile: function(userId) {
+            return this.getProfileInfo(userId);
+        },
+
         // get a display name for this user ID
         getDisplayName: function(userId) {
             return this.getProfileInfo(userId, "displayname");
@@ -328,8 +333,8 @@ angular.module('matrixService', [])
         },
 
         getProfileInfo: function(userId, info_segment) {
-            var path = "/profile/$user_id/" + info_segment;
-            path = path.replace("$user_id", userId);
+            var path = "/profile/"+userId
+            if (info_segment) path += '/' + info_segment;
             return doRequest("GET", path);
         },
         
diff --git a/webclient/img/green_phone.png b/webclient/img/green_phone.png
new file mode 100644
index 0000000000..28807c749b
Binary files /dev/null and b/webclient/img/green_phone.png differ
diff --git a/webclient/img/red_phone.png b/webclient/img/red_phone.png
new file mode 100644
index 0000000000..11fc44940c
Binary files /dev/null and b/webclient/img/red_phone.png differ
diff --git a/webclient/index.html b/webclient/index.html
index 91b6bf27be..a7ed9aa15f 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -45,18 +45,29 @@
     <div id="header">
         <!-- Do not show buttons on the login page -->
         <div id="headerContent" ng-hide="'/login' == location || '/register' == location">
-            <div id="callBar">
-                <div ng-show="currentCall.state == 'ringing'">
-                Incoming call from {{ currentCall.user_id }}
-                <button ng-click="answerCall()">Answer</button>
-                <button ng-click="hangupCall()">Reject</button>
+            <div id="callBar" ng-show="currentCall">
+                <img id="callPeerImage" ng-show="currentCall.userProfile.avatar_url" ngSrc="{{ currentCall.userProfile.avatar_url }}" />
+                <img class="callIcon" src="img/green_phone.png" ng-show="currentCall.state != 'ended'" />
+                <img class="callIcon" id="callEndedIcon" src="img/red_phone.png" ng-show="currentCall.state == 'ended'" />
+                <div id="callPeerNameAndState">
+                    <span id="callPeerName">{{ currentCall.userProfile.displayname }}</span>
+                    <br />
+                    <span id="callState">
+                        <span ng-show="currentCall.state == 'invite_sent'">Calling...</span>
+                        <span ng-show="currentCall.state == 'connecting'">Call Connecting...</span>
+                        <span ng-show="currentCall.state == 'connected'">Call Connected</span>
+                        <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'outbound'">Call Rejected</span>
+                        <span ng-show="currentCall.state == 'ended' && currentCall.didConnect && currentCall.direction == 'outbound'">Call Ended</span>
+                        <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'inbound'">Call Canceled</span>
+                        <span ng-show="currentCall.state == 'ended' && currentCall.didConnect && currentCall.direction == 'inbound'">Call Ended</span>
+                        <span ng-show="currentCall.state == 'wait_local_media'">Waiting for media permission...</span>
+                    </span>
                 </div>
+                <span ng-show="currentCall.state == 'ringing'">
+                    <button ng-click="answerCall()">Answer</button>
+                    <button ng-click="hangupCall()">Reject</button>
+                </span>
                 <button ng-click="hangupCall()" ng-show="currentCall && currentCall.state != 'ringing' && currentCall.state != 'ended' && currentCall.state != 'fledgling'">Hang up</button>
-                <span ng-show="currentCall.state == 'invite_sent'">Calling...</span>
-                <span ng-show="currentCall.state == 'connecting'">Call Connecting...</span>
-                <span ng-show="currentCall.state == 'connected'">Call Connected</span>
-                <span ng-show="currentCall.state == 'ended'">Call Ended</span>
-                <span style="display: none; ">{{ currentCall.state }}</span>
             </div>
             <a href id="headerUserId" ng-click='goToUserPage(user_id)'>{{ user_id }}</a>
             &nbsp;
-- 
cgit 1.4.1


From c80f7394617dcc44c3a608a3a51acde0f255f623 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Fri, 5 Sep 2014 17:36:09 -0700
Subject: Added webclient config.js for storing recaptcha public key.

---
 .gitignore                             |  2 ++
 webclient/README                       | 18 +++++++++++++++---
 webclient/index.html                   |  1 +
 webclient/login/register-controller.js | 15 +++++++++++++--
 4 files changed, 31 insertions(+), 5 deletions(-)

(limited to 'webclient/index.html')

diff --git a/.gitignore b/.gitignore
index d2b93ef61f..dfe8dfedbf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,4 +24,6 @@ graph/*.svg
 graph/*.png
 graph/*.dot
 
+webclient/config.js
+
 uploads
diff --git a/webclient/README b/webclient/README
index 0f893b1712..9750d2706a 100644
--- a/webclient/README
+++ b/webclient/README
@@ -1,12 +1,24 @@
 Basic Usage
 -----------
 
-The Synapse web client needs to be hosted by a basic HTTP server.
-
-You can use the Python simple HTTP server::
+The web client should automatically run when running the home server. Alternatively, you can run
+it stand-alone:
 
     $ python -m SimpleHTTPServer
 
 Then, open this URL in a WEB browser::
 
     http://127.0.0.1:8000/
+
+
+ReCaptcha Keys
+--------------
+The web client will look for the global variable webClientConfig for config options. You should
+put your ReCaptcha public key there like so:
+
+webClientConfig = {
+        recaptcha_public_key: "YOUR_PUBLIC_KEY"
+}
+
+This should be put in webclient/config.js which is already .gitignored, rather than in the web
+client source files.
diff --git a/webclient/index.html b/webclient/index.html
index fe62d95bb8..0981373134 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -17,6 +17,7 @@
     <script src="js/angular-sanitize.min.js"></script>
     <script type='text/javascript' src='js/ng-infinite-scroll-matrix.js'></script>
     <script src="app.js"></script>
+    <script src="config.js"></script>
     <script src="app-controller.js"></script>
     <script src="app-directive.js"></script>
     <script src="app-filter.js"></script>
diff --git a/webclient/login/register-controller.js b/webclient/login/register-controller.js
index 9d02f274df..96fffb364d 100644
--- a/webclient/login/register-controller.js
+++ b/webclient/login/register-controller.js
@@ -19,7 +19,7 @@ angular.module('RegisterController', ['matrixService'])
                                     function($scope, $rootScope, $location, matrixService, eventStreamService) {
     'use strict';
     
-    var useCaptcha = false;
+    var useCaptcha = true;
     
     // FIXME: factor out duplication with login-controller.js
     
@@ -147,7 +147,18 @@ angular.module('RegisterController', ['matrixService'])
 	
 	var setupCaptcha = function() {
 	    console.log("Setting up ReCaptcha")
-	    Recaptcha.create("6Le31_kSAAAAAK-54VKccKamtr-MFA_3WS1d_fGV",
+        var config = window.webClientConfig;
+        var public_key = undefined;
+        if (config === undefined) {
+            console.error("Couldn't find webClientConfig. Cannot get public key for captcha.");
+        }
+        else {
+            public_key = webClientConfig.recaptcha_public_key;
+            if (public_key === undefined) {
+                console.error("No public key defined for captcha!")
+            }
+        }
+	    Recaptcha.create(public_key,
 	    "regcaptcha",
 	    {
 	      theme: "red",
-- 
cgit 1.4.1


From f397b2264c705a8284ca08890857782353f3b648 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Sat, 6 Sep 2014 09:47:30 -0700
Subject: https when loading recaptcha js

---
 webclient/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'webclient/index.html')

diff --git a/webclient/index.html b/webclient/index.html
index baaaa8cef8..81c7c7d06c 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -11,7 +11,7 @@
     <meta name="viewport" content="width=device-width">
    
     <script type='text/javascript' src='js/jquery-1.8.3.min.js'></script>
-    <script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script> 
+    <script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script> 
     <script src="js/angular.min.js"></script>
     <script src="js/angular-route.min.js"></script>
     <script src="js/angular-sanitize.min.js"></script>
-- 
cgit 1.4.1


From 972f664b6b38029cda46a6ba709b7fc8b6b6bdae Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@matrix.org>
Date: Mon, 8 Sep 2014 16:10:36 +0100
Subject: add sounds to the calling interface

---
 webclient/app-controller.js                |  27 +++++++++++++++--
 webclient/components/matrix/matrix-call.js |  46 +++++++++++++++++++++--------
 webclient/index.html                       |  16 ++++++++++
 webclient/media/busy.mp3                   | Bin 0 -> 24834 bytes
 webclient/media/busy.ogg                   | Bin 0 -> 13960 bytes
 webclient/media/callend.mp3                | Bin 0 -> 12971 bytes
 webclient/media/callend.ogg                | Bin 0 -> 13932 bytes
 webclient/media/ring.mp3                   | Bin 0 -> 19662 bytes
 webclient/media/ring.ogg                   | Bin 0 -> 20636 bytes
 webclient/media/ringback.mp3               | Bin 0 -> 18398 bytes
 webclient/media/ringback.ogg               | Bin 0 -> 8352 bytes
 11 files changed, 75 insertions(+), 14 deletions(-)
 create mode 100644 webclient/media/busy.mp3
 create mode 100644 webclient/media/busy.ogg
 create mode 100644 webclient/media/callend.mp3
 create mode 100644 webclient/media/callend.ogg
 create mode 100644 webclient/media/ring.mp3
 create mode 100644 webclient/media/ring.ogg
 create mode 100644 webclient/media/ringback.mp3
 create mode 100644 webclient/media/ringback.ogg

(limited to 'webclient/index.html')

diff --git a/webclient/app-controller.js b/webclient/app-controller.js
index 064bde3ab2..20b5076727 100644
--- a/webclient/app-controller.js
+++ b/webclient/app-controller.js
@@ -105,6 +105,29 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
             }
         );
     });
+    $rootScope.$watch('currentCall.state', function(newVal, oldVal) {
+        if (newVal == 'ringing') {
+            angular.element('#ringbackAudio')[0].pause();
+            angular.element('#ringAudio')[0].load();
+            angular.element('#ringAudio')[0].play();
+        } else if (newVal == 'invite_sent') {
+            angular.element('#ringAudio')[0].pause();
+            angular.element('#ringbackAudio')[0].load();
+            angular.element('#ringbackAudio')[0].play();
+        } else if (newVal == 'ended' && oldVal == 'connected') {
+            angular.element('#ringAudio')[0].pause();
+            angular.element('#ringbackAudio')[0].pause();
+            angular.element('#callendAudio')[0].play();
+        } else if (newVal == 'ended' && oldVal == 'invite_sent') {
+            angular.element('#ringAudio')[0].pause();
+            angular.element('#ringbackAudio')[0].pause();
+            angular.element('#busyAudio')[0].play();
+        } else if (oldVal == 'invite_sent') {
+            angular.element('#ringbackAudio')[0].pause();
+        } else if (oldVal == 'ringing') {
+            angular.element('#ringAudio')[0].pause();
+        }
+    });
 
     $rootScope.$on(matrixPhoneService.INCOMING_CALL_EVENT, function(ngEvent, call) {
         console.trace("incoming call");
@@ -125,7 +148,7 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
             $animate.addClass(icon, 'callIconRotate');
             $timeout(function(){
                 $rootScope.currentCall = undefined;
-            }, 2000);
+            }, 4070);
         }, 100);
     };
     
@@ -139,7 +162,7 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
             $animate.addClass(icon, 'callIconRotate');
             $timeout(function(){
                 $rootScope.currentCall = undefined;
-            }, 2000);
+            }, 4070);
         }, 100);
     }
 }]);
diff --git a/webclient/components/matrix/matrix-call.js b/webclient/components/matrix/matrix-call.js
index 3cb5e8b693..4eaed89bcf 100644
--- a/webclient/components/matrix/matrix-call.js
+++ b/webclient/components/matrix/matrix-call.js
@@ -120,7 +120,9 @@ angular.module('MatrixCall', [])
         }, function(e) {
             self.getLocalOfferFailed(e);
         });
-        this.state = 'create_offer';
+        $rootScope.$apply(function() {
+            self.state = 'create_offer';
+        });
     };
 
     MatrixCall.prototype.gotUserMediaForAnswer = function(stream) {
@@ -138,7 +140,9 @@ angular.module('MatrixCall', [])
             },
         };
         this.peerConn.createAnswer(function(d) { self.createdAnswer(d); }, function(e) {}, constraints);
-        this.state = 'create_answer';
+        $rootScope.$apply(function() {
+            self.state = 'create_answer';
+        });
     };
 
     MatrixCall.prototype.gotLocalIceCandidate = function(event) {
@@ -177,7 +181,11 @@ angular.module('MatrixCall', [])
             offer: description
         };
         matrixService.sendEvent(this.room_id, 'm.call.invite', undefined, content).then(this.messageSent, this.messageSendFailed);
-        this.state = 'invite_sent';
+
+        self = this;
+        $rootScope.$apply(function() {
+            self.state = 'invite_sent';
+        });
     };
 
     MatrixCall.prototype.createdAnswer = function(description) {
@@ -189,7 +197,10 @@ angular.module('MatrixCall', [])
             answer: description
         };
         matrixService.sendEvent(this.room_id, 'm.call.answer', undefined, content).then(this.messageSent, this.messageSendFailed);
-        this.state = 'connecting';
+        self = this;
+        $rootScope.$apply(function() {
+            self.state = 'connecting';
+        });
     };
 
     MatrixCall.prototype.messageSent = function() {
@@ -211,9 +222,11 @@ angular.module('MatrixCall', [])
         console.trace("Ice connection state changed to: "+this.peerConn.iceConnectionState);
         // ideally we'd consider the call to be connected when we get media but chrome doesn't implement nay of the 'onstarted' events yet
         if (this.peerConn.iceConnectionState == 'completed' || this.peerConn.iceConnectionState == 'connected') {
-            this.state = 'connected';
-            this.didConnect = true;
-            $rootScope.$apply();
+            self = this;
+            $rootScope.$apply(function() {
+                self.state = 'connected';
+                self.didConnect = true;
+            });
         }
     };
 
@@ -251,17 +264,26 @@ angular.module('MatrixCall', [])
     };
 
     MatrixCall.prototype.onRemoteStreamStarted = function(event) {
-        this.state = 'connected';
+        self = this;
+        $rootScope.$apply(function() {
+            self.state = 'connected';
+        });
     };
 
     MatrixCall.prototype.onRemoteStreamEnded = function(event) {
-        this.state = 'ended';
-        this.stopAllMedia();
-        this.onHangup();
+        self = this;
+        $rootScope.$apply(function() {
+            self.state = 'ended';
+            self.stopAllMedia();
+            self.onHangup();
+        });
     };
 
     MatrixCall.prototype.onRemoteStreamTrackStarted = function(event) {
-        this.state = 'connected';
+        self = this;
+        $rootScope.$apply(function() {
+            self.state = 'connected';
+        });
     };
 
     MatrixCall.prototype.onHangupReceived = function() {
diff --git a/webclient/index.html b/webclient/index.html
index 81c7c7d06c..53ac1cb10e 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -70,6 +70,22 @@
                     <button ng-click="hangupCall()">Reject</button>
                 </span>
                 <button ng-click="hangupCall()" ng-show="currentCall && currentCall.state != 'ringing' && currentCall.state != 'ended' && currentCall.state != 'fledgling'">Hang up</button>
+                <audio id="ringAudio" loop>
+                    <source src="media/ring.ogg" type="audio/ogg" />
+                    <source src="media/ring.mp3" type="audio/mpeg" />
+                </audio>
+                <audio id="ringbackAudio" loop>
+                    <source src="media/ringback.ogg" type="audio/ogg" />
+                    <source src="media/ringback.mp3" type="audio/mpeg" />
+                </audio>
+                <audio id="callendAudio">
+                    <source src="media/callend.ogg" type="audio/ogg" />
+                    <source src="media/callend.mp3" type="audio/mpeg" />
+                </audio>
+                <audio id="busyAudio">
+                    <source src="media/busy.ogg" type="audio/ogg" />
+                    <source src="media/busy.mp3" type="audio/mpeg" />
+                </audio>
             </div>
             <a href id="headerUserId" ng-click='goToUserPage(user_id)'>{{ user_id }}</a>
             &nbsp;
diff --git a/webclient/media/busy.mp3 b/webclient/media/busy.mp3
new file mode 100644
index 0000000000..fec27ba4c5
Binary files /dev/null and b/webclient/media/busy.mp3 differ
diff --git a/webclient/media/busy.ogg b/webclient/media/busy.ogg
new file mode 100644
index 0000000000..5d64a7d0d9
Binary files /dev/null and b/webclient/media/busy.ogg differ
diff --git a/webclient/media/callend.mp3 b/webclient/media/callend.mp3
new file mode 100644
index 0000000000..50c34e5640
Binary files /dev/null and b/webclient/media/callend.mp3 differ
diff --git a/webclient/media/callend.ogg b/webclient/media/callend.ogg
new file mode 100644
index 0000000000..927ce1f634
Binary files /dev/null and b/webclient/media/callend.ogg differ
diff --git a/webclient/media/ring.mp3 b/webclient/media/ring.mp3
new file mode 100644
index 0000000000..3c3cdde3f9
Binary files /dev/null and b/webclient/media/ring.mp3 differ
diff --git a/webclient/media/ring.ogg b/webclient/media/ring.ogg
new file mode 100644
index 0000000000..de49b8ae6f
Binary files /dev/null and b/webclient/media/ring.ogg differ
diff --git a/webclient/media/ringback.mp3 b/webclient/media/ringback.mp3
new file mode 100644
index 0000000000..6ee34bf395
Binary files /dev/null and b/webclient/media/ringback.mp3 differ
diff --git a/webclient/media/ringback.ogg b/webclient/media/ringback.ogg
new file mode 100644
index 0000000000..7dbfdcd017
Binary files /dev/null and b/webclient/media/ringback.ogg differ
-- 
cgit 1.4.1


From 25e96f82db21fe0216f748e53aadb8d9dac3da72 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@matrix.org>
Date: Tue, 9 Sep 2014 17:52:01 +0100
Subject: Don't break if you press the hangup button before allowing media
 permission.

---
 webclient/components/matrix/matrix-call.js | 2 +-
 webclient/index.html                       | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

(limited to 'webclient/index.html')

diff --git a/webclient/components/matrix/matrix-call.js b/webclient/components/matrix/matrix-call.js
index aae00a3f77..ef35717da6 100644
--- a/webclient/components/matrix/matrix-call.js
+++ b/webclient/components/matrix/matrix-call.js
@@ -104,7 +104,7 @@ angular.module('MatrixCall', [])
         console.trace("Ending call "+this.call_id);
 
         this.stopAllMedia();
-        this.peerConn.close();
+        if (this.peerConn) this.peerConn.close();
 
         this.hangupParty = 'local';
 
diff --git a/webclient/index.html b/webclient/index.html
index 53ac1cb10e..3b531027e1 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -58,7 +58,8 @@
                         <span ng-show="currentCall.state == 'invite_sent'">Calling...</span>
                         <span ng-show="currentCall.state == 'connecting'">Call Connecting...</span>
                         <span ng-show="currentCall.state == 'connected'">Call Connected</span>
-                        <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'outbound'">Call Rejected</span>
+                        <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'outbound' && currentCall.hangupParty == 'remote'">Call Rejected</span>
+                        <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'outbound' && currentCall.hangupParty == 'local'">Call Canceled</span>
                         <span ng-show="currentCall.state == 'ended' && currentCall.didConnect && currentCall.direction == 'outbound'">Call Ended</span>
                         <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'inbound'">Call Canceled</span>
                         <span ng-show="currentCall.state == 'ended' && currentCall.didConnect && currentCall.direction == 'inbound'">Call Ended</span>
-- 
cgit 1.4.1


From 80b54706638df76b90ca9e6edc65db4f74fdfc7e Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@matrix.org>
Date: Wed, 10 Sep 2014 11:35:14 +0100
Subject: Add text for incoming calls

---
 webclient/index.html | 1 +
 1 file changed, 1 insertion(+)

(limited to 'webclient/index.html')

diff --git a/webclient/index.html b/webclient/index.html
index 3b531027e1..150b7c4407 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -56,6 +56,7 @@
                     <br />
                     <span id="callState">
                         <span ng-show="currentCall.state == 'invite_sent'">Calling...</span>
+                        <span ng-show="currentCall.state == 'ringing'">Incoming Call</span>
                         <span ng-show="currentCall.state == 'connecting'">Call Connecting...</span>
                         <span ng-show="currentCall.state == 'connected'">Call Connected</span>
                         <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'outbound' && currentCall.hangupParty == 'remote'">Call Rejected</span>
-- 
cgit 1.4.1


From e2d2d63bcde7354c2e73b368e7c68d1f2b369562 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@matrix.org>
Date: Wed, 10 Sep 2014 15:45:09 +0100
Subject: Animation on call end icon.

---
 webclient/app-controller.js | 10 +++-------
 webclient/app.css           | 18 +++++++++---------
 webclient/app.js            |  1 +
 webclient/index.html        |  1 +
 4 files changed, 14 insertions(+), 16 deletions(-)

(limited to 'webclient/index.html')

diff --git a/webclient/app-controller.js b/webclient/app-controller.js
index feda0f6b57..8383533cfb 100644
--- a/webclient/app-controller.js
+++ b/webclient/app-controller.js
@@ -160,13 +160,9 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
 
     $rootScope.onCallHangup = function(call) {
         if (call == $rootScope.currentCall) {
-            $timeout(function() {
-                var icon = angular.element('#callEndedIcon');
-                $animate.addClass(icon, 'callIconRotate');
-                $timeout(function(){
-                    $rootScope.currentCall = undefined;
-                }, 4070);
-            }, 100);
+            $timeout(function(){
+                $rootScope.currentCall = undefined;
+            }, 4070);
         }
     }
 }]);
diff --git a/webclient/app.css b/webclient/app.css
index 634fa6bcc1..2564ce3286 100755
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -55,20 +55,20 @@ a:active  { color: #000; }
     margin-left: 4px;
     margin-right: 4px;
     margin-top: 8px;
-    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
 }
 
-.callIconRotate {
-    -webkit-transform: rotateZ(45deg);
-    -moz-transform: rotateZ(45deg);
-    -ms-transform: rotateZ(45deg);
-    -o-transform: rotateZ(45deg);
+#callEndedIcon {
+    transition:all linear 0.5s;
+}
+
+#callEndedIcon {
     transform: rotateZ(45deg);
 }
 
+#callEndedIcon.ng-hide {
+    transform: rotateZ(0deg);
+}
+
 #callPeerImage {
     width: 32px;
     height: 32px;
diff --git a/webclient/app.js b/webclient/app.js
index d25e2a6234..9370f773b3 100644
--- a/webclient/app.js
+++ b/webclient/app.js
@@ -16,6 +16,7 @@ limitations under the License.
 
 var matrixWebClient = angular.module('matrixWebClient', [
     'ngRoute',
+    'ngAnimate',
     'MatrixWebClientController',
     'LoginController',
     'RegisterController',
diff --git a/webclient/index.html b/webclient/index.html
index 150b7c4407..dd2393722c 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -15,6 +15,7 @@
     <script src="js/angular.min.js"></script>
     <script src="js/angular-route.min.js"></script>
     <script src="js/angular-sanitize.min.js"></script>
+    <script src="js/angular-animate.min.js"></script>
     <script type='text/javascript' src='js/ng-infinite-scroll-matrix.js'></script>
     <script src="app.js"></script>
     <script src="config.js"></script>
-- 
cgit 1.4.1


From aa347b52bace5cfe1ff528ad16973e02ae1b5dc1 Mon Sep 17 00:00:00 2001
From: Emmanuel ROHEE <erohee@amdocs.com>
Date: Thu, 11 Sep 2014 15:07:44 +0200
Subject: Use autofill-event.js to workaround browsers issue: Form model
 doesn't update on autocomplete
 https://github.com/angular/angular.js/issues/1460

---
 webclient/index.html           |   1 +
 webclient/js/autofill-event.js | 117 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 118 insertions(+)
 create mode 100755 webclient/js/autofill-event.js

(limited to 'webclient/index.html')

diff --git a/webclient/index.html b/webclient/index.html
index dd2393722c..9eea08215c 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -17,6 +17,7 @@
     <script src="js/angular-sanitize.min.js"></script>
     <script src="js/angular-animate.min.js"></script>
     <script type='text/javascript' src='js/ng-infinite-scroll-matrix.js'></script>
+    <script type='text/javascript' src='js/autofill-event.js'></script>
     <script src="app.js"></script>
     <script src="config.js"></script>
     <script src="app-controller.js"></script>
diff --git a/webclient/js/autofill-event.js b/webclient/js/autofill-event.js
new file mode 100755
index 0000000000..006f83e1be
--- /dev/null
+++ b/webclient/js/autofill-event.js
@@ -0,0 +1,117 @@
+/**
+ * Autofill event polyfill ##version:1.0.0##
+ * (c) 2014 Google, Inc.
+ * License: MIT
+ */
+(function(window) {
+  var $ = window.jQuery || window.angular.element;
+  var rootElement = window.document.documentElement,
+    $rootElement = $(rootElement);
+
+  addGlobalEventListener('change', markValue);
+  addValueChangeByJsListener(markValue);
+
+  $.prototype.checkAndTriggerAutoFillEvent = jqCheckAndTriggerAutoFillEvent;
+
+  // Need to use blur and not change event
+  // as Chrome does not fire change events in all cases an input is changed
+  // (e.g. when starting to type and then finish the input by auto filling a username)
+  addGlobalEventListener('blur', function(target) {
+    // setTimeout needed for Chrome as it fills other
+    // form fields a little later...
+    window.setTimeout(function() {
+      findParentForm(target).find('input').checkAndTriggerAutoFillEvent();
+    }, 20);
+  });
+
+  window.document.addEventListener('DOMContentLoaded', function() {
+    // The timeout is needed for Chrome as it auto fills
+    // login forms some time after DOMContentLoaded!
+    window.setTimeout(function() {
+      $rootElement.find('input').checkAndTriggerAutoFillEvent();
+    }, 200);
+  }, false);
+
+  return;
+
+  // ----------
+
+  function jqCheckAndTriggerAutoFillEvent() {
+    var i, el;
+    for (i=0; i<this.length; i++) {
+      el = this[i];
+      if (!valueMarked(el)) {
+        markValue(el);
+        triggerChangeEvent(el);
+      }
+    }
+  }
+
+  function valueMarked(el) {
+    var val = el.value,
+         $$currentValue = el.$$currentValue;
+    if (!val && !$$currentValue) {
+      return true;
+    }
+    return val === $$currentValue;
+  }
+
+  function markValue(el) {
+    el.$$currentValue = el.value;
+  }
+
+  function addValueChangeByJsListener(listener) {
+    var jq = window.jQuery || window.angular.element,
+        jqProto = jq.prototype;
+    var _val = jqProto.val;
+    jqProto.val = function(newValue) {
+      var res = _val.apply(this, arguments);
+      if (arguments.length > 0) {
+        forEach(this, function(el) {
+          listener(el, newValue);
+        });
+      }
+      return res;
+    }
+  }
+
+  function addGlobalEventListener(eventName, listener) {
+    // Use a capturing event listener so that
+    // we also get the event when it's stopped!
+    // Also, the blur event does not bubble.
+    rootElement.addEventListener(eventName, onEvent, true);
+
+    function onEvent(event) {
+      var target = event.target;
+      listener(target);
+    }
+  }
+
+  function findParentForm(el) {
+    while (el) {
+      if (el.nodeName === 'FORM') {
+        return $(el);
+      }
+      el = el.parentNode;
+    }
+    return $();
+  }
+
+  function forEach(arr, listener) {
+    if (arr.forEach) {
+      return arr.forEach(listener);
+    }
+    var i;
+    for (i=0; i<arr.length; i++) {
+      listener(arr[i]);
+    }
+  }
+
+  function triggerChangeEvent(element) {
+    var doc = window.document;
+    var event = doc.createEvent("HTMLEvents");
+    event.initEvent("change", true, true);
+    element.dispatchEvent(event);
+  }
+
+})(window);
-- 
cgit 1.4.1


From dd2b933a0d92f24421a56ec350ae0f80e32d2d3e Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@matrix.org>
Date: Tue, 16 Sep 2014 14:46:13 +0100
Subject: Use event age to recognise which calls are current and which aren't
 and hence support answering calls that were placed before we loaded the page.

---
 webclient/app-controller.js                        |  4 ++
 webclient/components/matrix/matrix-call.js         | 26 ++++++---
 .../components/matrix/matrix-phone-service.js      | 62 ++++++++++++++++++----
 webclient/index.html                               |  3 +-
 4 files changed, 79 insertions(+), 16 deletions(-)

(limited to 'webclient/index.html')

diff --git a/webclient/app-controller.js b/webclient/app-controller.js
index 6c3759878b..6338624486 100644
--- a/webclient/app-controller.js
+++ b/webclient/app-controller.js
@@ -130,6 +130,10 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
             angular.element('#ringAudio')[0].pause();
             angular.element('#ringbackAudio')[0].pause();
             angular.element('#busyAudio')[0].play();
+        } else if (newVal == 'ended' && oldVal == 'invite_sent' && $rootScope.currentCall.hangupParty == 'local' && $rootScope.currentCall.hangupReason == 'invite_timeout') {
+            angular.element('#ringAudio')[0].pause();
+            angular.element('#ringbackAudio')[0].pause();
+            angular.element('#busyAudio')[0].play();
         } else if (oldVal == 'invite_sent') {
             angular.element('#ringbackAudio')[0].pause();
         } else if (oldVal == 'ringing') {
diff --git a/webclient/components/matrix/matrix-call.js b/webclient/components/matrix/matrix-call.js
index fd21198d24..650c415c83 100644
--- a/webclient/components/matrix/matrix-call.js
+++ b/webclient/components/matrix/matrix-call.js
@@ -53,6 +53,8 @@ angular.module('MatrixCall', [])
         this.candidateSendTries = 0;
     }
 
+    MatrixCall.CALL_TIMEOUT = 60000;
+
     MatrixCall.prototype.createPeerConnection = function() {
         var stunServer = 'stun:stun.l.google.com:19302';
         var pc;
@@ -86,6 +88,14 @@ angular.module('MatrixCall', [])
         this.direction = 'inbound';
     };
 
+    // perverse as it may seem, sometimes we want to instantiate a call with a hangup message
+    // (because when getting the state of the room on load, events come in reverse order and
+    // we want to remember that a call has been hung up)
+    MatrixCall.prototype.initWithHangup = function(msg) {
+        this.msg = msg;
+        this.state = 'ended';
+    };
+
     MatrixCall.prototype.answer = function() {
         console.log("Answering call "+this.call_id);
         var self = this;
@@ -188,14 +198,12 @@ angular.module('MatrixCall', [])
             console.log("Ignoring remote ICE candidate because call has ended");
             return;
         }
-        var candidateObject = new RTCIceCandidate({
-            sdpMLineIndex: cand.label,
-            candidate: cand.candidate
-        });
-        this.peerConn.addIceCandidate(candidateObject, function() {}, function(e) {});
+        this.peerConn.addIceCandidate(new RTCIceCandidate(cand), function() {}, function(e) {});
     };
 
     MatrixCall.prototype.receivedAnswer = function(msg) {
+        if (this.state == 'ended') return;
+
         this.peerConn.setRemoteDescription(new RTCSessionDescription(msg.answer), this.onSetRemoteDescriptionSuccess, this.onSetRemoteDescriptionError);
         this.state = 'connecting';
     };
@@ -213,11 +221,17 @@ angular.module('MatrixCall', [])
         var content = {
             version: 0,
             call_id: this.call_id,
-            offer: description
+            offer: description,
+            lifetime: MatrixCall.CALL_TIMEOUT
         };
         this.sendEventWithRetry('m.call.invite', content);
 
         var self = this;
+        $timeout(function() {
+            self.hangupReason = 'invite_timeout';
+            self.hangup();
+        }, MatrixCall.CALL_TIMEOUT);
+
         $rootScope.$apply(function() {
             self.state = 'invite_sent';
         });
diff --git a/webclient/components/matrix/matrix-phone-service.js b/webclient/components/matrix/matrix-phone-service.js
index 2d0732a8da..3e99a7d112 100644
--- a/webclient/components/matrix/matrix-phone-service.js
+++ b/webclient/components/matrix/matrix-phone-service.js
@@ -24,22 +24,52 @@ angular.module('matrixPhoneService', [])
     matrixPhoneService.INCOMING_CALL_EVENT = "INCOMING_CALL_EVENT";
     matrixPhoneService.REPLACED_CALL_EVENT = "REPLACED_CALL_EVENT";
     matrixPhoneService.allCalls = {};
+    // a place to save candidates that come in for calls we haven't got invites for yet (when paginating backwards)
+    matrixPhoneService.candidatesByCall = {};
 
     matrixPhoneService.callPlaced = function(call) {
         matrixPhoneService.allCalls[call.call_id] = call;
     };
 
     $rootScope.$on(eventHandlerService.CALL_EVENT, function(ngEvent, event, isLive) {
-        if (!isLive) return; // until matrix supports expiring messages
         if (event.user_id == matrixService.config().user_id) return;
+
         var msg = event.content;
+
         if (event.type == 'm.call.invite') {
+            if (event.age == undefined || msg.lifetime == undefined) {
+                // if the event doesn't have either an age (the HS is too old) or a lifetime
+                // (the sending client was too old when it sent it) then fall back to old behaviour
+                if (!isLive) return; // until matrix supports expiring messages
+            }
+
+            if (event.age > msg.lifetime) {
+                console.log("Ignoring expired call event of type "+event.type);
+                return;
+            }
+
+            var call = undefined;
+            if (!isLive) {
+                // if this event wasn't live then this call may already be over
+                call = matrixPhoneService.allCalls[msg.call_id];
+                if (call && call.state == 'ended') {
+                    return;
+                }
+            }
+
             var MatrixCall = $injector.get('MatrixCall');
             var call = new MatrixCall(event.room_id);
             call.call_id = msg.call_id;
             call.initWithInvite(msg);
             matrixPhoneService.allCalls[call.call_id] = call;
 
+            // if we stashed candidate events for that call ID, play them back now
+            if (!isLive && matrixPhoneService.candidatesByCall[call.call_id] != undefined) {
+                for (var i = 0; i < matrixPhoneService.candidatesByCall[call.call_id].length; ++i) {
+                    call.gotRemoteIceCandidate(matrixPhoneService.candidatesByCall[call.call_id][i]);
+                }
+            }
+
             // Were we trying to call that user (room)?
             var existingCall;
             var callIds = Object.keys(matrixPhoneService.allCalls);
@@ -79,21 +109,35 @@ angular.module('matrixPhoneService', [])
             call.receivedAnswer(msg);
         } else if (event.type == 'm.call.candidates') {
             var call = matrixPhoneService.allCalls[msg.call_id];
-            if (!call) {
+            if (!call && isLive) {
                 console.log("Got candidates for unknown call ID "+msg.call_id);
                 return;
-            }
-            for (var i = 0; i < msg.candidates.length; ++i) {
-                call.gotRemoteIceCandidate(msg.candidates[i]);
+            } else if (!call) {
+                if (matrixPhoneService.candidatesByCall[msg.call_id] == undefined) {
+                    matrixPhoneService.candidatesByCall[msg.call_id] = [];
+                }
+                matrixPhoneService.candidatesByCall[msg.call_id] = matrixPhoneService.candidatesByCall[msg.call_id].concat(msg.candidates);
+            } else {
+                for (var i = 0; i < msg.candidates.length; ++i) {
+                    call.gotRemoteIceCandidate(msg.candidates[i]);
+                }
             }
         } else if (event.type == 'm.call.hangup') {
             var call = matrixPhoneService.allCalls[msg.call_id];
-            if (!call) {
+            if (!call && isLive) {
                 console.log("Got hangup for unknown call ID "+msg.call_id);
-                return;
+            } else if (!call) {
+                // if not live, store the fact that the call has ended because we're probably getting events backwards so
+                // the hangup will come before the invite
+                var MatrixCall = $injector.get('MatrixCall');
+                var call = new MatrixCall(event.room_id);
+                call.call_id = msg.call_id;
+                call.initWithHangup(msg);
+                matrixPhoneService.allCalls[msg.call_id] = call;
+            } else {
+                call.onHangupReceived();
+                delete(matrixPhoneService.allCalls[msg.call_id]);
             }
-            call.onHangupReceived();
-            delete(matrixPhoneService.allCalls[msg.call_id]);
         }
     });
     
diff --git a/webclient/index.html b/webclient/index.html
index 9eea08215c..7e4dcb8345 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -62,7 +62,8 @@
                         <span ng-show="currentCall.state == 'connecting'">Call Connecting...</span>
                         <span ng-show="currentCall.state == 'connected'">Call Connected</span>
                         <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'outbound' && currentCall.hangupParty == 'remote'">Call Rejected</span>
-                        <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'outbound' && currentCall.hangupParty == 'local'">Call Canceled</span>
+                        <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'outbound' && currentCall.hangupParty == 'local' && currentCall.hangupReason == undefined">Call Canceled</span>
+                        <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'outbound' && currentCall.hangupParty == 'local' && currentCall.hangupReason == 'invite_timeout'">User Not Responding</span>
                         <span ng-show="currentCall.state == 'ended' && currentCall.didConnect && currentCall.direction == 'outbound'">Call Ended</span>
                         <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'inbound'">Call Canceled</span>
                         <span ng-show="currentCall.state == 'ended' && currentCall.didConnect && currentCall.direction == 'inbound'">Call Ended</span>
-- 
cgit 1.4.1


From 1fb2c831e824d89aa849fc2aee45f5f1162842b2 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@matrix.org>
Date: Wed, 17 Sep 2014 16:26:35 +0100
Subject: Video calling (in a tiny box at the moment)

---
 webclient/app-controller.js                |  2 +
 webclient/app.css                          | 16 ++++++
 webclient/components/matrix/matrix-call.js | 86 ++++++++++++++++++++++++++----
 webclient/index.html                       |  8 ++-
 webclient/room/room-controller.js          |  8 ++-
 webclient/room/room.html                   |  1 +
 6 files changed, 106 insertions(+), 15 deletions(-)

(limited to 'webclient/index.html')

diff --git a/webclient/app-controller.js b/webclient/app-controller.js
index 6338624486..e9912f886d 100644
--- a/webclient/app-controller.js
+++ b/webclient/app-controller.js
@@ -150,6 +150,8 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
         }
         call.onError = $scope.onCallError;
         call.onHangup = $scope.onCallHangup;
+        call.localVideoElement = angular.element('#localVideo')[0];
+        call.remoteVideoElement = angular.element('#remoteVideo')[0];
         $rootScope.currentCall = call;
     });
 
diff --git a/webclient/app.css b/webclient/app.css
index 4a4ba7b8f4..1845b34910 100755
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -89,6 +89,21 @@ a:active  { color: #000; }
     font-size: 80%;
 }
 
+#localVideo {
+    position: absolute;
+    top: 32px;
+    left: 160px;
+    width: 128px;
+    height: 72px;
+}
+#remoteVideo {
+    position: absolute;
+    top: 32px;
+    left: 300px;
+    width: 128px;
+    height: 72px;
+}
+
 #headerContent {
     color: #ccc;
     max-width: 1280px;
@@ -96,6 +111,7 @@ a:active  { color: #000; }
     text-align: right;
     height: 32px;
     line-height: 32px;
+    position: relative;
 }
 
 #headerContent a:link,
diff --git a/webclient/components/matrix/matrix-call.js b/webclient/components/matrix/matrix-call.js
index bf1e61ad7e..2f0bfddaf5 100644
--- a/webclient/components/matrix/matrix-call.js
+++ b/webclient/components/matrix/matrix-call.js
@@ -51,6 +51,12 @@ angular.module('MatrixCall', [])
         // a queue for candidates waiting to go out. We try to amalgamate candidates into a single candidate message where possible
         this.candidateSendQueue = [];
         this.candidateSendTries = 0;
+
+        var self = this;
+        $rootScope.$watch(this.remoteVideoElement, function (oldValue, newValue) {
+            self.tryPlayRemoteStream();
+        });
+
     }
 
     MatrixCall.CALL_TIMEOUT = 60000;
@@ -71,13 +77,39 @@ angular.module('MatrixCall', [])
         return pc;
     }
 
-    MatrixCall.prototype.placeCall = function(config) {
+    MatrixCall.prototype.getUserMediaVideoContraints = function(callType) {
+        switch (callType) {
+            case 'voice':
+                return ({audio: true, video: false});
+            case 'video':
+                return ({audio: true, video: {
+                    mandatory: {
+                        minWidth: 640,
+                        maxWidth: 640,
+                        minHeight: 360,
+                        maxHeight: 360,
+                    }
+                }});
+        }
+    };
+
+    MatrixCall.prototype.placeVoiceCall = function() {
+        this.placeCallWithConstraints(this.getUserMediaVideoContraints('voice'));
+        this.type = 'voice';
+    };
+
+    MatrixCall.prototype.placeVideoCall = function(config) {
+        this.placeCallWithConstraints(this.getUserMediaVideoContraints('video'));
+        this.type = 'video';
+    };
+
+    MatrixCall.prototype.placeCallWithConstraints = function(constraints) {
         var self = this;
         matrixPhoneService.callPlaced(this);
-        navigator.getUserMedia({audio: config.audio, video: config.video}, function(s) { self.gotUserMediaForInvite(s); }, function(e) { self.getUserMediaFailed(e); });
+        navigator.getUserMedia(constraints, function(s) { self.gotUserMediaForInvite(s); }, function(e) { self.getUserMediaFailed(e); });
         this.state = 'wait_local_media';
         this.direction = 'outbound';
-        this.config = config;
+        this.config = constraints;
     };
 
     MatrixCall.prototype.initWithInvite = function(event) {
@@ -110,7 +142,7 @@ angular.module('MatrixCall', [])
         console.log("Answering call "+this.call_id);
         var self = this;
         if (!this.localAVStream && !this.waitForLocalAVStream) {
-            navigator.getUserMedia({audio: true, video: false}, function(s) { self.gotUserMediaForAnswer(s); }, function(e) { self.getUserMediaFailed(e); });
+            navigator.getUserMedia(this.getUserMediaVideoContraints(this.type), function(s) { self.gotUserMediaForAnswer(s); }, function(e) { self.getUserMediaFailed(e); });
             this.state = 'wait_local_media';
         } else if (this.localAVStream) {
             this.gotUserMediaForAnswer(this.localAVStream);
@@ -156,6 +188,13 @@ angular.module('MatrixCall', [])
         }
         if (this.state == 'ended') return;
 
+        if (this.localVideoElement && this.type == 'video') {
+            var vidTrack = stream.getVideoTracks()[0];
+            this.localVideoElement.src = URL.createObjectURL(stream);
+            this.localVideoElement.muted = true;
+            this.localVideoElement.play();
+        }
+
         this.localAVStream = stream;
         var audioTracks = stream.getAudioTracks();
         for (var i = 0; i < audioTracks.length; i++) {
@@ -177,6 +216,13 @@ angular.module('MatrixCall', [])
     MatrixCall.prototype.gotUserMediaForAnswer = function(stream) {
         if (this.state == 'ended') return;
 
+        if (this.localVideoElement && this.type == 'video') {
+            var vidTrack = stream.getVideoTracks()[0];
+            this.localVideoElement.src = URL.createObjectURL(stream);
+            this.localVideoElement.muted = true;
+            this.localVideoElement.play();
+        }
+
         this.localAVStream = stream;
         var audioTracks = stream.getAudioTracks();
         for (var i = 0; i < audioTracks.length; i++) {
@@ -187,7 +233,7 @@ angular.module('MatrixCall', [])
         var constraints = {
             'mandatory': {
                 'OfferToReceiveAudio': true,
-                'OfferToReceiveVideo': false
+                'OfferToReceiveVideo': this.type == 'video'
             },
         };
         this.peerConn.createAnswer(function(d) { self.createdAnswer(d); }, function(e) {}, constraints);
@@ -218,6 +264,7 @@ angular.module('MatrixCall', [])
         this.state = 'connecting';
     };
 
+
     MatrixCall.prototype.gotLocalOffer = function(description) {
         console.log("Created offer: "+description);
 
@@ -305,6 +352,14 @@ angular.module('MatrixCall', [])
 
         this.remoteAVStream = s;
 
+        if (this.direction == 'inbound') {
+            if (s.getVideoTracks().length > 0) {
+                this.type = 'video';
+            } else {
+                this.type = 'voice';
+            }
+        }
+
         var self = this;
         forAllTracksOnStream(s, function(t) {
             // not currently implemented in chrome
@@ -314,9 +369,16 @@ angular.module('MatrixCall', [])
         event.stream.onended = function(e) { self.onRemoteStreamEnded(e); }; 
         // not currently implemented in chrome
         event.stream.onstarted = function(e) { self.onRemoteStreamStarted(e); };
-        var player = new Audio();
-        player.src = URL.createObjectURL(s);
-        player.play();
+
+        this.tryPlayRemoteStream();
+    };
+
+    MatrixCall.prototype.tryPlayRemoteStream = function(event) {
+        if (this.remoteVideoElement && this.remoteAVStream) {
+            var player = this.remoteVideoElement;
+            player.src = URL.createObjectURL(this.remoteAVStream);
+            player.play();
+        }
     };
 
     MatrixCall.prototype.onRemoteStreamStarted = function(event) {
@@ -350,7 +412,7 @@ angular.module('MatrixCall', [])
         this.state = 'ended';
         this.hangupParty = 'remote';
         this.stopAllMedia();
-        if (this.peerConn.signalingState != 'closed') this.peerConn.close();
+        if (this.peerConn && this.peerConn.signalingState != 'closed') this.peerConn.close();
         if (this.onHangup) this.onHangup(this);
     };
 
@@ -361,13 +423,15 @@ angular.module('MatrixCall', [])
             newCall.waitForLocalAVStream = true;
         } else if (this.state == 'create_offer') {
             console.log("Handing local stream to new call");
-            newCall.localAVStream = this.localAVStream;
+            newCall.gotUserMediaForAnswer(this.localAVStream);
             delete(this.localAVStream);
         } else if (this.state == 'invite_sent') {
             console.log("Handing local stream to new call");
-            newCall.localAVStream = this.localAVStream;
+            newCall.gotUserMediaForAnswer(this.localAVStream);
             delete(this.localAVStream);
         }
+        newCall.localVideoElement = this.localVideoElement;
+        newCall.remoteVideoElement = this.remoteVideoElement;
         this.successor = newCall;
         this.hangup(true);
     };
diff --git a/webclient/index.html b/webclient/index.html
index 7e4dcb8345..19b1a3b288 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -58,7 +58,8 @@
                     <br />
                     <span id="callState">
                         <span ng-show="currentCall.state == 'invite_sent'">Calling...</span>
-                        <span ng-show="currentCall.state == 'ringing'">Incoming Call</span>
+                        <span ng-show="currentCall.state == 'ringing' && currentCall.type == 'video'">Incoming Video Call</span>
+                        <span ng-show="currentCall.state == 'ringing' && currentCall.type == 'voice'">Incoming Voice Call</span>
                         <span ng-show="currentCall.state == 'connecting'">Call Connecting...</span>
                         <span ng-show="currentCall.state == 'connected'">Call Connected</span>
                         <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'outbound' && currentCall.hangupParty == 'remote'">Call Rejected</span>
@@ -71,7 +72,7 @@
                     </span>
                 </div>
                 <span ng-show="currentCall.state == 'ringing'">
-                    <button ng-click="answerCall()">Answer</button>
+                    <button ng-click="answerCall()">Answer {{ currentCall.type }} call</button>
                     <button ng-click="hangupCall()">Reject</button>
                 </span>
                 <button ng-click="hangupCall()" ng-show="currentCall && currentCall.state != 'ringing' && currentCall.state != 'ended' && currentCall.state != 'fledgling'">Hang up</button>
@@ -92,6 +93,9 @@
                     <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>
+
             <a href id="headerUserId" ng-click='goToUserPage(user_id)'>{{ user_id }}</a>
             &nbsp;
             <button ng-click='goToPage("/")'>Home</button>
diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js
index 2c9a3836e7..c8bcf88ff3 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -837,7 +837,9 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
         var call = new MatrixCall($scope.room_id);
         call.onError = $rootScope.onCallError;
         call.onHangup = $rootScope.onCallHangup;
-        call.placeCall({audio: true, video: false});
+        // remote video element is used for playing audio in voice calls
+        call.remoteVideoElement = angular.element('#remoteVideo')[0];
+        call.placeVoiceCall();
         $rootScope.currentCall = call;
     };
 
@@ -845,7 +847,9 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
         var call = new MatrixCall($scope.room_id);
         call.onError = $rootScope.onCallError;
         call.onHangup = $rootScope.onCallHangup;
-        call.placeCall({audio: true, video: true});
+        call.localVideoElement = angular.element('#localVideo')[0];
+        call.remoteVideoElement = angular.element('#remoteVideo')[0];
+        call.placeVideoCall();
         $rootScope.currentCall = call;
     };
 
diff --git a/webclient/room/room.html b/webclient/room/room.html
index 9d617eadd8..94077576a2 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -173,6 +173,7 @@
                 </span>
                 <button ng-click="leaveRoom()" ng-disabled="state.permission_denied">Leave</button>
                 <button ng-click="startVoiceCall()" ng-show="(currentCall == undefined || currentCall.state == 'ended') && memberCount() == 2" ng-disabled="state.permission_denied">Voice Call</button>
+                <button ng-click="startVideoCall()" ng-show="(currentCall == undefined || currentCall.state == 'ended') && memberCount() == 2" ng-disabled="state.permission_denied">Video Call</button>
             </div>
         
             {{ feedback }}
-- 
cgit 1.4.1


From e932e5237eaea4c08e6f7bcd849e4be6bd2e3f98 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@matrix.org>
Date: Thu, 18 Sep 2014 11:04:45 +0100
Subject: WIP video chat layout

---
 webclient/app-controller.js                |  7 +++++--
 webclient/app.css                          | 28 ++++++++++++++++++++++++++++
 webclient/components/matrix/matrix-call.js |  2 ++
 webclient/index.html                       |  5 +++--
 4 files changed, 38 insertions(+), 4 deletions(-)

(limited to 'webclient/index.html')

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;
-- 
cgit 1.4.1


From 3bd8cbc62fd8ac47acd56ec50360259f6098c66b Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@matrix.org>
Date: Thu, 18 Sep 2014 15:51:30 +0100
Subject: Prettier and stabler video with basic support for viewing mode. For
 now, transition into 'large' mode is disabled.

---
 webclient/app-controller.js                | 22 ++++++++++++++++++--
 webclient/app.css                          | 32 +++++++++++++++++++++---------
 webclient/components/matrix/matrix-call.js | 22 +++++++++++++++++---
 webclient/index.html                       | 13 +++++++-----
 4 files changed, 70 insertions(+), 19 deletions(-)

(limited to 'webclient/index.html')

diff --git a/webclient/app-controller.js b/webclient/app-controller.js
index f63bb32f4f..7f48148aaa 100644
--- a/webclient/app-controller.js
+++ b/webclient/app-controller.js
@@ -93,7 +93,13 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
     };
 
     $rootScope.$watch('currentCall', function(newVal, oldVal) {
-        if (!$rootScope.currentCall) return;
+        if (!$rootScope.currentCall) {
+            // This causes the still frame to be flushed out of the video elements,
+            // avoiding a flash of the last frame of the previous call when starting the next
+            angular.element('#localVideo')[0].load();
+            angular.element('#remoteVideo')[0].load();
+            return;
+        }
 
         var roomMembers = angular.copy($rootScope.events.rooms[$rootScope.currentCall.room_id].members);
         delete roomMembers[matrixService.config().user_id];
@@ -140,7 +146,19 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
         } else if (oldVal == 'ringing') {
             angular.element('#ringAudio')[0].pause();
         } else if (newVal == 'connected') {
-            $scope.videoMode = 'large';
+            $timeout(function() {
+                //if ($scope.currentCall.type == 'video') $scope.videoMode = 'large';
+            }, 5000);
+        }
+
+        if ($rootScope.currentCall && $rootScope.currentCall.type == 'video' && $rootScope.currentCall.state != 'connected') {
+            $scope.videoMode = 'mini';
+        }
+    });
+    $rootScope.$watch('currentCall.type', function(newVal, oldVal) {
+        // need to listen for this too as the type of the call won't be know when it's created
+        if ($rootScope.currentCall && $rootScope.currentCall.type == 'video' && $rootScope.currentCall.state != 'connected') {
+            $scope.videoMode = 'mini';
         }
     });
 
diff --git a/webclient/app.css b/webclient/app.css
index 69e608287e..7b6051e0b9 100755
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -97,30 +97,44 @@ a:active  { color: #000; }
     left: 0px;
     z-index: 1;
     background-color: rgba(0,0,0,0.0);
+    pointer-events: none;
     transition: background-color linear 300ms;
 }
 
 #videoBackground.large {
     background-color: rgba(0,0,0,0.85);
+    pointer-events: auto;
 }
 
-#localVideo {
-    position: absolute;
+#videoContainer {
+    max-width: 1280px;
+    margin: auto;
     top: 32px;
-    left: 160px;
+}
+
+#videoContainer.large {
+}
+
+#localVideo.mini {
+    position: relative;
+    left: 120px;
     width: 128px;
     height: 72px;
-    z-index: 2;
+}
+
+#localVideo.ended {
+    -webkit-filter: grayscale(1);
 }
 
 #remoteVideo {
-    position: absolute;
-    top: 32px;
-    left: 300px;
+    transition: all linear 300ms;
+}
+
+#remoteVideo.mini {
+    position: relative;
+    left: 120px;
     width: 128px;
     height: 72px;
-    z-index: 2;
-    transition: all linear 300ms;
 }
 
 #remoteVideo.large {
diff --git a/webclient/components/matrix/matrix-call.js b/webclient/components/matrix/matrix-call.js
index 636259297e..5ba782bac8 100644
--- a/webclient/components/matrix/matrix-call.js
+++ b/webclient/components/matrix/matrix-call.js
@@ -65,7 +65,7 @@ angular.module('MatrixCall', [])
         var stunServer = 'stun:stun.l.google.com:19302';
         var pc;
         if (window.mozRTCPeerConnection) {
-            pc = window.mozRTCPeerConnection({'url': stunServer});
+            pc = new window.mozRTCPeerConnection({'url': stunServer});
         } else {
             pc = new window.RTCPeerConnection({"iceServers":[{"urls":"stun:stun.l.google.com:19302"}]});
         }
@@ -118,6 +118,17 @@ angular.module('MatrixCall', [])
         this.peerConn.setRemoteDescription(new RTCSessionDescription(this.msg.offer), this.onSetRemoteDescriptionSuccess, this.onSetRemoteDescriptionError);
         this.state = 'ringing';
         this.direction = 'inbound';
+
+        if (window.mozRTCPeerConnection) {
+            // firefox's RTCPeerConnection doesn't add streams until it starts getting media on them
+            // so we need to figure out whether a video channel has been offered by ourselves.
+            if (this.msg.offer.sdp.indexOf('m=video') > -1) {
+                this.type = 'video';
+            } else {
+                this.type = 'voice';
+            }
+        }
+
         var self = this;
         $timeout(function() {
             if (self.state == 'ringing') {
@@ -167,7 +178,10 @@ angular.module('MatrixCall', [])
     MatrixCall.prototype.hangup = function(suppressEvent) {
         console.log("Ending call "+this.call_id);
 
-        this.remoteVideoElement.pause();
+        // pausing now keeps the last frame (ish) of the video call in the video element
+        // rather than it just turning black straight away
+        if (this.remoteVideoElement) this.remoteVideoElement.pause();
+        if (this.localVideoElement) this.localVideoElement.pause();
 
         this.stopAllMedia();
         if (this.peerConn) this.peerConn.close();
@@ -318,7 +332,7 @@ angular.module('MatrixCall', [])
     };
 
     MatrixCall.prototype.getUserMediaFailed = function() {
-        this.onError("Couldn't start capturing audio! Is your microphone set up?");
+        this.onError("Couldn't start capturing! Is your microphone set up?");
         this.hangup();
     };
 
@@ -411,6 +425,8 @@ angular.module('MatrixCall', [])
 
     MatrixCall.prototype.onHangupReceived = function() {
         console.log("Hangup received");
+        if (this.remoteVideoElement) this.remoteVideoElement.pause();
+        if (this.localVideoElement) this.localVideoElement.pause();
         this.state = 'ended';
         this.hangupParty = 'remote';
         this.stopAllMedia();
diff --git a/webclient/index.html b/webclient/index.html
index 05801a93bc..78a68753d4 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -45,7 +45,12 @@
 </head>
 
 <body>
-    <div id="videoBackground" ng-class="videoMode" ng-show="videoMode == 'large' || videoMode == 'fullscreen'"></div>
+    <div id="videoBackground" ng-class="videoMode">
+        <div id="videoContainer" ng-class="videoMode">
+            <video id="localVideo" ng-class="[videoMode, currentCall.state]" ng-show="currentCall && currentCall.type == 'video' && (currentCall.state == 'connected' || currentCall.state == 'connecting' || currentCall.state == 'invite_sent' || currentCall.state == 'ended')"></video>
+            <video id="remoteVideo" ng-class="[videoMode, currentCall.state]" ng-show="currentCall && currentCall.type == 'video' && (currentCall.state == 'connected' || currentCall.state == 'ended')"></video>
+        </div>
+    </div>
 
     <div id="header">
         <!-- Do not show buttons on the login page -->
@@ -59,8 +64,8 @@
                     <br />
                     <span id="callState">
                         <span ng-show="currentCall.state == 'invite_sent'">Calling...</span>
-                        <span ng-show="currentCall.state == 'ringing' && currentCall.type == 'video'">Incoming Video Call</span>
-                        <span ng-show="currentCall.state == 'ringing' && currentCall.type == 'voice'">Incoming Voice Call</span>
+                        <span ng-show="currentCall.state == 'ringing' && currentCall && currentCall.type == 'video'">Incoming Video Call</span>
+                        <span ng-show="currentCall.state == 'ringing' && currentCall && currentCall.type == 'voice'">Incoming Voice Call</span>
                         <span ng-show="currentCall.state == 'connecting'">Call Connecting...</span>
                         <span ng-show="currentCall.state == 'connected'">Call Connected</span>
                         <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'outbound' && currentCall.hangupParty == 'remote'">Call Rejected</span>
@@ -94,8 +99,6 @@
                     <source src="media/busy.mp3" type="audio/mpeg" />
                 </audio>
             </div>
-            <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;
-- 
cgit 1.4.1


From da8b5a53671911bd158865f7af4b04b3b0168dfa Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@matrix.org>
Date: Fri, 19 Sep 2014 16:18:15 +0100
Subject: First working version of UI chrome for video calls.

---
 webclient/app-controller.js | 10 ++++++++--
 webclient/app.css           | 36 +++++++++++++++++++++++++-----------
 webclient/index.html        |  3 ++-
 3 files changed, 35 insertions(+), 14 deletions(-)

(limited to 'webclient/index.html')

diff --git a/webclient/app-controller.js b/webclient/app-controller.js
index 7f48148aaa..0e823b43e7 100644
--- a/webclient/app-controller.js
+++ b/webclient/app-controller.js
@@ -26,6 +26,12 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
          
     // Check current URL to avoid to display the logout button on the login page
     $scope.location = $location.path();
+
+    // disable nganimate for the local and remote video elements because ngAnimate appears
+    // to be buggy and leaves animation classes on the video elements causing them to show
+    // when they should not (their animations are pure CSS3)
+    $animate.enabled(false, angular.element('#localVideo'));
+    $animate.enabled(false, angular.element('#remoteVideo'));
     
     // Update the location state when the ng location changed
     $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
@@ -147,8 +153,8 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
             angular.element('#ringAudio')[0].pause();
         } else if (newVal == 'connected') {
             $timeout(function() {
-                //if ($scope.currentCall.type == 'video') $scope.videoMode = 'large';
-            }, 5000);
+                if ($scope.currentCall.type == 'video') $scope.videoMode = 'large';
+            }, 500);
         }
 
         if ($rootScope.currentCall && $rootScope.currentCall.type == 'video' && $rootScope.currentCall.state != 'connected') {
diff --git a/webclient/app.css b/webclient/app.css
index fb92a0f432..03dd5ec8bd 100755
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -98,7 +98,7 @@ a:active  { color: #000; }
     z-index: 1;
     background-color: rgba(0,0,0,0.0);
     pointer-events: none;
-    transition: background-color linear 300ms;
+    transition: background-color linear 500ms;
 }
 
 #videoBackground.large {
@@ -107,19 +107,31 @@ a:active  { color: #000; }
 }
 
 #videoContainer {
+    position: relative;
     max-width: 1280px;
     margin: auto;
-    top: 32px;
 }
 
-#videoContainer.large {
+#videoContainerPadding {
+    width: 1280px;
 }
 
-#localVideo.mini {
-    position: relative;
-    left: 120px;
+#localVideo {
+    position: absolute;
     width: 128px;
     height: 72px;
+    z-index: 1;
+    transition: left linear 500ms, top linear 500ms, width linear 500ms, height linear 500ms;
+}
+
+#localVideo.mini {
+    top: 0px;
+    left: 130px;
+}
+
+#localVideo.large {
+    top: 70px;
+    left: 20px;
 }
 
 #localVideo.ended {
@@ -128,19 +140,21 @@ a:active  { color: #000; }
 }
 
 #remoteVideo {
-    transition: all linear 300ms;
+    position: relative;
+    height: auto;
+    transition: left linear 500ms, top linear 500ms, width linear 500ms, height linear 500ms;
 }
 
 #remoteVideo.mini {
-    position: relative;
-    left: 120px;
+    left: 260px;
+    top: 0px;
     width: 128px;
-    height: 72px;
 }
 
 #remoteVideo.large {
+    left: 0px;
+    top: 50px;
     width: 100%;
-    height: auto;
 }
 
 #remoteVideo.ended {
diff --git a/webclient/index.html b/webclient/index.html
index 78a68753d4..77686abcc2 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -47,8 +47,9 @@
 <body>
     <div id="videoBackground" ng-class="videoMode">
         <div id="videoContainer" ng-class="videoMode">
+            <div id="videoContainerPadding"></div>
             <video id="localVideo" ng-class="[videoMode, currentCall.state]" ng-show="currentCall && currentCall.type == 'video' && (currentCall.state == 'connected' || currentCall.state == 'connecting' || currentCall.state == 'invite_sent' || currentCall.state == 'ended')"></video>
-            <video id="remoteVideo" ng-class="[videoMode, currentCall.state]" ng-show="currentCall && currentCall.type == 'video' && (currentCall.state == 'connected' || currentCall.state == 'ended')"></video>
+            <video id="remoteVideo" ng-class="[videoMode, currentCall.state]" ng-show="currentCall && currentCall.type == 'video' && (currentCall.state == 'connected' || (currentCall.state == 'ended' && currentCall.didConnect))"></video>
         </div>
     </div>
 
-- 
cgit 1.4.1


From f9688d7519dad2f55f949cbb565db836790c4bbe Mon Sep 17 00:00:00 2001
From: Emmanuel ROHEE <erohee@amdocs.com>
Date: Fri, 19 Sep 2014 15:18:30 +0200
Subject: SYWEB-13: Do not start the app if the browser does not support
 WEBStorage. Internet Explorer case: Launch the app only for versions 9 and
 higher.

---
 webclient/app.css    |  7 ++++++-
 webclient/app.js     | 19 ++++++++++++++++++-
 webclient/index.html | 15 +++++++++++++--
 3 files changed, 37 insertions(+), 4 deletions(-)

(limited to 'webclient/index.html')

diff --git a/webclient/app.css b/webclient/app.css
index 736aea660c..360263e13f 100755
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -20,7 +20,7 @@ a:visited { color: #666; }
 a:hover   { color: #000; }
 a:active  { color: #000; }
 
-#page {
+.page {
     min-height: 100%;
     margin-bottom: -32px; /* to make room for the footer */
 }
@@ -34,6 +34,11 @@ a:active  { color: #000; }
     padding-right: 20px;
 }
 
+#unsupportedBrowser {
+    padding-top: 240px;
+    text-align: center;
+}
+
 #header
 {
     position: absolute;
diff --git a/webclient/app.js b/webclient/app.js
index 9370f773b3..31118304c6 100644
--- a/webclient/app.js
+++ b/webclient/app.js
@@ -80,7 +80,24 @@ matrixWebClient.config(['$routeProvider', '$provide', '$httpProvider',
         $httpProvider.interceptors.push('AccessTokenInterceptor');
     }]);
 
-matrixWebClient.run(['$location', 'matrixService', function($location, matrixService) {
+matrixWebClient.run(['$location', '$rootScope', 'matrixService', function($location, $rootScope, matrixService) {
+
+    // Check browser support
+    // Support IE from 9.0. AngularJS needs some tricks to run on IE8 and below
+    var version = parseFloat($.browser.version);
+    if ($.browser.msie && version < 9.0) {
+        $rootScope.unsupportedBrowser = {
+            browser: navigator.userAgent,
+            reason: "Internet Explorer is supported from version 9"
+        };
+    }
+    // The app requires localStorage
+    if(typeof(Storage) === "undefined") {
+        $rootScope.unsupportedBrowser = {
+            browser: navigator.userAgent,
+            reason: "It does not support HTML local storage"
+        };
+    }
 
     // If user auth details are not in cache, go to the login page
     if (!matrixService.isUserLoggedIn() &&
diff --git a/webclient/index.html b/webclient/index.html
index 7e4dcb8345..a9d5cfd4b0 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -100,9 +100,20 @@
         </div>
     </div>
 
-    <div id="page" ng-view></div>
+    <div class="page" ng-hide="unsupportedBrowser" ng-view></div>
 
-    <div id="footer" ng-hide="location.indexOf('/room') == 0">
+    <div class="page" ng-show="unsupportedBrowser">
+        <div id="unsupportedBrowser" ng-show="unsupportedBrowser">
+            Sorry, your browser is not supported. <br/>
+                Reason: {{ unsupportedBrowser.reason }}
+
+            <br/><br/>
+            Your browser: <br/>
+            {{ unsupportedBrowser.browser }}
+        </div>
+    </div>
+
+    <div id="footer" ng-hide="location.indexOf('/room') === 0">
         <div id="footerContent">
             &copy; 2014 Matrix.org
         </div>
-- 
cgit 1.4.1


From 648fd2a622353ecdb94eb0244c4dc8b6676d8a89 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@matrix.org>
Date: Fri, 19 Sep 2014 18:22:14 +0100
Subject: Notify a callee that their browser doesn't support VoIP too. SYWEB-14
 #resolved

---
 webclient/components/matrix/matrix-call.js          |  4 +++-
 webclient/components/matrix/matrix-phone-service.js | 10 ++++++++++
 webclient/index.html                                |  2 +-
 webclient/room/room-controller.js                   |  1 -
 webclient/room/room.html                            | 12 ++++++------
 5 files changed, 20 insertions(+), 9 deletions(-)

(limited to 'webclient/index.html')

diff --git a/webclient/components/matrix/matrix-call.js b/webclient/components/matrix/matrix-call.js
index 494a37f340..a025ccf632 100644
--- a/webclient/components/matrix/matrix-call.js
+++ b/webclient/components/matrix/matrix-call.js
@@ -42,11 +42,13 @@ window.RTCIceCandidate = window.RTCIceCandidate || window.webkitRTCIceCandidate
 
 // Returns true if the browser supports all required features to make WebRTC call
 var isWebRTCSupported = function () {
-    return (navigator.getUserMedia || window.RTCPeerConnection || window.RTCSessionDescription || window.RTCIceCandidate);
+    return !!(navigator.getUserMedia || window.RTCPeerConnection || window.RTCSessionDescription || window.RTCIceCandidate);
 };
 
 angular.module('MatrixCall', [])
 .factory('MatrixCall', ['matrixService', 'matrixPhoneService', '$rootScope', '$timeout', function MatrixCallFactory(matrixService, matrixPhoneService, $rootScope, $timeout) {
+    $rootScope.isWebRTCSupported = isWebRTCSupported();
+
     var MatrixCall = function(room_id) {
         this.room_id = room_id;
         this.call_id = "c" + new Date().getTime();
diff --git a/webclient/components/matrix/matrix-phone-service.js b/webclient/components/matrix/matrix-phone-service.js
index d05eecf72a..9d0b84fb23 100644
--- a/webclient/components/matrix/matrix-phone-service.js
+++ b/webclient/components/matrix/matrix-phone-service.js
@@ -59,6 +59,16 @@ angular.module('matrixPhoneService', [])
 
             var MatrixCall = $injector.get('MatrixCall');
             var call = new MatrixCall(event.room_id);
+
+            if (!isWebRTCSupported()) {
+                console.log("Incoming call ID "+msg.call_id+" but this browser doesn't support WebRTC");
+                // don't hang up the call: there could be other clients connected that do support WebRTC and declining the
+                // the call on their behalf would be really annoying.
+                // instead, we broadcast a fake call event with a non-functional call object
+                $rootScope.$broadcast(matrixPhoneService.INCOMING_CALL_EVENT, call);
+                return;
+            }
+
             call.call_id = msg.call_id;
             call.initWithInvite(event);
             matrixPhoneService.allCalls[call.call_id] = call;
diff --git a/webclient/index.html b/webclient/index.html
index 47d3ebf657..39174d679d 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -79,7 +79,7 @@
                     </span>
                 </div>
                 <span ng-show="currentCall.state == 'ringing'">
-                    <button ng-click="answerCall()">Answer {{ currentCall.type }} call</button>
+                    <button ng-click="answerCall()" ng-disabled="!isWebRTCSupported" title="{{isWebRTCSupported ? '' : 'Your browser does not support VoIP' }}">Answer {{ currentCall.type }} call</button>
                     <button ng-click="hangupCall()">Reject</button>
                 </span>
                 <button ng-click="hangupCall()" ng-show="currentCall && currentCall.state != 'ringing' && currentCall.state != 'ended' && currentCall.state != 'fledgling'">Hang up</button>
diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js
index 7f2d405122..166434d1af 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -34,7 +34,6 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
         stream_failure: undefined, // the response when the stream fails
         waiting_for_joined_event: false,  // true when the join request is pending. Back to false once the corresponding m.room.member event is received
         messages_visibility: "hidden", // In order to avoid flickering when scrolling down the message table at the page opening, delay the message table display
-        webRTCSupported: isWebRTCSupported() // true if the browser does not support WebRTC
     };
     $scope.members = {};
     $scope.autoCompleting = false;
diff --git a/webclient/room/room.html b/webclient/room/room.html
index dfbea492d9..d12f79cd21 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -111,8 +111,8 @@
                               ng-class="containsBingWord(msg.content.body) && msg.user_id != state.user_id ? msg.echo_msg_state + ' messageBing' : msg.echo_msg_state"
                               ng-bind-html="((msg.content.msgtype === 'm.text') ? msg.content.body : '') | linky:'_blank'"/>
 
-                        <span ng-show='msg.type === "m.call.invite" && msg.user_id == state.user_id'>Outgoing Call</span>
-                        <span ng-show='msg.type === "m.call.invite" && msg.user_id != state.user_id'>Incoming Call</span>
+                        <span ng-show='msg.type === "m.call.invite" && msg.user_id == state.user_id'>Outgoing Call{{ isWebRTCSupported ? '' : ' (But your browser does not support VoIP)' }}</span>
+                        <span ng-show='msg.type === "m.call.invite" && msg.user_id != state.user_id'>Incoming Call{{ isWebRTCSupported ? '' : ' (But your browser does not support VoIP)' }}</span>
 
                         <div ng-show='msg.content.msgtype === "m.image"'>
                             <div ng-hide='msg.content.thumbnail_url' ng-style="msg.content.body.h && { 'height' : (msg.content.body.h < 320) ? msg.content.body.h : 320}">
@@ -178,15 +178,15 @@
                 <button ng-click="leaveRoom()" ng-disabled="state.permission_denied">Leave</button>
                 <button ng-click="startVoiceCall()"
                         ng-show="(currentCall == undefined || currentCall.state == 'ended')"
-                        ng-disabled="state.permission_denied || !state.webRTCSupported || memberCount() != 2"
-                        title ="{{ !state.webRTCSupported ? 'VoIP requires webRTC but your browser does not support it' : (memberCount() == 2 ? '' : 'VoIP calls can only be made in rooms with two participants') }}"
+                        ng-disabled="state.permission_denied || !isWebRTCSupported || memberCount() != 2"
+                        title ="{{ !isWebRTCSupported ? 'VoIP requires webRTC but your browser does not support it' : (memberCount() == 2 ? '' : 'VoIP calls can only be made in rooms with two participants') }}"
                         >
                     Voice Call
                 </button>
                 <button ng-click="startVideoCall()"
                         ng-show="(currentCall == undefined || currentCall.state == 'ended')"
-                        ng-disabled="state.permission_denied || !state.webRTCSupported || memberCount() != 2"
-                        title ="{{ !state.webRTCSupported ? 'VoIP requires webRTC but your browser does not support it' : (memberCount() == 2 ? '' : 'VoIP calls can only be made in rooms with two participants') }}"
+                        ng-disabled="state.permission_denied || !isWebRTCSupported || memberCount() != 2"
+                        title ="{{ !isWebRTCSupported ? 'VoIP requires webRTC but your browser does not support it' : (memberCount() == 2 ? '' : 'VoIP calls can only be made in rooms with two participants') }}"
                         >
                     Video Call
                 </button>
-- 
cgit 1.4.1


From 83ea3c96ece5de9e365af40685bc270027a14559 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@matrix.org>
Date: Mon, 22 Sep 2014 10:54:14 +0100
Subject: Better logging of ICE candidates and fail the call when ICE fails.

---
 webclient/components/matrix/matrix-call.js |  7 +++++--
 webclient/index.html                       | 13 +++++++------
 2 files changed, 12 insertions(+), 8 deletions(-)

(limited to 'webclient/index.html')

diff --git a/webclient/components/matrix/matrix-call.js b/webclient/components/matrix/matrix-call.js
index a025ccf632..d8571e7036 100644
--- a/webclient/components/matrix/matrix-call.js
+++ b/webclient/components/matrix/matrix-call.js
@@ -280,14 +280,14 @@ angular.module('MatrixCall', [])
     };
 
     MatrixCall.prototype.gotLocalIceCandidate = function(event) {
-        console.log(event);
         if (event.candidate) {
+            console.log("Got local ICE "+event.candidate.sdpMid+" candidate: "+event.candidate.candidate);
             this.sendCandidate(event.candidate);
         }
     }
 
     MatrixCall.prototype.gotRemoteIceCandidate = function(cand) {
-        console.log("Got ICE candidate from remote: "+cand);
+        console.log("Got remote ICE "+cand.sdpMid+" candidate: "+cand.candidate);
         if (this.state == 'ended') {
             console.log("Ignoring remote ICE candidate because call has ended");
             return;
@@ -368,6 +368,9 @@ angular.module('MatrixCall', [])
                 self.state = 'connected';
                 self.didConnect = true;
             });
+        } else if (this.peerConn.iceConnectionState == 'failed') {
+            this.hangupReason = 'ice_failed';
+            this.hangup();
         }
     };
 
diff --git a/webclient/index.html b/webclient/index.html
index 39174d679d..411c2762d3 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -69,12 +69,13 @@
                         <span ng-show="currentCall.state == 'ringing' && currentCall && currentCall.type == 'voice'">Incoming Voice Call</span>
                         <span ng-show="currentCall.state == 'connecting'">Call Connecting...</span>
                         <span ng-show="currentCall.state == 'connected'">Call Connected</span>
-                        <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'outbound' && currentCall.hangupParty == 'remote'">Call Rejected</span>
-                        <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'outbound' && currentCall.hangupParty == 'local' && currentCall.hangupReason == undefined">Call Canceled</span>
-                        <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'outbound' && currentCall.hangupParty == 'local' && currentCall.hangupReason == 'invite_timeout'">User Not Responding</span>
-                        <span ng-show="currentCall.state == 'ended' && currentCall.didConnect && currentCall.direction == 'outbound'">Call Ended</span>
-                        <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'inbound'">Call Canceled</span>
-                        <span ng-show="currentCall.state == 'ended' && currentCall.didConnect && currentCall.direction == 'inbound'">Call Ended</span>
+                        <span ng-show="currentCall.state == 'ended' && currentCall.hangupReason == 'ice_failed'">Media Connection Failed</span>
+                        <span ng-show="currentCall.state == 'ended' && !currentCall.hangupReason && !currentCall.didConnect && currentCall.direction == 'outbound' && currentCall.hangupParty == 'remote'">Call Rejected</span>
+                        <span ng-show="currentCall.state == 'ended' && !currentCall.hangupReason && !currentCall.didConnect && currentCall.direction == 'outbound' && currentCall.hangupParty == 'local'">Call Canceled</span>
+                        <span ng-show="currentCall.state == 'ended' && currentCall.hangupReason == 'invite_timeout' && !currentCall.didConnect && currentCall.direction == 'outbound' && currentCall.hangupParty == 'local'">User Not Responding</span>
+                        <span ng-show="currentCall.state == 'ended' && !currentCall.hangupReason && currentCall.didConnect && currentCall.direction == 'outbound'">Call Ended</span>
+                        <span ng-show="currentCall.state == 'ended' && !currentCall.hangupReason && !currentCall.didConnect && currentCall.direction == 'inbound'">Call Canceled</span>
+                        <span ng-show="currentCall.state == 'ended' && !currentCall.hangupReason && currentCall.didConnect && currentCall.direction == 'inbound'">Call Ended</span>
                         <span ng-show="currentCall.state == 'wait_local_media'">Waiting for media permission...</span>
                     </span>
                 </div>
-- 
cgit 1.4.1