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

[web] Streamline search pages

Browse Source
This commit is contained in:
Alain Nussbaumer 2024-04-03 20:31:13 +02:00
parent c96c3966f4
commit e5e7702fc5
2 changed files with 25 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web-src/src/pages/PageSearchLibrary.vue
View File

@ -148,7 +148,7 @@ export default {
mounted() { mounted() {
this.$store.commit(types.SEARCH_SOURCE, this.$route.name) this.$store.commit(types.SEARCH_SOURCE, this.$route.name)
this.search(this.$route) this.search()
}, },
methods: { methods: {
@ -175,16 +175,16 @@ export default {
query: { query: this.$route.query.query, type } query: { query: this.$route.query.query, type }
}) })
}, },
search(route) { search() {
this.search_query = route.query.query?.trim() this.search_query = this.$route.query.query?.trim()
if (!this.search_query || !this.search_query.replace(/^query:/u, '')) { if (!this.search_query || !this.search_query.replace(/^query:/u, '')) {
this.$refs.search_field.focus() this.$refs.search_field.focus()
return return
} }
route.query.query = this.search_query this.$route.query.query = this.search_query
this.searchMusic(route.query) this.searchMusic(this.$route.query)
this.searchType(route.query, 'audiobook') this.searchType(this.$route.query, 'audiobook')
this.searchType(route.query, 'podcast') this.searchType(this.$route.query, 'podcast')
this.$store.dispatch('add_recent_search', this.search_query) this.$store.dispatch('add_recent_search', this.search_query)
}, },
searchMusic(query) { searchMusic(query) {

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

@ -39,7 +39,7 @@
</template> </template>
<template #content> <template #content>
<component :is="components[type]" :items="results[type].items" /> <component :is="components[type]" :items="results[type].items" />
<VueEternalLoading v-if="query.type === type" :load="search_next"> <VueEternalLoading v-if="$route.query.type === type" :load="search_next">
<template #loading> <template #loading>
<div class="columns is-centered"> <div class="columns is-centered">
<div class="column has-text-centered"> <div class="column has-text-centered">
@ -106,7 +106,6 @@ export default {
playlist: ListPlaylistsSpotify.name, playlist: ListPlaylistsSpotify.name,
track: ListTracksSpotify.name track: ListTracksSpotify.name
}, },
query: {},
results: { results: {
album: { items: [], total: 0 }, album: { items: [], total: 0 },
artist: { items: [], total: 0 }, artist: { items: [], total: 0 },
@ -129,14 +128,12 @@ export default {
watch: { watch: {
$route(to, from) { $route(to, from) {
this.query = to.query
this.search() this.search()
} }
}, },
mounted() { mounted() {
this.$store.commit(types.SEARCH_SOURCE, this.$route.name) this.$store.commit(types.SEARCH_SOURCE, this.$route.name)
this.query = this.$route.query
this.search() this.search()
}, },
@ -171,23 +168,23 @@ export default {
}, },
search() { search() {
this.reset() this.reset()
this.search_query = this.query.query?.trim() this.search_query = this.$route.query.query?.trim()
if (!this.search_query || this.search_query.startsWith('query:')) { if (!this.search_query || this.search_query.startsWith('query:')) {
this.search_query = '' this.search_query = ''
this.$refs.search_field.focus() this.$refs.search_field.focus()
return return
} }
this.query.query = this.search_query this.$route.query.query = this.search_query
this.search_param.limit = this.query.limit ?? PAGE_SIZE
this.search_param.offset = this.query.offset ?? 0
this.$store.dispatch('add_recent_search', this.query.query)
this.search_all() this.search_all()
this.$store.dispatch('add_recent_search', this.search_query)
}, },
search_all() { search_all() {
const types = this.query.type this.search_param.limit = this.$route.query.limit ?? PAGE_SIZE
this.search_param.offset = this.$route.query.offset ?? 0
const types = this.$route.query.type
.split(',') .split(',')
.filter((type) => this.search_types.includes(type)) .filter((type) => this.search_types.includes(type))
this.spotify_search(types).then((data) => { this.search_spotify(types).then((data) => {
this.results.track = data.tracks ?? { items: [], total: 0 } this.results.track = data.tracks ?? { items: [], total: 0 }
this.results.artist = data.artists ?? { items: [], total: 0 } this.results.artist = data.artists ?? { items: [], total: 0 }
this.results.album = data.albums ?? { items: [], total: 0 } this.results.album = data.albums ?? { items: [], total: 0 }
@ -195,8 +192,8 @@ export default {
}) })
}, },
search_next({ loaded }) { search_next({ loaded }) {
const items = this.results[this.query.type] const items = this.results[this.$route.query.type]
this.spotify_search([this.query.type]).then((data) => { this.search_spotify([this.$route.query.type]).then((data) => {
const [next] = Object.values(data) const [next] = Object.values(data)
items.items.push(...next.items) items.items.push(...next.items)
items.total = next.total items.total = next.total
@ -204,20 +201,20 @@ export default {
loaded(next.items.length, PAGE_SIZE) loaded(next.items.length, PAGE_SIZE)
}) })
}, },
search_spotify(types) {
return webapi.spotify().then(({ data }) => {
this.search_param.market = data.webapi_country
const spotifyApi = new SpotifyWebApi()
spotifyApi.setAccessToken(data.webapi_token)
return spotifyApi.search(this.$route.query.query, types, this.search_param)
})
},
show(type) { show(type) {
return this.$route.query.type?.includes(type) ?? false return this.$route.query.type?.includes(type) ?? false
}, },
show_all_button(type) { show_all_button(type) {
const items = this.results[type] const items = this.results[type]
return items.total > items.items.length return items.total > items.items.length
},
spotify_search(types) {
return webapi.spotify().then(({ data }) => {
this.search_param.market = data.webapi_country
const spotifyApi = new SpotifyWebApi()
spotifyApi.setAccessToken(data.webapi_token)
return spotifyApi.search(this.query.query, types, this.search_param)
})
} }
} }
} }