Merge branch 'develop' of github.com:matrix-org/synapse into release-v0.0.1
This commit is contained in:
Erik Johnston
commit
2b1297c501
|
|
@ -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 {
|
||||
|
|
@ -246,6 +249,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 {
|
||||
|
|
|
|||
|
|
@ -20,17 +20,18 @@
|
|||
/*
|
||||
* Upload an HTML5 file to a server
|
||||
*/
|
||||
angular.module('mFileUpload', [])
|
||||
.service('mFileUpload', ['matrixService', '$q', function (matrixService, $q) {
|
||||
angular.module('mFileUpload', ['matrixService', 'mUtilities'])
|
||||
.service('mFileUpload', ['$q', 'matrixService', 'mUtilities', function ($q, matrixService, mUtilities) {
|
||||
|
||||
/*
|
||||
* Upload an HTML5 file to a server and returned a promise
|
||||
* Upload an HTML5 file or blob to a server and returned a promise
|
||||
* that will provide the URL of the uploaded file.
|
||||
* @param {File|Blob} file the file data to send
|
||||
*/
|
||||
this.uploadFile = function(file, body) {
|
||||
this.uploadFile = function(file) {
|
||||
var deferred = $q.defer();
|
||||
console.log("Uploading " + file.name + "... to /matrix/content");
|
||||
matrixService.uploadContent(file, body).then(
|
||||
matrixService.uploadContent(file).then(
|
||||
function(response) {
|
||||
var content_url = location.origin + "/matrix/content/" + response.data.content_token;
|
||||
console.log(" -> Successfully uploaded! Available at " + content_url);
|
||||
|
|
@ -44,4 +45,134 @@ angular.module('mFileUpload', [])
|
|||
|
||||
return deferred.promise;
|
||||
};
|
||||
|
||||
/*
|
||||
* Upload an image file plus generate a thumbnail of it and upload it so that
|
||||
* we will have all information to fulfill an image message request data.
|
||||
* @param {File} imageFile the imageFile to send
|
||||
* @param {Integer} thumbnailSize the max side size of the thumbnail to create
|
||||
* @returns {promise} A promise that will be resolved by a image message object
|
||||
* ready to be send with the Matrix API
|
||||
*/
|
||||
this.uploadImageAndThumbnail = function(imageFile, thumbnailSize) {
|
||||
var self = this;
|
||||
var deferred = $q.defer();
|
||||
|
||||
console.log("uploadImageAndThumbnail " + imageFile.name + " - thumbnailSize: " + thumbnailSize);
|
||||
|
||||
// The message structure that will be returned in the promise
|
||||
var imageMessage = {
|
||||
msgtype: "m.image",
|
||||
url: undefined,
|
||||
body: {
|
||||
size: undefined,
|
||||
w: undefined,
|
||||
h: undefined,
|
||||
mimetype: undefined
|
||||
},
|
||||
thumbnail_url: undefined,
|
||||
thumbnail_info: {
|
||||
size: undefined,
|
||||
w: undefined,
|
||||
h: undefined,
|
||||
mimetype: undefined
|
||||
}
|
||||
};
|
||||
|
||||
// First, get the image size
|
||||
mUtilities.getImageSize(imageFile).then(
|
||||
function(size) {
|
||||
|
||||
// The final operation: send imageFile
|
||||
var uploadImage = function() {
|
||||
self.uploadFile(imageFile).then(
|
||||
function(url) {
|
||||
// Update message metadata
|
||||
imageMessage.url = url;
|
||||
imageMessage.body = {
|
||||
size: imageFile.size,
|
||||
w: size.width,
|
||||
h: size.height,
|
||||
mimetype: imageFile.type
|
||||
};
|
||||
|
||||
// If there is no thumbnail (because the original image is smaller than thumbnailSize),
|
||||
// reuse the original image info for thumbnail data
|
||||
if (!imageMessage.thumbnail_url) {
|
||||
imageMessage.thumbnail_url = imageMessage.url;
|
||||
imageMessage.thumbnail_info = imageMessage.body;
|
||||
}
|
||||
|
||||
// We are done
|
||||
deferred.resolve(imageMessage);
|
||||
},
|
||||
function(error) {
|
||||
console.log(" -> Can't upload image");
|
||||
deferred.reject(error);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
// Create a thumbnail if the image size exceeds thumbnailSize
|
||||
if (Math.max(size.width, size.height) > thumbnailSize) {
|
||||
console.log(" Creating thumbnail...");
|
||||
mUtilities.resizeImage(imageFile, thumbnailSize).then(
|
||||
function(thumbnailBlob) {
|
||||
|
||||
// Get its size
|
||||
mUtilities.getImageSize(thumbnailBlob).then(
|
||||
function(thumbnailSize) {
|
||||
console.log(" -> Thumbnail size: " + JSON.stringify(thumbnailSize));
|
||||
|
||||
// Upload it to the server
|
||||
self.uploadFile(thumbnailBlob).then(
|
||||
function(thumbnailUrl) {
|
||||
|
||||
// Update image message data
|
||||
imageMessage.thumbnail_url = thumbnailUrl;
|
||||
imageMessage.thumbnail_info = {
|
||||
size: thumbnailBlob.size,
|
||||
w: thumbnailSize.width,
|
||||
h: thumbnailSize.height,
|
||||
mimetype: thumbnailBlob.type
|
||||
};
|
||||
|
||||
// Then, upload the original image
|
||||
uploadImage();
|
||||
},
|
||||
function(error) {
|
||||
console.log(" -> Can't upload thumbnail");
|
||||
deferred.reject(error);
|
||||
}
|
||||
);
|
||||
},
|
||||
function(error) {
|
||||
console.log(" -> Failed to get thumbnail size");
|
||||
deferred.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
},
|
||||
function(error) {
|
||||
console.log(" -> Failed to create thumbnail: " + error);
|
||||
deferred.reject(error);
|
||||
}
|
||||
);
|
||||
}
|
||||
else {
|
||||
// No need of thumbnail
|
||||
console.log(" Thumbnail is not required");
|
||||
uploadImage();
|
||||
}
|
||||
|
||||
},
|
||||
function(error) {
|
||||
console.log(" -> Failed to get image size");
|
||||
deferred.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
return deferred.promise;
|
||||
};
|
||||
|
||||
}]);
|
||||
|
|
|
|||
|
|
@ -61,14 +61,22 @@ angular.module('matrixService', [])
|
|||
return doBaseRequest(config.homeserver, method, path, params, data, undefined);
|
||||
};
|
||||
|
||||
var doBaseRequest = function(baseUrl, method, path, params, data, headers) {
|
||||
return $http({
|
||||
var doBaseRequest = function(baseUrl, method, path, params, data, headers, $httpParams) {
|
||||
|
||||
var request = {
|
||||
method: method,
|
||||
url: baseUrl + path,
|
||||
params: params,
|
||||
data: data,
|
||||
headers: headers
|
||||
});
|
||||
};
|
||||
|
||||
// Add additional $http parameters
|
||||
if ($httpParams) {
|
||||
angular.extend(request, $httpParams);
|
||||
}
|
||||
|
||||
return $http(request);
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -326,7 +334,17 @@ angular.module('matrixService', [])
|
|||
var params = {
|
||||
access_token: config.access_token
|
||||
};
|
||||
return doBaseRequest(config.homeserver, "POST", path, params, file, headers);
|
||||
|
||||
// If the file is actually a Blob object, prevent $http from JSON-stringified it before sending
|
||||
// (Equivalent to jQuery ajax processData = false)
|
||||
var $httpParams;
|
||||
if (file instanceof Blob) {
|
||||
$httpParams = {
|
||||
transformRequest: angular.identity
|
||||
};
|
||||
}
|
||||
|
||||
return doBaseRequest(config.homeserver, "POST", path, params, file, headers, $httpParams);
|
||||
},
|
||||
|
||||
// start listening on /events
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@
|
|||
angular.module('mUtilities', [])
|
||||
.service('mUtilities', ['$q', function ($q) {
|
||||
/*
|
||||
* Gets the size of an image
|
||||
* @param {File} imageFile the file containing the image
|
||||
* Get the size of an image
|
||||
* @param {File|Blob} imageFile the file containing the image
|
||||
* @returns {promise} A promise that will be resolved by an object with 2 members:
|
||||
* width & height
|
||||
*/
|
||||
|
|
@ -50,4 +50,89 @@ angular.module('mUtilities', [])
|
|||
|
||||
return deferred.promise;
|
||||
};
|
||||
|
||||
/*
|
||||
* Resize the image to fit in a square of the side maxSize.
|
||||
* The aspect ratio is kept. The returned image data uses JPEG compression.
|
||||
* Source: http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
|
||||
* @param {File} imageFile the file containing the image
|
||||
* @param {Integer} maxSize the max side size
|
||||
* @returns {promise} A promise that will be resolved by a Blob object containing
|
||||
* the resized image data
|
||||
*/
|
||||
this.resizeImage = function(imageFile, maxSize) {
|
||||
var self = this;
|
||||
var deferred = $q.defer();
|
||||
|
||||
var canvas = document.createElement("canvas");
|
||||
|
||||
var img = document.createElement("img");
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
|
||||
img.src = e.target.result;
|
||||
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(img, 0, 0);
|
||||
|
||||
var MAX_WIDTH = maxSize;
|
||||
var MAX_HEIGHT = maxSize;
|
||||
var width = img.width;
|
||||
var height = img.height;
|
||||
|
||||
if (width > height) {
|
||||
if (width > MAX_WIDTH) {
|
||||
height *= MAX_WIDTH / width;
|
||||
width = MAX_WIDTH;
|
||||
}
|
||||
} else {
|
||||
if (height > MAX_HEIGHT) {
|
||||
width *= MAX_HEIGHT / height;
|
||||
height = MAX_HEIGHT;
|
||||
}
|
||||
}
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(img, 0, 0, width, height);
|
||||
|
||||
var dataUrl = canvas.toDataURL("image/jpeg", 0.7);
|
||||
deferred.resolve(self.dataURItoBlob(dataUrl));
|
||||
};
|
||||
reader.onerror = function(e) {
|
||||
deferred.reject(e);
|
||||
};
|
||||
reader.readAsDataURL(imageFile);
|
||||
|
||||
return deferred.promise;
|
||||
};
|
||||
|
||||
/*
|
||||
* Convert a dataURI string to a blob
|
||||
* Source: http://stackoverflow.com/a/17682951
|
||||
* @param {String} dataURI the dataURI can be a base64 encoded string or an URL encoded string.
|
||||
* @returns {Blob} the blob
|
||||
*/
|
||||
this.dataURItoBlob = function(dataURI) {
|
||||
// convert base64 to raw binary data held in a string
|
||||
// doesn't handle URLEncoded DataURIs
|
||||
var byteString;
|
||||
if (dataURI.split(',')[0].indexOf('base64') >= 0)
|
||||
byteString = atob(dataURI.split(',')[1]);
|
||||
else
|
||||
byteString = unescape(dataURI.split(',')[1]);
|
||||
// separate out the mime component
|
||||
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
|
||||
|
||||
// write the bytes of the string to an ArrayBuffer
|
||||
var ab = new ArrayBuffer(byteString.length);
|
||||
var ia = new Uint8Array(ab);
|
||||
for (var i = 0; i < byteString.length; i++) {
|
||||
ia[i] = byteString.charCodeAt(i);
|
||||
}
|
||||
|
||||
// write the ArrayBuffer to a blob, and you're done
|
||||
return new Blob([ab],{type: mimeString});
|
||||
};
|
||||
|
||||
}]);
|
||||
|
|
@ -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;
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue