Disabled sending buttons while a message is being sent. Useful on bad Internet connection.

2 files changed, 18 insertions, 6 deletions

diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js
index 364ca41510..2fa7fe34b1 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -30,7 +30,8 @@ angular.module('RoomController', ['ngSanitize'])
         earliest_token: "END", // stores how far back we've paginated.
         can_paginate: true, // this is toggled off when we run out of items
         paginating: false, // used to avoid concurrent pagination requests pulling in dup contents
-        stream_failure: undefined // the response when the stream fails
+        stream_failure: undefined, // the response when the stream fails
+        sending: false // true when a message is being sent. It helps to disable the UI when a process is running
     };
     $scope.members = {};
     $scope.autoCompleting = false;
@@ -232,7 +233,9 @@ angular.module('RoomController', ['ngSanitize'])
         if ($scope.textInput == "") {
             return;
         }
-                    
+
+        $scope.state.sending = true;
+
         // Send the text message
         var promise;
         // FIXME: handle other commands too
@@ -247,10 +250,12 @@ angular.module('RoomController', ['ngSanitize'])
             function() {
                 console.log("Sent message");
                 $scope.textInput = "";
+                $scope.state.sending = false;
             },
             function(error) {
                 $scope.feedback = "Failed to send: " + error.data.error;
-            });               
+                $scope.state.sending = false;
+            });
     };
 
     $scope.onInit = function() {
@@ -362,18 +367,24 @@ angular.module('RoomController', ['ngSanitize'])
     };
 
     $scope.sendImage = function(url) {
+        $scope.state.sending = true;
+
         matrixService.sendImageMessage($scope.room_id, url).then(
             function() {
                 console.log("Image sent");
             },
             function(error) {
                 $scope.feedback = "Failed to send image: " + error.data.error;
+                $scope.state.sending = false;
             });
     };
     
     $scope.imageFileToSend;
     $scope.$watch("imageFileToSend", function(newValue, oldValue) {
         if ($scope.imageFileToSend) {
+
+            $scope.state.sending = true;
+
             // First download the image to the Internet
             console.log("Uploading image...");
             mFileUpload.uploadFile($scope.imageFileToSend).then(
@@ -383,6 +394,7 @@ angular.module('RoomController', ['ngSanitize'])
                 },
                 function(error) {
                     $scope.feedback = "Can't upload image";
+                    $scope.state.sending = false;
                 } 
             );
         }
diff --git a/webclient/room/room.html b/webclient/room/room.html
index 8cae7ee515..1ca28b20fe 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -63,10 +63,10 @@
                         {{ state.user_id }} 
                     </td>
                     <td width="*" style="min-width: 100px">
-                        <input id="mainInput" ng-model="textInput" ng-enter="send()" ng-focus="true" auto-complete/>
+                        <input id="mainInput" ng-model="textInput" ng-enter="send()" ng-disabled="state.sending" ng-focus="true" auto-complete/>
                     </td>
                     <td width="1">
-                        <button ng-click="send()">Send</button>
+                        <button ng-click="send()" ng-disabled="state.sending">Send</button>
                     </td>
                     <td width="1">
                         
@@ -79,7 +79,7 @@
                         <input id="mainInput" ng-model="imageURLToSend" ng-enter="sendImage(imageURLToSend)" placeholder="Image URL"/>
                     </td>
                     <td width="100px">
-                        <button ng-click="sendImage(imageURLToSend)">Send URL</button>
+                        <button ng-click="sendImage(imageURLToSend)" ng-disabled="state.sending">Send URL</button>
                     </td>
                     <!-- TODO: To enable once we have an upload server
                     <td width="100px">