From aac52fce15a592ac0715f72864f144600e4c15a1 Mon Sep 17 00:00:00 2001
From: Emmanuel ROHEE <erohee@amdocs.com>
Date: Thu, 21 Aug 2014 14:30:41 +0200
Subject: Generate thumbnail client side and send its URL and info with the
 image message body

---
 webclient/room/room-controller.js | 34 ++++++++++++----------------------
 1 file changed, 12 insertions(+), 22 deletions(-)

(limited to 'webclient/room')

diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js
index 35abeeca06..7de50dd960 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;
@@ -386,33 +387,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;
                 }
             );
-- 
cgit 1.5.1


From e4f0e1af1aa075e6d86921d46e824d85855c1def Mon Sep 17 00:00:00 2001
From: Emmanuel ROHEE <erohee@amdocs.com>
Date: Thu, 21 Aug 2014 14:58:26 +0200
Subject: If there are available, show image thumbnails in the messages list

---
 webclient/room/room.html | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

(limited to 'webclient/room')

diff --git a/webclient/room/room.html b/webclient/room/room.html
index db6add4ee7..5dcc8caa1e 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -41,9 +41,13 @@
                     <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" ng-src="{{ msg.content.thumbnail_url }}"/>
+                            </div>
                         </div>
                     </div>
                 </td>
-- 
cgit 1.5.1


From bb4490c2d78d4e0dcae01853513e0308776055a5 Mon Sep 17 00:00:00 2001
From: Emmanuel ROHEE <erohee@amdocs.com>
Date: Thu, 21 Aug 2014 16:09:42 +0200
Subject: Show image fullscreen when clicking on the thumbnail

---
 webclient/app.css        | 25 ++++++++++++++++++++++++-
 webclient/room/room.html |  9 +++++++--
 2 files changed, 31 insertions(+), 3 deletions(-)

(limited to 'webclient/room')

diff --git a/webclient/app.css b/webclient/app.css
index 869db69cd6..d2b951d3b6 100644
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -66,6 +66,10 @@ h1 {
     background-color: #faa;
 }
 
+.mouse-pointer {
+    cursor: pointer;
+}
+
 /*** Participant list ***/
 
 #usersTableWrapper {
@@ -89,7 +93,6 @@ h1 {
     height: 100px;
     position: relative;
     background-color: #000;
-    cursor: pointer;
 }
 
 .userAvatar .userAvatarImage {
@@ -245,6 +248,26 @@ h1 {
     text-align: left ! important;
 }
 
+#room-fullscreen-image {
+    position: absolute;
+    top: 0px;
+    height: 0px;
+    width: 100%;
+    height: 100%;
+}
+
+#room-fullscreen-image img {
+    max-width: 100%;
+    max-height: 100%;
+    bottom: 0;
+    left: 0;
+    margin: auto;
+    overflow: auto;
+    position: fixed;
+    right: 0;
+    top: 0;
+}
+
 /*** Profile ***/
 
 .profile-avatar {
diff --git a/webclient/room/room.html b/webclient/room/room.html
index 5dcc8caa1e..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(':')) }}"
@@ -46,7 +46,8 @@
                                 <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" ng-src="{{ msg.content.thumbnail_url }}"/>
+                                <img class="image mouse-pointer" ng-src="{{ msg.content.thumbnail_url }}"
+                                     ng-click="$parent.fullScreenImageURL = msg.content.url"/>
                             </div>
                         </div>
                     </div>
@@ -96,4 +97,8 @@
         </div>
     </div>
 
+    <div id="room-fullscreen-image" ng-show="fullScreenImageURL" ng-click="fullScreenImageURL = undefined;">
+        <img ng-src="{{ fullScreenImageURL }}"/>
+    </div>
+
  </div>
-- 
cgit 1.5.1