MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-10-30 00:05:05 -04:00
Code Issues Packages Projects Releases Wiki Activity

[web] Fix unresponsive Spotify music page #1917

Browse Source
This commit is contained in:
Alain Nussbaumer 2025-09-11 09:40:01 +10:00
parent 82c8374cad
commit 15fd59b2a1
5 changed files with 341 additions and 357 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

655
web-src/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

14
web-src/package.json
View File

@ -18,25 +18,25 @@
"@ts-pro/vue-eternal-loading": "^1.3.1", "@ts-pro/vue-eternal-loading": "^1.3.1",
"axios": "^1.11.0", "axios": "^1.11.0",
"bulma": "^1.0.4", "bulma": "^1.0.4",
"luxon": "^3.7.1", "luxon": "^3.7.2",
"mdi-vue": "^3.0.13", "mdi-vue": "^3.0.13",
"pinia": "^3.0.3", "pinia": "^3.0.3",
"reconnectingwebsocket": "^1.0.0", "reconnectingwebsocket": "^1.0.0",
"vue": "^3.5.20", "vue": "^3.5.21",
"vue-i18n": "^11.1.11", "vue-i18n": "^11.1.12",
"vue-router": "^4.5.1", "vue-router": "^4.5.1",
"vue3-click-away": "^1.2.4", "vue3-click-away": "^1.2.4",
"vue3-lazyload": "^0.3.8", "vue3-lazyload": "^0.3.8",
"vuedraggable": "^4.1.0" "vuedraggable": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {
"@intlify/unplugin-vue-i18n": "^6.0.8", "@intlify/unplugin-vue-i18n": "^11.0.0",
"@vitejs/plugin-vue": "^6.0.1", "@vitejs/plugin-vue": "^6.0.1",
"eslint": "^9.34.0", "eslint": "^9.35.0",
"eslint-config-prettier": "^10.1.8", "eslint-config-prettier": "^10.1.8",
"eslint-plugin-vue": "^10.4.0", "eslint-plugin-vue": "^10.4.0",
"prettier": "^3.6.2", "prettier": "^3.6.2",
"sass": "^1.91.0", "sass": "^1.92.1",
"vite": "^7.1.3" "vite": "^7.1.5"
} }
} }

10
web-src/src/api/services.js
View File

@ -16,9 +16,13 @@ export default {
}, },
spotify() { spotify() {
return api.get('./api/spotify').then((configuration) => { return api.get('./api/spotify').then((configuration) => {
const sdk = SpotifyApi.withAccessToken(configuration.webapi_client_id, { const sdk = SpotifyApi.withAccessToken(
access_token: configuration.webapi_token configuration.webapi_client_id,
}) {
access_token: configuration.webapi_token
},
{ errorHandler: { handleErrors: () => true } }
)
return { api: sdk, configuration } return { api: sdk, configuration }
}) })
} }

5
web-src/src/components/ModalDialog.vue
View File

@ -56,7 +56,10 @@ export default {
<style scoped> <style scoped>
.card-content { .card-content {
max-height: calc(100vh - var(--bulma-modal-content-spacing-tablet) - calc(4 * var(--bulma-navbar-height))); max-height: calc(
100vh - var(--bulma-modal-content-spacing-tablet) -
calc(4 * var(--bulma-navbar-height))
);
overflow: auto; overflow: auto;
} }
.fade-leave-active { .fade-leave-active {

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

@ -1,6 +1,6 @@
<template> <template>
<tabs-music /> <tabs-music />
<content-with-heading> <content-with-heading v-if="albums">
<template #heading> <template #heading>
<pane-title :content="{ title: $t('page.spotify.music.new-releases') }" /> <pane-title :content="{ title: $t('page.spotify.music.new-releases') }" />
</template> </template>
@ -16,7 +16,7 @@
</router-link> </router-link>
</template> </template>
</content-with-heading> </content-with-heading>
<content-with-heading> <content-with-heading v-if="playlists">
<template #heading> <template #heading>
<pane-title <pane-title
:content="{ title: $t('page.spotify.music.featured-playlists') }" :content="{ title: $t('page.spotify.music.featured-playlists') }"
@ -34,7 +34,7 @@
</router-link> </router-link>
</template> </template>
</content-with-heading> </content-with-heading>
<content-with-heading> <content-with-heading v-if="artists">
<template #heading> <template #heading>
<pane-title <pane-title
:content="{ title: $t('page.spotify.music.followed-artists') }" :content="{ title: $t('page.spotify.music.followed-artists') }"
@ -84,11 +84,11 @@ export default {
null, null,
3 3
) )
]).then((response) => { ]).then(([newReleases, followedArtists, featuredPlaylists]) => {
next((vm) => { next((vm) => {
vm.albums = response[0].albums.items vm.albums = newReleases.albums.items
vm.artists = response[1].artists.items vm.artists = followedArtists?.artists.items
vm.playlists = response[2].playlists.items vm.playlists = featuredPlaylists.playlists.items
}) })
}) })
}) })