MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-07-16 04:11:55 -04:00
Code Issues Packages Projects Releases Wiki Activity

[web] Change the way the api is called

Browse Source
This commit is contained in:
Alain Nussbaumer 2025-04-26 08:18:32 +02:00
parent 830b40cc40
commit 40c658cb8b
31 changed files with 320 additions and 531 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web-src/src/pages/PageAlbum.vue
View File

@ -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() {

29
web-src/src/pages/PageAlbumSpotify.vue
View File

@ -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() {

15
web-src/src/pages/PageAlbums.vue
View File

@ -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() {

23
web-src/src/pages/PageArtist.vue
View File

@ -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() {

46
web-src/src/pages/PageArtistSpotify.vue
View File

@ -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() {

23
web-src/src/pages/PageArtistTracks.vue
View File

@ -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() {

15
web-src/src/pages/PageArtists.vue
View File

@ -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() {

23
web-src/src/pages/PageAudiobooksAlbum.vue
View File

@ -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() {

19
web-src/src/pages/PageAudiobooksAlbums.vue
View File

@ -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() {

23
web-src/src/pages/PageAudiobooksArtist.vue
View File

@ -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() {

19
web-src/src/pages/PageAudiobooksArtists.vue
View File

@ -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() {

19
web-src/src/pages/PageAudiobooksGenres.vue
View File

@ -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() {

23
web-src/src/pages/PageComposerAlbums.vue
View File

@ -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() {

23
web-src/src/pages/PageComposerTracks.vue
View File

@ -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() {

19
web-src/src/pages/PageComposers.vue
View File

@ -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() {

56
web-src/src/pages/PageFiles.vue
View File

@ -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
},

27
web-src/src/pages/PageGenreAlbums.vue
View File

@ -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() {

25
web-src/src/pages/PageGenreTracks.vue
View File

@ -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() {

19
web-src/src/pages/PageGenres.vue
View File

@ -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() {

39
web-src/src/pages/PageMusic.vue
View File

@ -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() {

37
web-src/src/pages/PageMusicRecentlyAdded.vue
View File

@ -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 {

31
web-src/src/pages/PageMusicRecentlyPlayed.vue
View File

@ -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()
}
}
}

43
web-src/src/pages/PageMusicSpotify.vue
View File

@ -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() {

31
web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue
View File

@ -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() {

31
web-src/src/pages/PageMusicSpotifyNewReleases.vue
View File

@ -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() {

32
web-src/src/pages/PagePlaylistFolder.vue
View File

@ -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)
}
}
}
</script>

23
web-src/src/pages/PagePlaylistTracks.vue
View File

@ -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() {

42
web-src/src/pages/PagePlaylistTracksSpotify.vue
View File

@ -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() {

23
web-src/src/pages/PagePodcast.vue
View File

@ -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() {

23
web-src/src/pages/PagePodcasts.vue
View File

@ -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() {

15
web-src/src/pages/PageRadioStreams.vue
View File

@ -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() {