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] 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"