Add recursive folder previews

Signed-off-by: Corentin Mors <corentin.mors@dashlane.com>

src/components/File.vue

@@ -109,7 +109,7 @@ export default {
 			OCA.Viewer.open({
 				path: this.item.injected.filename,
 				list: this.item.injected.list,
-				loadMore: async() => await this.item.injected.loadMore(true),
+				loadMore: this.item.injected.loadMore ? async() => await this.item.injected.loadMore(true) : () => [],
 				canLoop: this.item.injected.canLoop,
 			})
 		},

src/components/Folder.vue

@@ -25,7 +25,7 @@
 	<FolderTagPreview :id="item.injected.fileid"
 		:name="item.injected.basename"
 		:path="item.injected.filename"
-		:file-list="fileList" />
+		:file-list="previewFiles" />
 </template>
 
 <script>
@@ -53,6 +53,7 @@ export default {
 	data() {
 		return {
 			cancelRequest: null,
+			previewFolder: this.item.injected.fileid,
 		}
 	},
 
@@ -67,33 +68,36 @@ export default {
 		folderContent() {
 			return this.folders[this.item.injected.fileid]
 		},
-		fileList() {
-			return this.folderContent
-				? this.folderContent
+		previewFiles() {
+			const previewFolderContent = this.folders[this.previewFolder]
+
+			const previewFiles = previewFolderContent
+				? previewFolderContent
 					.map(id => this.files[id])
-					.filter(file => !!file)
 					.slice(0, 4) // only get the 4 first images
 				: []
+
+			// If we didn't found any previews in the folder we try the next subfolder
+			// We limit to one subfolder for performance concerns
+			if (previewFiles.length === 0
+				&& this.files[this.previewFolder].folders
+				&& this.previewFolder === this.item.injected.fileid) {
+
+				const firstChildFolder = this.files[this.previewFolder].folders[0]
+				this.updatePreviewFolder(firstChildFolder)
+
+				if (!this.folders[this.previewFolder]) {
+					this.getFolderData(this.files[this.previewFolder].filename)
+				}
+			}
+
+			return previewFiles
 		},
 	},
 
 	async created() {
-		// init cancellable request
-		const { request, cancel } = cancelableRequest(getAlbumContent)
-		this.cancelRequest = cancel
-
-		try {
-			// get data
-			const { folder, folders, files } = await request(this.item.injected.filename, { shared: this.item.injected.showShared })
-			this.$store.dispatch('updateFolders', { fileid: folder.fileid, files, folders })
-			this.$store.dispatch('updateFiles', { folder, files, folders })
-		} catch (error) {
-			if (error.response && error.response.status) {
-				console.error('Failed to get folder content', this.item.injected.folder, error.response)
-			}
-			// else we just cancelled the request
-		} finally {
-			this.cancelRequest = null
+		if (!this.folderContent) {
+			await this.getFolderData(this.item.injected.filename)
 		}
 	},
 
@@ -103,6 +107,32 @@ export default {
 			this.cancelRequest('Navigated away')
 		}
 	},
+
+	methods: {
+		async getFolderData(filename) {
+			// init cancellable request
+			const { request, cancel } = cancelableRequest(getAlbumContent)
+			this.cancelRequest = cancel
+
+			try {
+				// get data
+				const { folder, folders, files } = await request(filename, { shared: this.item.injected.showShared })
+				this.$store.dispatch('updateFolders', { fileid: folder.fileid, files, folders })
+				this.$store.dispatch('updateFiles', { folder, files, folders })
+			} catch (error) {
+				if (error.response && error.response.status) {
+					console.error('Failed to get folder content', filename, error.response)
+				}
+				// else we just cancelled the request
+			} finally {
+				this.cancelRequest = null
+			}
+		},
+
+		updatePreviewFolder(path) {
+			this.previewFolder = path
+		},
+	},
 }
 </script>
 

src/views/Albums.vue

@@ -142,7 +142,7 @@ export default {
 			return list
 		},
 		contentList() {
-			const folders = this.folderList.map((folder) => {
+			const folders = this.folderList?.map((folder) => {
 				return {
 					id: `folder-${folder.fileid}`,
 					injected: {
@@ -156,7 +156,7 @@ export default {
 				}
 			})
 
-			const files = this.fileList.map((file) => {
+			const files = this.fileList?.map((file) => {
 				return {
 					id: `file-${file.fileid}`,
 					injected: {
@@ -170,7 +170,7 @@ export default {
 				}
 			})
 
-			return [...folders, ...files]
+			return [...(folders || []), ...(files || [])]
 		},
 
 		// is current folder empty?