[web] Fix unresponsive Spotify music page #1917

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

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

@ -56,7 +56,10 @@ export default {
<style scoped>
.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;
}
.fade-leave-active {

View File

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