From 40c658cb8b05cf2d072e2b78983c47c795f277cc Mon Sep 17 00:00:00 2001 From: Alain Nussbaumer Date: Sat, 26 Apr 2025 08:18:32 +0200 Subject: [PATCH] [web] Change the way the api is called --- web-src/src/pages/PageAlbum.vue | 35 +++++------- web-src/src/pages/PageAlbumSpotify.vue | 29 ++++------ web-src/src/pages/PageAlbums.vue | 15 ++--- web-src/src/pages/PageArtist.vue | 23 +++----- web-src/src/pages/PageArtistSpotify.vue | 46 +++++++-------- web-src/src/pages/PageArtistTracks.vue | 23 +++----- web-src/src/pages/PageArtists.vue | 15 ++--- web-src/src/pages/PageAudiobooksAlbum.vue | 23 +++----- web-src/src/pages/PageAudiobooksAlbums.vue | 19 ++----- web-src/src/pages/PageAudiobooksArtist.vue | 23 +++----- web-src/src/pages/PageAudiobooksArtists.vue | 19 ++----- web-src/src/pages/PageAudiobooksGenres.vue | 19 ++----- web-src/src/pages/PageComposerAlbums.vue | 23 +++----- web-src/src/pages/PageComposerTracks.vue | 23 +++----- web-src/src/pages/PageComposers.vue | 19 ++----- web-src/src/pages/PageFiles.vue | 56 ++++++++----------- web-src/src/pages/PageGenreAlbums.vue | 27 ++++----- web-src/src/pages/PageGenreTracks.vue | 25 +++------ web-src/src/pages/PageGenres.vue | 19 ++----- web-src/src/pages/PageMusic.vue | 39 ++++++------- web-src/src/pages/PageMusicRecentlyAdded.vue | 37 ++++++------ web-src/src/pages/PageMusicRecentlyPlayed.vue | 31 +++++----- web-src/src/pages/PageMusicSpotify.vue | 43 ++++++-------- .../PageMusicSpotifyFeaturedPlaylists.vue | 31 +++++----- .../src/pages/PageMusicSpotifyNewReleases.vue | 31 +++++----- web-src/src/pages/PagePlaylistFolder.vue | 32 +++++------ web-src/src/pages/PagePlaylistTracks.vue | 23 +++----- .../src/pages/PagePlaylistTracksSpotify.vue | 42 ++++++-------- web-src/src/pages/PagePodcast.vue | 23 +++----- web-src/src/pages/PagePodcasts.vue | 23 +++----- web-src/src/pages/PageRadioStreams.vue | 15 ++--- 31 files changed, 320 insertions(+), 531 deletions(-) diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue index c50f044a..28855b43 100644 --- a/web-src/src/pages/PageAlbum.vue +++ b/web-src/src/pages/PageAlbum.vue @@ -31,25 +31,6 @@ import ListTracks from '@/components/ListTracks.vue' import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue' import webapi from '@/webapi' -const dataObject = { - load(to) { - return Promise.all([ - webapi.library_album(to.params.id), - webapi.library_album_tracks(to.params.id) - ]) - }, - set(vm, response) { - vm.album = response[0].data - vm.tracks = new GroupedList(response[1].data, { - criteria: [{ field: 'disc_number', type: Number }], - index: { field: 'disc_number', type: Number } - }) - if (vm.tracks.indices.length < 2) { - vm.tracks.group() - } - } -} - export default { name: 'PageAlbum', components: { @@ -60,8 +41,20 @@ export default { ModalDialogAlbum }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + Promise.all([ + webapi.library_album(to.params.id), + webapi.library_album_tracks(to.params.id) + ]).then(([album, tracks]) => { + next((vm) => { + vm.album = album.data + vm.tracks = new GroupedList(tracks.data, { + criteria: [{ field: 'disc_number', type: Number }], + index: { field: 'disc_number', type: Number } + }) + if (vm.tracks.indices.length < 2) { + vm.tracks.group() + } + }) }) }, data() { diff --git a/web-src/src/pages/PageAlbumSpotify.vue b/web-src/src/pages/PageAlbumSpotify.vue index 4072b7ac..e1d53fc1 100644 --- a/web-src/src/pages/PageAlbumSpotify.vue +++ b/web-src/src/pages/PageAlbumSpotify.vue @@ -32,21 +32,6 @@ import SpotifyWebApi from 'spotify-web-api-js' import { useServicesStore } from '@/stores/services' import webapi from '@/webapi' -const dataObject = { - load(to) { - return webapi.spotify().then(({ data }) => { - const spotifyApi = new SpotifyWebApi() - spotifyApi.setAccessToken(data.webapi_token) - return spotifyApi.getAlbum(to.params.id, { - market: useServicesStore().spotify.webapi_country - }) - }) - }, - set(vm, response) { - vm.album = response - } -} - export default { name: 'PageAlbumSpotify', components: { @@ -57,8 +42,18 @@ export default { ModalDialogAlbumSpotify }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + const spotifyApi = new SpotifyWebApi() + webapi.spotify().then(({ data }) => { + spotifyApi.setAccessToken(data.webapi_token) + spotifyApi + .getAlbum(to.params.id, { + market: useServicesStore().spotify.webapi_country + }) + .then((album) => { + next((vm) => { + vm.album = album + }) + }) }) }, setup() { diff --git a/web-src/src/pages/PageAlbums.vue b/web-src/src/pages/PageAlbums.vue index 2800a240..e9ba511a 100644 --- a/web-src/src/pages/PageAlbums.vue +++ b/web-src/src/pages/PageAlbums.vue @@ -56,15 +56,6 @@ import { useServicesStore } from '@/stores/services' import { useUIStore } from '@/stores/ui' import webapi from '@/webapi' -const dataObject = { - load(to) { - return webapi.library_albums('music') - }, - set(vm, response) { - vm.albumList = new GroupedList(response.data) - } -} - export default { name: 'PageAlbums', components: { @@ -78,8 +69,10 @@ export default { TabsMusic }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + webapi.library_albums('music').then((albums) => { + next((vm) => { + vm.albumList = new GroupedList(albums.data) + }) }) }, setup() { diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue index 16884a47..82700a72 100644 --- a/web-src/src/pages/PageArtist.vue +++ b/web-src/src/pages/PageArtist.vue @@ -59,19 +59,6 @@ import { useServicesStore } from '@/stores/services' import { useUIStore } from '@/stores/ui' import webapi from '@/webapi' -const dataObject = { - load(to) { - return Promise.all([ - webapi.library_artist(to.params.id), - webapi.library_artist_albums(to.params.id) - ]) - }, - set(vm, response) { - vm.artist = response[0].data - vm.albumList = new GroupedList(response[1].data) - } -} - export default { name: 'PageArtist', components: { @@ -85,8 +72,14 @@ export default { ModalDialogArtist }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + Promise.all([ + webapi.library_artist(to.params.id), + webapi.library_artist_albums(to.params.id) + ]).then(([artist, albums]) => { + next((vm) => { + vm.artist = artist.data + vm.albumList = new GroupedList(albums.data) + }) }) }, setup() { diff --git a/web-src/src/pages/PageArtistSpotify.vue b/web-src/src/pages/PageArtistSpotify.vue index 41b7e9f8..5c865220 100644 --- a/web-src/src/pages/PageArtistSpotify.vue +++ b/web-src/src/pages/PageArtistSpotify.vue @@ -34,31 +34,6 @@ import webapi from '@/webapi' const PAGE_SIZE = 50 -const dataObject = { - load(to) { - return webapi.spotify().then(({ data }) => { - const spotifyApi = new SpotifyWebApi() - spotifyApi.setAccessToken(data.webapi_token) - return Promise.all([ - spotifyApi.getArtist(to.params.id), - spotifyApi.getArtistAlbums(to.params.id, { - include_groups: 'album,single', - limit: PAGE_SIZE, - market: useServicesStore().spotify.webapi_country, - offset: 0 - }) - ]) - }) - }, - set(vm, response) { - vm.artist = response.shift() - vm.albums = [] - vm.total = 0 - vm.offset = 0 - vm.appendAlbums(response.shift()) - } -} - export default { name: 'PageArtistSpotify', components: { @@ -69,8 +44,25 @@ export default { ModalDialogArtistSpotify }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + webapi.spotify().then(({ data }) => { + const spotifyApi = new SpotifyWebApi() + spotifyApi.setAccessToken(data.webapi_token) + Promise.all([ + spotifyApi.getArtist(to.params.id), + spotifyApi.getArtistAlbums(to.params.id, { + include_groups: 'album,single', + limit: PAGE_SIZE, + market: useServicesStore().spotify.webapi_country, + offset: 0 + }) + ]).then(([artist, albums]) => { + next((vm) => { + vm.artist = artist + vm.albums = albums.items + vm.total = albums.total + vm.offset = albums.limit + }) + }) }) }, setup() { diff --git a/web-src/src/pages/PageArtistTracks.vue b/web-src/src/pages/PageArtistTracks.vue index 5e8d6a1e..37e8bdcf 100644 --- a/web-src/src/pages/PageArtistTracks.vue +++ b/web-src/src/pages/PageArtistTracks.vue @@ -61,19 +61,6 @@ import { useServicesStore } from '@/stores/services' import { useUIStore } from '@/stores/ui' import webapi from '@/webapi' -const dataObject = { - load(to) { - return Promise.all([ - webapi.library_artist(to.params.id), - webapi.library_artist_tracks(to.params.id) - ]) - }, - set(vm, response) { - vm.artist = response[0].data - vm.trackList = new GroupedList(response[1].data.tracks) - } -} - export default { name: 'PageArtistTracks', components: { @@ -88,8 +75,14 @@ export default { ModalDialogArtist }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + Promise.all([ + webapi.library_artist(to.params.id), + webapi.library_artist_tracks(to.params.id) + ]).then(([artist, tracks]) => { + next((vm) => { + vm.artist = artist.data + vm.trackList = new GroupedList(tracks.data.tracks) + }) }) }, setup() { diff --git a/web-src/src/pages/PageArtists.vue b/web-src/src/pages/PageArtists.vue index 4707c38f..c1cd2f88 100644 --- a/web-src/src/pages/PageArtists.vue +++ b/web-src/src/pages/PageArtists.vue @@ -56,15 +56,6 @@ import { useServicesStore } from '@/stores/services' import { useUIStore } from '@/stores/ui' import webapi from '@/webapi' -const dataObject = { - load(to) { - return webapi.library_artists('music') - }, - set(vm, response) { - vm.artistList = new GroupedList(response.data) - } -} - export default { name: 'PageArtists', components: { @@ -78,8 +69,10 @@ export default { TabsMusic }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + webapi.library_artists('music').then((artists) => { + next((vm) => { + vm.artistList = new GroupedList(artists.data) + }) }) }, setup() { diff --git a/web-src/src/pages/PageAudiobooksAlbum.vue b/web-src/src/pages/PageAudiobooksAlbum.vue index 2a89f448..47839244 100644 --- a/web-src/src/pages/PageAudiobooksAlbum.vue +++ b/web-src/src/pages/PageAudiobooksAlbum.vue @@ -32,19 +32,6 @@ import ListTracks from '@/components/ListTracks.vue' import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue' import webapi from '@/webapi' -const dataObject = { - load(to) { - return Promise.all([ - webapi.library_album(to.params.id), - webapi.library_album_tracks(to.params.id) - ]) - }, - set(vm, response) { - vm.album = response[0].data - vm.tracks = new GroupedList(response[1].data) - } -} - export default { name: 'PageAudiobooksAlbum', components: { @@ -55,8 +42,14 @@ export default { ModalDialogAlbum }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + Promise.all([ + webapi.library_album(to.params.id), + webapi.library_album_tracks(to.params.id) + ]).then(([album, tracks]) => { + next((vm) => { + vm.album = album.data + vm.tracks = new GroupedList(tracks.data) + }) }) }, data() { diff --git a/web-src/src/pages/PageAudiobooksAlbums.vue b/web-src/src/pages/PageAudiobooksAlbums.vue index 421369b1..a2bf8410 100644 --- a/web-src/src/pages/PageAudiobooksAlbums.vue +++ b/web-src/src/pages/PageAudiobooksAlbums.vue @@ -22,17 +22,6 @@ import ListIndexButtons from '@/components/ListIndexButtons.vue' import TabsAudiobooks from '@/components/TabsAudiobooks.vue' import webapi from '@/webapi' -const dataObject = { - load(to) { - return webapi.library_albums('audiobook') - }, - set(vm, response) { - vm.albums = new GroupedList(response.data, { - index: { field: 'name_sort', type: String } - }) - } -} - export default { name: 'PageAudiobooksAlbums', components: { @@ -43,8 +32,12 @@ export default { TabsAudiobooks }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + webapi.library_albums('audiobook').then((albums) => { + next((vm) => { + vm.albums = new GroupedList(albums.data, { + index: { field: 'name_sort', type: String } + }) + }) }) }, data() { diff --git a/web-src/src/pages/PageAudiobooksArtist.vue b/web-src/src/pages/PageAudiobooksArtist.vue index 194fa8be..43e76c11 100644 --- a/web-src/src/pages/PageAudiobooksArtist.vue +++ b/web-src/src/pages/PageAudiobooksArtist.vue @@ -31,19 +31,6 @@ import ListAlbums from '@/components/ListAlbums.vue' import ModalDialogArtist from '@/components/ModalDialogArtist.vue' import webapi from '@/webapi' -const dataObject = { - load(to) { - return Promise.all([ - webapi.library_artist(to.params.id), - webapi.library_artist_albums(to.params.id) - ]) - }, - set(vm, response) { - vm.artist = response[0].data - vm.albums = new GroupedList(response[1].data) - } -} - export default { name: 'PageAudiobooksArtist', components: { @@ -54,8 +41,14 @@ export default { ModalDialogArtist }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + Promise.all([ + webapi.library_artist(to.params.id), + webapi.library_artist_albums(to.params.id) + ]).then(([artist, albums]) => { + next((vm) => { + vm.artist = artist.data + vm.albums = new GroupedList(albums.data) + }) }) }, data() { diff --git a/web-src/src/pages/PageAudiobooksArtists.vue b/web-src/src/pages/PageAudiobooksArtists.vue index fd2c8144..14a733f3 100644 --- a/web-src/src/pages/PageAudiobooksArtists.vue +++ b/web-src/src/pages/PageAudiobooksArtists.vue @@ -22,17 +22,6 @@ import ListIndexButtons from '@/components/ListIndexButtons.vue' import TabsAudiobooks from '@/components/TabsAudiobooks.vue' import webapi from '@/webapi' -const dataObject = { - load(to) { - return webapi.library_artists('audiobook') - }, - set(vm, response) { - vm.artists = new GroupedList(response.data, { - index: { field: 'name_sort', type: String } - }) - } -} - export default { name: 'PageAudiobooksArtists', components: { @@ -43,8 +32,12 @@ export default { TabsAudiobooks }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + webapi.library_artists('audiobook').then((artists) => { + next((vm) => { + vm.artists = new GroupedList(artists.data, { + index: { field: 'name_sort', type: String } + }) + }) }) }, data() { diff --git a/web-src/src/pages/PageAudiobooksGenres.vue b/web-src/src/pages/PageAudiobooksGenres.vue index 4f5c6b91..aa4437d5 100644 --- a/web-src/src/pages/PageAudiobooksGenres.vue +++ b/web-src/src/pages/PageAudiobooksGenres.vue @@ -22,17 +22,6 @@ import ListIndexButtons from '@/components/ListIndexButtons.vue' import TabsAudiobooks from '@/components/TabsAudiobooks.vue' import webapi from '@/webapi' -const dataObject = { - load(to) { - return webapi.library_genres('audiobook') - }, - set(vm, response) { - vm.genres = new GroupedList(response.data.genres, { - index: { field: 'name_sort', type: String } - }) - } -} - export default { name: 'PageAudiobooksGenres', components: { @@ -43,8 +32,12 @@ export default { TabsAudiobooks }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + webapi.library_genres('audiobook').then((response) => { + next((vm) => { + vm.genres = new GroupedList(response.data.genres, { + index: { field: 'name_sort', type: String } + }) + }) }) }, data() { diff --git a/web-src/src/pages/PageComposerAlbums.vue b/web-src/src/pages/PageComposerAlbums.vue index cdacaa84..76d3ba42 100644 --- a/web-src/src/pages/PageComposerAlbums.vue +++ b/web-src/src/pages/PageComposerAlbums.vue @@ -31,19 +31,6 @@ import ListAlbums from '@/components/ListAlbums.vue' import ModalDialogComposer from '@/components/ModalDialogComposer.vue' import webapi from '@/webapi' -const dataObject = { - load(to) { - return Promise.all([ - webapi.library_composer(to.params.name), - webapi.library_composer_albums(to.params.name) - ]) - }, - set(vm, response) { - vm.composer = response[0].data - vm.albums = new GroupedList(response[1].data.albums) - } -} - export default { name: 'PageComposerAlbums', components: { @@ -54,8 +41,14 @@ export default { ModalDialogComposer }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + Promise.all([ + webapi.library_composer(to.params.name), + webapi.library_composer_albums(to.params.name) + ]).then(([composer, albums]) => { + next((vm) => { + vm.composer = composer.data + vm.albums = new GroupedList(albums.data.albums) + }) }) }, data() { diff --git a/web-src/src/pages/PageComposerTracks.vue b/web-src/src/pages/PageComposerTracks.vue index 12159938..7b446788 100644 --- a/web-src/src/pages/PageComposerTracks.vue +++ b/web-src/src/pages/PageComposerTracks.vue @@ -46,19 +46,6 @@ import ModalDialogComposer from '@/components/ModalDialogComposer.vue' import { useUIStore } from '@/stores/ui' import webapi from '@/webapi' -const dataObject = { - load(to) { - return Promise.all([ - webapi.library_composer(to.params.name), - webapi.library_composer_tracks(to.params.name) - ]) - }, - set(vm, response) { - vm.composer = response[0].data - vm.trackList = new GroupedList(response[1].data.tracks) - } -} - export default { name: 'PageComposerTracks', components: { @@ -72,8 +59,14 @@ export default { ModalDialogComposer }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + Promise.all([ + webapi.library_composer(to.params.name), + webapi.library_composer_tracks(to.params.name) + ]).then(([composer, tracks]) => { + next((vm) => { + vm.composer = composer.data + vm.trackList = new GroupedList(tracks.data.tracks) + }) }) }, setup() { diff --git a/web-src/src/pages/PageComposers.vue b/web-src/src/pages/PageComposers.vue index 75d86631..b387a7bd 100644 --- a/web-src/src/pages/PageComposers.vue +++ b/web-src/src/pages/PageComposers.vue @@ -22,17 +22,6 @@ import ListIndexButtons from '@/components/ListIndexButtons.vue' import TabsMusic from '@/components/TabsMusic.vue' import webapi from '@/webapi' -const dataObject = { - load() { - return webapi.library_composers('music') - }, - set(vm, response) { - vm.composers = new GroupedList(response.data, { - index: { field: 'name_sort', type: String } - }) - } -} - export default { name: 'PageComposers', components: { @@ -43,8 +32,12 @@ export default { TabsMusic }, beforeRouteEnter(to, from, next) { - dataObject.load().then((response) => { - next((vm) => dataObject.set(vm, response)) + webapi.library_composers('music').then((composers) => { + next((vm) => { + vm.composers = new GroupedList(composers.data, { + index: { field: 'name_sort', type: String } + }) + }) }) }, data() { diff --git a/web-src/src/pages/PageFiles.vue b/web-src/src/pages/PageFiles.vue index 5c8ea399..41b28861 100644 --- a/web-src/src/pages/PageFiles.vue +++ b/web-src/src/pages/PageFiles.vue @@ -36,34 +36,6 @@ import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue' import { useConfigurationStore } from '@/stores/configuration' import webapi from '@/webapi' -const dataObject = { - load(to) { - if (to.query.directory) { - return webapi.library_files(to.query.directory) - } - return Promise.resolve() - }, - set(vm, response) { - if (response) { - vm.directories = response.data.directories.map((directory) => - vm.transform(directory.path) - ) - } else if (useConfigurationStore().directories) { - vm.directories = useConfigurationStore().directories.map((path) => - vm.transform(path) - ) - } else { - webapi.config().then((config) => { - vm.directories = config.data.directories.map((path) => - vm.transform(path) - ) - }) - } - vm.playlists = new GroupedList(response?.data.playlists) - vm.tracks = new GroupedList(response?.data.tracks) - } -} - export default { name: 'PageFiles', components: { @@ -76,15 +48,12 @@ export default { ModalDialogPlayable }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + next(async (vm) => { + await vm.fetchData(to) }) }, beforeRouteUpdate(to, from, next) { - dataObject.load(to).then((response) => { - dataObject.set(this, response) - next() - }) + this.fetchData(to).then(() => next()) }, setup() { return { @@ -122,6 +91,25 @@ export default { } }, methods: { + async fetchData(to) { + if (to.query.directory) { + const response = await webapi.library_files(to.query.directory) + if (response) { + this.directories = response.data.directories.map((directory) => + this.transform(directory.path) + ) + this.playlists = new GroupedList(response.data.playlists) + this.tracks = new GroupedList(response.data.tracks) + } + } else { + const config = await webapi.config() + this.directories = config.data.directories.map((path) => + this.transform(path) + ) + this.playlists = new GroupedList() + this.tracks = new GroupedList() + } + }, openDetails() { this.showDetailsModal = true }, diff --git a/web-src/src/pages/PageGenreAlbums.vue b/web-src/src/pages/PageGenreAlbums.vue index 93180589..e538a22f 100644 --- a/web-src/src/pages/PageGenreAlbums.vue +++ b/web-src/src/pages/PageGenreAlbums.vue @@ -36,21 +36,6 @@ import ListIndexButtons from '@/components/ListIndexButtons.vue' import ModalDialogGenre from '@/components/ModalDialogGenre.vue' import webapi from '@/webapi' -const dataObject = { - load(to) { - return Promise.all([ - webapi.library_genre(to.params.name, to.query.mediaKind), - webapi.library_genre_albums(to.params.name, to.query.mediaKind) - ]) - }, - set(vm, response) { - vm.genre = response[0].data.genres.items.shift() - vm.albums = new GroupedList(response[1].data.albums, { - index: { field: 'name_sort', type: String } - }) - } -} - export default { name: 'PageGenreAlbums', components: { @@ -62,8 +47,16 @@ export default { ModalDialogGenre }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + Promise.all([ + webapi.library_genre(to.params.name, to.query.mediaKind), + webapi.library_genre_albums(to.params.name, to.query.mediaKind) + ]).then(([genre, albums]) => { + next((vm) => { + vm.genre = genre.data.genres.items.shift() + vm.albums = new GroupedList(albums.data.albums, { + index: { field: 'name_sort', type: String } + }) + }) }) }, data() { diff --git a/web-src/src/pages/PageGenreTracks.vue b/web-src/src/pages/PageGenreTracks.vue index abf7c954..a03e4ac5 100644 --- a/web-src/src/pages/PageGenreTracks.vue +++ b/web-src/src/pages/PageGenreTracks.vue @@ -47,19 +47,6 @@ import ModalDialogGenre from '@/components/ModalDialogGenre.vue' import { useUIStore } from '@/stores/ui' import webapi from '@/webapi' -const dataObject = { - load(to) { - return Promise.all([ - webapi.library_genre(to.params.name, to.query.mediaKind), - webapi.library_genre_tracks(to.params.name, to.query.mediaKind) - ]) - }, - set(vm, response) { - vm.genre = response[0].data.genres.items.shift() - vm.trackList = new GroupedList(response[1].data.tracks) - } -} - export default { name: 'PageGenreTracks', components: { @@ -73,8 +60,14 @@ export default { ModalDialogGenre }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + Promise.all([ + webapi.library_genre(to.params.name, to.query.mediaKind), + webapi.library_genre_tracks(to.params.name, to.query.mediaKind) + ]).then(([genre, tracks]) => { + next((vm) => { + vm.genre = genre.data.genres.items.shift() + vm.trackList = new GroupedList(tracks.data.tracks) + }) }) }, setup() { @@ -138,7 +131,7 @@ export default { this.$router.push({ name: 'genre-albums', params: { name: this.genre.name }, - query: { mediaKind: this.media_kind } + query: { mediaKind: this.mediaKind } }) }, play() { diff --git a/web-src/src/pages/PageGenres.vue b/web-src/src/pages/PageGenres.vue index 70d797b5..982a7b9d 100644 --- a/web-src/src/pages/PageGenres.vue +++ b/web-src/src/pages/PageGenres.vue @@ -22,17 +22,6 @@ import ListIndexButtons from '@/components/ListIndexButtons.vue' import TabsMusic from '@/components/TabsMusic.vue' import webapi from '@/webapi' -const dataObject = { - load() { - return webapi.library_genres('music') - }, - set(vm, response) { - vm.genres = new GroupedList(response.data.genres, { - index: { field: 'name_sort', type: String } - }) - } -} - export default { name: 'PageGenres', components: { @@ -43,8 +32,12 @@ export default { TabsMusic }, beforeRouteEnter(to, from, next) { - dataObject.load().then((response) => { - next((vm) => dataObject.set(vm, response)) + webapi.library_genres('music').then((genres) => { + next((vm) => { + vm.genres = new GroupedList(genres.data.genres, { + index: { field: 'name_sort', type: String } + }) + }) }) }, data() { diff --git a/web-src/src/pages/PageMusic.vue b/web-src/src/pages/PageMusic.vue index 7b828da2..d6460c5a 100644 --- a/web-src/src/pages/PageMusic.vue +++ b/web-src/src/pages/PageMusic.vue @@ -47,9 +47,17 @@ import ListTracks from '@/components/ListTracks.vue' import TabsMusic from '@/components/TabsMusic.vue' import webapi from '@/webapi' -const dataObject = { - load() { - return Promise.all([ +export default { + name: 'PageMusic', + components: { + ContentWithHeading, + HeadingTitle, + ListAlbums, + ListTracks, + TabsMusic + }, + beforeRouteEnter(to, from, next) { + Promise.all([ webapi.search({ expression: 'time_added after 8 weeks ago and media_kind is music having track_count > 3 order by time_added desc', @@ -62,26 +70,11 @@ const dataObject = { limit: 3, type: 'track' }) - ]) - }, - set(vm, response) { - vm.albums = new GroupedList(response[0].data.albums) - vm.tracks = new GroupedList(response[1].data.tracks) - } -} - -export default { - name: 'PageMusic', - components: { - ContentWithHeading, - HeadingTitle, - ListAlbums, - ListTracks, - TabsMusic - }, - beforeRouteEnter(to, from, next) { - dataObject.load().then((response) => { - next((vm) => dataObject.set(vm, response)) + ]).then(([albums, tracks]) => { + next((vm) => { + vm.albums = new GroupedList(albums.data.albums) + vm.tracks = new GroupedList(tracks.data.tracks) + }) }) }, data() { diff --git a/web-src/src/pages/PageMusicRecentlyAdded.vue b/web-src/src/pages/PageMusicRecentlyAdded.vue index 143a8eed..c14b2209 100644 --- a/web-src/src/pages/PageMusicRecentlyAdded.vue +++ b/web-src/src/pages/PageMusicRecentlyAdded.vue @@ -21,31 +21,26 @@ import TabsMusic from '@/components/TabsMusic.vue' import { useSettingsStore } from '@/stores/settings' import webapi from '@/webapi' -const dataObject = { - load() { - const limit = useSettingsStore().recently_added_limit - return webapi.search({ - expression: - 'media_kind is music having track_count > 3 order by time_added desc', - limit, - type: 'album' - }) - }, - set(vm, response) { - vm.albums = new GroupedList(response.data.albums, { - criteria: [{ field: 'time_added', order: -1, type: Date }], - index: { field: 'time_added', type: Date } - }) - } -} - export default { name: 'PageMusicRecentlyAdded', components: { ContentWithHeading, HeadingTitle, ListAlbums, TabsMusic }, beforeRouteEnter(to, from, next) { - dataObject.load().then((response) => { - next((vm) => dataObject.set(vm, response)) - }) + const limit = useSettingsStore().recently_added_limit + webapi + .search({ + expression: + 'media_kind is music having track_count > 3 order by time_added desc', + limit, + type: 'album' + }) + .then((response) => { + next((vm) => { + vm.albums = new GroupedList(response.data.albums, { + criteria: [{ field: 'time_added', order: -1, type: Date }], + index: { field: 'time_added', type: Date } + }) + }) + }) }, setup() { return { diff --git a/web-src/src/pages/PageMusicRecentlyPlayed.vue b/web-src/src/pages/PageMusicRecentlyPlayed.vue index ee11c6ce..82fb614b 100644 --- a/web-src/src/pages/PageMusicRecentlyPlayed.vue +++ b/web-src/src/pages/PageMusicRecentlyPlayed.vue @@ -20,31 +20,26 @@ import ListTracks from '@/components/ListTracks.vue' import TabsMusic from '@/components/TabsMusic.vue' import webapi from '@/webapi' -const dataObject = { - load() { - return webapi.search({ - expression: - 'time_played after 8 weeks ago and media_kind is music order by time_played desc', - limit: 50, - type: 'track' - }) - }, - set(vm, response) { - vm.tracks = new GroupedList(response.data.tracks) - } -} - export default { name: 'PageMusicRecentlyPlayed', components: { ContentWithHeading, HeadingTitle, ListTracks, TabsMusic }, beforeRouteEnter(to, from, next) { - dataObject.load().then((response) => { - next((vm) => dataObject.set(vm, response)) - }) + webapi + .search({ + expression: + 'time_played after 8 weeks ago and media_kind is music order by time_played desc', + limit: 50, + type: 'track' + }) + .then((response) => { + next((vm) => { + vm.tracks = new GroupedList(response.data.tracks) + }) + }) }, data() { return { - tracks: {} + tracks: new GroupedList() } } } diff --git a/web-src/src/pages/PageMusicSpotify.vue b/web-src/src/pages/PageMusicSpotify.vue index 4380c2fc..175378d3 100644 --- a/web-src/src/pages/PageMusicSpotify.vue +++ b/web-src/src/pages/PageMusicSpotify.vue @@ -47,29 +47,6 @@ import SpotifyWebApi from 'spotify-web-api-js' import TabsMusic from '@/components/TabsMusic.vue' import webapi from '@/webapi' -const dataObject = { - load() { - return webapi.spotify().then(({ data }) => { - const spotifyApi = new SpotifyWebApi() - spotifyApi.setAccessToken(data.webapi_token) - return Promise.all([ - spotifyApi.getNewReleases({ - country: data.webapi_country, - limit: 3 - }), - spotifyApi.getFeaturedPlaylists({ - country: data.webapi_country, - limit: 3 - }) - ]) - }) - }, - set(vm, response) { - vm.albums = response[0].albums.items - vm.playlists = response[1].playlists.items - } -} - export default { name: 'PageMusicSpotify', components: { @@ -80,8 +57,24 @@ export default { TabsMusic }, beforeRouteEnter(to, from, next) { - dataObject.load().then((response) => { - next((vm) => dataObject.set(vm, response)) + webapi.spotify().then(({ data }) => { + const spotifyApi = new SpotifyWebApi() + spotifyApi.setAccessToken(data.webapi_token) + Promise.all([ + spotifyApi.getNewReleases({ + country: data.webapi_country, + limit: 3 + }), + spotifyApi.getFeaturedPlaylists({ + country: data.webapi_country, + limit: 3 + }) + ]).then((response) => { + next((vm) => { + vm.albums = response[0].albums.items + vm.playlists = response[1].playlists.items + }) + }) }) }, data() { diff --git a/web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue b/web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue index d88c714a..339f3274 100644 --- a/web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue +++ b/web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue @@ -18,22 +18,6 @@ import SpotifyWebApi from 'spotify-web-api-js' import TabsMusic from '@/components/TabsMusic.vue' import webapi from '@/webapi' -const dataObject = { - load(to) { - return webapi.spotify().then(({ data }) => { - const spotifyApi = new SpotifyWebApi() - spotifyApi.setAccessToken(data.webapi_token) - return spotifyApi.getFeaturedPlaylists({ - country: data.webapi_country, - limit: 50 - }) - }) - }, - set(vm, response) { - vm.playlists = response.playlists.items - } -} - export default { name: 'PageMusicSpotifyFeaturedPlaylists', components: { @@ -43,8 +27,19 @@ export default { TabsMusic }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + webapi.spotify().then(({ data }) => { + const spotifyApi = new SpotifyWebApi() + spotifyApi.setAccessToken(data.webapi_token) + spotifyApi + .getFeaturedPlaylists({ + country: data.webapi_country, + limit: 50 + }) + .then((response) => { + next((vm) => { + vm.playlists = response.playlists.items + }) + }) }) }, data() { diff --git a/web-src/src/pages/PageMusicSpotifyNewReleases.vue b/web-src/src/pages/PageMusicSpotifyNewReleases.vue index d21198e3..2fdb13d6 100644 --- a/web-src/src/pages/PageMusicSpotifyNewReleases.vue +++ b/web-src/src/pages/PageMusicSpotifyNewReleases.vue @@ -18,22 +18,6 @@ import SpotifyWebApi from 'spotify-web-api-js' import TabsMusic from '@/components/TabsMusic.vue' import webapi from '@/webapi' -const dataObject = { - load() { - return webapi.spotify().then(({ data }) => { - const spotifyApi = new SpotifyWebApi() - spotifyApi.setAccessToken(data.webapi_token) - return spotifyApi.getNewReleases({ - country: data.webapi_country, - limit: 50 - }) - }) - }, - set(vm, response) { - vm.albums = response.albums.items - } -} - export default { name: 'PageMusicSpotifyNewReleases', components: { @@ -43,8 +27,19 @@ export default { TabsMusic }, beforeRouteEnter(to, from, next) { - dataObject.load().then((response) => { - next((vm) => dataObject.set(vm, response)) + webapi.spotify().then(({ data }) => { + const spotifyApi = new SpotifyWebApi() + spotifyApi.setAccessToken(data.webapi_token) + spotifyApi + .getNewReleases({ + country: data.webapi_country, + limit: 50 + }) + .then((response) => { + next((vm) => { + vm.albums = response.albums.items + }) + }) }) }, data() { diff --git a/web-src/src/pages/PagePlaylistFolder.vue b/web-src/src/pages/PagePlaylistFolder.vue index c3c720f2..86ca2eb0 100644 --- a/web-src/src/pages/PagePlaylistFolder.vue +++ b/web-src/src/pages/PagePlaylistFolder.vue @@ -17,32 +17,16 @@ import ListPlaylists from '@/components/ListPlaylists.vue' import { useConfigurationStore } from '@/stores/configuration' import webapi from '@/webapi' -const dataObject = { - load(to) { - return Promise.all([ - webapi.library_playlist(to.params.id), - webapi.library_playlist_folder(to.params.id) - ]) - }, - set(vm, response) { - vm.playlist = response[0].data - vm.playlistList = new GroupedList(response[1].data) - } -} - export default { name: 'PagePlaylistFolder', components: { ContentWithHeading, HeadingTitle, ListPlaylists }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + next(async (vm) => { + await vm.fetchData(to.params.id) }) }, beforeRouteUpdate(to, from, next) { - dataObject.load(to).then((response) => { - dataObject.set(this, response) - next() - }) + this.fetchData(to.params.id).then(() => next()) }, setup() { return { @@ -75,6 +59,16 @@ export default { ] }) } + }, + methods: { + async fetchData(id) { + const [playlist, playlistFolder] = await Promise.all([ + webapi.library_playlist(id), + webapi.library_playlist_folder(id) + ]) + this.playlist = playlist.data + this.playlistList = new GroupedList(playlistFolder.data) + } } } diff --git a/web-src/src/pages/PagePlaylistTracks.vue b/web-src/src/pages/PagePlaylistTracks.vue index 05282bf2..c0194114 100644 --- a/web-src/src/pages/PagePlaylistTracks.vue +++ b/web-src/src/pages/PagePlaylistTracks.vue @@ -37,19 +37,6 @@ import ListTracks from '@/components/ListTracks.vue' import ModalDialogPlaylist from '@/components/ModalDialogPlaylist.vue' import webapi from '@/webapi' -const dataObject = { - load(to) { - return Promise.all([ - webapi.library_playlist(to.params.id), - webapi.library_playlist_tracks(to.params.id) - ]) - }, - set(vm, response) { - vm.playlist = response[0].data - vm.tracks = new GroupedList(response[1].data) - } -} - export default { name: 'PagePlaylistTracks', components: { @@ -60,8 +47,14 @@ export default { ModalDialogPlaylist }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + Promise.all([ + webapi.library_playlist(to.params.id), + webapi.library_playlist_tracks(to.params.id) + ]).then(([playlist, tracks]) => { + next((vm) => { + vm.playlist = playlist.data + vm.tracks = new GroupedList(tracks.data) + }) }) }, data() { diff --git a/web-src/src/pages/PagePlaylistTracksSpotify.vue b/web-src/src/pages/PagePlaylistTracksSpotify.vue index 1d0216ae..3dc31275 100644 --- a/web-src/src/pages/PagePlaylistTracksSpotify.vue +++ b/web-src/src/pages/PagePlaylistTracksSpotify.vue @@ -44,28 +44,6 @@ import webapi from '@/webapi' const PAGE_SIZE = 50 -const dataObject = { - load(to) { - const spotifyApi = new SpotifyWebApi() - spotifyApi.setAccessToken(useServicesStore().spotify.webapi_token) - return Promise.all([ - spotifyApi.getPlaylist(to.params.id), - spotifyApi.getPlaylistTracks(to.params.id, { - limit: PAGE_SIZE, - market: useServicesStore().$state.spotify.webapi_country, - offset: 0 - }) - ]) - }, - set(vm, response) { - vm.playlist = response.shift() - vm.tracks = [] - vm.total = 0 - vm.offset = 0 - vm.appendTracks(response.shift()) - } -} - export default { name: 'PagePlaylistTracksSpotify', components: { @@ -76,8 +54,24 @@ export default { ModalDialogPlaylistSpotify }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + const spotifyApi = new SpotifyWebApi() + spotifyApi.setAccessToken(useServicesStore().spotify.webapi_token) + Promise.all([ + spotifyApi.getPlaylist(to.params.id), + spotifyApi.getPlaylistTracks(to.params.id, { + limit: PAGE_SIZE, + market: useServicesStore().$state.spotify.webapi_country, + offset: 0 + }) + ]).then((response) => { + const [playlist, tracks] = response + next((vm) => { + vm.playlist = playlist + vm.tracks = [] + vm.total = 0 + vm.offset = 0 + vm.appendTracks(tracks) + }) }) }, setup() { diff --git a/web-src/src/pages/PagePodcast.vue b/web-src/src/pages/PagePodcast.vue index 74f26472..54cdccfb 100644 --- a/web-src/src/pages/PagePodcast.vue +++ b/web-src/src/pages/PagePodcast.vue @@ -57,19 +57,6 @@ import ModalDialog from '@/components/ModalDialog.vue' import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue' import webapi from '@/webapi' -const dataObject = { - load(to) { - return Promise.all([ - webapi.library_album(to.params.id), - webapi.library_podcast_episodes(to.params.id) - ]) - }, - set(vm, response) { - vm.album = response[0].data - vm.tracks = new GroupedList(response[1].data.tracks) - } -} - export default { name: 'PagePodcast', components: { @@ -81,8 +68,14 @@ export default { ModalDialogAlbum }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + Promise.all([ + webapi.library_album(to.params.id), + webapi.library_podcast_episodes(to.params.id) + ]).then(([album, episodes]) => { + next((vm) => { + vm.album = album.data + vm.tracks = new GroupedList(episodes.data.tracks) + }) }) }, data() { diff --git a/web-src/src/pages/PagePodcasts.vue b/web-src/src/pages/PagePodcasts.vue index ebd8e157..bf5801f1 100644 --- a/web-src/src/pages/PagePodcasts.vue +++ b/web-src/src/pages/PagePodcasts.vue @@ -68,19 +68,6 @@ import { useLibraryStore } from '@/stores/library' import { useUIStore } from '@/stores/ui' import webapi from '@/webapi' -const dataObject = { - load(to) { - return Promise.all([ - webapi.library_albums('podcast'), - webapi.library_podcasts_new_episodes() - ]) - }, - set(vm, response) { - vm.albums = new GroupedList(response[0].data) - vm.tracks = new GroupedList(response[1].data.tracks) - } -} - export default { name: 'PagePodcasts', components: { @@ -92,8 +79,14 @@ export default { ModalDialogAddRss }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + Promise.all([ + webapi.library_albums('podcast'), + webapi.library_podcasts_new_episodes() + ]).then(([albums, episodes]) => { + next((vm) => { + vm.albums = new GroupedList(albums.data) + vm.tracks = new GroupedList(episodes.data.tracks) + }) }) }, setup() { diff --git a/web-src/src/pages/PageRadioStreams.vue b/web-src/src/pages/PageRadioStreams.vue index f97ad274..a7c0bebe 100644 --- a/web-src/src/pages/PageRadioStreams.vue +++ b/web-src/src/pages/PageRadioStreams.vue @@ -16,21 +16,14 @@ import HeadingTitle from '@/components/HeadingTitle.vue' import ListTracks from '@/components/ListTracks.vue' import webapi from '@/webapi' -const dataObject = { - load(to) { - return webapi.library_radio_streams() - }, - set(vm, response) { - vm.tracks = new GroupedList(response.data.tracks) - } -} - export default { name: 'PageRadioStreams', components: { ContentWithHeading, HeadingTitle, ListTracks }, beforeRouteEnter(to, from, next) { - dataObject.load(to).then((response) => { - next((vm) => dataObject.set(vm, response)) + webapi.library_radio_streams().then((radios) => { + next((vm) => { + vm.tracks = new GroupedList(radios.data.tracks) + }) }) }, data() {