From eff8cecee27fffcf1908aa1e10c897445b7aba80 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Sun, 27 Aug 2023 02:07:43 +0200
Subject: [PATCH 1/3] fix: Use core preview controller for loading file
 previews and fallback to MDI icons

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 lib/components/FilePicker/FileListRow.vue |  13 +-
 lib/components/FilePicker/FilePreview.vue |  55 +++
 lib/usables/preview.ts                    |  92 +++++
 package-lock.json                         | 425 +++++++++++++++++++++-
 package.json                              |   5 +-
 vite.config.ts                            |   3 +
 6 files changed, 581 insertions(+), 12 deletions(-)
 create mode 100644 lib/components/FilePicker/FilePreview.vue
 create mode 100644 lib/usables/preview.ts

diff --git a/lib/components/FilePicker/FileListRow.vue b/lib/components/FilePicker/FileListRow.vue
index bea0514c..4e47ac60 100644
--- a/lib/components/FilePicker/FileListRow.vue
+++ b/lib/components/FilePicker/FileListRow.vue
@@ -21,7 +21,7 @@
 		</td>
 		<td class="row-name">
 			<div class="file-picker__name-container" data-testid="row-name">
-				<div :class="fileListIconStyles['file-picker__file-icon']" :style="{ backgroundImage }" />
+				<FilePreview :node="node" />
 				<div class="file-picker__file-name" :title="displayName" v-text="displayName" />
 				<div class="file-picker__file-extension" v-text="fileExtension" />
 			</div>
@@ -36,13 +36,15 @@
 	</tr>
 </template>
 <script setup lang="ts">
-import { type Node, formatFileSize, FileType } from '@nextcloud/files'
+import type { Node } from '@nextcloud/files'
+
+import { formatFileSize, FileType } from '@nextcloud/files'
 import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { computed } from 'vue'
 import { t } from '../../utils/l10n'
 
+import FilePreview from './FilePreview.vue'
 import NcDatetime from './NcDatetime.vue'
-import fileListIconStyles from './FileListIcon.module.scss'
 
 const props = defineProps<{
 	/** Can directories be picked */
@@ -84,11 +86,6 @@ const isDirectory = computed(() => props.node.type === FileType.Folder)
  */
 const isPickable = computed(() => props.canPick && (props.allowPickDirectory || !isDirectory.value))
 
-/**
- * Background image url for the given nodes mime type
- */
-const backgroundImage = computed(() => `url(${window.OC.MimeType.getIconUrl(props.node.mime)})`)
-
 /**
  * Toggle the selection state
  */
diff --git a/lib/components/FilePicker/FilePreview.vue b/lib/components/FilePicker/FilePreview.vue
new file mode 100644
index 00000000..77d174a5
--- /dev/null
+++ b/lib/components/FilePicker/FilePreview.vue
@@ -0,0 +1,55 @@
+<template>
+	<div :style="canLoadPreview ? { backgroundImage: `url(${previewURL})`} : undefined"
+		:aria-label="t('Mime type {mime}', { mime: node.mime || t('unknown') })"
+		class="file-picker__file-icon">
+		<template v-if="!canLoadPreview">
+			<IconFile v-if="isFile" :size="20" />
+			<IconFolder v-else :size="20" />
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { FileType, type Node } from '@nextcloud/files'
+import { usePreviewURL } from '../../usables/preview'
+import { computed, ref, toRef, watch } from 'vue'
+import { t } from '../../utils/l10n'
+
+import IconFile from 'vue-material-design-icons/File.vue'
+import IconFolder from 'vue-material-design-icons/Folder.vue'
+
+const props = defineProps<{
+	node: Node
+}>()
+
+const { previewURL } = usePreviewURL(toRef(props, 'node'))
+
+const isFile = computed(() => props.node.type === FileType.File)
+const canLoadPreview = ref(false)
+
+watch(previewURL, () => {
+	canLoadPreview.value = false
+
+	if (previewURL.value) {
+		const loader = document.createElement('img')
+		loader.src = previewURL.value.href
+		loader.onerror = () => loader.remove()
+		loader.onload = () => { canLoadPreview.value = true; loader.remove() }
+		document.body.appendChild(loader)
+	}
+}, { immediate: true })
+</script>
+
+<style scoped lang="scss">
+.file-picker__file-icon {
+	width: 32px;
+	height: 32px;
+	min-width: 32px;
+	min-height: 32px;
+	background-repeat: no-repeat;
+	background-size: contain;
+	// for the fallback
+	display: flex;
+	justify-content: center;
+}
+</style>
diff --git a/lib/usables/preview.ts b/lib/usables/preview.ts
new file mode 100644
index 00000000..90c69cb6
--- /dev/null
+++ b/lib/usables/preview.ts
@@ -0,0 +1,92 @@
+/**
+ * @copyright Copyright (c) 2023 Ferdinand Thiessen <opensource@fthiessen.de>
+ *
+ * @author Ferdinand Thiessen <opensource@fthiessen.de>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type { Node } from '@nextcloud/files'
+import type { Ref } from 'vue'
+
+import { generateUrl } from '@nextcloud/router'
+import { toValue } from '@vueuse/core'
+import { ref, watchEffect } from 'vue'
+
+interface PreviewOptions {
+	/**
+	 * Size of the previews in px
+	 * @default 32
+	 */
+	size?: number
+	/**
+	 * Should the preview fall back to the mime type icon
+	 * @default true
+	 */
+	mimeFallback?: boolean
+	/**
+	 * Should the preview be cropped or fitted
+	 * @default false (meaning it gets fitted)
+	 */
+	cropPreview?: boolean
+}
+
+/**
+ * Generate the preview URL of a file node
+ *
+ * @param node The node to generate the preview for
+ * @param options Preview options
+ */
+export function getPreviewURL(node: Node, options: PreviewOptions = {}) {
+	options = { size: 32, cropPreview: false, mimeFallback: true, ...options }
+
+	try {
+		const previewUrl = node.attributes?.previewUrl
+			|| generateUrl('/core/preview?fileId={fileid}', {
+				fileid: node.fileid,
+			})
+
+		let url
+		try {
+			url = new URL(previewUrl)
+		} catch (e) {
+			url = new URL(previewUrl, window.location.origin)
+		}
+
+		// Request preview with params
+		url.searchParams.set('x', `${options.size}`)
+		url.searchParams.set('y', `${options.size}`)
+		url.searchParams.set('mimeFallback', `${options.mimeFallback}`)
+
+		// Handle cropping
+		url.searchParams.set('a', options.cropPreview === true ? '0' : '1')
+		return url
+	} catch (e) {
+		return null
+	}
+}
+
+export const usePreviewURL = (node: Node | Ref<Node>, options?: PreviewOptions | Ref<PreviewOptions>) => {
+	const previewURL = ref<URL|null>(null)
+
+	watchEffect(() => {
+		previewURL.value = getPreviewURL(toValue(node), toValue(options || {}))
+	})
+
+	return {
+		previewURL,
+	}
+}
diff --git a/package-lock.json b/package-lock.json
index 0f2ff889..18f4c5fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,6 @@
         "@vueuse/core": "^10.4.1",
         "toastify-js": "^1.12.0",
         "vue-frag": "^1.4.3",
-        "vue-material-design-icons": "^5.2.0",
         "webdav": "^5.2.3"
       },
       "devDependencies": {
@@ -37,7 +36,9 @@
         "typedoc": "^0.24.8",
         "typescript": "^5.1.6",
         "typescript-plugin-css-modules": "^5.0.1",
-        "vite": "^4.4.9"
+        "vite": "^4.4.9",
+        "vitest": "^0.34.3",
+        "vue-material-design-icons": "^5.2.0"
       },
       "engines": {
         "node": "^20.0.0",
@@ -3518,6 +3519,21 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/chai": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.6.tgz",
+      "integrity": "sha512-VOVRLM1mBxIRxydiViqPcKn6MIxZytrbMpd6RJLIWKxUNr3zux8no0Oc7kJx0WAPIitgZ0gkrDS+btlqQpubpw==",
+      "dev": true
+    },
+    "node_modules/@types/chai-subset": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@types/chai-subset/-/chai-subset-1.3.3.tgz",
+      "integrity": "sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==",
+      "dev": true,
+      "dependencies": {
+        "@types/chai": "*"
+      }
+    },
     "node_modules/@types/debug": {
       "version": "4.1.8",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.8.tgz",
@@ -4094,6 +4110,101 @@
         "vue": "^2.7.0-0"
       }
     },
+    "node_modules/@vitest/expect": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.34.5.tgz",
+      "integrity": "sha512-/3RBIV9XEH+nRpRMqDJBufKIOQaYUH2X6bt0rKSCW0MfKhXFLYsR5ivHifeajRSTsln0FwJbitxLKHSQz/Xwkw==",
+      "dev": true,
+      "dependencies": {
+        "@vitest/spy": "0.34.5",
+        "@vitest/utils": "0.34.5",
+        "chai": "^4.3.7"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-0.34.5.tgz",
+      "integrity": "sha512-RDEE3ViVvl7jFSCbnBRyYuu23XxmvRTSZWW6W4M7eC5dOsK75d5LIf6uhE5Fqf809DQ1+9ICZZNxhIolWHU4og==",
+      "dev": true,
+      "dependencies": {
+        "@vitest/utils": "0.34.5",
+        "p-limit": "^4.0.0",
+        "pathe": "^1.1.1"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner/node_modules/p-limit": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz",
+      "integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^1.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@vitest/runner/node_modules/yocto-queue": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz",
+      "integrity": "sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-0.34.5.tgz",
+      "integrity": "sha512-+ikwSbhu6z2yOdtKmk/aeoDZ9QPm2g/ZO5rXT58RR9Vmu/kB2MamyDSx77dctqdZfP3Diqv4mbc/yw2kPT8rmA==",
+      "dev": true,
+      "dependencies": {
+        "magic-string": "^0.30.1",
+        "pathe": "^1.1.1",
+        "pretty-format": "^29.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-0.34.5.tgz",
+      "integrity": "sha512-epsicsfhvBjRjCMOC/3k00mP/TBGQy8/P0DxOFiWyLt55gnZ99dqCfCiAsKO17BWVjn4eZRIjKvcqNmSz8gvmg==",
+      "dev": true,
+      "dependencies": {
+        "tinyspy": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-0.34.5.tgz",
+      "integrity": "sha512-ur6CmmYQoeHMwmGb0v+qwkwN3yopZuZyf4xt1DBBSGBed8Hf9Gmbm/5dEWqgpLPdRx6Av6jcWXrjcKfkTzg/pw==",
+      "dev": true,
+      "dependencies": {
+        "diff-sequences": "^29.4.3",
+        "loupe": "^2.3.6",
+        "pretty-format": "^29.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/@volar/language-core": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.10.0.tgz",
@@ -4616,6 +4727,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/acorn-walk": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
+      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -4867,6 +4987,15 @@
         "util": "^0.12.0"
       }
     },
+    "node_modules/assertion-error": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
+      "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -5634,6 +5763,15 @@
       "resolved": "https://registry.npmjs.org/byte-length/-/byte-length-1.0.2.tgz",
       "integrity": "sha512-ovBpjmsgd/teRmgcPh23d4gJvxDoXtAzEL9xTfMU8Yc2kqCDb7L9jAG0XHl1nzuGl+h3ebCIF1i62UFyA9V/2Q=="
     },
+    "node_modules/cac": {
+      "version": "6.7.14",
+      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -5681,6 +5819,24 @@
         }
       ]
     },
+    "node_modules/chai": {
+      "version": "4.3.8",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.8.tgz",
+      "integrity": "sha512-vX4YvVVtxlfSZ2VecZgFUTU5qPCYsobVI2O9FmwEXBhDigYGQA6jRXCycIs1yJnnWbZ6/+a2zNIF5DfVCcJBFQ==",
+      "dev": true,
+      "dependencies": {
+        "assertion-error": "^1.1.0",
+        "check-error": "^1.0.2",
+        "deep-eql": "^4.1.2",
+        "get-func-name": "^2.0.0",
+        "loupe": "^2.3.1",
+        "pathval": "^1.1.1",
+        "type-detect": "^4.0.5"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -5719,6 +5875,15 @@
         "node": "*"
       }
     },
+    "node_modules/check-error": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
+      "integrity": "sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -6134,6 +6299,18 @@
         }
       }
     },
+    "node_modules/deep-eql": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz",
+      "integrity": "sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==",
+      "dev": true,
+      "dependencies": {
+        "type-detect": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -7791,6 +7968,15 @@
         "node": "6.* || 8.* || >= 10.*"
       }
     },
+    "node_modules/get-func-name": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
+      "integrity": "sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
@@ -10686,6 +10872,18 @@
         "node": ">=6.11.5"
       }
     },
+    "node_modules/local-pkg": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
+      "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -10747,6 +10945,15 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/loupe": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.6.tgz",
+      "integrity": "sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==",
+      "dev": true,
+      "dependencies": {
+        "get-func-name": "^2.0.0"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -11490,6 +11697,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/mlly": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.4.2.tgz",
+      "integrity": "sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.10.0",
+        "pathe": "^1.1.1",
+        "pkg-types": "^1.0.3",
+        "ufo": "^1.3.0"
+      }
+    },
     "node_modules/moment": {
       "version": "2.29.4",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
@@ -12176,6 +12395,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/pathe": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.1.tgz",
+      "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==",
+      "dev": true
+    },
+    "node_modules/pathval": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz",
+      "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/pbkdf2": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
@@ -12234,6 +12468,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/pkg-types": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz",
+      "integrity": "sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==",
+      "dev": true,
+      "dependencies": {
+        "jsonc-parser": "^3.2.0",
+        "mlly": "^1.2.0",
+        "pathe": "^1.1.0"
+      }
+    },
     "node_modules/pofile": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pofile/-/pofile-1.0.11.tgz",
@@ -13147,6 +13392,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true
+    },
     "node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -13294,6 +13545,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true
+    },
+    "node_modules/std-env": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.4.3.tgz",
+      "integrity": "sha512-f9aPhy8fYBuMN+sNfakZV18U39PbalgjXG3lLB9WkaYTxijru61wb57V9wxxNthXM5Sd88ETBWi29qLAsHO52Q==",
+      "dev": true
+    },
     "node_modules/stream-browserify": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-3.0.0.tgz",
@@ -13515,6 +13778,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-literal": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-1.3.0.tgz",
+      "integrity": "sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/striptags": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/striptags/-/striptags-3.2.0.tgz",
@@ -13737,11 +14012,35 @@
         "node": ">=0.6.0"
       }
     },
+    "node_modules/tinybench": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.5.1.tgz",
+      "integrity": "sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==",
+      "dev": true
+    },
     "node_modules/tinycolor2": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
       "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="
     },
+    "node_modules/tinypool": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.7.0.tgz",
+      "integrity": "sha512-zSYNUlYSMhJ6Zdou4cJwo/p7w5nmAH17GRfU/ui3ctvjXFErXXkruT4MWW6poDeXgCaIBlGLrfU6TbTXxyGMww==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tinyspy": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.1.1.tgz",
+      "integrity": "sha512-XPJL2uSzcOyBMky6OFrusqWlzfFrXtE0hPuMgW8A2HmaqrPo4ZQHRN/V0QXN3FSjKxpsbRrFc5LI7KOwBsT1/w==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -14069,6 +14368,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/ufo": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.0.tgz",
+      "integrity": "sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==",
+      "dev": true
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -14500,6 +14805,29 @@
         }
       }
     },
+    "node_modules/vite-node": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-0.34.5.tgz",
+      "integrity": "sha512-RNZ+DwbCvDoI5CbCSQSyRyzDTfFvFauvMs6Yq4ObJROKlIKuat1KgSX/Ako5rlDMfVCyMcpMRMTkJBxd6z8YRA==",
+      "dev": true,
+      "dependencies": {
+        "cac": "^6.7.14",
+        "debug": "^4.3.4",
+        "mlly": "^1.4.0",
+        "pathe": "^1.1.1",
+        "picocolors": "^1.0.0",
+        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0-0"
+      },
+      "bin": {
+        "vite-node": "vite-node.mjs"
+      },
+      "engines": {
+        "node": ">=v14.18.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/vite-plugin-css-injected-by-js": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-3.3.0.tgz",
@@ -14604,6 +14932,83 @@
         "@esbuild/win32-x64": "0.18.20"
       }
     },
+    "node_modules/vitest": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.34.5.tgz",
+      "integrity": "sha512-CPI68mmnr2DThSB3frSuE5RLm9wo5wU4fbDrDwWQQB1CWgq9jQVoQwnQSzYAjdoBOPoH2UtXpOgHVge/uScfZg==",
+      "dev": true,
+      "dependencies": {
+        "@types/chai": "^4.3.5",
+        "@types/chai-subset": "^1.3.3",
+        "@types/node": "*",
+        "@vitest/expect": "0.34.5",
+        "@vitest/runner": "0.34.5",
+        "@vitest/snapshot": "0.34.5",
+        "@vitest/spy": "0.34.5",
+        "@vitest/utils": "0.34.5",
+        "acorn": "^8.9.0",
+        "acorn-walk": "^8.2.0",
+        "cac": "^6.7.14",
+        "chai": "^4.3.7",
+        "debug": "^4.3.4",
+        "local-pkg": "^0.4.3",
+        "magic-string": "^0.30.1",
+        "pathe": "^1.1.1",
+        "picocolors": "^1.0.0",
+        "std-env": "^3.3.3",
+        "strip-literal": "^1.0.1",
+        "tinybench": "^2.5.0",
+        "tinypool": "^0.7.0",
+        "vite": "^3.1.0 || ^4.0.0 || ^5.0.0-0",
+        "vite-node": "0.34.5",
+        "why-is-node-running": "^2.2.2"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": ">=v14.18.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@vitest/browser": "*",
+        "@vitest/ui": "*",
+        "happy-dom": "*",
+        "jsdom": "*",
+        "playwright": "*",
+        "safaridriver": "*",
+        "webdriverio": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@vitest/browser": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        },
+        "playwright": {
+          "optional": true
+        },
+        "safaridriver": {
+          "optional": true
+        },
+        "webdriverio": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -15071,6 +15476,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/why-is-node-running": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.2.2.tgz",
+      "integrity": "sha512-6tSwToZxTOcotxHeA+qGCq1mVzKR3CwcJGmVcY+QE8SHy6TnpFnh8PAvPNHYr7EcuVeG0QSMxtYCuO1ta/G/oA==",
+      "dev": true,
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
diff --git a/package.json b/package.json
index 3ebf4064..e23963c5 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,6 @@
     "@vueuse/core": "^10.4.1",
     "toastify-js": "^1.12.0",
     "vue-frag": "^1.4.3",
-    "vue-material-design-icons": "^5.2.0",
     "webdav": "^5.2.3"
   },
   "devDependencies": {
@@ -82,7 +81,9 @@
     "typedoc": "^0.24.8",
     "typescript": "^5.1.6",
     "typescript-plugin-css-modules": "^5.0.1",
-    "vite": "^4.4.9"
+    "vite": "^4.4.9",
+    "vitest": "^0.34.3",
+    "vue-material-design-icons": "^5.2.0"
   },
   "engines": {
     "node": "^20.0.0",
diff --git a/vite.config.ts b/vite.config.ts
index 73831820..5f7f3e54 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -30,7 +30,10 @@ export default defineConfig((env) => {
 			},
 		},
 		nodeExternalsOptions: {
+			// for subpath imports like '@nextcloud/l10n/gettext'
 			include: [/^@nextcloud\//],
+			// we should externalize vue SFC dependencies
+			exclude: [/^vue-material-design-icons\//, /\.vue(\?|$)/],
 		},
 		libraryFormats: ['es', 'cjs'],
 		replace: {

From a956956abdfe64590c7cdb70158c4145185f79a4 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Thu, 21 Sep 2023 16:44:15 +0200
Subject: [PATCH 2/3] fix: Minor linting issues

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 lib/components/FilePicker/FileList.vue | 13 ++++++-------
 lib/index.ts                           |  1 -
 lib/usables/preview.ts                 |  1 +
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/lib/components/FilePicker/FileList.vue b/lib/components/FilePicker/FileList.vue
index 719409fe..06270275 100644
--- a/lib/components/FilePicker/FileList.vue
+++ b/lib/components/FilePicker/FileList.vue
@@ -1,9 +1,9 @@
 <template>
-	<div class="file-picker__files" ref="fileContainer">
+	<div ref="fileContainer" class="file-picker__files">
 		<table>
 			<thead>
 				<tr>
-					<th class="row-checkbox" v-if="multiselect">
+					<th v-if="multiselect" class="row-checkbox">
 						<span class="hidden-visually">
 							{{ t('Select entry') }}
 						</span>
@@ -16,8 +16,7 @@
 					<th :aria-sort="sortByName" class="row-name">
 						<div class="header-wrapper">
 							<span class="file-picker__header-preview" />
-							<NcButton
-								:wide="true"
+							<NcButton :wide="true"
 								type="tertiary"
 								data-test="file-picker_sort-name"
 								@click="toggleSortByName">
@@ -54,7 +53,7 @@
 			</thead>
 			<tbody>
 				<template v-if="loading">
-					<LoadingTableRow v-for="index in skeletonNumber" :key="index" :show-checkbox="multiselect"/>
+					<LoadingTableRow v-for="index in skeletonNumber" :key="index" :show-checkbox="multiselect" />
 				</template>
 				<template v-else>
 					<FileListRow v-for="file in sortedFiles"
@@ -197,7 +196,7 @@ const fileContainer = ref<HTMLDivElement>()
 	const resize = () => nextTick(() => {
 		const nodes = fileContainer.value?.parentElement?.children || []
 		let height = fileContainer.value?.parentElement?.clientHeight || 450
-		for(let index = 0; index < nodes.length; index++) {
+		for (let index = 0; index < nodes.length; index++) {
 			if (!fileContainer.value?.isSameNode(nodes[index])) {
 				height -= nodes[index].clientHeight
 			}
@@ -276,7 +275,7 @@ const fileContainer = ref<HTMLDivElement>()
 		}
 		th :deep(.button-vue__wrapper) {
 			color: var(--color-text-maxcontrast);
-	
+
 			.button-vue__text {
 				font-weight: normal;
 			}
diff --git a/lib/index.ts b/lib/index.ts
index 6ad88577..69cc3dc1 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -8,4 +8,3 @@ export { spawnDialog } from './utils/dialogs.js'
 
 export { FilePickerVue } from './components/FilePicker/index.js'
 export type { IFilePickerButton } from './components/types.js'
-
diff --git a/lib/usables/preview.ts b/lib/usables/preview.ts
index 90c69cb6..0588769d 100644
--- a/lib/usables/preview.ts
+++ b/lib/usables/preview.ts
@@ -70,6 +70,7 @@ export function getPreviewURL(node: Node, options: PreviewOptions = {}) {
 		url.searchParams.set('x', `${options.size}`)
 		url.searchParams.set('y', `${options.size}`)
 		url.searchParams.set('mimeFallback', `${options.mimeFallback}`)
+		url.searchParams.set('c', `${node.attributes.etag}`) // cache busting
 
 		// Handle cropping
 		url.searchParams.set('a', options.cropPreview === true ? '0' : '1')

From f547d5457a54e660b77fec0e0bb65d6d919f2d7c Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Sat, 23 Sep 2023 16:47:25 +0200
Subject: [PATCH 3/3] chore: Extract translations

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 l10n/messages.pot | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/l10n/messages.pot b/l10n/messages.pot
index ecc41626..154b21f8 100644
--- a/l10n/messages.pot
+++ b/l10n/messages.pot
@@ -59,6 +59,9 @@ msgstr ""
 msgid "Home"
 msgstr ""
 
+msgid "Mime type {mime}"
+msgstr ""
+
 msgid "Modified"
 msgstr ""
 
@@ -115,6 +118,9 @@ msgstr ""
 msgid "Undo"
 msgstr ""
 
+msgid "unknown"
+msgstr ""
+
 msgid "Unset"
 msgstr ""