MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2024-12-26 23:25:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web] Use named route for Spotify pages

Browse Source 
Switching to named routes in order to reduce future maintenance.
This commit is contained in:
Alain Nussbaumer 2023-07-12 21:30:52 +02:00
parent 2bec9e1886
commit 845f111c29
15 changed files with 100 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web-src/src/components/ModalDialogQueueItem.vue
View File

@ -243,14 +243,16 @@ export default {
open_spotify_artist() {
this.$emit('close')
this.$router.push({
path: '/music/spotify/artists/' + this.spotify_track.artists[0].id
name: 'music-spotify-artist',
params: { id: this.spotify_track.artists[0].id }
})
},
open_spotify_album() {
this.$emit('close')
this.$router.push({
path: '/music/spotify/albums/' + this.spotify_track.album.id
name: 'music-spotify-album',
params: { id: this.spotify_track.album.id }
})
}
}

6
web-src/src/components/ModalDialogTrack.vue
View File

@ -278,14 +278,16 @@ export default {
open_spotify_artist() {
this.$emit('close')
this.$router.push({
path: '/music/spotify/artists/' + this.spotify_track.artists[0].id
name: 'music-spotify-artist',
params: { id: this.spotify_track.artists[0].id }
})
},
open_spotify_album() {
this.$emit('close')
this.$router.push({
path: '/music/spotify/albums/' + this.spotify_track.album.id
name: 'music-spotify-album',
params: { id: this.spotify_track.album.id }
})
},

2
web-src/src/components/NavbarTop.vue
View File

@ -76,7 +76,7 @@
</navbar-item-link>
<navbar-item-link
v-if="spotify_enabled"
:to="{ path: '/music/spotify' }"
:to="{ name: 'music-spotify' }"
>
<span class="pl-5" v-text="$t('navigation.spotify')" />
</navbar-item-link>

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

@ -16,7 +16,10 @@ export default {
methods: {
open_artist() {
this.$router.push({ path: '/music/spotify/artists/' + this.artist.id })
this.$router.push({
name: 'music-spotify-artist',
params: { id: this.artist.id }
})
}
}
}

10
web-src/src/components/SpotifyModalDialogAlbum.vue
View File

@ -88,8 +88,8 @@
</template>
<script>
import webapi from '@/webapi'
import CoverArtwork from '@/components/CoverArtwork.vue'
import webapi from '@/webapi'
export default {
name: 'SpotifyModalDialogAlbum',
@ -129,12 +129,16 @@ export default {
},
open_album() {
this.$router.push({ path: '/music/spotify/albums/' + this.album.id })
this.$router.push({
name: 'music-spotify-album',
params: { id: this.album.id }
})
},
open_artist() {
this.$router.push({
path: '/music/spotify/artists/' + this.album.artists[0].id
name: 'music-spotify-artist',
params: { id: this.album.artists[0].id }
})
},

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

@ -95,7 +95,10 @@ export default {
},
open_artist() {
this.$router.push({ path: '/music/spotify/artists/' + this.artist.id })
this.$router.push({
name: 'music-spotify-artist',
params: { id: this.artist.id }
})
}
}
}

8
web-src/src/components/SpotifyModalDialogTrack.vue
View File

@ -130,12 +130,16 @@ export default {
},
open_album() {
this.$router.push({ path: '/music/spotify/albums/' + this.album.id })
this.$router.push({
name: 'music-spotify-album',
params: { id: this.album.id }
})
},
open_artist() {
this.$router.push({
path: '/music/spotify/artists/' + this.album.artists[0].id
name: 'music-spotify-artist',
params: { id: this.album.artists[0].id }
})
}
}

2
web-src/src/components/TabsMusic.vue
View File

@ -76,7 +76,7 @@
<router-link
v-if="spotify_enabled"
v-slot="{ navigate, isActive }"
to="/music/spotify"
:to="{ name: 'music-spotify' }"
custom
>
<li :class="{ 'is-active': isActive }">

13
web-src/src/pages/SpotifyPageAlbum.vue → web-src/src/pages/PageAlbumSpotify.vue
View File

@ -74,19 +74,19 @@
<script>
import ContentWithHero from '@/templates/ContentWithHero.vue'
import CoverArtwork from '@/components/CoverArtwork.vue'
import SpotifyListItemTrack from '@/components/SpotifyListItemTrack.vue'
import SpotifyModalDialogTrack from '@/components/SpotifyModalDialogTrack.vue'
import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum.vue'
import CoverArtwork from '@/components/CoverArtwork.vue'
import SpotifyWebApi from 'spotify-web-api-js'
import store from '@/store'
import webapi from '@/webapi'
import SpotifyWebApi from 'spotify-web-api-js'
const dataObject = {
load(to) {
const spotifyApi = new SpotifyWebApi()
spotifyApi.setAccessToken(store.state.spotify.webapi_token)
return spotifyApi.getAlbum(to.params.album_id, {
return spotifyApi.getAlbum(to.params.id, {
market: store.state.spotify.webapi_country
})
},
@ -100,10 +100,10 @@ export default {
name: 'PageAlbum',
components: {
ContentWithHero,
CoverArtwork,
SpotifyListItemTrack,
SpotifyModalDialogTrack,
SpotifyModalDialogAlbum,
CoverArtwork
SpotifyModalDialogAlbum
},
beforeRouteEnter(to, from, next) {
@ -142,7 +142,8 @@ export default {
methods: {
open_artist() {
this.$router.push({
path: '/music/spotify/artists/' + this.album.artists[0].id
name: 'music-spotify-artist',
params: { id: this.album.artists[0].id }
})
},

19
web-src/src/pages/SpotifyPageArtist.vue → web-src/src/pages/PageArtistSpotify.vue
View File

@ -69,14 +69,14 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import CoverArtwork from '@/components/CoverArtwork.vue'
import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum.vue'
import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum.vue'
import SpotifyModalDialogArtist from '@/components/SpotifyModalDialogArtist.vue'
import CoverArtwork from '@/components/CoverArtwork.vue'
import store from '@/store'
import webapi from '@/webapi'
import SpotifyWebApi from 'spotify-web-api-js'
import store from '@/store'
import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
import webapi from '@/webapi'
const PAGE_SIZE = 50
@ -85,8 +85,8 @@ const dataObject = {
const spotifyApi = new SpotifyWebApi()
spotifyApi.setAccessToken(store.state.spotify.webapi_token)
return Promise.all([
spotifyApi.getArtist(to.params.artist_id),
spotifyApi.getArtistAlbums(to.params.artist_id, {
spotifyApi.getArtist(to.params.id),
spotifyApi.getArtistAlbums(to.params.id, {
limit: PAGE_SIZE,
offset: 0,
include_groups: 'album,single',
@ -109,11 +109,11 @@ export default {
name: 'SpotifyPageArtist',
components: {
ContentWithHeading,
CoverArtwork,
SpotifyListItemAlbum,
SpotifyModalDialogAlbum,
SpotifyModalDialogArtist,
VueEternalLoading,
CoverArtwork
VueEternalLoading
},
beforeRouteEnter(to, from, next) {
@ -180,7 +180,10 @@ export default {
},
open_album(album) {
this.$router.push({ path: '/music/spotify/albums/' + album.id })
this.$router.push({
name: 'music-spotify-album',
params: { id: album.id }
})
},
open_dialog(album) {

9
web-src/src/pages/SpotifyPageBrowse.vue → web-src/src/pages/PageBrowseSpotify.vue
View File

@ -43,7 +43,7 @@
<nav class="level">
<p class="level-item">
<router-link
to="/music/spotify/new-releases"
:to="{ name: 'music-spotify-new-releases' }"
class="button is-light is-small is-rounded"
>{{ $t('page.spotify.browse.show-more') }}</router-link
>
@ -85,7 +85,7 @@
<nav class="level">
<p class="level-item">
<router-link
to="/music/spotify/featured-playlists"
:to="{ name: 'music-spotify-featured-playlists' }"
class="button is-light is-small is-rounded"
>{{ $t('page.spotify.browse.show-more') }}</router-link
>
@ -196,7 +196,10 @@ export default {
methods: {
open_album(album) {
this.$router.push({ path: '/music/spotify/albums/' + album.id })
this.$router.push({
name: 'music-spotify-album',
params: { id: album.id }
})
},
open_album_dialog(album) {

0
web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue → web-src/src/pages/PageBrowseSpotifyFeaturedPlaylists.vue
View File

9
web-src/src/pages/SpotifyPageBrowseNewReleases.vue → web-src/src/pages/PageBrowseSpotifyNewReleases.vue
View File

@ -77,10 +77,10 @@ export default {
name: 'SpotifyPageBrowseNewReleases',
components: {
ContentWithHeading,
TabsMusic,
CoverArtwork,
SpotifyListItemAlbum,
SpotifyModalDialogAlbum,
CoverArtwork
TabsMusic
},
beforeRouteEnter(to, from, next) {
@ -118,7 +118,10 @@ export default {
methods: {
open_album(album) {
this.$router.push({ path: '/music/spotify/albums/' + album.id })
this.$router.push({
name: 'music-spotify-album',
params: { id: album.id }
})
},
open_album_dialog(album) {

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

@ -568,7 +568,10 @@ export default {
},
open_album(album) {
this.$router.push({ path: '/music/spotify/albums/' + album.id })
this.$router.push({
name: 'music-spotify-album',
params: { id: album.id }
})
},
artwork_url(album) {

71
web-src/src/router/index.js
View File

@ -2,8 +2,10 @@ import * as types from '@/store/mutation_types'
import { createRouter, createWebHashHistory } from 'vue-router'
import PageAbout from '@/pages/PageAbout.vue'
import PageAlbum from '@/pages/PageAlbum.vue'
import PageAlbumSpotify from '@/pages/PageAlbumSpotify.vue'
import PageAlbums from '@/pages/PageAlbums.vue'
import PageArtist from '@/pages/PageArtist.vue'
import PageArtistSpotify from '@/pages/PageArtistSpotify.vue'
import PageArtistTracks from '@/pages/PageArtistTracks.vue'
import PageArtists from '@/pages/PageArtists.vue'
import PageAudiobooksAlbum from '@/pages/PageAudiobooksAlbum.vue'
@ -13,6 +15,9 @@ import PageAudiobooksArtists from '@/pages/PageAudiobooksArtists.vue'
import PageBrowse from '@/pages/PageBrowse.vue'
import PageBrowseRecentlyAdded from '@/pages/PageBrowseRecentlyAdded.vue'
import PageBrowseRecentlyPlayed from '@/pages/PageBrowseRecentlyPlayed.vue'
import PageBrowseSpotify from '@/pages/PageBrowseSpotify.vue'
import PageBrowseSpotifyNewReleases from '@/pages/PageBrowseSpotifyNewReleases.vue'
import PageBrowseSpotifyFeaturedPlaylists from '@/pages/PageBrowseSpotifyFeaturedPlaylists.vue'
import PageFiles from '@/pages/PageFiles.vue'
import PageGenre from '@/pages/PageGenre.vue'
import PageGenreTracks from '@/pages/PageGenreTracks.vue'
@ -34,12 +39,6 @@ import PageComposerTracks from '@/pages/PageComposerTracks.vue'
import PageRadioStreams from '@/pages/PageRadioStreams.vue'
import PageSearchLibrary from '@/pages/PageSearchLibrary.vue'
import PageSearchSpotify from '@/pages/PageSearchSpotify.vue'
import SpotifyPageBrowse from '@/pages/SpotifyPageBrowse.vue'
import SpotifyPageBrowseNewReleases from '@/pages/SpotifyPageBrowseNewReleases.vue'
import SpotifyPageBrowseFeaturedPlaylists from '@/pages/SpotifyPageBrowseFeaturedPlaylists.vue'
import SpotifyPageArtist from '@/pages/SpotifyPageArtist.vue'
import SpotifyPageAlbum from '@/pages/SpotifyPageAlbum.vue'
import store from '@/store'
export const router = createRouter({
@ -56,6 +55,12 @@ export const router = createRouter({
name: 'music-album',
path: '/music/albums/:id'
},
{
component: PageAlbumSpotify,
meta: { show_progress: true },
name: 'music-spotify-album',
path: '/music/spotify/albums/:id'
},
{
component: PageAlbums,
meta: { has_index: true, has_tabs: true, show_progress: true },
@ -68,6 +73,12 @@ export const router = createRouter({
name: 'music-artist',
path: '/music/artists/:id'
},
{
component: PageArtistSpotify,
meta: { show_progress: true },
name: 'music-spotify-artist',
path: '/music/spotify/artists/:id'
},
{
component: PageArtists,
meta: { has_index: true, has_tabs: true, show_progress: true },
@ -132,6 +143,24 @@ export const router = createRouter({
name: 'music-browse-recently-played',
path: '/music/browse/recently-played'
},
{
component: PageBrowseSpotify,
meta: { has_tabs: true, show_progress: true },
name: 'music-spotify',
path: '/music/spotify'
},
{
component: PageBrowseSpotifyFeaturedPlaylists,
meta: { has_tabs: true, show_progress: true },
name: 'music-spotify-featured-playlists',
path: '/music/spotify/featured-playlists'
},
{
component: PageBrowseSpotifyNewReleases,
meta: { has_tabs: true, show_progress: true },
name: 'music-spotify-new-releases',
path: '/music/spotify/new-releases'
},
{
component: PageFiles,
meta: { show_progress: true },
@ -258,36 +287,6 @@ export const router = createRouter({
component: PageSettingsRemotesOutputs,
name: 'settings-remotes-outputs',
path: '/settings/remotes-outputs'
},
{
path: '/music/spotify',
name: 'Spotify',
component: SpotifyPageBrowse,
meta: { show_progress: true, has_tabs: true }
},
{
path: '/music/spotify/new-releases',
name: 'Spotify Browse New Releases',
component: SpotifyPageBrowseNewReleases,
meta: { show_progress: true, has_tabs: true }
},
{
path: '/music/spotify/featured-playlists',
name: 'Spotify Browse Featured Playlists',
component: SpotifyPageBrowseFeaturedPlaylists,
meta: { show_progress: true, has_tabs: true }
},
{
path: '/music/spotify/artists/:artist_id',
name: 'Spotify Artist',
component: SpotifyPageArtist,
meta: { show_progress: true }
},
{
path: '/music/spotify/albums/:album_id',
name: 'Spotify Album',
component: SpotifyPageAlbum,
meta: { show_progress: true }
}
],
scrollBehavior(to, from, savedPosition) {