diff options
| l--------- | synctl | 1 | ||||
| -rwxr-xr-x | syweb/webclient/app.css | 4 | ||||
| -rw-r--r-- | syweb/webclient/components/fileInput/file-input-directive.js | 3 | ||||
| -rw-r--r-- | syweb/webclient/components/fileUpload/file-upload-service.js | 226 | ||||
| -rw-r--r-- | syweb/webclient/recents/recents.html | 2 | ||||
| -rw-r--r-- | syweb/webclient/room/room-controller.js | 23 | ||||
| -rw-r--r-- | syweb/webclient/room/room.html | 58 |
7 files changed, 182 insertions, 135 deletions
diff --git a/synctl b/synctl new file mode 120000 index 0000000000..1bdceda20a --- /dev/null +++ b/synctl @@ -0,0 +1 @@ +./synapse/app/synctl.py \ No newline at end of file diff --git a/syweb/webclient/app.css b/syweb/webclient/app.css index 25f7208a11..1264ac787c 100755 --- a/syweb/webclient/app.css +++ b/syweb/webclient/app.css @@ -699,7 +699,7 @@ textarea, input { vertical-align: middle; */ display: inline-block; - max-width: 90%; + max-width: 80%; padding-left: 1em; padding-right: 1em; padding-top: 2px; @@ -721,6 +721,7 @@ textarea, input { text-align: right; } +/* .text.emote .bubble, .text.membership .bubble, .mine .text.emote .bubble, @@ -729,6 +730,7 @@ textarea, input { background-color: transparent ! important; border: 0px ! important; } +*/ .mine .text .bubble { /* diff --git a/syweb/webclient/components/fileInput/file-input-directive.js b/syweb/webclient/components/fileInput/file-input-directive.js index 9c849a140f..e530c06085 100644 --- a/syweb/webclient/components/fileInput/file-input-directive.js +++ b/syweb/webclient/components/fileInput/file-input-directive.js @@ -25,7 +25,8 @@ angular.module('mFileInput', []) return { restrict: 'A', transclude: 'true', - template: '<div ng-transclude></div><input ng-hide="true" type="file" accept="image/*"/>', + // FIXME: add back in accept="image/*" when needed - e.g. for avatars + template: '<div ng-transclude></div><input ng-hide="true" type="file"/>', scope: { selectedFile: '=mFileInput' }, diff --git a/syweb/webclient/components/fileUpload/file-upload-service.js b/syweb/webclient/components/fileUpload/file-upload-service.js index b544e29509..28e3f0ff5e 100644 --- a/syweb/webclient/components/fileUpload/file-upload-service.js +++ b/syweb/webclient/components/fileUpload/file-upload-service.js @@ -47,30 +47,31 @@ angular.module('mFileUpload', ['matrixService', 'mUtilities']) }; /* - * Upload an image file plus generate a thumbnail of it and upload it so that + * Upload an filmessagee plus generate a thumbnail of it (if possible) 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 {File} file the file 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) { + this.uploadFileAndThumbnail = function(file, thumbnailSize) { var self = this; var deferred = $q.defer(); - console.log("uploadImageAndThumbnail " + imageFile.name + " - thumbnailSize: " + thumbnailSize); + console.log("uploadFileAndThumbnail " + file.name + " - thumbnailSize: " + thumbnailSize); - // The message structure that will be returned in the promise - var imageMessage = { + // The message structure that will be returned in the promise will look something like: + var message = { +/* msgtype: "m.image", url: undefined, body: "Image", info: { size: undefined, - w: undefined, - h: undefined, + w: undefined, + h: undefined, mimetype: undefined - }, + }, thumbnail_url: undefined, thumbnail_info: { size: undefined, @@ -78,101 +79,128 @@ angular.module('mFileUpload', ['matrixService', 'mUtilities']) h: undefined, mimetype: undefined } +*/ }; - // First, get the image size - mUtilities.getImageSize(imageFile).then( - function(size) { - console.log("image size: " + JSON.stringify(size)); - - // The final operation: send imageFile - var uploadImage = function() { - self.uploadFile(imageFile).then( - function(url) { - // Update message metadata - imageMessage.url = url; - imageMessage.info = { - 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.info; - } - - // 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); + if (file.type.indexOf("image/") === 0) { + // it's an image - try to do clientside thumbnailing. + mUtilities.getImageSize(file).then( + function(size) { + console.log("image size: " + JSON.stringify(size)); + + // The final operation: send file + var uploadImage = function() { + self.uploadFile(file).then( + function(url) { + // Update message metadata + message.url = url; + message.msgtype = "m.image"; + message.body = file.name; + message.info = { + size: file.size, + w: size.width, + h: size.height, + mimetype: file.type + }; + + // If there is no thumbnail (because the original image is smaller than thumbnailSize), + // reuse the original image info for thumbnail data + if (!message.thumbnail_url) { + message.thumbnail_url = message.url; + message.thumbnail_info = message.info; } - ); - - }, - function(error) { - console.log(" -> Failed to create thumbnail: " + error); - deferred.reject(error); - } - ); + + // We are done + deferred.resolve(message); + }, + 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(file, 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 + message.thumbnail_url = thumbnailUrl; + message.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); } - else { - // No need of thumbnail - console.log(" Thumbnail is not required"); - uploadImage(); + ); + } + else { + // it's a random file - just upload it. + self.uploadFile(file).then( + function(url) { + // Update message metadata + message.url = url; + message.msgtype = "m.file"; + message.body = file.name; + message.info = { + size: file.size, + mimetype: file.type + }; + + // We are done + deferred.resolve(message); + }, + function(error) { + console.log(" -> Can't upload file"); + deferred.reject(error); } - - }, - function(error) { - console.log(" -> Failed to get image size"); - deferred.reject(error); - } - ); + ); + } return deferred.promise; }; diff --git a/syweb/webclient/recents/recents.html b/syweb/webclient/recents/recents.html index 0b3a77ca11..600e1f9c1a 100644 --- a/syweb/webclient/recents/recents.html +++ b/syweb/webclient/recents/recents.html @@ -84,7 +84,7 @@ </div> <div ng-switch-default> - {{ lastMsg.content }} + {{ lastMsg.content.body | linky:'_blank' }} </div> </div> </div> diff --git a/syweb/webclient/room/room-controller.js b/syweb/webclient/room/room-controller.js index cf9bc1fcdb..fdd10d7c9a 100644 --- a/syweb/webclient/room/room-controller.js +++ b/syweb/webclient/room/room-controller.js @@ -495,6 +495,7 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput', 'a }); }; + // used to send an image based on just a URL, rather than uploading one $scope.sendImage = function(url, body) { scrollToBottom(true); @@ -507,23 +508,23 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput', 'a }); }; - $scope.imageFileToSend; - $scope.$watch("imageFileToSend", function(newValue, oldValue) { - if ($scope.imageFileToSend) { - // 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( + $scope.fileToSend; + $scope.$watch("fileToSend", function(newValue, oldValue) { + if ($scope.fileToSend) { + // Upload this file + mFileUpload.uploadFileAndThumbnail($scope.fileToSend, THUMBNAIL_SIZE).then( + function(fileMessage) { + // fileMessage is complete message structure, send it as is + matrixService.sendMessage($scope.room_id, undefined, fileMessage).then( function() { - console.log("Image message sent"); + console.log("File message sent"); }, function(error) { - $scope.feedback = "Failed to send image message: " + error.data.error; + $scope.feedback = "Failed to send file message: " + error.data.error; }); }, function(error) { - $scope.feedback = "Can't upload image"; + $scope.feedback = "Can't upload file"; } ); } diff --git a/syweb/webclient/room/room.html b/syweb/webclient/room/room.html index 955f5ff114..8baf9eda71 100644 --- a/syweb/webclient/room/room.html +++ b/syweb/webclient/room/room.html @@ -198,31 +198,45 @@ {{ msg.user_id }} changed their display name from {{ msg.prev_content.displayname }} to {{ msg.content.displayname }} </span> - <span ng-show='msg.content.msgtype === "m.emote"' - ng-class="msg.echo_msg_state" - ng-bind-html="'* ' + (msg.__room_member.cnt.displayname || msg.user_id) + ' ' + msg.content.body | linky:'_blank'" - /> - - <span ng-show='msg.content.msgtype === "m.text"' - class="message" - ng-class="containsBingWord(msg) && msg.user_id != state.user_id ? msg.echo_msg_state + ' messageBing' : msg.echo_msg_state" - ng-bind-html="(msg.content.msgtype === 'm.text' && msg.type === 'm.room.message' && msg.content.format === 'org.matrix.custom.html') ? - (msg.content.formatted_body | unsanitizedLinky) : - (msg.content.msgtype === 'm.text' && msg.type === 'm.room.message') ? (msg.content.body | linky:'_blank') : '' "/> + <span ng-show='msg.type === "m.room.message"' ng-switch='msg.content.msgtype'> + <span ng-switch-when="m.emote" + ng-class="containsBingWord(msg) && msg.user_id != state.user_id ? msg.echo_msg_state + ' messageBing' : msg.echo_msg_state" + ng-bind-html="'* ' + (msg.__room_member.cnt.displayname || msg.user_id) + ' ' + msg.content.body | linky:'_blank'" + /> + + <span ng-switch-when="m.text" + class="message" + ng-class="containsBingWord(msg) && msg.user_id != state.user_id ? msg.echo_msg_state + ' messageBing' : msg.echo_msg_state" + ng-bind-html="(msg.content.format === 'org.matrix.custom.html') ? (msg.content.formatted_body | unsanitizedLinky) : (msg.content.body | linky:'_blank') "/> + + <div ng-switch-when="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.$parent.fullScreenImageURL = msg.content.url; $event.stopPropagation();"/> + </div> + </div> + + <span ng-switch-when="m.file" ng-class="msg.echo_msg_state"> + <a href="{{ msg.content.url}}" target="_blank">{{ msg.content.body }}</a> + <div ng-show='msg.content.thumbnail_url' ng-style="{ 'height' : msg.content.thumbnail_info.h }"> + <a href="{{ msg.content.url}}" target="_blank"> + <img class="image mouse-pointer" ng-src="{{ msg.content.thumbnail_url }}"/> + </a> + </div> + </span> + + <span ng-switch-default + ng-class="containsBingWord(msg) && msg.user_id != state.user_id ? msg.echo_msg_state + ' messageBing' : msg.echo_msg_state" + ng-bind-html="msg.content.body | linky:'_blank'" + /> + </span> <span ng-show='msg.type === "m.call.invite" && msg.user_id == state.user_id'>Outgoing Call{{ isWebRTCSupported() ? '' : ' (But your browser does not support VoIP)' }}</span> <span ng-show='msg.type === "m.call.invite" && msg.user_id != state.user_id'>Incoming Call{{ isWebRTCSupported() ? '' : ' (But your browser does not support VoIP)' }}</span> - <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; $event.stopPropagation();"/> - </div> - </div> - <span ng-if="'m.room.topic' === msg.type"> {{ msg.__room_member.cnt.displayname || msg.user_id }} changed the topic to: {{ msg.content.topic }} </span> @@ -250,7 +264,7 @@ <div id="controlPanel"> <div id="controls"> - <button id="attachButton" m-file-input="imageFileToSend" class="extraControls" ng-disabled="state.permission_denied"></button> + <button id="attachButton" m-file-input="fileToSend" class="extraControls" ng-disabled="state.permission_denied"></button> <textarea id="mainInput" rows="1" ng-enter="send()" ng-disabled="state.permission_denied" ng-focus="true" autocomplete="off" tab-complete command-history="room_id"/> |