Make max GIF size configurable

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>

6 files changed, 36 insertions, 10 deletions

diff --git a/docs/capabilities.md b/docs/capabilities.md
index 03c878d7d..234362367 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 3a31ad556..7971a0b45 100644
--- a/lib/Capabilities.php
+++ b/lib/Capabilities.php
@@ -89,6 +89,9 @@ class Capabilities implements IPublicCapability {
 					'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 9f83ad844..1f4e6c4d9 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 6178cb6d5..4f3b9933d 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 7364ae4fe..632bab55d 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 b2a7f9445..0d17e752e 100644
--- a/tests/php/CapabilitiesTest.php
+++ b/tests/php/CapabilitiesTest.php
@@ -64,10 +64,12 @@ class CapabilitiesTest extends TestCase {
 		$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 @@ class CapabilitiesTest extends TestCase {
 					'conversations' => [
 						'can-create' => false,
 					],
+					'previews' => [
+						'max-gif-size' => 200000,
+					],
 				],
 			],
 		], $capabilities->getCapabilities());
@@ -155,10 +160,12 @@ class CapabilitiesTest extends TestCase {
 			->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 @@ class CapabilitiesTest extends TestCase {
 					'conversations' => [
 						'can-create' => $canCreate,
 					],
+					'previews' => [
+						'max-gif-size' => 200000,
+					],
 				],
 			],
 		], $capabilities->getCapabilities());