diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Item.vue b/platypush/backend/http/webapp/src/components/panels/Media/Item.vue index 683be50bdc..d47f4da4c4 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/Item.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/Item.vue @@ -17,6 +17,10 @@ v-if="item.type !== 'torrent'" /> + + @@ -48,7 +52,15 @@ import Utils from "@/Utils"; export default { components: {Dropdown, DropdownItem, MediaImage}, mixins: [Utils], - emits: ['play', 'select', 'view', 'download'], + emits: [ + 'add-to-playlist', + 'download', + 'play', + 'remove-from-playlist', + 'select', + 'view', + ], + props: { item: { type: Object, @@ -64,6 +76,10 @@ export default { type: Boolean, default: false, }, + + playlist: { + type: String, + }, }, data() { diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue index 3a2ae02687..811dd5acda 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue @@ -26,6 +26,8 @@ diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Channel.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Channel.vue index 2c30c50b9e..6078c759dd 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Channel.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Channel.vue @@ -43,8 +43,10 @@ !itemsByUrl[item.url]) + .map(item => { + return { + type: 'youtube', + ...item, + } + }) + + if (!init) { + items = this.channel.items.concat(items) + } + + this.channel = channel + this.channel.items = items + }, + async loadNextPage() { - if (!this.channel?.next_page_token || this.loadingNextPage) + if (!this.channel?.next_page_token || this.loadingNextPage) { return + } + + this.loadingNextPage = true try { - const nextPage = await this.request( - 'youtube.get_channel', - {id: this.id, next_page_token: this.channel.next_page_token} - ) - - this.channel.items.push(...nextPage.items.filter(item => !this.itemsByUrl[item.url])) - this.channel.next_page_token = nextPage.next_page_token - this.$refs.results.maxResultIndex += this.$refs.results.resultIndexStep + await this.timeout(500) + await this.updateChannel() } finally { this.loadingNextPage = false } @@ -132,18 +160,6 @@ export default { await this.request(`youtube.${action}`, {channel_id: this.id}) this.subscribed = !this.subscribed }, - - onScroll(e) { - const el = e.target - if (!el) - return - - const bottom = (el.scrollHeight - el.scrollTop) <= el.clientHeight + 100 - if (!bottom) - return - - this.loadNextPage() - }, }, mounted() { diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Subscriptions.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Subscriptions.vue index bfcc6317d4..57b7e8b481 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Subscriptions.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Subscriptions.vue @@ -20,7 +20,13 @@
- +
@@ -32,8 +38,14 @@ import Loading from "@/components/Loading"; import Utils from "@/Utils"; export default { - emits: ['play', 'select'], mixins: [Utils], + emits: [ + 'add-to-playlist', + 'download', + 'play', + 'select', + ], + components: { Channel, Loading, diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Results.vue b/platypush/backend/http/webapp/src/components/panels/Media/Results.vue index 2f006ae34d..9ad160a074 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/Results.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/Results.vue @@ -90,14 +90,18 @@ export default { computed: { visibleResults() { - return this.results + let results = this.results .filter((item) => { - if (!this.filter) + if (!this.filter?.length) return true return item.title.toLowerCase().includes(this.filter.toLowerCase()) }) - .slice(0, this.maxResultIndex) + + if (this.maxResultIndex != null) + results = results.slice(0, this.maxResultIndex) + + return results }, }, @@ -112,7 +116,9 @@ export default { return this.$emit('scroll-end') - this.maxResultIndex += this.resultIndexStep + + if (this.resultIndexStep != null) + this.maxResultIndex += this.resultIndexStep }, },