MyFavMirrors
/
owntone-server
mirror of https://github.com/owntone/owntone-server.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[web] Streamline Spotify pages to match library pages

This commit is contained in:
Alain Nussbaumer 2024-03-25 21:54:01 +01:00
parent 8b1c4decf5
commit 6fd4db14fb
12 changed files with 147 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
htdocs/assets/index.css
View File

File diff suppressed because one or more lines are too long

74
web-src/src/components/ListItemAlbumSpotify.vue
View File

@ -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
}
}
}

34
web-src/src/components/ListItemArtistSpotify.vue
View File

@ -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
}
}
}

39
web-src/src/components/ListItemPlaylistSpotify.vue
View File

@ -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
}
}
}

97
web-src/src/components/ListItemTrackSpotify.vue
View File

@ -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
)
}
}

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

@ -39,13 +39,7 @@
$t('page.spotify.album.track-count', { count: album.tracks.total })
"
/>
<list-item-track-spotify
v-for="(track, index) in tracks"
:key="track.id"
:item="track"
:position="index"
:context_uri="album.uri"
/>
<list-item-track-spotify :items="tracks" :context_uri="album.uri" />
<modal-dialog-album-spotify
:show="show_details_modal"
:album="album"

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

@ -23,11 +23,7 @@
class="heading has-text-centered-mobile"
v-text="$t('page.spotify.artist.album-count', { count: total })"
/>
<list-item-album-spotify
v-for="album in albums"
:key="album.id"
:item="album"
/>
<list-item-album-spotify :items="albums" />
<VueEternalLoading v-if="offset < total" :load="load_next">
<template #loading>
<div class="columns is-centered">

12
web-src/src/pages/PageMusicSpotify.vue
View File

@ -7,11 +7,7 @@
<p class="title is-4" v-text="$t('page.spotify.music.new-releases')" />
</template>
<template #content>
<list-item-album-spotify
v-for="album in new_releases"
:key="album.id"
:item="album"
/>
<list-item-album-spotify :items="new_releases" />
</template>
<template #footer>
<nav class="level">
@ -34,11 +30,7 @@
/>
</template>
<template #content>
<list-item-playlist-spotify
v-for="playlist in featured_playlists"
:key="playlist.id"
:item="playlist"
/>
<list-item-playlist-spotify :items="featured_playlists" />
</template>
<template #footer>
<nav class="level">

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

@ -9,11 +9,7 @@
/>
</template>
<template #content>
<list-item-playlist-spotify
v-for="playlist in featured_playlists"
:key="playlist.id"
:item="playlist"
/>
<list-item-playlist-spotify :items="featured_playlists" />
</template>
</content-with-heading>
</div>

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

@ -6,11 +6,7 @@
<p class="title is-4" v-text="$t('page.spotify.music.new-releases')" />
</template>
<template #content>
<list-item-album-spotify
v-for="album in new_releases"
:key="album.id"
:item="album"
/>
<list-item-album-spotify :items="new_releases" />
</template>
</content-with-heading>
</div>

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

@ -25,13 +25,7 @@
$t('page.spotify.playlist.count', { count: playlist.tracks.total })
"
/>
<list-item-track-spotify
v-for="track in tracks"
:key="track.id"
:item="track"
:position="track.position"
:context_uri="playlist.uri"
/>
<list-item-track-spotify :items="tracks" :context_uri="playlist.uri" />
<VueEternalLoading v-if="offset < total" :load="load_next">
<template #loading>
<div class="columns is-centered">

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

@ -38,12 +38,7 @@
<p class="title is-4" v-text="$t(`page.spotify.search.${type}s`)" />
</template>
<template #content>
<component
:is="components[type]"
v-for="item in results[type].items"
:key="item.id"
:item="item"
/>
<component :is="components[type]" :items="results[type].items" />
<VueEternalLoading v-if="query.type === type" :load="search_next">
<template #loading>
<div class="columns is-centered">
@ -62,13 +57,9 @@
class="button is-light is-small is-rounded"
@click="open_search(type)"
v-text="
$t(
`page.spotify.search.show-${type}s`,
results[type].total,
{
count: $filters.number(results[type].total)
}
)
$t(`page.spotify.search.show-${type}s`, results[type].total, {
count: $filters.number(results[type].total)
})
"
/>
</p>
@ -206,8 +197,8 @@ export default {
search_next({ loaded }) {
const items = this.results[this.query.type]
this.spotify_search([this.query.type]).then((data) => {
const next = Object.values(data)[0]
items.items = items.items.concat(next.items)
const [next] = Object.values(data)
items.items.push(...next.items)
items.total = next.total
this.search_param.offset += next.limit
loaded(next.items.length, PAGE_SIZE)