[web] Change the way the api is called

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) => {
+    Promise.all([
-      next((vm) => dataObject.set(vm, response))
+      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() {

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) => {
+    const spotifyApi = new SpotifyWebApi()
-      next((vm) => dataObject.set(vm, response))
+    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() {

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) => {
+    webapi.library_albums('music').then((albums) => {
-      next((vm) => dataObject.set(vm, response))
+      next((vm) => {
+        vm.albumList = new GroupedList(albums.data)
+      })
     })
   },
   setup() {

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) => {
+    Promise.all([
-      next((vm) => dataObject.set(vm, response))
+      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() {

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) => {
+    webapi.spotify().then(({ data }) => {
-      next((vm) => dataObject.set(vm, response))
+      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() {

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) => {
+    Promise.all([
-      next((vm) => dataObject.set(vm, response))
+      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() {

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) => {
+    webapi.library_artists('music').then((artists) => {
-      next((vm) => dataObject.set(vm, response))
+      next((vm) => {
+        vm.artistList = new GroupedList(artists.data)
+      })
     })
   },
   setup() {

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) => {
+    Promise.all([
-      next((vm) => dataObject.set(vm, response))
+      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() {

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) => {
+    webapi.library_albums('audiobook').then((albums) => {
-      next((vm) => dataObject.set(vm, response))
+      next((vm) => {
+        vm.albums = new GroupedList(albums.data, {
+          index: { field: 'name_sort', type: String }
+        })
+      })
     })
   },
   data() {

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) => {
+    Promise.all([
-      next((vm) => dataObject.set(vm, response))
+      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() {

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) => {
+    webapi.library_artists('audiobook').then((artists) => {
-      next((vm) => dataObject.set(vm, response))
+      next((vm) => {
+        vm.artists = new GroupedList(artists.data, {
+          index: { field: 'name_sort', type: String }
+        })
+      })
     })
   },
   data() {

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) => {
+    webapi.library_genres('audiobook').then((response) => {
-      next((vm) => dataObject.set(vm, response))
+      next((vm) => {
+        vm.genres = new GroupedList(response.data.genres, {
+          index: { field: 'name_sort', type: String }
+        })
+      })
     })
   },
   data() {

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) => {
+    Promise.all([
-      next((vm) => dataObject.set(vm, response))
+      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() {

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) => {
+    Promise.all([
-      next((vm) => dataObject.set(vm, response))
+      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() {

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) => {
+    webapi.library_composers('music').then((composers) => {
-      next((vm) => dataObject.set(vm, response))
+      next((vm) => {
+        vm.composers = new GroupedList(composers.data, {
+          index: { field: 'name_sort', type: String }
+        })
+      })
     })
   },
   data() {

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(async (vm) => {
-      next((vm) => dataObject.set(vm, response))
+      await vm.fetchData(to)
     })
   },
   beforeRouteUpdate(to, from, next) {
-    dataObject.load(to).then((response) => {
+    this.fetchData(to).then(() => next())
-      dataObject.set(this, response)
-      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
     },

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) => {
+    Promise.all([
-      next((vm) => dataObject.set(vm, response))
+      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() {

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) => {
+    Promise.all([
-      next((vm) => dataObject.set(vm, response))
+      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() {

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) => {
+    webapi.library_genres('music').then((genres) => {
-      next((vm) => dataObject.set(vm, response))
+      next((vm) => {
+        vm.genres = new GroupedList(genres.data.genres, {
+          index: { field: 'name_sort', type: String }
+        })
+      })
     })
   },
   data() {

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 = {
+export default {
-  load() {
+  name: 'PageMusic',
-    return Promise.all([
+  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'
       })
-    ])
+    ]).then(([albums, tracks]) => {
-  },
+      next((vm) => {
-  set(vm, response) {
+        vm.albums = new GroupedList(albums.data.albums)
-    vm.albums = new GroupedList(response[0].data.albums)
+        vm.tracks = new GroupedList(tracks.data.tracks)
-    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))
     })
   },
   data() {

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) => {
+    const limit = useSettingsStore().recently_added_limit
-      next((vm) => dataObject.set(vm, response))
+    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 {

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) => {
+    webapi
-      next((vm) => dataObject.set(vm, response))
+      .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()
     }
   }
 }

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) => {
+    webapi.spotify().then(({ data }) => {
-      next((vm) => dataObject.set(vm, response))
+      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() {

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) => {
+    webapi.spotify().then(({ data }) => {
-      next((vm) => dataObject.set(vm, response))
+      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() {

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) => {
+    webapi.spotify().then(({ data }) => {
-      next((vm) => dataObject.set(vm, response))
+      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() {

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(async (vm) => {
-      next((vm) => dataObject.set(vm, response))
+      await vm.fetchData(to.params.id)
     })
   },
   beforeRouteUpdate(to, from, next) {
-    dataObject.load(to).then((response) => {
+    this.fetchData(to.params.id).then(() => next())
-      dataObject.set(this, response)
-      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)
+    }
   }
 }
 </script>

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) => {
+    Promise.all([
-      next((vm) => dataObject.set(vm, response))
+      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() {

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) => {
+    const spotifyApi = new SpotifyWebApi()
-      next((vm) => dataObject.set(vm, response))
+    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() {

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) => {
+    Promise.all([
-      next((vm) => dataObject.set(vm, response))
+      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() {

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) => {
+    Promise.all([
-      next((vm) => dataObject.set(vm, response))
+      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() {

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) => {
+    webapi.library_radio_streams().then((radios) => {
-      next((vm) => dataObject.set(vm, response))
+      next((vm) => {
+        vm.tracks = new GroupedList(radios.data.tracks)
+      })
     })
   },
   data() {