From 36fa7c45d735765b773a4b928ea2a77d071f90b8 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Tue, 29 Oct 2024 15:40:07 +0100
Subject: [PATCH 1/2] feat: Rate-limit image previews

Image preloading should be rate limited, to not overload the server.
Now it is set to max. 5 requests at the same time.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 lib/components/FilePicker/FilePreview.vue | 26 +++++++-----------
 lib/composables/preview.ts                | 12 ++++++++-
 lib/utils/imagePreload.ts                 | 25 ++++++++++++++++++
 package-lock.json                         | 32 +++++++++++++++++++++++
 package.json                              |  1 +
 5 files changed, 78 insertions(+), 18 deletions(-)
 create mode 100644 lib/utils/imagePreload.ts

diff --git a/lib/components/FilePicker/FilePreview.vue b/lib/components/FilePicker/FilePreview.vue
index e3efc398..0445f086 100644
--- a/lib/components/FilePicker/FilePreview.vue
+++ b/lib/components/FilePicker/FilePreview.vue
@@ -3,9 +3,9 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div :style="canLoadPreview ? { backgroundImage: `url(${previewURL})`} : undefined"
+	<div :style="previewLoaded ? { backgroundImage: `url(${previewURL})`} : undefined"
 		:class="fileListIconStyles['file-picker__file-icon']">
-		<template v-if="!canLoadPreview">
+		<template v-if="!previewLoaded">
 			<IconFile v-if="isFile" :size="20" />
 			<IconFolder v-else :size="20" />
 		</template>
@@ -14,14 +14,15 @@
 
 <script setup lang="ts">
 import { FileType, type Node } from '@nextcloud/files'
-import { computed, ref, watchEffect } from 'vue'
-import { getPreviewURL } from '../../composables/preview'
+import { computed, ref, toRef } from 'vue'
+import { usePreviewURL } from '../../composables/preview'
 
 import IconFile from 'vue-material-design-icons/File.vue'
 import IconFolder from 'vue-material-design-icons/Folder.vue'
 
 // CSS modules
 import fileListIconStylesModule from './FileListIcon.module.scss'
+
 // workaround for vue2.7 bug, can be removed with vue3
 const fileListIconStyles = ref(fileListIconStylesModule)
 
@@ -30,21 +31,12 @@ const props = defineProps<{
 	cropImagePreviews: boolean
 }>()
 
-const previewURL = computed(() => getPreviewURL(props.node, { cropPreview: props.cropImagePreviews }))
+const {
+	previewURL,
+	previewLoaded,
+} = usePreviewURL(toRef(props, 'node'), computed(() => ({ cropPreview: props.cropImagePreviews })))
 
 const isFile = computed(() => props.node.type === FileType.File)
-const canLoadPreview = ref(false)
-
-watchEffect(() => {
-	canLoadPreview.value = false
-
-	if (previewURL.value) {
-		const loader = new Image()
-		loader.src = previewURL.value.href
-		loader.onerror = () => loader.remove()
-		loader.onload = () => { canLoadPreview.value = true; loader.remove() }
-	}
-})
 </script>
 
 <script lang="ts">
diff --git a/lib/composables/preview.ts b/lib/composables/preview.ts
index 5d7de8fc..02ffa3b3 100644
--- a/lib/composables/preview.ts
+++ b/lib/composables/preview.ts
@@ -4,11 +4,13 @@
  */
 
 import type { Node } from '@nextcloud/files'
+import type { MaybeRef } from '@vueuse/core'
 import type { Ref } from 'vue'
 
 import { generateUrl } from '@nextcloud/router'
 import { toValue } from '@vueuse/core'
 import { ref, watchEffect } from 'vue'
+import { preloadImage } from '../utils/imagePreload'
 
 interface PreviewOptions {
 	/**
@@ -66,14 +68,22 @@ export function getPreviewURL(node: Node, options: PreviewOptions = {}) {
 	}
 }
 
-export const usePreviewURL = (node: Node | Ref<Node>, options?: PreviewOptions | Ref<PreviewOptions>) => {
+export const usePreviewURL = (node: Node | Ref<Node>, options?: MaybeRef<PreviewOptions>) => {
 	const previewURL = ref<URL|null>(null)
+	const previewLoaded = ref(false)
 
 	watchEffect(() => {
+		previewLoaded.value = false
 		previewURL.value = getPreviewURL(toValue(node), toValue(options || {}))
+		if (previewURL.value) {
+			preloadImage(previewURL.value.href).then((success: boolean) => {
+				previewLoaded.value = success
+			})
+		}
 	})
 
 	return {
 		previewURL,
+		previewLoaded,
 	}
 }
diff --git a/lib/utils/imagePreload.ts b/lib/utils/imagePreload.ts
new file mode 100644
index 00000000..61053fb1
--- /dev/null
+++ b/lib/utils/imagePreload.ts
@@ -0,0 +1,25 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import PQueue from 'p-queue'
+
+const queue = new PQueue({ concurrency: 5 })
+
+/**
+ * Preload an image URL
+ * @param url URL of the image
+ */
+export function preloadImage(url: string): Promise<boolean> {
+	const { resolve, promise } = Promise.withResolvers<boolean>()
+	queue.add(() => {
+		const image = new Image()
+		image.onerror = () => resolve(false)
+		image.onload = () => resolve(true)
+		image.src = url
+		return promise
+	})
+
+	return promise
+}
diff --git a/package-lock.json b/package-lock.json
index 0c960ce4..d5a00294 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "@types/toastify-js": "^1.12.3",
         "@vueuse/core": "^10.11.1",
         "cancelable-promise": "^4.3.1",
+        "p-queue": "^8.0.1",
         "toastify-js": "^1.12.0",
         "vue-frag": "^1.4.3",
         "webdav": "^5.7.1"
@@ -6015,6 +6016,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
+    },
     "node_modules/events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -9790,6 +9796,32 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-queue": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-8.0.1.tgz",
+      "integrity": "sha512-NXzu9aQJTAzbBqOt2hwsR63ea7yvxJc0PwN/zobNAudYfb1B7R08SzB4TsLeSbUCuG467NhnoT0oO6w1qRO+BA==",
+      "dependencies": {
+        "eventemitter3": "^5.0.1",
+        "p-timeout": "^6.1.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-timeout": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-6.1.3.tgz",
+      "integrity": "sha512-UJUyfKbwvr/uZSV6btANfb+0t/mOhKV/KXcCUTp8FcQI+v/0d+wXqH4htrW0E4rR6WiEO/EPvUFiV9D5OI4vlw==",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/package-json-from-dist": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
diff --git a/package.json b/package.json
index 7c9b64ee..b658f18c 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "@types/toastify-js": "^1.12.3",
     "@vueuse/core": "^10.11.1",
     "cancelable-promise": "^4.3.1",
+    "p-queue": "^8.0.1",
     "toastify-js": "^1.12.0",
     "vue-frag": "^1.4.3",
     "webdav": "^5.7.1"

From cca1f93c138b976b94366e9da0bc3fe1dff49483 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Mon, 4 Nov 2024 13:56:31 +0100
Subject: [PATCH 2/2] test: Polyfill tests like the server does

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 package-lock.json | 19 +++++++++++++++----
 package.json      |  1 +
 test/setup.ts     |  7 +++++++
 vite.config.ts    | 23 -----------------------
 vitest.config.ts  | 40 +++++++++++++++++++++++++++++++++++-----
 5 files changed, 58 insertions(+), 32 deletions(-)
 create mode 100644 test/setup.ts

diff --git a/package-lock.json b/package-lock.json
index d5a00294..835de852 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
         "@vue/test-utils": "^1.3.6",
         "@vue/tsconfig": "^0.5.1",
         "@zamiell/typedoc-plugin-not-exported": "^0.3.0",
+        "core-js": "^3.39.0",
         "gettext-extractor": "^3.8.0",
         "gettext-parser": "^8.0.0",
         "happy-dom": "^14.12.3",
@@ -1444,6 +1445,17 @@
         "npm": "^9.0.0"
       }
     },
+    "node_modules/@nextcloud/browser-storage/node_modules/core-js": {
+      "version": "3.33.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.33.0.tgz",
+      "integrity": "sha512-HoZr92+ZjFEKar5HS6MC776gYslNOKHt75mEBKWKnPeFDpZ6nH5OeF3S6HFT1mUAUZKrzkez05VboaX8myjSuw==",
+      "hasInstallScript": true,
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/@nextcloud/browserslist-config": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@nextcloud/browserslist-config/-/browserslist-config-3.0.1.tgz",
@@ -4344,11 +4356,10 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.33.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.33.0.tgz",
-      "integrity": "sha512-HoZr92+ZjFEKar5HS6MC776gYslNOKHt75mEBKWKnPeFDpZ6nH5OeF3S6HFT1mUAUZKrzkez05VboaX8myjSuw==",
+      "version": "3.39.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.39.0.tgz",
+      "integrity": "sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==",
       "hasInstallScript": true,
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/core-js"
diff --git a/package.json b/package.json
index b658f18c..a64a6801 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
     "@vue/test-utils": "^1.3.6",
     "@vue/tsconfig": "^0.5.1",
     "@zamiell/typedoc-plugin-not-exported": "^0.3.0",
+    "core-js": "^3.39.0",
     "gettext-extractor": "^3.8.0",
     "gettext-parser": "^8.0.0",
     "happy-dom": "^14.12.3",
diff --git a/test/setup.ts b/test/setup.ts
new file mode 100644
index 00000000..c731e24c
--- /dev/null
+++ b/test/setup.ts
@@ -0,0 +1,7 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: CC0-1.0
+ */
+
+// Polyfill like the server does
+import 'core-js/stable/index.js'
diff --git a/vite.config.ts b/vite.config.ts
index b54a55b1..70db91b6 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -31,29 +31,6 @@ export default defineConfig((env) => {
 				// Fix for vite config, TODO: remove with next release
 				cssCodeSplit: false,
 			},
-			// vitest configuration
-			test: {
-				environment: 'happy-dom',
-				coverage: {
-					all: true,
-					provider: 'v8',
-					include: ['lib/**/*.ts', 'lib/*.ts'],
-					exclude: ['lib/**/*.spec.ts'],
-				},
-				css: {
-					modules: {
-						classNameStrategy: 'non-scoped',
-					},
-				},
-				server: {
-					deps: {
-						inline: [
-							/@nextcloud\/vue/, // Fix unresolvable .css extension for ssr
-							/@nextcloud\/files/, // Fix CommonJS cancelable-promise not supporting named exports
-						],
-					},
-				},
-			},
 		},
 		// We build for ESM and legacy common js
 		libraryFormats: ['es', 'cjs'],
diff --git a/vitest.config.ts b/vitest.config.ts
index 4616f23b..702ca11e 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -3,11 +3,41 @@
  * SPDX-License-Identifier: CC0-1.0
  */
 import type { ConfigEnv } from 'vite'
+import { defineConfig, type ViteUserConfig } from 'vitest/config'
 import config from './vite.config'
 
-export default async (env: ConfigEnv) => {
+export default defineConfig(async (env: ConfigEnv): Promise<ViteUserConfig> => {
 	const cfg = await config(env)
-	// filter node-externals which will interfere with vitest
-	cfg.plugins = cfg.plugins!.filter((plugin) => plugin && (!('name' in plugin) || plugin.name !== 'node-externals'))
-	return cfg
-}
+
+	return {
+		...cfg,
+
+		// filter node-externals which will interfere with vitest
+		plugins: cfg.plugins!.filter((plugin) => plugin && (!('name' in plugin) || plugin.name !== 'node-externals')),
+
+		// vitest configuration
+		test: {
+			environment: 'happy-dom',
+			coverage: {
+				all: true,
+				provider: 'v8',
+				include: ['lib/**/*.ts', 'lib/*.ts'],
+				exclude: ['lib/**/*.spec.ts'],
+			},
+			css: {
+				modules: {
+					classNameStrategy: 'non-scoped',
+				},
+			},
+			setupFiles: 'test/setup.ts',
+			server: {
+				deps: {
+					inline: [
+						/@nextcloud\/vue/, // Fix unresolvable .css extension for ssr
+						/@nextcloud\/files/, // Fix CommonJS cancelable-promise not supporting named exports
+					],
+				},
+			},
+		},
+	}
+})