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

[web-src] Hide cover artwork in lists if disabled in settings

Browse Source
This commit is contained in:
chme 2020-08-23 19:26:54 +02:00
parent 6f4970545f
commit f8257a1f55
10 changed files with 82 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web-src/src/pages/PageAlbums.vue
View File

@ -23,7 +23,7 @@
:key="album.id"
:album="album"
@click="open_album(album)">
<template slot="artwork">
<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"
@ -91,6 +91,10 @@ export default {
albums_filtered () {
return this.albums.items.filter(album => !this.hide_singles || album.track_count > 2)
},
is_visible_artwork () {
return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
}
},

6
web-src/src/pages/PageArtist.vue
View File

@ -16,7 +16,7 @@
<template slot="content">
<p class="heading has-text-centered-mobile">{{ artist.album_count }} albums | <a class="has-text-link" @click="open_tracks">{{ artist.track_count }} tracks</a></p>
<list-item-album v-for="album in albums.items" :key="album.id" :album="album" @click="open_album(album)">
<template slot="artwork">
<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"
@ -94,6 +94,10 @@ export default {
open_dialog: function (album) {
this.selected_album = album
this.show_details_modal = true
},
is_visible_artwork () {
return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
}
}
}

8
web-src/src/pages/PageBrowse.vue
View File

@ -10,7 +10,7 @@
</template>
<template slot="content">
<list-item-album v-for="album in recently_added.items" :key="album.id" :album="album" @click="open_album(album)">
<template slot="artwork">
<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"
@ -107,6 +107,12 @@ export default {
}
},
computed: {
is_visible_artwork () {
return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
}
},
methods: {
open_browse: function (type) {
this.$router.push({ path: '/music/browse/' + type })

8
web-src/src/pages/PageBrowseRecentlyAdded.vue
View File

@ -9,7 +9,7 @@
</template>
<template slot="content">
<list-item-album v-for="album in recently_added.items" :key="album.id" :album="album" @click="open_album(album)">
<template slot="artwork">
<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"
@ -68,6 +68,12 @@ export default {
}
},
computed: {
is_visible_artwork () {
return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
}
},
methods: {
open_album: function (album) {
this.$router.push({ path: '/music/albums/' + album.id })

6
web-src/src/pages/PageGenre.vue
View File

@ -20,7 +20,7 @@
<template slot="content">
<p class="heading has-text-centered-mobile">{{ genre_albums.total }} albums | <a class="has-text-link" @click="open_tracks">tracks</a></p>
<list-item-albums v-for="album in genre_albums.items" :key="album.id" :album="album" @click="open_album(album)">
<template slot="artwork">
<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"
@ -85,6 +85,10 @@ export default {
index_list () {
return [...new Set(this.genre_albums.items
.map(album => album.name.charAt(0).toUpperCase()))]
},
is_visible_artwork () {
return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
}
},

6
web-src/src/pages/PageSearch.vue
View File

@ -85,7 +85,7 @@
</template>
<template slot="content">
<list-item-album v-for="album in albums.items" :key="album.id" :album="album" @click="open_album(album)">
<template slot="artwork">
<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"
@ -213,6 +213,10 @@ export default {
},
show_all_playlists_button () {
return this.playlists.total > this.playlists.items.length
},
is_visible_artwork () {
return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
}
},

8
web-src/src/pages/SpotifyPageArtist.vue
View File

@ -19,7 +19,7 @@
:key="album.id"
:album="album"
@click="open_album(album)">
<template slot="artwork">
<template slot="artwork" v-if="is_visible_artwork">
<p class="image is-64x64 fd-has-shadow fd-has-action">
<cover-artwork
:artwork_url="artwork_url(album)"
@ -93,6 +93,12 @@ export default {
}
},
computed: {
is_visible_artwork () {
return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
}
},
methods: {
load_next: function ($state) {
const spotifyApi = new SpotifyWebApi()

6
web-src/src/pages/SpotifyPageBrowse.vue
View File

@ -12,7 +12,7 @@
:key="album.id"
:album="album"
@click="open_album(album)">
<template slot="artwork">
<template slot="artwork" v-if="is_visible_artwork">
<p class="image is-64x64 fd-has-shadow fd-has-action">
<cover-artwork
:artwork_url="artwork_url(album)"
@ -126,6 +126,10 @@ export default {
featured_playlists () {
return this.$store.state.spotify_featured_playlists.slice(0, 3)
},
is_visible_artwork () {
return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
}
},

6
web-src/src/pages/SpotifyPageBrowseNewReleases.vue
View File

@ -11,7 +11,7 @@
:key="album.id"
:album="album"
@click="open_album(album)">
<template slot="artwork">
<template slot="artwork" v-if="is_visible_artwork">
<p class="image is-64x64 fd-has-shadow fd-has-action">
<cover-artwork
:artwork_url="artwork_url(album)"
@ -77,6 +77,10 @@ export default {
computed: {
new_releases () {
return this.$store.state.spotify_new_releases
},
is_visible_artwork () {
return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
}
},

33
web-src/src/pages/SpotifyPageSearch.vue
View File

@ -83,7 +83,20 @@
<p class="title is-4">Albums</p>
</template>
<template slot="content">
<spotify-list-item-album v-for="album in albums.items" :key="album.id" :album="album">
<spotify-list-item-album v-for="album in albums.items"
: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="artwork_url(album)"
:artist="album.artist"
:album="album.name"
:maxwidth="64"
:maxheight="64" />
</p>
</template>
<template slot="actions">
<a @click="open_album_dialog(album)">
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@ -142,6 +155,7 @@ import SpotifyModalDialogTrack from '@/components/SpotifyModalDialogTrack'
import SpotifyModalDialogArtist from '@/components/SpotifyModalDialogArtist'
import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum'
import SpotifyModalDialogPlaylist from '@/components/SpotifyModalDialogPlaylist'
import CoverArtwork from '@/components/CoverArtwork'
import SpotifyWebApi from 'spotify-web-api-js'
import webapi from '@/webapi'
import * as types from '@/store/mutation_types'
@ -149,7 +163,7 @@ import InfiniteLoading from 'vue-infinite-loading'
export default {
name: 'SpotifyPageSearch',
components: { ContentWithHeading, TabsSearch, SpotifyListItemTrack, SpotifyListItemArtist, SpotifyListItemAlbum, SpotifyListItemPlaylist, SpotifyModalDialogTrack, SpotifyModalDialogArtist, SpotifyModalDialogAlbum, SpotifyModalDialogPlaylist, InfiniteLoading },
components: { ContentWithHeading, TabsSearch, SpotifyListItemTrack, SpotifyListItemArtist, SpotifyListItemAlbum, SpotifyListItemPlaylist, SpotifyModalDialogTrack, SpotifyModalDialogArtist, SpotifyModalDialogAlbum, SpotifyModalDialogPlaylist, InfiniteLoading, CoverArtwork },
data () {
return {
@ -207,6 +221,10 @@ export default {
},
show_all_playlists_button () {
return this.playlists.total > this.playlists.items.length
},
is_visible_artwork () {
return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
}
},
@ -390,6 +408,17 @@ export default {
open_playlist_dialog: function (playlist) {
this.selected_playlist = playlist
this.show_playlist_details_modal = true
},
open_album: function (album) {
this.$router.push({ path: '/music/spotify/albums/' + album.id })
},
artwork_url: function (album) {
if (album.images && album.images.length > 0) {
return album.images[0].url
}
return ''
}
},