mirror of
https://github.com/owntone/owntone-server.git
synced 2024-12-27 15:45:56 -05:00
[web] Fix modal dialogs not closing when opening artist or album page and renaming of views
Whenever an artist or album page is opened from a modal dialog, the latter is properly closed. Moreover, the views have been renamed for better maintainability.
This commit is contained in:
Alain Nussbaumer
parent
34ea8115a8
commit
9d62c94d86
@ -23,7 +23,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SpotifyListItemAlbum',
|
||||
name: 'ListItemAlbumSpotify',
|
||||
props: ['album']
|
||||
}
|
||||
</script>
|
||||
@ -11,7 +11,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SpotifyListItemArtist',
|
||||
name: 'ListItemArtistSpotify',
|
||||
props: ['artist'],
|
||||
|
||||
methods: {
|
||||
@ -43,7 +43,7 @@
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'SpotifyListItemTrack',
|
||||
name: 'ListItemTrackSpotify',
|
||||
props: ['track', 'position', 'context_uri'],
|
||||
methods: {
|
||||
play() {
|
||||
@ -92,7 +92,7 @@ import CoverArtwork from '@/components/CoverArtwork.vue'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'SpotifyModalDialogAlbum',
|
||||
name: 'ModalDialogAlbumSpotify',
|
||||
components: { CoverArtwork },
|
||||
props: ['show', 'album'],
|
||||
emits: ['close'],
|
||||
@ -129,6 +129,7 @@ export default {
|
||||
},
|
||||
|
||||
open_album() {
|
||||
this.$emit('close')
|
||||
this.$router.push({
|
||||
name: 'music-spotify-album',
|
||||
params: { id: this.album.id }
|
||||
@ -136,6 +137,7 @@ export default {
|
||||
},
|
||||
|
||||
open_artist() {
|
||||
this.$emit('close')
|
||||
this.$router.push({
|
||||
name: 'music-spotify-artist',
|
||||
params: { id: this.album.artists[0].id }
|
||||
@ -74,7 +74,7 @@
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'SpotifyModalDialogArtist',
|
||||
name: 'ModalDialogArtistSpotify',
|
||||
props: ['show', 'artist'],
|
||||
emits: ['close'],
|
||||
|
||||
@ -95,6 +95,7 @@ export default {
|
||||
},
|
||||
|
||||
open_artist() {
|
||||
this.$emit('close')
|
||||
this.$router.push({
|
||||
name: 'music-spotify-artist',
|
||||
params: { id: this.artist.id }
|
||||
@ -109,7 +109,7 @@
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'SpotifyModalDialogTrack',
|
||||
name: 'ModalDialogTrackSpotify',
|
||||
props: ['show', 'track', 'album'],
|
||||
emits: ['close'],
|
||||
|
||||
@ -130,6 +130,7 @@ export default {
|
||||
},
|
||||
|
||||
open_album() {
|
||||
this.$emit('close')
|
||||
this.$router.push({
|
||||
name: 'music-spotify-album',
|
||||
params: { id: this.album.id }
|
||||
@ -137,6 +138,7 @@ export default {
|
||||
},
|
||||
|
||||
open_artist() {
|
||||
this.$emit('close')
|
||||
this.$router.push({
|
||||
name: 'music-spotify-artist',
|
||||
params: { id: this.album.artists[0].id }
|
||||
@ -39,7 +39,7 @@
|
||||
$t('page.spotify.album.track-count', { count: album.tracks.total })
|
||||
"
|
||||
/>
|
||||
<spotify-list-item-track
|
||||
<list-item-track-spotify
|
||||
v-for="(track, index) in album.tracks.items"
|
||||
:key="track.id"
|
||||
:track="track"
|
||||
@ -55,14 +55,14 @@
|
||||
/>
|
||||
</a>
|
||||
</template>
|
||||
</spotify-list-item-track>
|
||||
<spotify-modal-dialog-track
|
||||
</list-item-track-spotify>
|
||||
<modal-dialog-track-spotify
|
||||
:show="show_track_details_modal"
|
||||
:track="selected_track"
|
||||
:album="album"
|
||||
@close="show_track_details_modal = false"
|
||||
/>
|
||||
<spotify-modal-dialog-album
|
||||
<modal-dialog-album-spotify
|
||||
:show="show_album_details_modal"
|
||||
:album="album"
|
||||
@close="show_album_details_modal = false"
|
||||
@ -75,9 +75,9 @@
|
||||
<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 ListItemTrackSpotify from '@/components/ListItemTrackSpotify.vue'
|
||||
import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
|
||||
import ModalDialogTrackSpotify from '@/components/ModalDialogTrackSpotify.vue'
|
||||
import SpotifyWebApi from 'spotify-web-api-js'
|
||||
import store from '@/store'
|
||||
import webapi from '@/webapi'
|
||||
@ -101,9 +101,9 @@ export default {
|
||||
components: {
|
||||
ContentWithHero,
|
||||
CoverArtwork,
|
||||
SpotifyListItemTrack,
|
||||
SpotifyModalDialogTrack,
|
||||
SpotifyModalDialogAlbum
|
||||
ListItemTrackSpotify,
|
||||
ModalDialogAlbumSpotify,
|
||||
ModalDialogTrackSpotify
|
||||
},
|
||||
|
||||
beforeRouteEnter(to, from, next) {
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
class="heading has-text-centered-mobile"
|
||||
v-text="$t('page.spotify.artist.album-count', { count: total })"
|
||||
/>
|
||||
<spotify-list-item-album
|
||||
<list-item-album-spotify
|
||||
v-for="album in albums"
|
||||
:key="album.id"
|
||||
:album="album"
|
||||
@ -48,16 +48,16 @@
|
||||
/>
|
||||
</a>
|
||||
</template>
|
||||
</spotify-list-item-album>
|
||||
</list-item-album-spotify>
|
||||
<VueEternalLoading v-if="offset < total" :load="load_next">
|
||||
<template #no-more> . </template>
|
||||
</VueEternalLoading>
|
||||
<spotify-modal-dialog-album
|
||||
<modal-dialog-album-spotify
|
||||
:show="show_details_modal"
|
||||
:album="selected_album"
|
||||
@close="show_details_modal = false"
|
||||
/>
|
||||
<spotify-modal-dialog-artist
|
||||
<modal-dialog-artist-spotify
|
||||
:show="show_artist_details_modal"
|
||||
:artist="artist"
|
||||
@close="show_artist_details_modal = false"
|
||||
@ -70,9 +70,9 @@
|
||||
<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 ListItemAlbumSpotify from '@/components/ListItemAlbumSpotify.vue'
|
||||
import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
|
||||
import ModalDialogArtistSpotify from '@/components/ModalDialogArtistSpotify.vue'
|
||||
import SpotifyWebApi from 'spotify-web-api-js'
|
||||
import store from '@/store'
|
||||
import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
|
||||
@ -110,9 +110,9 @@ export default {
|
||||
components: {
|
||||
ContentWithHeading,
|
||||
CoverArtwork,
|
||||
SpotifyListItemAlbum,
|
||||
SpotifyModalDialogAlbum,
|
||||
SpotifyModalDialogArtist,
|
||||
ListItemAlbumSpotify,
|
||||
ModalDialogAlbumSpotify,
|
||||
ModalDialogArtistSpotify,
|
||||
VueEternalLoading
|
||||
},
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<p class="title is-4" v-text="$t('page.spotify.browse.new-releases')" />
|
||||
</template>
|
||||
<template #content>
|
||||
<spotify-list-item-album
|
||||
<list-item-album-spotify
|
||||
v-for="album in new_releases"
|
||||
:key="album.id"
|
||||
:album="album"
|
||||
@ -32,8 +32,8 @@
|
||||
/>
|
||||
</a>
|
||||
</template>
|
||||
</spotify-list-item-album>
|
||||
<spotify-modal-dialog-album
|
||||
</list-item-album-spotify>
|
||||
<modal-dialog-album-spotify
|
||||
:show="show_album_details_modal"
|
||||
:album="selected_album"
|
||||
@close="show_album_details_modal = false"
|
||||
@ -100,10 +100,10 @@
|
||||
import * as types from '@/store/mutation_types'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
|
||||
import CoverArtwork from '@/components/CoverArtwork.vue'
|
||||
import ListItemAlbumSpotify from '@/components/ListItemAlbumSpotify.vue'
|
||||
import ListItemPlaylistSpotify from '@/components/ListItemPlaylistSpotify.vue'
|
||||
import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
|
||||
import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
|
||||
import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum.vue'
|
||||
import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum.vue'
|
||||
import SpotifyWebApi from 'spotify-web-api-js'
|
||||
import store from '@/store'
|
||||
import TabsMusic from '@/components/TabsMusic.vue'
|
||||
@ -147,10 +147,10 @@ export default {
|
||||
components: {
|
||||
ContentWithHeading,
|
||||
CoverArtwork,
|
||||
ListItemAlbumSpotify,
|
||||
ListItemPlaylistSpotify,
|
||||
ModalDialogAlbumSpotify,
|
||||
ModalDialogPlaylistSpotify,
|
||||
SpotifyListItemAlbum,
|
||||
SpotifyModalDialogAlbum,
|
||||
TabsMusic
|
||||
},
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<p class="title is-4" v-text="$t('page.spotify.browse.new-releases')" />
|
||||
</template>
|
||||
<template #content>
|
||||
<spotify-list-item-album
|
||||
<list-item-album-spotify
|
||||
v-for="album in new_releases"
|
||||
:key="album.id"
|
||||
:album="album"
|
||||
@ -31,8 +31,8 @@
|
||||
/>
|
||||
</a>
|
||||
</template>
|
||||
</spotify-list-item-album>
|
||||
<spotify-modal-dialog-album
|
||||
</list-item-album-spotify>
|
||||
<modal-dialog-album-spotify
|
||||
:show="show_album_details_modal"
|
||||
:album="selected_album"
|
||||
@close="show_album_details_modal = false"
|
||||
@ -43,14 +43,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
|
||||
import TabsMusic from '@/components/TabsMusic.vue'
|
||||
import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum.vue'
|
||||
import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum.vue'
|
||||
import CoverArtwork from '@/components/CoverArtwork.vue'
|
||||
import store from '@/store'
|
||||
import * as types from '@/store/mutation_types'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
|
||||
import CoverArtwork from '@/components/CoverArtwork.vue'
|
||||
import ListItemAlbumSpotify from '@/components/ListItemAlbumSpotify.vue'
|
||||
import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
|
||||
import SpotifyWebApi from 'spotify-web-api-js'
|
||||
import store from '@/store'
|
||||
import TabsMusic from '@/components/TabsMusic.vue'
|
||||
|
||||
const dataObject = {
|
||||
load(to) {
|
||||
@ -74,12 +74,12 @@ const dataObject = {
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'SpotifyPageBrowseNewReleases',
|
||||
name: 'PageBrowseSpotifyNewReleases',
|
||||
components: {
|
||||
ContentWithHeading,
|
||||
CoverArtwork,
|
||||
SpotifyListItemAlbum,
|
||||
SpotifyModalDialogAlbum,
|
||||
ListItemAlbumSpotify,
|
||||
ModalDialogAlbumSpotify,
|
||||
TabsMusic
|
||||
},
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
$t('page.spotify.playlist.count', { count: playlist.tracks.total })
|
||||
"
|
||||
/>
|
||||
<spotify-list-item-track
|
||||
<list-item-track-spotify
|
||||
v-for="track in tracks"
|
||||
:key="track.id"
|
||||
:track="track"
|
||||
@ -41,11 +41,11 @@
|
||||
/>
|
||||
</a>
|
||||
</template>
|
||||
</spotify-list-item-track>
|
||||
</list-item-track-spotify>
|
||||
<VueEternalLoading v-if="offset < total" :load="load_next">
|
||||
<template #no-more> . </template>
|
||||
</VueEternalLoading>
|
||||
<spotify-modal-dialog-track
|
||||
<modal-dialog-track-spotify
|
||||
:show="show_track_details_modal"
|
||||
:track="selected_track"
|
||||
:album="selected_track.album"
|
||||
@ -63,9 +63,9 @@
|
||||
|
||||
<script>
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
|
||||
import ListItemTrackSpotify from '@/components/ListItemTrackSpotify.vue'
|
||||
import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
|
||||
import SpotifyListItemTrack from '@/components/SpotifyListItemTrack.vue'
|
||||
import SpotifyModalDialogTrack from '@/components/SpotifyModalDialogTrack.vue'
|
||||
import ModalDialogTrackSpotify from '@/components/ModalDialogTrackSpotify.vue'
|
||||
import SpotifyWebApi from 'spotify-web-api-js'
|
||||
import store from '@/store'
|
||||
import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
|
||||
@ -100,9 +100,9 @@ export default {
|
||||
name: 'PagePlaylistTracksSpotify',
|
||||
components: {
|
||||
ContentWithHeading,
|
||||
ListItemTrackSpotify,
|
||||
ModalDialogPlaylistSpotify,
|
||||
SpotifyListItemTrack,
|
||||
SpotifyModalDialogTrack,
|
||||
ModalDialogTrackSpotify,
|
||||
VueEternalLoading
|
||||
},
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
<p class="title is-4" v-text="$t('page.spotify.search.tracks')" />
|
||||
</template>
|
||||
<template #content>
|
||||
<spotify-list-item-track
|
||||
<list-item-track-spotify
|
||||
v-for="track in tracks.items"
|
||||
:key="track.id"
|
||||
:track="track"
|
||||
@ -56,14 +56,14 @@
|
||||
/>
|
||||
</a>
|
||||
</template>
|
||||
</spotify-list-item-track>
|
||||
</list-item-track-spotify>
|
||||
<VueEternalLoading
|
||||
v-if="query.type === 'track'"
|
||||
:load="search_tracks_next"
|
||||
>
|
||||
<template #no-more> . </template>
|
||||
</VueEternalLoading>
|
||||
<spotify-modal-dialog-track
|
||||
<modal-dialog-track-spotify
|
||||
:show="show_track_details_modal"
|
||||
:track="selected_track"
|
||||
:album="selected_track.album"
|
||||
@ -97,7 +97,7 @@
|
||||
<p class="title is-4" v-text="$t('page.spotify.search.artists')" />
|
||||
</template>
|
||||
<template #content>
|
||||
<spotify-list-item-artist
|
||||
<list-item-artist-spotify
|
||||
v-for="artist in artists.items"
|
||||
:key="artist.id"
|
||||
:artist="artist"
|
||||
@ -111,14 +111,14 @@
|
||||
/>
|
||||
</a>
|
||||
</template>
|
||||
</spotify-list-item-artist>
|
||||
</list-item-artist-spotify>
|
||||
<VueEternalLoading
|
||||
v-if="query.type === 'artist'"
|
||||
:load="search_artists_next"
|
||||
>
|
||||
<template #no-more> . </template>
|
||||
</VueEternalLoading>
|
||||
<spotify-modal-dialog-artist
|
||||
<modal-dialog-artist-spotify
|
||||
:show="show_artist_details_modal"
|
||||
:artist="selected_artist"
|
||||
@close="show_artist_details_modal = false"
|
||||
@ -151,7 +151,7 @@
|
||||
<p class="title is-4" v-text="$t('page.spotify.search.albums')" />
|
||||
</template>
|
||||
<template #content>
|
||||
<spotify-list-item-album
|
||||
<list-item-album-spotify
|
||||
v-for="album in albums.items"
|
||||
:key="album.id"
|
||||
:album="album"
|
||||
@ -176,14 +176,14 @@
|
||||
/>
|
||||
</a>
|
||||
</template>
|
||||
</spotify-list-item-album>
|
||||
</list-item-album-spotify>
|
||||
<VueEternalLoading
|
||||
v-if="query.type === 'album'"
|
||||
:load="search_albums_next"
|
||||
>
|
||||
<template #no-more> . </template>
|
||||
</VueEternalLoading>
|
||||
<spotify-modal-dialog-album
|
||||
<modal-dialog-album-spotify
|
||||
:show="show_album_details_modal"
|
||||
:album="selected_album"
|
||||
@close="show_album_details_modal = false"
|
||||
@ -272,18 +272,18 @@ import * as types from '@/store/mutation_types'
|
||||
import ContentText from '@/templates/ContentText.vue'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
|
||||
import CoverArtwork from '@/components/CoverArtwork.vue'
|
||||
import ListItemAlbumSpotify from '@/components/ListItemAlbumSpotify.vue'
|
||||
import ListItemArtistSpotify from '@/components/ListItemArtistSpotify.vue'
|
||||
import ListItemPlaylistSpotify from '@/components/ListItemPlaylistSpotify.vue'
|
||||
import ListItemTrackSpotify from '@/components/ListItemTrackSpotify.vue'
|
||||
import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
|
||||
import ModalDialogArtistSpotify from '@/components/ModalDialogArtistSpotify.vue'
|
||||
import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
|
||||
import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum.vue'
|
||||
import SpotifyListItemArtist from '@/components/SpotifyListItemArtist.vue'
|
||||
import SpotifyListItemTrack from '@/components/SpotifyListItemTrack.vue'
|
||||
import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum.vue'
|
||||
import SpotifyModalDialogArtist from '@/components/SpotifyModalDialogArtist.vue'
|
||||
import SpotifyModalDialogTrack from '@/components/SpotifyModalDialogTrack.vue'
|
||||
import ModalDialogTrackSpotify from '@/components/ModalDialogTrackSpotify.vue'
|
||||
import SpotifyWebApi from 'spotify-web-api-js'
|
||||
import TabsSearch from '@/components/TabsSearch.vue'
|
||||
import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
|
||||
import webapi from '@/webapi'
|
||||
import TabsSearch from '@/components/TabsSearch.vue'
|
||||
|
||||
const PAGE_SIZE = 50
|
||||
|
||||
@ -293,16 +293,16 @@ export default {
|
||||
ContentText,
|
||||
ContentWithHeading,
|
||||
CoverArtwork,
|
||||
ListItemAlbumSpotify,
|
||||
ListItemArtistSpotify,
|
||||
ListItemPlaylistSpotify,
|
||||
ListItemTrackSpotify,
|
||||
ModalDialogAlbumSpotify,
|
||||
ModalDialogArtistSpotify,
|
||||
ModalDialogPlaylistSpotify,
|
||||
SpotifyListItemAlbum,
|
||||
SpotifyListItemArtist,
|
||||
SpotifyListItemTrack,
|
||||
SpotifyModalDialogAlbum,
|
||||
SpotifyModalDialogArtist,
|
||||
SpotifyModalDialogTrack,
|
||||
VueEternalLoading,
|
||||
TabsSearch
|
||||
ModalDialogTrackSpotify,
|
||||
TabsSearch,
|
||||
VueEternalLoading
|
||||
},
|
||||
|
||||
data() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user