Merge branch 'develop' of github.com:matrix-org/synapse into release-v0.0.1

2 files changed, 25 insertions, 26 deletions

diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js
index 6d714151f1..8dea64a804 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -19,6 +19,7 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
                                function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService, mFileUpload, mUtilities) {
    'use strict';
     var MESSAGES_PER_PAGINATION = 30;
+    var THUMBNAIL_SIZE = 320;
 
     // Room ids. Computed and resolved in onInit
     $scope.room_id = undefined;
@@ -387,33 +388,22 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
 
             $scope.state.sending = true;
 
-            // First, get the image sise
-            mUtilities.getImageSize($scope.imageFileToSend).then(
-                function(size) {
-
-                    // Upload the image to the Internet
-                    console.log("Uploading image...");
-                    mFileUpload.uploadFile($scope.imageFileToSend).then(
-                        function(url) {
-                            // Build the image info data
-                            var imageInfo = {
-                                size: $scope.imageFileToSend.size,
-                                mimetype: $scope.imageFileToSend.type,
-                                w: size.width,
-                                h: size.height
-                            };
-
-                            // Then share the URL and the metadata
-                            $scope.sendImage(url, imageInfo);
+            // Upload this image with its thumbnail to Internet
+            mFileUpload.uploadImageAndThumbnail($scope.imageFileToSend, THUMBNAIL_SIZE).then(
+                function(imageMessage) {
+                    // imageMessage is complete message structure, send it as is
+                    matrixService.sendMessage($scope.room_id, undefined, imageMessage).then(
+                        function() {
+                            console.log("Image message sent");
+                            $scope.state.sending = false;
                         },
                         function(error) {
-                            $scope.feedback = "Can't upload image";
+                            $scope.feedback = "Failed to send image message: " + error.data.error;
                             $scope.state.sending = false;
-                        }
-                    );
+                        });
                 },
                 function(error) {
-                    $scope.feedback = "Can't get selected image size";
+                    $scope.feedback = "Can't upload image";
                     $scope.state.sending = false;
                 }
             );
diff --git a/webclient/room/room.html b/webclient/room/room.html
index db6add4ee7..cb9cf1d1f3 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -10,7 +10,7 @@
     <div id="usersTableWrapper">
         <table id="usersTable">
             <tr ng-repeat="member in members | orderMembersList">
-                <td class="userAvatar" ng-click="goToUserPage(member.id)">
+                <td class="userAvatar mouse-pointer" ng-click="goToUserPage(member.id)">
                     <img class="userAvatarImage" 
                          ng-src="{{member.avatar_url || 'img/default-profile.jpg'}}" 
                          alt="{{ member.displayname || member.id.substr(0, member.id.indexOf(':')) }}"
@@ -41,9 +41,14 @@
                     <div class="bubble">
                         <span ng-hide='msg.content.msgtype !== "m.emote"' ng-bind-html="'* ' + (members[msg.user_id].displayname || msg.user_id) + ' ' + msg.content.body | linky:'_blank'"/>
                         <span ng-hide='msg.content.msgtype !== "m.text"' ng-bind-html="((msg.content.msgtype === 'm.text') ? msg.content.body : '') | linky:'_blank'"/>
-                        <div ng-hide='msg.content.msgtype !== "m.image"'
-                             ng-style="msg.content.body.h && { 'height' : (msg.content.body.h < 320) ? msg.content.body.h : 320}">
-                            <img class="image" ng-src="{{ msg.content.url }}"/>
+                        <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}">
+                                <img class="image" ng-src="{{ msg.content.url }}"/>
+                            </div>
+                            <div ng-show='msg.content.thumbnail_url' ng-style="{ 'height' : msg.content.thumbnail_info.h }">
+                                <img class="image mouse-pointer" ng-src="{{ msg.content.thumbnail_url }}"
+                                     ng-click="$parent.fullScreenImageURL = msg.content.url"/>
+                            </div>
                         </div>
                     </div>
                 </td>
@@ -92,4 +97,8 @@
         </div>
     </div>
 
+    <div id="room-fullscreen-image" ng-show="fullScreenImageURL" ng-click="fullScreenImageURL = undefined;">
+        <img ng-src="{{ fullScreenImageURL }}"/>
+    </div>
+
  </div>