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 <[email protected]>

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

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,
 	}
 }

lib/utils/imagePreload.ts

@@ -0,0 +1,24 @@
+/**
+ * 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
+}

package.json

@@ -67,6 +67,7 @@
     "@types/toastify-js": "^1.12.3",
     "@vueuse/core": "^11.0.3",
     "cancelable-promise": "^4.3.1",
+    "p-queue": "^8.0.1",
     "toastify-js": "^1.12.0",
     "vue-frag": "^1.4.3",
     "webdav": "^5.7.1"