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 811dd5acda..2b93749d74 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 @@ -165,6 +165,16 @@ export default { title: channel.name, }) }, + + initView() { + const args = this.getUrlArgs() + + if (args.section) + this.selectedView = args.section + + if (this.selectedView) + this.selectView(this.selectedView) + }, }, watch: { @@ -172,16 +182,35 @@ export default { this.onPlaylistSelected(this.selectedPlaylist) }, + selectedPlaylist_(value) { + if (value == null) + this.setUrlArgs({playlist: null}) + }, + selectedChannel() { this.onChannelSelected(this.selectedChannel) }, + + selectedChannel_(value) { + if (value == null) + this.setUrlArgs({channel: null}) + }, + + selectedView() { + this.setUrlArgs({section: this.selectedView}) + }, }, mounted() { this.loadYoutubeConfig() + this.initView() this.onPlaylistSelected(this.selectedPlaylist) this.onChannelSelected(this.selectedChannel) }, + + unmounted() { + this.setUrlArgs({section: null}) + }, } 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 6078c759dd..5127484254 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 @@ -162,8 +162,13 @@ export default { }, }, - mounted() { - this.loadChannel() + async mounted() { + this.setUrlArgs({channel: this.id}) + await this.loadChannel() + }, + + unmounted() { + this.setUrlArgs({channel: null}) }, } @@ -187,7 +192,7 @@ export default { .actions { display: flex; flex-direction: column; - align-items: center; + align-items: flex-end; button { background: $default-bg-7; diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue index c48ca6fa7f..96c52e632f 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue @@ -132,8 +132,13 @@ export default { }, mounted() { + this.setUrlArgs({playlist: this.id}) this.loadItems() }, + + unmounted() { + this.setUrlArgs({playlist: null}) + }, } diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlists.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlists.vue index f1943aa982..6900f98e65 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlists.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlists.vue @@ -234,8 +234,22 @@ export default { }, }, - mounted() { - this.loadPlaylists() + async mounted() { + await this.loadPlaylists() + + const args = this.getUrlArgs() + if (args.playlist) { + const playlist = this.playlistsById[args.playlist] + if (playlist) { + this.$emit('select', playlist) + } else { + this.$emit('select', {id: args.playlist}) + } + } + }, + + unmouted() { + this.setUrlArgs({section: null}) }, } 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 57b7e8b481..a1ff46ed10 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 @@ -91,10 +91,18 @@ export default { this.loading = false } }, + + initView() { + const args = this.getUrlArgs() + if (args.channel) { + this.$emit('select', {id: args.channel}) + } + }, }, - mounted() { - this.loadSubscriptions() + async mounted() { + await this.loadSubscriptions() + this.initView() }, }