fix: Use core preview controller for loading file previews and fallback to MDI icons

build/extract-l10n.js

@@ -1,23 +1,33 @@
-import { GettextExtractor, JsExtractors } from 'gettext-extractor'
+import { GettextExtractor, JsExtractors, HtmlExtractors } from 'gettext-extractor'
 
-let extractor = new GettextExtractor();
+const extractor = new GettextExtractor()
 
-extractor
-	.createJsParser([
-		JsExtractors.callExpression('t', {
-			arguments: {
-				text: 0,
-			}
-		}),
-		JsExtractors.callExpression('n', {
-			arguments: {
-				text: 1,
-				textPlural: 2,
-			}
-		}),
-	])
-	.parseFilesGlob('./lib/**/*.@(ts|js|vue)');
+const jsParser = extractor.createJsParser([
+	JsExtractors.callExpression('t', {
+		arguments: {
+			text: 0,
+		},
+	}),
+	JsExtractors.callExpression('n', {
+		arguments: {
+			text: 0,
+			textPlural: 1,
+		},
+	}),
+])
+	.parseFilesGlob('./lib/**/*.@(ts|js)')
 
-extractor.savePotFile('./l10n/messages.pot');
+extractor.createHtmlParser([
+	HtmlExtractors.embeddedJs('*', jsParser),
+	HtmlExtractors.embeddedAttributeJs(/:[a-z]+/, jsParser),
+])
+	.parseFilesGlob('./lib/**/*.vue')
 
-extractor.printStats();
+// remove references to avoid conflicts
+extractor.getMessages().forEach((msg) => {
+	msg.references = []
+})
+
+extractor.savePotFile('./l10n/messages.pot')
+
+extractor.printStats()

l10n/messages.pot

@@ -2,92 +2,113 @@ msgid ""
 msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 
-#: lib/components/FilePicker/FilePickerBreadcrumbs.vue:91
 msgid "\"{name}\" is an invalid file name."
 msgstr ""
 
-#: lib/components/FilePicker/FilePickerBreadcrumbs.vue:93
 msgid "\"{name}\" is not an allowed filetype"
 msgstr ""
 
-#: lib/components/FilePicker/FilePickerBreadcrumbs.vue:89
 msgid "\"/\" is not allowed inside a file name."
 msgstr ""
 
-#: lib/components/FilePicker/FilePickerNavigation.vue:57
 msgid "All files"
 msgstr ""
 
-#: lib/filepicker.ts:207
 msgid "Choose"
 msgstr ""
 
-#: lib/filepicker.ts:207
 msgid "Choose {file}"
 msgstr ""
 
-#: lib/filepicker.ts:214
 msgid "Copy"
 msgstr ""
 
-#: lib/filepicker.ts:214
 msgid "Copy to {target}"
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:249
 msgid "Could not create the new folder"
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:159
-#: lib/components/FilePicker/FilePickerNavigation.vue:65
+msgid "Create directory"
+msgstr ""
+
+msgid "Current view selector"
+msgstr ""
+
 msgid "Favorites"
 msgstr ""
 
-#: lib/components/FilePicker/FilePickerBreadcrumbs.vue:87
 msgid "File name cannot be empty."
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:235
+msgid "Filepicker sections"
+msgstr ""
+
 msgid "Files and folders you mark as favorite will show up here."
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:233
 msgid "Files and folders you recently modified will show up here."
 msgstr ""
 
-#: lib/components/FilePicker/FileList.vue:47
+msgid "Filter file list"
+msgstr ""
+
+msgid "Home"
+msgstr ""
+
+msgid "Mime type {mime}"
+msgstr ""
+
 msgid "Modified"
 msgstr ""
 
-#: lib/filepicker.ts:222
 msgid "Move"
 msgstr ""
 
-#: lib/filepicker.ts:222
 msgid "Move to {target}"
 msgstr ""
 
-#: lib/components/FilePicker/FileList.vue:27
 msgid "Name"
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:159
-#: lib/components/FilePicker/FilePickerNavigation.vue:61
+msgid "New"
+msgstr ""
+
+msgid "New folder"
+msgstr ""
+
+msgid "New folder name"
+msgstr ""
+
+msgid "No files in here"
+msgstr ""
+
+msgid "No files matching your filter were found."
+msgstr ""
+
+msgid "No matching files"
+msgstr ""
+
 msgid "Recent"
 msgstr ""
 
-#: lib/components/FilePicker/FileList.vue:8
+msgid "Select all entries"
+msgstr ""
+
 msgid "Select entry"
 msgstr ""
 
-#: lib/components/FilePicker/FileList.vue:37
+msgid "Select the row for {nodename}"
+msgstr ""
+
 msgid "Size"
 msgstr ""
 
-#: lib/toast.ts:242
 msgid "Undo"
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:231
+msgid "unknown"
+msgstr ""
+
 msgid "Upload some content or sync with your devices!"
 msgstr ""

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="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>
@@ -35,11 +35,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, NcDatetime } from '@nextcloud/vue'
 import { computed } from 'vue'
 import { t } from '../../utils/l10n'
 
+import FilePreview from './FilePreview.vue'
+
 const props = defineProps<{
 	/** Can directories be picked */
 	allowPickDirectory: boolean
@@ -80,11 +84,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
  */
@@ -134,15 +133,6 @@ function handleKeyDown(event: KeyboardEvent) {
 		height: 100%;
 	}
 
-	&__file-icon {
-		width: 32px;
-		height: 32px;
-		min-width: 32px;
-		min-height: 32px;
-		background-repeat: no-repeat;
-		background-size: contain;
-	}
-
 	&__file-name {
 		padding-inline-start: 6px;
 		min-width: 0;

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>