Room: Added a text input to type an image URL in order to send an image message

4 files changed, 37 insertions, 3 deletions

diff --git a/webclient/app.css b/webclient/app.css

index 13cd19a2ef..9a46613d49 100644
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -43,7 +43,7 @@ h1 {
 }
 
 .inputBarTable tr td {
-    padding: 4px;
+    padding: 1px 4px;
 }
 
 .mainInput {
@@ -118,7 +118,7 @@ h1 {
    overflow separetely. 
   */
 .room .page {
-    height: calc(100vh - 198px); 
+    height: calc(100vh - 220px); 
 }
 
 /*** Message table ***/
diff --git a/webclient/components/matrix/matrix-service.js b/webclient/components/matrix/matrix-service.js

index 5f1731c1a8..f054bf301e 100644
--- a/webclient/components/matrix/matrix-service.js
+++ b/webclient/components/matrix/matrix-service.js
@@ -197,6 +197,17 @@ angular.module('matrixService', [])
             return this.sendMessage(room_id, msg_id, content);
         },
 
+        // Send an image message
+        sendImageMessage: function(room_id, image_url, image_alt, msg_id) {
+            var content = {
+                 msgtype: "m.image",
+                 url: image_url,
+                 body: image_alt
+            };
+
+            return this.sendMessage(room_id, msg_id, content);
+        },
+
         // Send an emote message
         sendEmoteMessage: function(room_id, body, msg_id) {
             var content = {
diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js

index 7cb6cba650..cbd5c1a175 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -27,7 +27,8 @@ angular.module('RoomController', [])
     $scope.messages = [];
     $scope.members = {};
     $scope.stopPoll = false;
-    
+
+    $scope.imageURLToSend = "";
     $scope.userIDToInvite = "";
 
     var shortPoll = function() {
@@ -224,6 +225,16 @@ angular.module('RoomController', [])
             });
     };
 
+    $scope.sendImage = function(url) {
+        matrixService.sendImageMessage($scope.room_id, url).then(
+            function() {
+                console.log("Image sent");
+            },
+            function(reason) {
+                $scope.feedback = "Failed to send image: " + reason;
+            });
+    };
+
     $scope.$on('$destroy', function(e) {
         console.log("onDestroyed: Stopping poll.");
         $scope.stopPoll = true;
diff --git a/webclient/room/room.html b/webclient/room/room.html

index 600bc14eb8..9cd1ec3645 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -63,6 +63,18 @@
                         {{ feedback }}
                     </td>
                 </tr>
+                <tr>
+                    <td>
+                    </td>
+                    <td>
+                        <input class="mainInput" ng-model="imageURLToSend" ng-enter="sendImage()" placeholder="Image URL"/>
+                    </td>
+                    <td  width="100px">
+                        <button ng-click="sendImage(imageURLToSend)">Send Image</button>
+                    </td>
+                    <td>
+                    </td>
+                </tr>
             </table>
 
             <span>