diff --git a/CHANGELOG.md b/CHANGELOG.md index f4932a192534f114b90c9cab4f791c6eaefd81cd..acf707721c7f00d1db0af54db8bdd7401214ef95 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,8 @@ ## 0.2 - 2021-02 ### Added +- Category view: Support load more + [#74](https://git.project-insanity.org/onny/nextcloud-app-podcast/-/issues/74) @onny - Player: Load last episode on start [#158](https://git.project-insanity.org/onny/nextcloud-app-podcast/-/issues/158) @onny - Support resume playback for episodes diff --git a/src/services/FyydApi.js b/src/services/FyydApi.js index 7ceaa4eeea64dfd9e3f9d03ed0924bc88c05b90d..dd4e69748458578f5e85dd9c0142c6a208017b44 100644 --- a/src/services/FyydApi.js +++ b/src/services/FyydApi.js @@ -97,7 +97,7 @@ export class FyydApi { } - queryList(listName, count = 10) { + queryList(listName, count = 20, page = 0) { delete axios.defaults.headers.requesttoken let queryURL = '' @@ -113,6 +113,7 @@ export class FyydApi { return axios.get(queryURL, { params: { count, + page, }, }) .then( diff --git a/src/views/BrowseAll.vue b/src/views/BrowseAll.vue index 81d6f51d9368cbde9113329b91484ff49075be66..7a940d2b7f9b7029d96b3d5657e6caf0d7c5fd7e 100644 --- a/src/views/BrowseAll.vue +++ b/src/views/BrowseAll.vue @@ -24,11 +24,16 @@ <ItemGrid :title="title" :podcasts="podcasts" /> + <EmptyContent + v-show="page" + icon="icon-loading" + class="tableLoading" /> </div> </template> <script> import ItemGrid from '../components/ItemGrid' +import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent' import { setBrowserTitle } from '../utils/misc.js' import { FyydApi } from './../services/FyydApi' const fyydClient = new FyydApi() @@ -37,38 +42,61 @@ export default { name: 'BrowseAll', components: { ItemGrid, + EmptyContent, }, data: () => ({ podcasts: [], category: null, categoryId: null, title: '', + page: 0, }), mounted() { this.category = this.$route.params.category this.categoryId = this.$route.params.categoryId this.queryPodcasts() + document.getElementById('app-content-vue').addEventListener('scroll', this.handleScroll) + }, + destroyed() { + document.getElementById('app-content-vue').removeEventListener('scroll', this.handleScroll) }, methods: { - async queryPodcasts() { + async queryPodcasts(page = 0) { let podcasts = null if (this.category === 'hot') { - podcasts = await fyydClient.queryList('hot', 20) + podcasts = await fyydClient.queryList('hot', 20, page) this.title = 'Hot podcasts' - this.podcasts = podcasts.data + this.podcasts = this.podcasts.concat(podcasts.data) + this.page += 1 } else if (this.category === 'new') { - podcasts = await fyydClient.queryList('latest', 20) + podcasts = await fyydClient.queryList('latest', 20, page) this.title = 'New podcasts' - this.podcasts = podcasts.data + this.podcasts = this.podcasts.concat(podcasts.data) + this.page += 1 } else { - podcasts = await fyydClient.queryList(this.categoryId, 20) + podcasts = await fyydClient.queryList(this.categoryId, 20, page) this.title = 'Podcasts in ' + podcasts.data.category.title - this.podcasts = podcasts.data.podcasts + this.podcasts = this.podcasts.concat(podcasts.data.podcasts) + if (podcasts.meta.paging.next_page === null) { + this.page = null + document.getElementById('app-content-vue').removeEventListener('scroll', this.handleScroll) + } else { + this.page += 1 + } } setBrowserTitle(this.title) + }, + /** + * On scroll event, load more episodes if bottom reached + */ + handleScroll() { + const appContent = document.getElementById('app-content-vue') + if (appContent.scrollTop === (appContent.scrollHeight - appContent.clientHeight)) { + this.queryPodcasts(this.page) + } }, }, diff --git a/src/views/Show.vue b/src/views/Show.vue index 778bbaffd4e980c064ccf741326c1a6bdcef6688..4447e96bb61596dce1336a8b7484a29fafb0e97f 100644 --- a/src/views/Show.vue +++ b/src/views/Show.vue @@ -154,14 +154,12 @@ export default { }, /** - * On scroll event, load more episodes if bottom reached + * On scroll event, load more if bottom reached */ handleScroll() { const appContent = document.getElementById('app-content-vue') if (appContent.scrollTop === (appContent.scrollHeight - appContent.clientHeight)) { - if (!this.episodesLoaded) { - this.queryEpisodes(this.podcastId, this.page) - } + this.queryEpisodes(this.podcastId, this.page) } },