From 7083bbc04fde33bdfad11e80cb7d43d86a562c39 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Mon, 26 Oct 2020 16:03:01 +0100
Subject: [PATCH 1/5] Chat previews now expanded with aspect ratio

Instead of cropping the previews in the conversation to a square, they
are now using a limited height but their width is computed based on
aspect ratio. This is done by passing different arguments to the
previews endpoint so it delivers a preview with the matching size.

Adjusted styles around the preview to make it look better.

Expanded image preview height to 384 as it looks better.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 .../Message/MessagePart/FilePreview.vue       | 30 ++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index 2d4f5844bd1..a8e2a904540 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -28,7 +28,7 @@
 		:class="{ 'file-preview--viewer-available': isViewerAvailable, 'file-preview--upload-editor': isUploadEditor }"
 		@click="handleClick"
 		@keydown.enter="handleClick">
-		<img v-if="(!isLoading && !failed) || hasTemporaryImageUrl"
+		<img v-if="(!isLoading && !failed)"
 			:class="previewSizeClass"
 			class="file-preview__image"
 			alt=""
@@ -94,7 +94,7 @@ export default {
 		},
 		previewSize: {
 			type: Number,
-			default: 128,
+			default: 384,
 		},
 		// In case this component is used to display a file that is being uploaded
 		// this parameter is used to access the file upload status in the store
@@ -109,6 +109,7 @@ export default {
 			default: '',
 		},
 		// True if this component is used in the upload editor
+		// FIXME: file-preview should be encapsulated and not be aware of its surroundings
 		isUploadEditor: {
 			type: Boolean,
 			default: false,
@@ -162,9 +163,9 @@ export default {
 			}
 
 			const previewSize = Math.ceil(this.previewSize * window.devicePixelRatio)
-			return generateUrl('/core/preview?fileId={fileId}&x={width}&y={height}', {
+			// expand width but keep a max height
+			return generateUrl('/core/preview?fileId={fileId}&x=-1&y={height}&a=1', {
 				fileId: this.id,
-				width: previewSize,
 				height: previewSize,
 			})
 		},
@@ -290,14 +291,19 @@ export default {
 		object-fit: cover;
 	}
 
+	.loading {
+		display: inline-block;
+		width: 100%;
+	}
+
 	.preview {
-		display: block;
-		width: 128px;
-		height: 128px;
+		display: inline-block;
+		max-width: 100%;
+		height: 384px;
 	}
 	.preview-64 {
-		display: block;
-		width: 64px;
+		display: inline-block;
+		max-width: 100%;
 		height: 64px;
 	}
 
@@ -308,7 +314,6 @@ export default {
 		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
-		margin-top: 4px;
 	}
 
 	&:not(.file-preview--viewer-available) {
@@ -323,6 +328,11 @@ export default {
 		padding: 12px;
 		.preview {
 			margin: auto;
+			width: 128px;
+			height: 128px;
+		}
+		.loading {
+			width: 100%;
 		}
 	}
 }

From 805b1cfc93cfc60247a26fcbece61ffe6804cb61 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Mon, 26 Oct 2020 20:10:42 +0100
Subject: [PATCH 2/5] Add size to system message from shared file

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 lib/Chat/Parser/SystemMessage.php           |  3 +++
 tests/php/Chat/Parser/SystemMessageTest.php | 15 +++++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/lib/Chat/Parser/SystemMessage.php b/lib/Chat/Parser/SystemMessage.php
index 1b892c410f1..c69aeaf9598 100644
--- a/lib/Chat/Parser/SystemMessage.php
+++ b/lib/Chat/Parser/SystemMessage.php
@@ -323,6 +323,7 @@ protected function getFileFromShare(Participant $participant, string $shareId):
 		$share = $this->shareProvider->getShareById($shareId);
 		$node = $share->getNode();
 		$name = $node->getName();
+		$size = $node->getSize();
 		$path = $name;
 
 		if (!$participant->isGuest()) {
@@ -349,6 +350,7 @@ protected function getFileFromShare(Participant $participant, string $shareId):
 					$fullPath = $userNode->getPath();
 					$pathSegments = explode('/', $fullPath, 4);
 					$name = $userNode->getName();
+					$size = $userNode->getSize();
 					$path = $pathSegments[3] ?? $path;
 				}
 			} else {
@@ -370,6 +372,7 @@ protected function getFileFromShare(Participant $participant, string $shareId):
 			'type' => 'file',
 			'id' => (string) $node->getId(),
 			'name' => $name,
+			'size' => $size,
 			'path' => $path,
 			'link' => $url,
 			'mimetype' => $node->getMimeType(),
diff --git a/tests/php/Chat/Parser/SystemMessageTest.php b/tests/php/Chat/Parser/SystemMessageTest.php
index 955cfaf3c8e..3231c45c3ac 100644
--- a/tests/php/Chat/Parser/SystemMessageTest.php
+++ b/tests/php/Chat/Parser/SystemMessageTest.php
@@ -433,6 +433,9 @@ public function testGetFileFromShareForGuest() {
 		$node->expects($this->once())
 			->method('getMimeType')
 			->willReturn('text/plain');
+		$node->expects($this->once())
+			->method('getSize')
+			->willReturn(65530);
 
 		$share = $this->createMock(IShare::class);
 		$share->expects($this->once())
@@ -469,6 +472,7 @@ public function testGetFileFromShareForGuest() {
 			'type' => 'file',
 			'id' => '54',
 			'name' => 'name',
+			'size' => 65530,
 			'path' => 'name',
 			'link' => 'absolute-link',
 			'mimetype' => 'text/plain',
@@ -490,6 +494,9 @@ public function testGetFileFromShareForOwner() {
 		$node->expects($this->once())
 			->method('getMimeType')
 			->willReturn('httpd/unix-directory');
+		$node->expects($this->once())
+			->method('getSize')
+			->willReturn(65520);
 
 		$share = $this->createMock(IShare::class);
 		$share->expects($this->once())
@@ -529,6 +536,7 @@ public function testGetFileFromShareForOwner() {
 			'type' => 'file',
 			'id' => '54',
 			'name' => 'name',
+			'size' => 65520,
 			'path' => 'path/to/file/name',
 			'link' => 'absolute-link-owner',
 			'mimetype' => 'httpd/unix-directory',
@@ -547,6 +555,9 @@ public function testGetFileFromShareForRecipient() {
 		$node->expects($this->once())
 			->method('getMimeType')
 			->willReturn('application/octet-stream');
+		$node->expects($this->once())
+			->method('getSize')
+			->willReturn(65510);
 
 		$share = $this->createMock(IShare::class);
 		$share->expects($this->once())
@@ -573,6 +584,9 @@ public function testGetFileFromShareForRecipient() {
 		$file->expects($this->once())
 			->method('getPath')
 			->willReturn('/user/files/Shared/different');
+		$file->expects($this->once())
+			->method('getSize')
+			->willReturn(65515);
 
 		$userFolder = $this->createMock(Folder::class);
 		$userFolder->expects($this->once())
@@ -602,6 +616,7 @@ public function testGetFileFromShareForRecipient() {
 			'type' => 'file',
 			'id' => '54',
 			'name' => 'different',
+			'size' => 65515,
 			'path' => 'Shared/different',
 			'link' => 'absolute-link-owner',
 			'mimetype' => 'application/octet-stream',

From 549d8902c6b86e80162a9fddb00fa03e66e6417b Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Mon, 26 Oct 2020 20:58:58 +0100
Subject: [PATCH 3/5] Direct preview for GIFs + guest mode previews

Use direct URL for small GIFS.
Added preview support for guest mode.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 .../Message/MessagePart/FilePreview.vue       | 40 +++++++++++++++----
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index a8e2a904540..7364ae4fe82 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import { generateUrl, imagePath } from '@nextcloud/router'
+import { generateUrl, imagePath, generateRemoteUrl } from '@nextcloud/router'
 import ProgressBar from '@nextcloud/vue/dist/Components/ProgressBar'
 import Close from 'vue-material-design-icons/Close'
 
@@ -80,6 +80,10 @@ export default {
 			type: String,
 			default: '',
 		},
+		size: {
+			type: Number,
+			default: -1,
+		},
 		link: {
 			type: String,
 			default: '',
@@ -154,20 +158,42 @@ export default {
 			return 'preview'
 		},
 		previewUrl() {
+			const userId = this.$store.getters.getUserId()
 			if (this.hasTemporaryImageUrl) {
 				return this.localUrl
 			}
 
-			if (this.previewAvailable !== 'yes' || this.$store.getters.getUserId() === null) {
+			if (this.previewAvailable !== 'yes') {
 				return OC.MimeType.getIconUrl(this.mimetype)
 			}
 
+			// TODO: make this maximum configurable
+			if (this.mimetype === 'image/gif' && this.size <= 3145728) {
+				// return direct image so it can be animated
+				if (userId === null) {
+					// guest mode, use public link download URL
+					return this.link + '/download/' + this.name
+				} else {
+					// use direct DAV URL
+					return generateRemoteUrl(`dav/files/${userId}`) + this.internalAbsolutePath
+				}
+			}
+
 			const previewSize = Math.ceil(this.previewSize * window.devicePixelRatio)
-			// expand width but keep a max height
-			return generateUrl('/core/preview?fileId={fileId}&x=-1&y={height}&a=1', {
-				fileId: this.id,
-				height: previewSize,
-			})
+			if (userId === null) {
+				// guest mode: grab token from the link URL
+				// FIXME: use a cleaner way...
+				const token = this.link.substr(this.link.lastIndexOf('/') + 1)
+				return generateUrl('/apps/files_sharing/publicpreview/{token}?x=-1&y={height}&a=1', {
+					token: token,
+					height: previewSize,
+				})
+			} else {
+				return generateUrl('/core/preview?fileId={fileId}&x=-1&y={height}&a=1', {
+					fileId: this.id,
+					height: previewSize,
+				})
+			}
 		},
 		isViewerAvailable() {
 			if (!OCA.Viewer) {

From 591cacd5194243388e7c82249a98fdc6c8dfed41 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Mon, 26 Oct 2020 22:04:12 +0100
Subject: [PATCH 4/5] Make max GIF size configurable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added app setting and capability "max-gif-size".
Added new import for @nextcloud/capabilities.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
Co-authored-by: John Molakvoæ <skjnldsv@users.noreply.github.com>
---
 docs/capabilities.md                          |  3 +++
 lib/Capabilities.php                          |  3 +++
 package-lock.json                             | 11 ++++++++--
 package.json                                  |  1 +
 .../Message/MessagePart/FilePreview.vue       |  6 +++--
 tests/php/CapabilitiesTest.php                | 22 ++++++++++++++-----
 6 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/docs/capabilities.md b/docs/capabilities.md
index 03c878d7d75..234362367ee 100644
--- a/docs/capabilities.md
+++ b/docs/capabilities.md
@@ -51,3 +51,6 @@ title: Capabilities
 * `force-mute` - "forceMute" signaling messages can be sent to mute other participants.
 * `conversation-v2` - The conversations API v2 is less load heavy and should be used by clients when available. Check the difference in the [Conversation API documentation](conversation.md).
 * `chat-reference-id` - an optional referenceId can be sent with a chat message to be able to identify it in parallel get requests to earlier fade out a temporary message
+
+## 11.0
+* `config => previews => max-gif-size` - Maximum size in bytes below which a GIF can be embedded directly in the page at render time. Bigger files will be rendered statically using the preview endpoint instead. Can be set with `occ config:app:set spreed max-gif-size --value=X` where X is the new value in bytes. Defaults to 3 MB.
diff --git a/lib/Capabilities.php b/lib/Capabilities.php
index 3a31ad55636..7971a0b459a 100644
--- a/lib/Capabilities.php
+++ b/lib/Capabilities.php
@@ -89,6 +89,9 @@ public function getCapabilities(): array {
 					'max-length' => ChatManager::MAX_CHAT_LENGTH,
 				],
 				'conversations' => [],
+				'previews' => [
+					'max-gif-size' => (int)$this->serverConfig->getAppValue('spreed', 'max-gif-size', '3145728')
+				],
 			],
 		];
 
diff --git a/package-lock.json b/package-lock.json
index 9f83ad84436..1f4e6c4d9b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4919,6 +4919,7 @@
 					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
 					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"color-convert": "^2.0.1"
 					}
@@ -4983,6 +4984,7 @@
 					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
 					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"color-name": "~1.1.4"
 					}
@@ -4991,7 +4993,8 @@
 					"version": "1.1.4",
 					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
 					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"electron-to-chromium": {
 					"version": "1.3.582",
@@ -5009,7 +5012,8 @@
 					"version": "3.0.0",
 					"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
 					"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"escalade": {
 					"version": "3.1.1",
@@ -5298,6 +5302,7 @@
 					"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.9.tgz",
 					"integrity": "sha512-mu9pg6554GbXDSO8LlxkQM6qUJzUkb/A0FJc9LgRqnU9MCnhzEXwCt1Zx5NObvFpzs2mH2dH/uUCDwL8Qaz9sA==",
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"chalk": "^4.1.0",
 						"hash-sum": "^2.0.0",
@@ -5309,6 +5314,7 @@
 							"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
 							"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
 							"dev": true,
+							"optional": true,
 							"requires": {
 								"ansi-styles": "^4.1.0",
 								"supports-color": "^7.1.0"
@@ -5319,6 +5325,7 @@
 							"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
 							"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
 							"dev": true,
+							"optional": true,
 							"requires": {
 								"big.js": "^5.2.2",
 								"emojis-list": "^3.0.0",
diff --git a/package.json b/package.json
index 6178cb6d5a9..4f3b9933dfb 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
 		"@nextcloud/auth": "^1.3.0",
 		"@nextcloud/axios": "^1.4.0",
 		"@nextcloud/browser-storage": "^0.1.1",
+		"@nextcloud/capabilities": "^1.0.2",
 		"@nextcloud/dialogs": "^3.0.0",
 		"@nextcloud/event-bus": "^1.2.0",
 		"@nextcloud/initial-state": "^1.2.0",
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index 7364ae4fe82..632bab55d1b 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -54,6 +54,7 @@
 import { generateUrl, imagePath, generateRemoteUrl } from '@nextcloud/router'
 import ProgressBar from '@nextcloud/vue/dist/Components/ProgressBar'
 import Close from 'vue-material-design-icons/Close'
+import { getCapabilities } from '@nextcloud/capabilities'
 
 export default {
 	name: 'FilePreview',
@@ -167,8 +168,9 @@ export default {
 				return OC.MimeType.getIconUrl(this.mimetype)
 			}
 
-			// TODO: make this maximum configurable
-			if (this.mimetype === 'image/gif' && this.size <= 3145728) {
+			// max size of a gif for which we allow direct embedding
+			const maxGifSize = getCapabilities()?.caps?.spreed?.config?.previews?.['max-gif-size'] || 3145728
+			if (this.mimetype === 'image/gif' && this.size <= maxGifSize) {
 				// return direct image so it can be animated
 				if (userId === null) {
 					// guest mode, use public link download URL
diff --git a/tests/php/CapabilitiesTest.php b/tests/php/CapabilitiesTest.php
index b2a7f94456e..0d17e752e92 100644
--- a/tests/php/CapabilitiesTest.php
+++ b/tests/php/CapabilitiesTest.php
@@ -64,10 +64,12 @@ public function testGetCapabilitiesGuest(): void {
 		$this->talkConfig->expects($this->never())
 			->method('isDisabledForUser');
 
-		$this->serverConfig->expects($this->once())
+		$this->serverConfig->expects($this->any())
 			->method('getAppValue')
-			->with('spreed', 'has_reference_id', 'no')
-			->willReturn('no');
+			->willReturnMap([
+				['spreed', 'has_reference_id', 'no', 'no'],
+				['spreed', 'max-gif-size', '3145728', '200000'],
+			]);
 
 		$this->assertInstanceOf(IPublicCapability::class, $capabilities);
 		$this->assertSame([
@@ -108,6 +110,9 @@ public function testGetCapabilitiesGuest(): void {
 					'conversations' => [
 						'can-create' => false,
 					],
+					'previews' => [
+						'max-gif-size' => 200000,
+					],
 				],
 			],
 		], $capabilities->getCapabilities());
@@ -155,10 +160,12 @@ public function testGetCapabilitiesUserAllowed(bool $isNotAllowed, bool $canCrea
 			->with($user)
 			->willReturn($isNotAllowed);
 
-		$this->serverConfig->expects($this->once())
+		$this->serverConfig->expects($this->any())
 			->method('getAppValue')
-			->with('spreed', 'has_reference_id', 'no')
-			->willReturn('yes');
+			->willReturnMap([
+				['spreed', 'has_reference_id', 'no', 'yes'],
+				['spreed', 'max-gif-size', '3145728', '200000'],
+			]);
 
 		$this->assertInstanceOf(IPublicCapability::class, $capabilities);
 		$this->assertSame([
@@ -201,6 +208,9 @@ public function testGetCapabilitiesUserAllowed(bool $isNotAllowed, bool $canCrea
 					'conversations' => [
 						'can-create' => $canCreate,
 					],
+					'previews' => [
+						'max-gif-size' => 200000,
+					],
 				],
 			],
 		], $capabilities->getCapabilities());

From 7c26560c784e79f1efe35e1ff27062bcc2e13449 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Wed, 28 Oct 2020 17:26:26 +0100
Subject: [PATCH 5/5] Use max-height for images

Makes it possible to resize both previews and GIFs in a responsive
manner, keeping the ratio and everything visible.

Added border radius to make it look even nicer.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 .../MessagesGroup/Message/MessagePart/FilePreview.vue       | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index 632bab55d1b..2862d7b17f7 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -326,13 +326,15 @@ export default {
 
 	.preview {
 		display: inline-block;
+		border-radius: var(--border-radius);
 		max-width: 100%;
-		height: 384px;
+		max-height: 384px;
 	}
 	.preview-64 {
 		display: inline-block;
+		border-radius: var(--border-radius);
 		max-width: 100%;
-		height: 64px;
+		max-height: 64px;
 	}
 
 	strong {