Do not load user config for each previews

lib/components/FilePicker/FileList.vue

@@ -63,6 +63,7 @@
 						:can-pick="multiselect || selectedFiles.length === 0 || selectedFiles.includes(file)"
 						:selected="selectedFiles.includes(file)"
 						:node="file"
+						:crop-image-previews="cropImagePreviews"
 						@update:selected="onNodeSelected(file)"
 						@enter-directory="onChangeDirectory" />
 				</template>
@@ -132,7 +133,7 @@ const toggleSorting = (sortBy: ISortingAttributes) => {
 	}
 }
 
-const { sortFavoritesFirst } = useFilesSettings()
+const { sortFavoritesFirst, cropImagePreviews } = useFilesSettings()
 
 /**
  * Files sorted by columns

lib/components/FilePicker/FileListRow.spec.ts

@@ -50,6 +50,7 @@ describe('FilePicker: FileListRow', () => {
 				showCheckbox: true,
 				canPick: true,
 				node,
+				cropImagePreviews: true,
 			},
 		})
 
@@ -70,6 +71,7 @@ describe('FilePicker: FileListRow', () => {
 				showCheckbox: true,
 				canPick: true,
 				node,
+				cropImagePreviews: true,
 			},
 		})
 
@@ -86,6 +88,7 @@ describe('FilePicker: FileListRow', () => {
 				showCheckbox: true,
 				canPick: true,
 				node,
+				cropImagePreviews: true,
 			},
 		})
 
@@ -103,6 +106,7 @@ describe('FilePicker: FileListRow', () => {
 				showCheckbox: true,
 				canPick: true,
 				node,
+				cropImagePreviews: true,
 			},
 		})
 
@@ -120,6 +124,7 @@ describe('FilePicker: FileListRow', () => {
 				showCheckbox: false,
 				canPick: true,
 				node,
+				cropImagePreviews: true,
 			},
 		})
 
@@ -137,6 +142,7 @@ describe('FilePicker: FileListRow', () => {
 				showCheckbox: false,
 				canPick: true,
 				node,
+				cropImagePreviews: true,
 			},
 		})
 

lib/components/FilePicker/FileListRow.vue

@@ -21,7 +21,7 @@
 		</td>
 		<td class="row-name">
 			<div class="file-picker__name-container" data-testid="row-name">
-				<FilePreview :node="node" />
+				<FilePreview :node="node" :crop-image-previews="cropImagePreviews" />
 				<div class="file-picker__file-name" :title="displayName" v-text="displayName" />
 				<div class="file-picker__file-extension" v-text="fileExtension" />
 			</div>
@@ -55,6 +55,8 @@ const props = defineProps<{
 	canPick: boolean
 	/** The current node */
 	node: Node
+	/** Whether the preview should be cropped */
+	cropImagePreviews: Boolean
 }>()
 
 const emit = defineEmits<{

lib/components/FilePicker/FilePreview.vue

@@ -13,7 +13,6 @@
 import { FileType, type Node } from '@nextcloud/files'
 import { computed, ref, watch } from 'vue'
 import { getPreviewURL } from '../../composables/preview'
-import { useFilesSettings } from '../../composables/filesSettings'
 import { t } from '../../utils/l10n'
 
 import IconFile from 'vue-material-design-icons/File.vue'
@@ -26,9 +25,9 @@ const fileListIconStyles = ref(fileListIconStylesModule)
 
 const props = defineProps<{
 	node: Node
+	cropImagePreviews: Boolean
 }>()
 
-const { cropImagePreviews } = useFilesSettings()
 const previewURL = computed(() => getPreviewURL(props.node, { cropPreview: cropImagePreviews.value }))
 
 const isFile = computed(() => props.node.type === FileType.File)

lib/composables/filesSettings.ts

@@ -60,10 +60,10 @@ export const useFilesSettings = () => {
 	const cropImagePreviews = ref(filesUserState?.crop_image_previews ?? true)
 
 	onMounted(() => {
-		axios.get(generateUrl('/apps/files/api/v1/configs')).then((respose) => {
-			showHiddenFiles.value = respose.data?.data?.show_hidden ?? false
-			sortFavoritesFirst.value = respose.data?.data?.sort_favorites_first ?? true
-			cropImagePreviews.value = respose.data?.data?.crop_image_previews ?? true
+		axios.get(generateUrl('/apps/files/api/v1/configs')).then((response) => {
+			showHiddenFiles.value = response.data?.data?.show_hidden ?? false
+			sortFavoritesFirst.value = response.data?.data?.sort_favorites_first ?? true
+			cropImagePreviews.value = response.data?.data?.crop_image_previews ?? true
 		})
 	})