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

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 ***/

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 = {

webclient/room/room-controller.js

@@ -28,6 +28,7 @@ angular.module('RoomController', [])
     $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;

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>