Merge pull request #1163 from nextcloud/show-preview-of-shared-files-in-system-messages

Show preview of shared files in system messages

4 files changed, 81 insertions, 4 deletions

diff --git a/css/comments.scss b/css/comments.scss
index c02973a8a..2ed25ee6e 100644
--- a/css/comments.scss
+++ b/css/comments.scss
@@ -332,3 +332,16 @@ body:not(#body-public) #commentsTabView .comment:not(.newCommentRow) .message .m
 	left: -12px;
 	top: 140%;
 }
+
+#commentsTabView .comment .message .filePreviewContainer .filePreview {
+	/* The file preview can not be a block; otherwise it would fill the whole
+	 * width of the container and the loading icon would not be centered on the
+	 * image. */
+	display: inline-block;
+}
+
+#commentsTabView .comment .message .filePreviewContainer strong {
+	/* As the file preview is an inline block the name is set as a block to
+	 * force it to be on its own line below the preview. */
+	display: block;
+}
diff --git a/js/richobjectstringparser.js b/js/richobjectstringparser.js
index 736d2bfd5..64ef9f9b2 100644
--- a/js/richobjectstringparser.js
+++ b/js/richobjectstringparser.js
@@ -25,6 +25,12 @@
 					'</span>' +
 				'</span>',
 
+		_filePreviewTemplate: '' +
+				'<a href="{{link}}" class="filePreviewContainer" target="_blank" rel="noopener noreferrer">' +
+					'<span class="filePreview" data-file-id="{{id}}"></span>' +
+					'<strong>{{name}}</strong>' +
+				'</a>',
+
 		_unknownTemplate: '<strong>{{name}}</strong>',
 		_unknownLinkTemplate: '<a href="{{link}}" class="external" target="_blank" rel="noopener noreferrer"><strong>{{name}}</strong></a>',
 
@@ -74,6 +80,12 @@
 					}
 					return this.userLocalTemplate(parameter);
 
+				case 'file':
+					if (!this.filePreviewTemplate) {
+						this.filePreviewTemplate = Handlebars.compile(this._filePreviewTemplate);
+					}
+					return this.filePreviewTemplate(parameter);
+
 				default:
 					if (!_.isUndefined(parameter.link)) {
 						if (!this.unknownLinkTemplate) {
diff --git a/js/views/chatview.js b/js/views/chatview.js
index ad4cd78e5..6b7b4f91a 100644
--- a/js/views/chatview.js
+++ b/js/views/chatview.js
@@ -564,6 +564,12 @@
 		},
 
 		_postRenderMessage: function($el) {
+			var self = this;
+
+			$el.find('.filePreview').each(function() {
+				self._renderFilePreview($(this));
+			});
+
 			// Contacts menu is not shown in public view.
 			if (!OC.getCurrentUser().uid) {
 				return;
@@ -580,6 +586,54 @@
 			});
 		},
 
+		_renderFilePreview: function($filePreview) {
+			var previewSize = Math.ceil(128 * window.devicePixelRatio);
+
+			var defaultIconUrl = OC.imagePath('core', 'filetypes/file');
+			var previewUrl = OC.generateUrl(
+				'/core/preview?fileId={fileId}&x={width}&y={height}&forceIcon=true',
+				{
+					fileId: $filePreview.data('file-id'),
+					width: previewSize,
+					height: previewSize
+				});
+
+			// If the default file icon can not be loaded either there is
+			// nothing else that can be done, just remove the loading icon
+			// and the image and leave only the message about a shared file.
+			var handleDefaultIconLoadError = function() {
+				$filePreview.removeClass('icon-loading');
+				$filePreview.find('img').remove();
+			};
+
+			var img = new Image();
+
+			var handlePreviewLoadError = function() {
+				img.onerror = handleDefaultIconLoadError;
+
+				img.src = defaultIconUrl;
+			};
+
+			img.onload = function() {
+				$filePreview.removeClass('icon-loading');
+			};
+
+			$filePreview.addClass('icon-loading');
+
+			img.width = previewSize;
+			img.height = previewSize;
+
+			if (OC.getCurrentUser().uid) {
+				img.onerror = handlePreviewLoadError;
+				img.src = previewUrl;
+			} else {
+				img.onerror = handleDefaultIconLoadError;
+				img.src = defaultIconUrl;
+			}
+
+			$filePreview.prepend(img);
+		},
+
 		_onTypeComment: function(ev) {
 			var $field = $(ev.target);
 			var $submitButton = $field.data('submitButtonEl');
diff --git a/lib/Chat/SystemMessage/Parser.php b/lib/Chat/SystemMessage/Parser.php
index ace5db30c..4c417a01c 100644
--- a/lib/Chat/SystemMessage/Parser.php
+++ b/lib/Chat/SystemMessage/Parser.php
@@ -175,10 +175,8 @@ class Parser {
 		} else if ($message === 'file_shared') {
 			try {
 				$parsedParameters['file'] = $this->getFileFromShare($parameters['share']);
-				$parsedMessage = $this->l->t('{actor} shared {file}');
-				if ($currentUserIsActor) {
-					$parsedMessage = $this->l->t('You shared {file}');
-				}
+				$parsedMessage = '{file}';
+				$comment->setVerb('comment');
 			} catch (\Exception $e) {
 				$parsedMessage = $this->l->t('{actor} shared a file which is no longer available');
 				if ($currentUserIsActor) {