diff --git a/webclient/components/fileUpload/file-upload-service.js b/webclient/components/fileUpload/file-upload-service.js
index d620e6a4d0..65c24f309c 100644
--- a/webclient/components/fileUpload/file-upload-service.js
+++ b/webclient/components/fileUpload/file-upload-service.js
@@ -27,10 +27,10 @@ angular.module('mFileUpload', [])
* Upload an HTML5 file to a server and returned a promise
* that will provide the URL of the uploaded file.
*/
- this.uploadFile = function(file) {
+ this.uploadFile = function(file, body) {
var deferred = $q.defer();
console.log("Uploading " + file.name + "... to /matrix/content");
- matrixService.uploadContent(file).then(
+ matrixService.uploadContent(file, body).then(
function(response) {
var content_url = location.origin + "/matrix/content/" + response.data.content_token;
console.log(" -> Successfully uploaded! Available at " + content_url);
diff --git a/webclient/components/matrix/event-stream-service.js b/webclient/components/matrix/event-stream-service.js
index c94cf0fe72..a446fad5d4 100644
--- a/webclient/components/matrix/event-stream-service.js
+++ b/webclient/components/matrix/event-stream-service.js
@@ -25,7 +25,6 @@ the eventHandlerService.
angular.module('eventStreamService', [])
.factory('eventStreamService', ['$q', '$timeout', 'matrixService', 'eventHandlerService', function($q, $timeout, matrixService, eventHandlerService) {
var END = "END";
- var START = "START";
var TIMEOUT_MS = 30000;
var ERR_TIMEOUT_MS = 5000;
diff --git a/webclient/components/matrix/matrix-service.js b/webclient/components/matrix/matrix-service.js
index 2463b51203..cd37a0c234 100644
--- a/webclient/components/matrix/matrix-service.js
+++ b/webclient/components/matrix/matrix-service.js
@@ -204,11 +204,11 @@ angular.module('matrixService', [])
},
// Send an image message
- sendImageMessage: function(room_id, image_url, image_alt, msg_id) {
+ sendImageMessage: function(room_id, image_url, image_body, msg_id) {
var content = {
msgtype: "m.image",
url: image_url,
- body: image_alt
+ body: image_body
};
return this.sendMessage(room_id, msg_id, content);
@@ -239,8 +239,8 @@ angular.module('matrixService', [])
path = path.replace("$room_id", room_id);
var params = {
from: from_token,
- to: "START",
- limit: limit
+ limit: limit,
+ dir: 'b'
};
return doRequest("GET", path, params);
},
diff --git a/webclient/components/utilities/utilities-service.js b/webclient/components/utilities/utilities-service.js
new file mode 100644
index 0000000000..fc0ee580dc
--- /dev/null
+++ b/webclient/components/utilities/utilities-service.js
@@ -0,0 +1,53 @@
+/*
+ Copyright 2014 matrix.org
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+'use strict';
+
+/*
+ * This service contains multipurpose helper functions.
+ */
+angular.module('mUtilities', [])
+.service('mUtilities', ['$q', function ($q) {
+ /*
+ * Gets the size of an image
+ * @param {File} imageFile the file containing the image
+ * @returns {promise} A promise that will be resolved by an object with 2 members:
+ * width & height
+ */
+ this.getImageSize = function(imageFile) {
+ var deferred = $q.defer();
+
+ // Load the file into an html element
+ var img = document.createElement("img");
+
+ var reader = new FileReader();
+ reader.onload = function(e) {
+ img.src = e.target.result;
+
+ // Once ready, returns its size
+ deferred.resolve({
+ width: img.width,
+ height: img.height
+ });
+ };
+ reader.onerror = function(e) {
+ deferred.reject(e);
+ };
+ reader.readAsDataURL(imageFile);
+
+ return deferred.promise;
+ };
+}]);
\ No newline at end of file
diff --git a/webclient/index.html b/webclient/index.html
index a7e9cd9341..27d9208193 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -25,6 +25,7 @@
<script src="components/matrix/event-handler-service.js"></script>
<script src="components/fileInput/file-input-directive.js"></script>
<script src="components/fileUpload/file-upload-service.js"></script>
+ <script src="components/utilities/utilities-service.js"></script>
</head>
<body>
diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js
index 364ca41510..35abeeca06 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-angular.module('RoomController', ['ngSanitize'])
-.controller('RoomController', ['$scope', '$http', '$timeout', '$routeParams', '$location', 'matrixService', 'eventStreamService', 'eventHandlerService',
- function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService) {
+angular.module('RoomController', ['ngSanitize', 'mUtilities'])
+.controller('RoomController', ['$scope', '$http', '$timeout', '$routeParams', '$location', 'matrixService', 'eventStreamService', 'eventHandlerService', 'mFileUpload', 'mUtilities',
+ function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService, mFileUpload, mUtilities) {
'use strict';
var MESSAGES_PER_PAGINATION = 30;
@@ -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;
@@ -88,7 +89,7 @@ angular.module('RoomController', ['ngSanitize'])
var paginate = function(numItems) {
// console.log("paginate " + numItems);
- if ($scope.state.paginating) {
+ if ($scope.state.paginating || !$scope.room_id) {
return;
}
else {
@@ -144,7 +145,7 @@ angular.module('RoomController', ['ngSanitize'])
console.log("Failed to paginateBackMessages: " + JSON.stringify(error));
$scope.state.paginating = false;
}
- )
+ );
};
var updateMemberList = function(chunk) {
@@ -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() {
@@ -361,29 +366,55 @@ angular.module('RoomController', ['ngSanitize'])
});
};
- $scope.sendImage = function(url) {
- matrixService.sendImageMessage($scope.room_id, url).then(
+ $scope.sendImage = function(url, body) {
+ $scope.state.sending = true;
+
+ matrixService.sendImageMessage($scope.room_id, url, body).then(
function() {
console.log("Image sent");
+ $scope.state.sending = false;
},
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) {
- // First download the image to the Internet
- console.log("Uploading image...");
- mFileUpload.uploadFile($scope.imageFileToSend).then(
- function(url) {
- // Then share the URL
- $scope.sendImage(url);
+
+ $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);
+ },
+ function(error) {
+ $scope.feedback = "Can't upload image";
+ $scope.state.sending = false;
+ }
+ );
},
function(error) {
- $scope.feedback = "Can't upload image";
- }
+ $scope.feedback = "Can't get selected image size";
+ $scope.state.sending = false;
+ }
);
}
});
diff --git a/webclient/room/room.html b/webclient/room/room.html
index 8cae7ee515..db6add4ee7 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -40,8 +40,11 @@
<td ng-class="!msg.content.membership_target ? (msg.content.msgtype === 'm.emote' ? 'emote text' : 'text') : 'membership text'">
<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.body | linky:'_blank'"/>
- <img class="image" ng-hide='msg.content.msgtype !== "m.image"' ng-src="{{ msg.content.url }}" alt="{{ msg.content.body }}"/>
+ <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>
</div>
</td>
<td class="rightBlock">
@@ -63,30 +66,16 @@
{{ 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>
+ <td width="150px">
+ <button ng-click="send()" ng-disabled="state.sending">Send</button>
+ <button m-file-input="imageFileToSend">Send Image</button>
</td>
<td width="1">
</td>
</tr>
- <tr>
- <td>
- </td>
- <td>
- <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>
- </td>
- <!-- TODO: To enable once we have an upload server
- <td width="100px">
- <button m-file-input="imageFileToSend">Send Image</button>
- </td>
- -->
- </tr>
</table>
<span>
diff --git a/webclient/rooms/rooms-controller.js b/webclient/rooms/rooms-controller.js
index a237b59b4e..c25e24c8bc 100644
--- a/webclient/rooms/rooms-controller.js
+++ b/webclient/rooms/rooms-controller.js
@@ -71,9 +71,10 @@ angular.module('RoomsController', ['matrixService', 'mFileInput', 'mFileUpload',
// use the existing alias from storage
data[i].room_alias = alias;
}
- else if (data[i].room_alias) {
+ else if (data[i].aliases && data[i].aliases[0]) {
// save the mapping
- matrixService.createRoomIdToAliasMapping(data[i].room_id, data[i].room_alias);
+ // TODO: select the smarter alias from the array
+ matrixService.createRoomIdToAliasMapping(data[i].room_id, data[i].aliases[0]);
}
else {
// last resort use the room id
|
