MirrorHub/synapse
0
0
Fork 1
mirror of https://mau.dev/maunium/synapse.git synced 2024-11-16 06:51:46 +01:00
Code Issues Projects Releases Wiki Activity

merge in msg.__room_member usage to new message display template

Browse source
This commit is contained in:
Matthew Hodgson 2014-11-15 01:34:33 +00:00
parent 921d95357d
commit adf582dba7
7 changed files with 180 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
synctl Symbolic link
View file

@ -0,0 +1 @@
./synapse/app/synctl.py

4
syweb/webclient/app.css
View file

@ -699,7 +699,7 @@ textarea, input {
vertical-align: middle; vertical-align: middle;
*/ */
display: inline-block; display: inline-block;
max-width: 90%; max-width: 80%;
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
padding-top: 2px; padding-top: 2px;
@ -721,6 +721,7 @@ textarea, input {
text-align: right; text-align: right;
} }
/*
.text.emote .bubble, .text.emote .bubble,
.text.membership .bubble, .text.membership .bubble,
.mine .text.emote .bubble, .mine .text.emote .bubble,
@ -729,6 +730,7 @@ textarea, input {
background-color: transparent ! important; background-color: transparent ! important;
border: 0px ! important; border: 0px ! important;
} }
*/
.mine .text .bubble { .mine .text .bubble {
/* /*

3
syweb/webclient/components/fileInput/file-input-directive.js
View file

@ -25,7 +25,8 @@ angular.module('mFileInput', [])
return { return {
restrict: 'A', restrict: 'A',
transclude: 'true', 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: { scope: {
selectedFile: '=mFileInput' selectedFile: '=mFileInput'
}, },

220
syweb/webclient/components/fileUpload/file-upload-service.js
View file

@ -47,28 +47,29 @@ 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. * 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 * @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 * @returns {promise} A promise that will be resolved by a image message object
* ready to be send with the Matrix API * ready to be send with the Matrix API
*/ */
this.uploadImageAndThumbnail = function(imageFile, thumbnailSize) { this.uploadFileAndThumbnail = function(file, thumbnailSize) {
var self = this; var self = this;
var deferred = $q.defer(); 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 // The message structure that will be returned in the promise will look something like:
var imageMessage = { var message = {
/*
msgtype: "m.image", msgtype: "m.image",
url: undefined, url: undefined,
body: "Image", body: "Image",
info: { info: {
size: undefined, size: undefined,
w: undefined, w: undefined,
h: undefined, h: undefined,
mimetype: undefined mimetype: undefined
}, },
thumbnail_url: undefined, thumbnail_url: undefined,
@ -78,101 +79,128 @@ angular.module('mFileUpload', ['matrixService', 'mUtilities'])
h: undefined, h: undefined,
mimetype: undefined mimetype: undefined
} }
*/
}; };
// First, get the image size if (file.type.indexOf("image/") === 0) {
mUtilities.getImageSize(imageFile).then( // it's an image - try to do clientside thumbnailing.
function(size) { mUtilities.getImageSize(file).then(
console.log("image size: " + JSON.stringify(size)); function(size) {
console.log("image size: " + JSON.stringify(size));
// The final operation: send imageFile // The final operation: send file
var uploadImage = function() { var uploadImage = function() {
self.uploadFile(imageFile).then( self.uploadFile(file).then(
function(url) { function(url) {
// Update message metadata // Update message metadata
imageMessage.url = url; message.url = url;
imageMessage.info = { message.msgtype = "m.image";
size: imageFile.size, message.body = file.name;
w: size.width, message.info = {
h: size.height, size: file.size,
mimetype: imageFile.type w: size.width,
}; h: size.height,
mimetype: file.type
};
// If there is no thumbnail (because the original image is smaller than thumbnailSize), // If there is no thumbnail (because the original image is smaller than thumbnailSize),
// reuse the original image info for thumbnail data // reuse the original image info for thumbnail data
if (!imageMessage.thumbnail_url) { if (!message.thumbnail_url) {
imageMessage.thumbnail_url = imageMessage.url; message.thumbnail_url = message.url;
imageMessage.thumbnail_info = imageMessage.info; message.thumbnail_info = message.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);
} }
);
}, // We are done
function(error) { deferred.resolve(message);
console.log(" -> Failed to create thumbnail: " + error); },
deferred.reject(error); function(error) {
} console.log(" -> Can't upload image");
); deferred.reject(error);
} }
else { );
// No need of thumbnail };
console.log(" Thumbnail is not required");
uploadImage();
}
}, // Create a thumbnail if the image size exceeds thumbnailSize
function(error) { if (Math.max(size.width, size.height) > thumbnailSize) {
console.log(" -> Failed to get image size"); console.log(" Creating thumbnail...");
deferred.reject(error); 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 {
// 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);
}
);
}
return deferred.promise; return deferred.promise;
}; };

2
syweb/webclient/recents/recents.html
View file

@ -84,7 +84,7 @@
</div> </div>
<div ng-switch-default> <div ng-switch-default>
{{ lastMsg.content }} {{ lastMsg.content.body | linky:'_blank' }}
</div> </div>
</div> </div>
</div> </div>

23
syweb/webclient/room/room-controller.js
View file

@ -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) { $scope.sendImage = function(url, body) {
scrollToBottom(true); scrollToBottom(true);
@ -507,23 +508,23 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput', 'a
}); });
}; };
$scope.imageFileToSend; $scope.fileToSend;
$scope.$watch("imageFileToSend", function(newValue, oldValue) { $scope.$watch("fileToSend", function(newValue, oldValue) {
if ($scope.imageFileToSend) { if ($scope.fileToSend) {
// Upload this image with its thumbnail to Internet // Upload this file
mFileUpload.uploadImageAndThumbnail($scope.imageFileToSend, THUMBNAIL_SIZE).then( mFileUpload.uploadFileAndThumbnail($scope.fileToSend, THUMBNAIL_SIZE).then(
function(imageMessage) { function(fileMessage) {
// imageMessage is complete message structure, send it as is // fileMessage is complete message structure, send it as is
matrixService.sendMessage($scope.room_id, undefined, imageMessage).then( matrixService.sendMessage($scope.room_id, undefined, fileMessage).then(
function() { function() {
console.log("Image message sent"); console.log("File message sent");
}, },
function(error) { function(error) {
$scope.feedback = "Failed to send image message: " + error.data.error; $scope.feedback = "Failed to send file message: " + error.data.error;
}); });
}, },
function(error) { function(error) {
$scope.feedback = "Can't upload image"; $scope.feedback = "Can't upload file";
} }
); );
} }

56
syweb/webclient/room/room.html
View file

@ -198,31 +198,45 @@
{{ msg.user_id }} changed their display name from {{ msg.prev_content.displayname }} to {{ msg.content.displayname }} {{ msg.user_id }} changed their display name from {{ msg.prev_content.displayname }} to {{ msg.content.displayname }}
</span> </span>
<span ng-show='msg.content.msgtype === "m.emote"' <span ng-show='msg.type === "m.room.message"' ng-switch='msg.content.msgtype'>
ng-class="msg.echo_msg_state" <span ng-switch-when="m.emote"
ng-bind-html="'* ' + (msg.__room_member.cnt.displayname || msg.user_id) + ' ' + msg.content.body | linky:'_blank'" 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-show='msg.content.msgtype === "m.text"' <span ng-switch-when="m.text"
class="message" class="message"
ng-class="containsBingWord(msg) && msg.user_id != state.user_id ? msg.echo_msg_state + ' messageBing' : msg.echo_msg_state" 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') ? ng-bind-html="(msg.content.format === 'org.matrix.custom.html') ? (msg.content.formatted_body | unsanitizedLinky) : (msg.content.body | linky:'_blank') "/>
(msg.content.formatted_body | unsanitizedLinky) :
(msg.content.msgtype === 'm.text' && msg.type === 'm.room.message') ? (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'>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> <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"> <span ng-if="'m.room.topic' === msg.type">
{{ msg.__room_member.cnt.displayname || msg.user_id }} changed the topic to: {{ msg.content.topic }} {{ msg.__room_member.cnt.displayname || msg.user_id }} changed the topic to: {{ msg.content.topic }}
</span> </span>
@ -250,7 +264,7 @@
<div id="controlPanel"> <div id="controlPanel">
<div id="controls"> <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()" <textarea id="mainInput" rows="1" ng-enter="send()"
ng-disabled="state.permission_denied" ng-disabled="state.permission_denied"
ng-focus="true" autocomplete="off" tab-complete command-history="room_id"/> ng-focus="true" autocomplete="off" tab-complete command-history="room_id"/>