MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-01-15 08:45:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web] Fix modal dialogs not closing when opening artist or album page and renaming of views

Browse Source 
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 2023-07-18 15:19:24 +02:00
parent 34ea8115a8
commit 9d62c94d86
12 changed files with 81 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web-src/src/components/SpotifyListItemAlbum.vue → web-src/src/components/ListItemAlbumSpotify.vue
View File

@ -23,7 +23,7 @@
<script> <script>
export default { export default {
name: 'SpotifyListItemAlbum', name: 'ListItemAlbumSpotify',
props: ['album'] props: ['album']
} }
</script> </script>

2
web-src/src/components/SpotifyListItemArtist.vue → web-src/src/components/ListItemArtistSpotify.vue
View File

@ -11,7 +11,7 @@
<script> <script>
export default { export default {
name: 'SpotifyListItemArtist', name: 'ListItemArtistSpotify',
props: ['artist'], props: ['artist'],
methods: { methods: {

2
web-src/src/components/SpotifyListItemTrack.vue → web-src/src/components/ListItemTrackSpotify.vue
View File

@ -43,7 +43,7 @@
import webapi from '@/webapi' import webapi from '@/webapi'
export default { export default {
name: 'SpotifyListItemTrack', name: 'ListItemTrackSpotify',
props: ['track', 'position', 'context_uri'], props: ['track', 'position', 'context_uri'],
methods: { methods: {
play() { play() {

4
web-src/src/components/SpotifyModalDialogAlbum.vue → web-src/src/components/ModalDialogAlbumSpotify.vue
View File

@ -92,7 +92,7 @@ import CoverArtwork from '@/components/CoverArtwork.vue'
import webapi from '@/webapi' import webapi from '@/webapi'
export default { export default {
name: 'SpotifyModalDialogAlbum', name: 'ModalDialogAlbumSpotify',
components: { CoverArtwork }, components: { CoverArtwork },
props: ['show', 'album'], props: ['show', 'album'],
emits: ['close'], emits: ['close'],
@ -129,6 +129,7 @@ export default {
}, },
open_album() { open_album() {
this.$emit('close')
this.$router.push({ this.$router.push({
name: 'music-spotify-album', name: 'music-spotify-album',
params: { id: this.album.id } params: { id: this.album.id }
@ -136,6 +137,7 @@ export default {
}, },
open_artist() { open_artist() {
this.$emit('close')
this.$router.push({ this.$router.push({
name: 'music-spotify-artist', name: 'music-spotify-artist',
params: { id: this.album.artists[0].id } params: { id: this.album.artists[0].id }

3
web-src/src/components/SpotifyModalDialogArtist.vue → web-src/src/components/ModalDialogArtistSpotify.vue
View File

@ -74,7 +74,7 @@
import webapi from '@/webapi' import webapi from '@/webapi'
export default { export default {
name: 'SpotifyModalDialogArtist', name: 'ModalDialogArtistSpotify',
props: ['show', 'artist'], props: ['show', 'artist'],
emits: ['close'], emits: ['close'],
@ -95,6 +95,7 @@ export default {
}, },
open_artist() { open_artist() {
this.$emit('close')
this.$router.push({ this.$router.push({
name: 'music-spotify-artist', name: 'music-spotify-artist',
params: { id: this.artist.id } params: { id: this.artist.id }

4
web-src/src/components/SpotifyModalDialogTrack.vue → web-src/src/components/ModalDialogTrackSpotify.vue
View File

@ -109,7 +109,7 @@
import webapi from '@/webapi' import webapi from '@/webapi'
export default { export default {
name: 'SpotifyModalDialogTrack', name: 'ModalDialogTrackSpotify',
props: ['show', 'track', 'album'], props: ['show', 'track', 'album'],
emits: ['close'], emits: ['close'],
@ -130,6 +130,7 @@ export default {
}, },
open_album() { open_album() {
this.$emit('close')
this.$router.push({ this.$router.push({
name: 'music-spotify-album', name: 'music-spotify-album',
params: { id: this.album.id } params: { id: this.album.id }
@ -137,6 +138,7 @@ export default {
}, },
open_artist() { open_artist() {
this.$emit('close')
this.$router.push({ this.$router.push({
name: 'music-spotify-artist', name: 'music-spotify-artist',
params: { id: this.album.artists[0].id } params: { id: this.album.artists[0].id }

20
web-src/src/pages/PageAlbumSpotify.vue
View File

@ -39,7 +39,7 @@
$t('page.spotify.album.track-count', { count: album.tracks.total }) $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" v-for="(track, index) in album.tracks.items"
:key="track.id" :key="track.id"
:track="track" :track="track"
@ -55,14 +55,14 @@
/> />
</a> </a>
</template> </template>
</spotify-list-item-track> </list-item-track-spotify>
<spotify-modal-dialog-track <modal-dialog-track-spotify
:show="show_track_details_modal" :show="show_track_details_modal"
:track="selected_track" :track="selected_track"
:album="album" :album="album"
@close="show_track_details_modal = false" @close="show_track_details_modal = false"
/> />
<spotify-modal-dialog-album <modal-dialog-album-spotify
:show="show_album_details_modal" :show="show_album_details_modal"
:album="album" :album="album"
@close="show_album_details_modal = false" @close="show_album_details_modal = false"
@ -75,9 +75,9 @@
<script> <script>
import ContentWithHero from '@/templates/ContentWithHero.vue' import ContentWithHero from '@/templates/ContentWithHero.vue'
import CoverArtwork from '@/components/CoverArtwork.vue' import CoverArtwork from '@/components/CoverArtwork.vue'
import SpotifyListItemTrack from '@/components/SpotifyListItemTrack.vue' import ListItemTrackSpotify from '@/components/ListItemTrackSpotify.vue'
import SpotifyModalDialogTrack from '@/components/SpotifyModalDialogTrack.vue' import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum.vue' import ModalDialogTrackSpotify from '@/components/ModalDialogTrackSpotify.vue'
import SpotifyWebApi from 'spotify-web-api-js' import SpotifyWebApi from 'spotify-web-api-js'
import store from '@/store' import store from '@/store'
import webapi from '@/webapi' import webapi from '@/webapi'
@ -101,9 +101,9 @@ export default {
components: { components: {
ContentWithHero, ContentWithHero,
CoverArtwork, CoverArtwork,
SpotifyListItemTrack, ListItemTrackSpotify,
SpotifyModalDialogTrack, ModalDialogAlbumSpotify,
SpotifyModalDialogAlbum ModalDialogTrackSpotify
}, },
beforeRouteEnter(to, from, next) { beforeRouteEnter(to, from, next) {

20
web-src/src/pages/PageArtistSpotify.vue
View File

@ -23,7 +23,7 @@
class="heading has-text-centered-mobile" class="heading has-text-centered-mobile"
v-text="$t('page.spotify.artist.album-count', { count: total })" v-text="$t('page.spotify.artist.album-count', { count: total })"
/> />
<spotify-list-item-album <list-item-album-spotify
v-for="album in albums" v-for="album in albums"
:key="album.id" :key="album.id"
:album="album" :album="album"
@ -48,16 +48,16 @@
/> />
</a> </a>
</template> </template>
</spotify-list-item-album> </list-item-album-spotify>
<VueEternalLoading v-if="offset < total" :load="load_next"> <VueEternalLoading v-if="offset < total" :load="load_next">
<template #no-more> . </template> <template #no-more> . </template>
</VueEternalLoading> </VueEternalLoading>
<spotify-modal-dialog-album <modal-dialog-album-spotify
:show="show_details_modal" :show="show_details_modal"
:album="selected_album" :album="selected_album"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />
<spotify-modal-dialog-artist <modal-dialog-artist-spotify
:show="show_artist_details_modal" :show="show_artist_details_modal"
:artist="artist" :artist="artist"
@close="show_artist_details_modal = false" @close="show_artist_details_modal = false"
@ -70,9 +70,9 @@
<script> <script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue' import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import CoverArtwork from '@/components/CoverArtwork.vue' import CoverArtwork from '@/components/CoverArtwork.vue'
import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum.vue' import ListItemAlbumSpotify from '@/components/ListItemAlbumSpotify.vue'
import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum.vue' import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
import SpotifyModalDialogArtist from '@/components/SpotifyModalDialogArtist.vue' import ModalDialogArtistSpotify from '@/components/ModalDialogArtistSpotify.vue'
import SpotifyWebApi from 'spotify-web-api-js' import SpotifyWebApi from 'spotify-web-api-js'
import store from '@/store' import store from '@/store'
import { VueEternalLoading } from '@ts-pro/vue-eternal-loading' import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
@ -110,9 +110,9 @@ export default {
components: { components: {
ContentWithHeading, ContentWithHeading,
CoverArtwork, CoverArtwork,
SpotifyListItemAlbum, ListItemAlbumSpotify,
SpotifyModalDialogAlbum, ModalDialogAlbumSpotify,
SpotifyModalDialogArtist, ModalDialogArtistSpotify,
VueEternalLoading VueEternalLoading
}, },

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

@ -7,7 +7,7 @@
<p class="title is-4" v-text="$t('page.spotify.browse.new-releases')" /> <p class="title is-4" v-text="$t('page.spotify.browse.new-releases')" />
</template> </template>
<template #content> <template #content>
<spotify-list-item-album <list-item-album-spotify
v-for="album in new_releases" v-for="album in new_releases"
:key="album.id" :key="album.id"
:album="album" :album="album"
@ -32,8 +32,8 @@
/> />
</a> </a>
</template> </template>
</spotify-list-item-album> </list-item-album-spotify>
<spotify-modal-dialog-album <modal-dialog-album-spotify
:show="show_album_details_modal" :show="show_album_details_modal"
:album="selected_album" :album="selected_album"
@close="show_album_details_modal = false" @close="show_album_details_modal = false"
@ -100,10 +100,10 @@
import * as types from '@/store/mutation_types' import * as types from '@/store/mutation_types'
import ContentWithHeading from '@/templates/ContentWithHeading.vue' import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import CoverArtwork from '@/components/CoverArtwork.vue' import CoverArtwork from '@/components/CoverArtwork.vue'
import ListItemAlbumSpotify from '@/components/ListItemAlbumSpotify.vue'
import ListItemPlaylistSpotify from '@/components/ListItemPlaylistSpotify.vue' import ListItemPlaylistSpotify from '@/components/ListItemPlaylistSpotify.vue'
import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.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 SpotifyWebApi from 'spotify-web-api-js'
import store from '@/store' import store from '@/store'
import TabsMusic from '@/components/TabsMusic.vue' import TabsMusic from '@/components/TabsMusic.vue'
@ -147,10 +147,10 @@ export default {
components: { components: {
ContentWithHeading, ContentWithHeading,
CoverArtwork, CoverArtwork,
ListItemAlbumSpotify,
ListItemPlaylistSpotify, ListItemPlaylistSpotify,
ModalDialogAlbumSpotify,
ModalDialogPlaylistSpotify, ModalDialogPlaylistSpotify,
SpotifyListItemAlbum,
SpotifyModalDialogAlbum,
TabsMusic TabsMusic
}, },

24
web-src/src/pages/PageBrowseSpotifyNewReleases.vue
View File

@ -6,7 +6,7 @@
<p class="title is-4" v-text="$t('page.spotify.browse.new-releases')" /> <p class="title is-4" v-text="$t('page.spotify.browse.new-releases')" />
</template> </template>
<template #content> <template #content>
<spotify-list-item-album <list-item-album-spotify
v-for="album in new_releases" v-for="album in new_releases"
:key="album.id" :key="album.id"
:album="album" :album="album"
@ -31,8 +31,8 @@
/> />
</a> </a>
</template> </template>
</spotify-list-item-album> </list-item-album-spotify>
<spotify-modal-dialog-album <modal-dialog-album-spotify
:show="show_album_details_modal" :show="show_album_details_modal"
:album="selected_album" :album="selected_album"
@close="show_album_details_modal = false" @close="show_album_details_modal = false"
@ -43,14 +43,14 @@
</template> </template>
<script> <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 * 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 SpotifyWebApi from 'spotify-web-api-js'
import store from '@/store'
import TabsMusic from '@/components/TabsMusic.vue'
const dataObject = { const dataObject = {
load(to) { load(to) {
@ -74,12 +74,12 @@ const dataObject = {
} }
export default { export default {
name: 'SpotifyPageBrowseNewReleases', name: 'PageBrowseSpotifyNewReleases',
components: { components: {
ContentWithHeading, ContentWithHeading,
CoverArtwork, CoverArtwork,
SpotifyListItemAlbum, ListItemAlbumSpotify,
SpotifyModalDialogAlbum, ModalDialogAlbumSpotify,
TabsMusic TabsMusic
}, },

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

@ -25,7 +25,7 @@
$t('page.spotify.playlist.count', { count: playlist.tracks.total }) $t('page.spotify.playlist.count', { count: playlist.tracks.total })
" "
/> />
<spotify-list-item-track <list-item-track-spotify
v-for="track in tracks" v-for="track in tracks"
:key="track.id" :key="track.id"
:track="track" :track="track"
@ -41,11 +41,11 @@
/> />
</a> </a>
</template> </template>
</spotify-list-item-track> </list-item-track-spotify>
<VueEternalLoading v-if="offset < total" :load="load_next"> <VueEternalLoading v-if="offset < total" :load="load_next">
<template #no-more> . </template> <template #no-more> . </template>
</VueEternalLoading> </VueEternalLoading>
<spotify-modal-dialog-track <modal-dialog-track-spotify
:show="show_track_details_modal" :show="show_track_details_modal"
:track="selected_track" :track="selected_track"
:album="selected_track.album" :album="selected_track.album"
@ -63,9 +63,9 @@
<script> <script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue' import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ListItemTrackSpotify from '@/components/ListItemTrackSpotify.vue'
import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue' import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
import SpotifyListItemTrack from '@/components/SpotifyListItemTrack.vue' import ModalDialogTrackSpotify from '@/components/ModalDialogTrackSpotify.vue'
import SpotifyModalDialogTrack from '@/components/SpotifyModalDialogTrack.vue'
import SpotifyWebApi from 'spotify-web-api-js' import SpotifyWebApi from 'spotify-web-api-js'
import store from '@/store' import store from '@/store'
import { VueEternalLoading } from '@ts-pro/vue-eternal-loading' import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
@ -100,9 +100,9 @@ export default {
name: 'PagePlaylistTracksSpotify', name: 'PagePlaylistTracksSpotify',
components: { components: {
ContentWithHeading, ContentWithHeading,
ListItemTrackSpotify,
ModalDialogPlaylistSpotify, ModalDialogPlaylistSpotify,
SpotifyListItemTrack, ModalDialogTrackSpotify,
SpotifyModalDialogTrack,
VueEternalLoading VueEternalLoading
}, },

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

@ -40,7 +40,7 @@
<p class="title is-4" v-text="$t('page.spotify.search.tracks')" /> <p class="title is-4" v-text="$t('page.spotify.search.tracks')" />
</template> </template>
<template #content> <template #content>
<spotify-list-item-track <list-item-track-spotify
v-for="track in tracks.items" v-for="track in tracks.items"
:key="track.id" :key="track.id"
:track="track" :track="track"
@ -56,14 +56,14 @@
/> />
</a> </a>
</template> </template>
</spotify-list-item-track> </list-item-track-spotify>
<VueEternalLoading <VueEternalLoading
v-if="query.type === 'track'" v-if="query.type === 'track'"
:load="search_tracks_next" :load="search_tracks_next"
> >
<template #no-more> . </template> <template #no-more> . </template>
</VueEternalLoading> </VueEternalLoading>
<spotify-modal-dialog-track <modal-dialog-track-spotify
:show="show_track_details_modal" :show="show_track_details_modal"
:track="selected_track" :track="selected_track"
:album="selected_track.album" :album="selected_track.album"
@ -97,7 +97,7 @@
<p class="title is-4" v-text="$t('page.spotify.search.artists')" /> <p class="title is-4" v-text="$t('page.spotify.search.artists')" />
</template> </template>
<template #content> <template #content>
<spotify-list-item-artist <list-item-artist-spotify
v-for="artist in artists.items" v-for="artist in artists.items"
:key="artist.id" :key="artist.id"
:artist="artist" :artist="artist"
@ -111,14 +111,14 @@
/> />
</a> </a>
</template> </template>
</spotify-list-item-artist> </list-item-artist-spotify>
<VueEternalLoading <VueEternalLoading
v-if="query.type === 'artist'" v-if="query.type === 'artist'"
:load="search_artists_next" :load="search_artists_next"
> >
<template #no-more> . </template> <template #no-more> . </template>
</VueEternalLoading> </VueEternalLoading>
<spotify-modal-dialog-artist <modal-dialog-artist-spotify
:show="show_artist_details_modal" :show="show_artist_details_modal"
:artist="selected_artist" :artist="selected_artist"
@close="show_artist_details_modal = false" @close="show_artist_details_modal = false"
@ -151,7 +151,7 @@
<p class="title is-4" v-text="$t('page.spotify.search.albums')" /> <p class="title is-4" v-text="$t('page.spotify.search.albums')" />
</template> </template>
<template #content> <template #content>
<spotify-list-item-album <list-item-album-spotify
v-for="album in albums.items" v-for="album in albums.items"
:key="album.id" :key="album.id"
:album="album" :album="album"
@ -176,14 +176,14 @@
/> />
</a> </a>
</template> </template>
</spotify-list-item-album> </list-item-album-spotify>
<VueEternalLoading <VueEternalLoading
v-if="query.type === 'album'" v-if="query.type === 'album'"
:load="search_albums_next" :load="search_albums_next"
> >
<template #no-more> . </template> <template #no-more> . </template>
</VueEternalLoading> </VueEternalLoading>
<spotify-modal-dialog-album <modal-dialog-album-spotify
:show="show_album_details_modal" :show="show_album_details_modal"
:album="selected_album" :album="selected_album"
@close="show_album_details_modal = false" @close="show_album_details_modal = false"
@ -272,18 +272,18 @@ import * as types from '@/store/mutation_types'
import ContentText from '@/templates/ContentText.vue' import ContentText from '@/templates/ContentText.vue'
import ContentWithHeading from '@/templates/ContentWithHeading.vue' import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import CoverArtwork from '@/components/CoverArtwork.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 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 ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum.vue' import ModalDialogTrackSpotify from '@/components/ModalDialogTrackSpotify.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 SpotifyWebApi from 'spotify-web-api-js' import SpotifyWebApi from 'spotify-web-api-js'
import TabsSearch from '@/components/TabsSearch.vue'
import { VueEternalLoading } from '@ts-pro/vue-eternal-loading' import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
import webapi from '@/webapi' import webapi from '@/webapi'
import TabsSearch from '@/components/TabsSearch.vue'
const PAGE_SIZE = 50 const PAGE_SIZE = 50
@ -293,16 +293,16 @@ export default {
ContentText, ContentText,
ContentWithHeading, ContentWithHeading,
CoverArtwork, CoverArtwork,
ListItemAlbumSpotify,
ListItemArtistSpotify,
ListItemPlaylistSpotify, ListItemPlaylistSpotify,
ListItemTrackSpotify,
ModalDialogAlbumSpotify,
ModalDialogArtistSpotify,
ModalDialogPlaylistSpotify, ModalDialogPlaylistSpotify,
SpotifyListItemAlbum, ModalDialogTrackSpotify,
SpotifyListItemArtist, TabsSearch,
SpotifyListItemTrack, VueEternalLoading
SpotifyModalDialogAlbum,
SpotifyModalDialogArtist,
SpotifyModalDialogTrack,
VueEternalLoading,
TabsSearch
}, },
data() { data() {