mirror of
https://github.com/owntone/owntone-server.git
synced 2025-11-07 04:42:58 -05:00
[web] Streamline Spotify pages to match library pages
This commit is contained in:
Alain Nussbaumer
@@ -1,34 +1,38 @@
|
||||
<template>
|
||||
<div class="media is-align-items-center" @click="open">
|
||||
<div v-if="show_artwork" class="media-left is-clickable">
|
||||
<cover-artwork
|
||||
:artwork_url="artwork_url"
|
||||
:artist="item.artist"
|
||||
:album="item.name"
|
||||
class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
|
||||
/>
|
||||
<template v-for="item in items" :key="item.id">
|
||||
<div class="media is-align-items-center" @click="open(item)">
|
||||
<div v-if="show_artwork" class="media-left is-clickable">
|
||||
<cover-artwork
|
||||
:artwork_url="artwork_url(item)"
|
||||
:artist="item.artist"
|
||||
:album="item.name"
|
||||
class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
|
||||
/>
|
||||
</div>
|
||||
<div class="media-content is-clickable is-clipped">
|
||||
<h1 class="title is-6" v-text="item.name" />
|
||||
<h2
|
||||
class="subtitle is-7 has-text-grey has-text-weight-bold"
|
||||
v-text="item.artists[0]?.name"
|
||||
/>
|
||||
<h2
|
||||
class="subtitle is-7 has-text-grey"
|
||||
v-text="
|
||||
[item.album_type, $filters.date(item.release_date)].join(', ')
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<a @click.prevent.stop="open_dialog(item)">
|
||||
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-content is-clickable is-clipped">
|
||||
<h1 class="title is-6" v-text="item.name" />
|
||||
<h2
|
||||
class="subtitle is-7 has-text-grey has-text-weight-bold"
|
||||
v-text="item.artists[0]?.name"
|
||||
/>
|
||||
<h2
|
||||
class="subtitle is-7 has-text-grey"
|
||||
v-text="[item.album_type, $filters.date(item.release_date)].join(', ')"
|
||||
/>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<a @click.prevent.stop="show_details_modal = true">
|
||||
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<teleport to="#app">
|
||||
<modal-dialog-album-spotify
|
||||
:show="show_details_modal"
|
||||
:album="item"
|
||||
:album="selected_item"
|
||||
@close="show_details_modal = false"
|
||||
/>
|
||||
</teleport>
|
||||
@@ -41,16 +45,13 @@ import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
|
||||
export default {
|
||||
name: 'ListItemAlbumSpotify',
|
||||
components: { CoverArtwork, ModalDialogAlbumSpotify },
|
||||
props: { item: { required: true, type: Object } },
|
||||
props: { items: { required: true, type: Object } },
|
||||
|
||||
data() {
|
||||
return { show_details_modal: false }
|
||||
return { selected_item: {}, show_details_modal: false }
|
||||
},
|
||||
|
||||
computed: {
|
||||
artwork_url() {
|
||||
return this.item.images?.[0]?.url ?? ''
|
||||
},
|
||||
show_artwork() {
|
||||
return this.$store.getters.settings_option(
|
||||
'webinterface',
|
||||
@@ -60,11 +61,18 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
open() {
|
||||
artwork_url(item) {
|
||||
return item.images?.[0]?.url ?? ''
|
||||
},
|
||||
open(item) {
|
||||
this.$router.push({
|
||||
name: 'music-spotify-album',
|
||||
params: { id: this.item.id }
|
||||
params: { id: item.id }
|
||||
})
|
||||
},
|
||||
open_dialog(item) {
|
||||
this.selected_item = item
|
||||
this.show_details_modal = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,18 +1,20 @@
|
||||
<template>
|
||||
<div class="media is-align-items-center">
|
||||
<div class="media-content is-clickable is-clipped" @click="open_artist">
|
||||
<h1 class="title is-6" v-text="item.name" />
|
||||
<template v-for="item in items" :key="item.id">
|
||||
<div class="media is-align-items-center">
|
||||
<div class="media-content is-clickable is-clipped" @click="open(item)">
|
||||
<h1 class="title is-6" v-text="item.name" />
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<a @click.prevent.stop="open_dialog(item)">
|
||||
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<a @click.prevent.stop="show_details_modal = true">
|
||||
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<teleport to="#app">
|
||||
<modal-dialog-artist-spotify
|
||||
:show="show_details_modal"
|
||||
:artist="item"
|
||||
:artist="selected_item"
|
||||
@close="show_details_modal = false"
|
||||
/>
|
||||
</teleport>
|
||||
@@ -24,17 +26,21 @@ import ModalDialogArtistSpotify from '@/components/ModalDialogArtistSpotify.vue'
|
||||
export default {
|
||||
name: 'ListItemArtistSpotify',
|
||||
components: { ModalDialogArtistSpotify },
|
||||
props: { item: { required: true, type: Object } },
|
||||
props: { items: { required: true, type: Object } },
|
||||
|
||||
data() {
|
||||
return { show_details_modal: false }
|
||||
return { selected_item: {}, show_details_modal: false }
|
||||
},
|
||||
methods: {
|
||||
open_artist() {
|
||||
open(item) {
|
||||
this.$router.push({
|
||||
name: 'music-spotify-artist',
|
||||
params: { id: this.item.id }
|
||||
params: { id: item.id }
|
||||
})
|
||||
},
|
||||
open_dialog(item) {
|
||||
this.selected_item = item
|
||||
this.show_details_modal = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,21 @@
|
||||
<template>
|
||||
<div class="media is-align-items-center">
|
||||
<div class="media-content is-clickable is-clipped" @click="open_playlist">
|
||||
<h1 class="title is-6" v-text="item.name" />
|
||||
<h2 class="subtitle is-7" v-text="item.owner.display_name" />
|
||||
<template v-for="item in items" :key="item.id">
|
||||
<div class="media is-align-items-center">
|
||||
<div class="media-content is-clickable is-clipped" @click="open(item)">
|
||||
<h1 class="title is-6" v-text="item.name" />
|
||||
<h2 class="subtitle is-7" v-text="item.owner.display_name" />
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<a @click.prevent.stop="open_dialog(item)">
|
||||
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<a @click.prevent.stop="show_details_modal = true">
|
||||
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<teleport to="#app">
|
||||
<modal-dialog-playlist-spotify
|
||||
:show="show_details_modal"
|
||||
:playlist="item"
|
||||
:playlist="selected_item"
|
||||
@close="show_details_modal = false"
|
||||
/>
|
||||
</teleport>
|
||||
@@ -27,18 +29,19 @@ export default {
|
||||
components: {
|
||||
ModalDialogPlaylistSpotify
|
||||
},
|
||||
props: { item: { required: true, type: Object } },
|
||||
props: { items: { required: true, type: Object } },
|
||||
|
||||
data() {
|
||||
return { show_details_modal: false }
|
||||
return { selected_item: {}, show_details_modal: false }
|
||||
},
|
||||
|
||||
methods: {
|
||||
open_playlist() {
|
||||
this.$router.push({
|
||||
name: 'playlist-spotify',
|
||||
params: { id: this.item.id }
|
||||
})
|
||||
open(item) {
|
||||
this.$router.push({ name: 'playlist-spotify', params: { id: item.id } })
|
||||
},
|
||||
open_dialog(item) {
|
||||
this.selected_item = item
|
||||
this.show_details_modal = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,49 +1,51 @@
|
||||
<template>
|
||||
<div class="media is-align-items-center">
|
||||
<div
|
||||
class="media-content is-clipped"
|
||||
:class="{
|
||||
'is-clickable': item.is_playable,
|
||||
'fd-is-not-allowed': !item.is_playable
|
||||
}"
|
||||
@click="play"
|
||||
>
|
||||
<h1
|
||||
class="title is-6"
|
||||
:class="{ 'has-text-grey-light': !item.is_playable }"
|
||||
v-text="item.name"
|
||||
/>
|
||||
<h2
|
||||
class="subtitle is-7 has-text-weight-bold"
|
||||
<template v-for="item in items" :key="item.id">
|
||||
<div class="media is-align-items-center">
|
||||
<div
|
||||
class="media-content is-clipped"
|
||||
:class="{
|
||||
'has-text-grey': item.is_playable,
|
||||
'has-text-grey-light': !item.is_playable
|
||||
'is-clickable': item.is_playable,
|
||||
'fd-is-not-allowed': !item.is_playable
|
||||
}"
|
||||
v-text="item.artists[0].name"
|
||||
/>
|
||||
<h2 class="subtitle is-7 has-text-grey" v-text="item.album.name" />
|
||||
<h2 v-if="!item.is_playable" class="subtitle is-7">
|
||||
(<span v-text="$t('list.spotify.not-playable-track')" />
|
||||
<span
|
||||
v-if="item.restrictions && item.restrictions.reason"
|
||||
v-text="
|
||||
$t('list.spotify.restriction-reason', {
|
||||
reason: item.restrictions.reason
|
||||
})
|
||||
"
|
||||
/>)
|
||||
</h2>
|
||||
@click="play(item)"
|
||||
>
|
||||
<h1
|
||||
class="title is-6"
|
||||
:class="{ 'has-text-grey-light': !item.is_playable }"
|
||||
v-text="item.name"
|
||||
/>
|
||||
<h2
|
||||
class="subtitle is-7 has-text-weight-bold"
|
||||
:class="{
|
||||
'has-text-grey': item.is_playable,
|
||||
'has-text-grey-light': !item.is_playable
|
||||
}"
|
||||
v-text="item.artists[0].name"
|
||||
/>
|
||||
<h2 class="subtitle is-7 has-text-grey" v-text="item.album.name" />
|
||||
<h2 v-if="!item.is_playable" class="subtitle is-7">
|
||||
(<span v-text="$t('list.spotify.not-playable-track')" />
|
||||
<span
|
||||
v-if="item.restrictions && item.restrictions.reason"
|
||||
v-text="
|
||||
$t('list.spotify.restriction-reason', {
|
||||
reason: item.restrictions.reason
|
||||
})
|
||||
"
|
||||
/>)
|
||||
</h2>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<a @click.prevent.stop="open_dialog(item)">
|
||||
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<a @click.prevent.stop="show_details_modal = true">
|
||||
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<teleport to="#app">
|
||||
<modal-dialog-track-spotify
|
||||
:show="show_details_modal"
|
||||
:track="item"
|
||||
:track="selected_item"
|
||||
@close="show_details_modal = false"
|
||||
/>
|
||||
</teleport>
|
||||
@@ -58,19 +60,22 @@ export default {
|
||||
components: { ModalDialogTrackSpotify },
|
||||
props: {
|
||||
context_uri: { default: '', type: String },
|
||||
item: { required: true, type: Object },
|
||||
position: { default: 0, type: Number }
|
||||
items: { required: true, type: Object }
|
||||
},
|
||||
data() {
|
||||
return { show_details_modal: false }
|
||||
return { selected_item: {}, show_details_modal: false }
|
||||
},
|
||||
methods: {
|
||||
play() {
|
||||
if (this.item.is_playable) {
|
||||
open_dialog(item) {
|
||||
this.selected_item = item
|
||||
this.show_details_modal = true
|
||||
},
|
||||
play(item) {
|
||||
if (item.is_playable) {
|
||||
webapi.player_play_uri(
|
||||
this.context_uri || this.item.uri,
|
||||
this.context_uri || item.uri,
|
||||
false,
|
||||
this.position
|
||||
item.position || 0
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user