Skip to content

Commit

Permalink
Add recursive folder previews
Browse files Browse the repository at this point in the history
Signed-off-by: Corentin Mors <corentin.mors@dashlane.com>
  • Loading branch information
Corentin Mors committed Oct 28, 2020
1 parent dd91ff9 commit 64fa03b
Show file tree
Hide file tree
Showing 9 changed files with 65 additions and 35 deletions.
4 changes: 2 additions & 2 deletions js/photos-0.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion js/photos-0.js.map

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions js/photos-7.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion js/photos-7.js.map

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions js/photos-main.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion js/photos-main.js.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/components/File.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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,
})
},
Expand Down
72 changes: 51 additions & 21 deletions src/components/Folder.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -53,6 +53,7 @@ export default {
data() {
return {
cancelRequest: null,
previewFolder: this.item.injected.fileid,
}
},

Expand All @@ -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)
}
},

Expand All @@ -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>

Expand Down
6 changes: 3 additions & 3 deletions src/views/Albums.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -156,7 +156,7 @@ export default {
}
})

const files = this.fileList.map((file) => {
const files = this.fileList?.map((file) => {
return {
id: `file-${file.fileid}`,
injected: {
Expand All @@ -170,7 +170,7 @@ export default {
}
})

return [...folders, ...files]
return [...(folders || []), ...(files || [])]
},

// is current folder empty?
Expand Down

0 comments on commit 64fa03b

Please sign in to comment.