diff options
Diffstat (limited to 'webclient')
| -rw-r--r-- | webclient/components/fileUpload/file-upload-service.js | 4 | ||||
| -rw-r--r-- | webclient/components/matrix/event-stream-service.js | 1 | ||||
| -rw-r--r-- | webclient/components/matrix/matrix-service.js | 8 | ||||
| -rw-r--r-- | webclient/components/utilities/utilities-service.js | 53 | ||||
| -rw-r--r-- | webclient/index.html | 1 | ||||
| -rw-r--r-- | webclient/room/room-controller.js | 67 | ||||
| -rw-r--r-- | webclient/room/room.html | 29 | ||||
| -rw-r--r-- | webclient/rooms/rooms-controller.js | 5 |
8 files changed, 121 insertions, 47 deletions
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 |