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

[web-src] Refactor album+artist lists and add audiobooks artist page

Browse Source
This commit is contained in:
chme
2020-09-20 08:13:19 +02:00
parent bfa2497dd5
commit dbcd391331
10 changed files with 246 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
web-src/src/components/ListAlbums.vue Normal file
View File

@@ -0,0 +1,76 @@
<template>
<div>
<list-item-album v-for="album in albums"
:key="album.id"
:album="album"
@click="open_album(album)">
<template slot="artwork" v-if="is_visible_artwork">
<p class="image is-64x64 fd-has-shadow fd-has-action">
<cover-artwork
:artwork_url="album.artwork_url"
:artist="album.artist"
:album="album.name"
:maxwidth="64"
:maxheight="64" />
</p>
</template>
<template slot="actions">
<a @click="open_dialog(album)">
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
</a>
</template>
</list-item-album>
<modal-dialog-album :show="show_details_modal" :album="selected_album" :media_kind="media_kind" @close="show_details_modal = false" />
</div>
</template>
<script>
import ListItemAlbum from '@/components/ListItemAlbum'
import ModalDialogAlbum from '@/components/ModalDialogAlbum'
import CoverArtwork from '@/components/CoverArtwork'
export default {
name: 'ListAlbums',
components: { ListItemAlbum, ModalDialogAlbum, CoverArtwork },
props: ['albums', 'media_kind'],
data () {
return {
show_details_modal: false,
selected_album: {}
}
},
computed: {
is_visible_artwork () {
return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
},
media_kind_resolved: function () {
return this.media_kind ? this.media_kind : this.selected_album.media_kind
}
},
methods: {
open_album: function (album) {
this.selected_album = album
if (this.media_kind_resolved === 'podcast') {
this.$router.push({ path: '/podcasts/' + album.id })
} else if (this.media_kind_resolved === 'audiobook') {
this.$router.push({ path: '/audiobooks/' + album.id })
} else {
this.$router.push({ path: '/music/albums/' + album.id })
}
},
open_dialog: function (album) {
this.selected_album = album
this.show_details_modal = true
}
}
}
</script>
<style>
</style>

61
web-src/src/components/ListArtists.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<div>
<list-item-artist v-for="artist in artists"
:key="artist.id"
:artist="artist"
@click="open_artist(artist)">
<template slot="actions">
<a @click="open_dialog(artist)">
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
</a>
</template>
</list-item-artist>
<modal-dialog-artist :show="show_details_modal" :artist="selected_artist" :media_kind="media_kind" @close="show_details_modal = false" />
</div>
</template>
<script>
import ListItemArtist from '@/components/ListItemArtist'
import ModalDialogArtist from '@/components/ModalDialogArtist'
export default {
name: 'ListArtists',
components: { ListItemArtist, ModalDialogArtist },
props: ['artists', 'media_kind'],
data () {
return {
show_details_modal: false,
selected_artist: {}
}
},
computed: {
media_kind_resolved: function () {
return this.media_kind ? this.media_kind : this.selected_artist.media_kind
}
},
methods: {
open_artist: function (artist) {
this.selected_artist = artist
if (this.media_kind_resolved === 'podcast') {
// No artist page for podcasts
} else if (this.media_kind_resolved === 'audiobook') {
this.$router.push({ path: '/audiobooks/artists/' + artist.id })
} else {
this.$router.push({ path: '/music/artists/' + artist.id })
}
},
open_dialog: function (artist) {
this.selected_artist = artist
this.show_details_modal = true
}
}
}
</script>
<style>
</style>

24
web-src/src/components/ModalDialogAlbum.vue
View File

@@ -14,19 +14,15 @@
<p class="title is-4">
<a class="has-text-link" @click="open_album">{{ album.name }}</a>
</p>
<div class="buttons" v-if="media_kind === 'podcast'">
<div class="buttons" v-if="media_kind_resolved === 'podcast'">
<a class="button is-small" @click="mark_played">Mark as played</a>
<a class="button is-small" @click="$emit('remove_podcast')">Remove podcast</a>
</div>
<div class="content is-small">
<p v-if="album.artist && media_kind !== 'audiobook'">
<p v-if="album.artist">
<span class="heading">Album artist</span>
<a class="title is-6 has-text-link" @click="open_artist">{{ album.artist }}</a>
</p>
<p v-if="album.artist && media_kind === 'audiobook'">
<span class="heading">Album artist</span>
<span class="title is-6">{{ album.artist }}</span>
</p>
<p v-if="album.date_released">
<span class="heading">Release date</span>
<span class="title is-6">{{ album.date_released | time('L') }}</span>
@@ -90,6 +86,10 @@ export default {
computed: {
artwork_url: function () {
return webapi.artwork_url_append_size_params(this.album.artwork_url)
},
media_kind_resolved: function () {
return this.media_kind ? this.media_kind : this.album.media_kind
}
},
@@ -110,9 +110,9 @@ export default {
},
open_album: function () {
if (this.media_kind === 'podcast') {
if (this.media_kind_resolved === 'podcast') {
this.$router.push({ path: '/podcasts/' + this.album.id })
} else if (this.media_kind === 'audiobook') {
} else if (this.media_kind_resolved === 'audiobook') {
this.$router.push({ path: '/audiobooks/' + this.album.id })
} else {
this.$router.push({ path: '/music/albums/' + this.album.id })
@@ -120,7 +120,13 @@ export default {
},
open_artist: function () {
this.$router.push({ path: '/music/artists/' + this.album.artist_id })
if (this.media_kind_resolved === 'podcast') {
// No artist page for podcasts
} else if (this.media_kind_resolved === 'audiobook') {
this.$router.push({ path: '/audiobooks/artists/' + this.album.artist_id })
} else {
this.$router.push({ path: '/music/artists/' + this.album.artist_id })
}
},
mark_played: function () {