[web] Streamline name of component properties to prepare for refactoring
This commit is contained in:
Alain Nussbaumer
parent
439867b95b
commit
e244b82082
|
|
@ -1,7 +1,7 @@
|
|||
<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="artist.name" />
|
||||
<h1 class="title is-6" v-text="item.name" />
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<slot name="actions" />
|
||||
|
|
@ -12,13 +12,13 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'ListItemArtistSpotify',
|
||||
props: { artist: { required: true, type: Object } },
|
||||
props: { item: { required: true, type: Object } },
|
||||
|
||||
methods: {
|
||||
open_artist() {
|
||||
this.$router.push({
|
||||
name: 'music-spotify-artist',
|
||||
params: { id: this.artist.id }
|
||||
params: { id: this.item.id }
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<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="playlist.name" />
|
||||
<h2 class="subtitle is-7" v-text="playlist.owner.display_name" />
|
||||
<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">
|
||||
<slot name="actions" />
|
||||
|
|
@ -13,13 +13,13 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'ListItemPlaylistSpotify',
|
||||
props: { playlist: { required: true, type: Object } },
|
||||
props: { item: { required: true, type: Object } },
|
||||
|
||||
methods: {
|
||||
open_playlist() {
|
||||
this.$router.push({
|
||||
name: 'playlist-spotify',
|
||||
params: { id: this.playlist.id }
|
||||
params: { id: this.item.id }
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,31 +3,31 @@
|
|||
<div
|
||||
class="media-content is-clipped"
|
||||
:class="{
|
||||
'is-clickable': track.is_playable,
|
||||
'fd-is-not-allowed': !track.is_playable
|
||||
'is-clickable': item.is_playable,
|
||||
'fd-is-not-allowed': !item.is_playable
|
||||
}"
|
||||
@click="play"
|
||||
>
|
||||
<h1
|
||||
class="title is-6"
|
||||
:class="{ 'has-text-grey-light': !track.is_playable }"
|
||||
v-text="track.name"
|
||||
:class="{ 'has-text-grey-light': !item.is_playable }"
|
||||
v-text="item.name"
|
||||
/>
|
||||
<h2
|
||||
class="subtitle is-7"
|
||||
:class="{
|
||||
'has-text-grey': track.is_playable,
|
||||
'has-text-grey-light': !track.is_playable
|
||||
'has-text-grey': item.is_playable,
|
||||
'has-text-grey-light': !item.is_playable
|
||||
}"
|
||||
v-text="track.artists[0].name"
|
||||
v-text="item.artists[0].name"
|
||||
/>
|
||||
<h2 v-if="!track.is_playable" class="subtitle is-7">
|
||||
<h2 v-if="!item.is_playable" class="subtitle is-7">
|
||||
(<span v-text="$t('list.spotify.not-playable-track')" />
|
||||
<span
|
||||
v-if="track.restrictions && track.restrictions.reason"
|
||||
v-if="item.restrictions && item.restrictions.reason"
|
||||
v-text="
|
||||
$t('list.spotify.restriction-reason', {
|
||||
reason: track.restrictions.reason
|
||||
reason: item.restrictions.reason
|
||||
})
|
||||
"
|
||||
/>)
|
||||
|
|
@ -46,12 +46,12 @@ export default {
|
|||
name: 'ListItemTrackSpotify',
|
||||
props: {
|
||||
context_uri: { required: true, type: String },
|
||||
position: { required: true, type: Number },
|
||||
track: { required: true, type: Object }
|
||||
item: { required: true, type: Object },
|
||||
position: { required: true, type: Number }
|
||||
},
|
||||
methods: {
|
||||
play() {
|
||||
if (this.track.is_playable) {
|
||||
if (this.item.is_playable) {
|
||||
webapi.player_play_uri(this.context_uri, false, this.position)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
<list-item-track-spotify
|
||||
v-for="(track, index) in album.tracks.items"
|
||||
:key="track.id"
|
||||
:track="track"
|
||||
:item="track"
|
||||
:position="index"
|
||||
:context_uri="album.uri"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<list-item-album-spotify
|
||||
v-for="album in new_releases"
|
||||
:key="album.id"
|
||||
:album="album"
|
||||
:item="album"
|
||||
@click="open_album(album)"
|
||||
>
|
||||
<template v-if="is_visible_artwork" #artwork>
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
<list-item-playlist-spotify
|
||||
v-for="playlist in featured_playlists"
|
||||
:key="playlist.id"
|
||||
:playlist="playlist"
|
||||
:item="playlist"
|
||||
>
|
||||
<template #actions>
|
||||
<a @click.prevent.stop="open_playlist_dialog(playlist)">
|
||||
|
|
@ -176,42 +176,37 @@ export default {
|
|||
},
|
||||
|
||||
computed: {
|
||||
new_releases() {
|
||||
return this.$store.state.spotify_new_releases.slice(0, 3)
|
||||
},
|
||||
|
||||
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
|
||||
},
|
||||
new_releases() {
|
||||
return this.$store.state.spotify_new_releases.slice(0, 3)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
artwork_url(album) {
|
||||
return album.images?.[0]?.url || ''
|
||||
},
|
||||
open_album(album) {
|
||||
this.$router.push({
|
||||
name: 'music-spotify-album',
|
||||
params: { id: album.id }
|
||||
})
|
||||
},
|
||||
|
||||
open_album_dialog(album) {
|
||||
this.selected_album = album
|
||||
this.show_album_details_modal = true
|
||||
},
|
||||
|
||||
open_playlist_dialog(playlist) {
|
||||
this.selected_playlist = playlist
|
||||
this.show_playlist_details_modal = true
|
||||
},
|
||||
|
||||
artwork_url(album) {
|
||||
return album.images?.[0]?.url || ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<list-item-playlist-spotify
|
||||
v-for="playlist in featured_playlists"
|
||||
:key="playlist.id"
|
||||
:playlist="playlist"
|
||||
:item="playlist"
|
||||
>
|
||||
<template #actions>
|
||||
<a @click.prevent.stop="open_playlist_dialog(playlist)">
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<list-item-track-spotify
|
||||
v-for="track in tracks"
|
||||
:key="track.id"
|
||||
:track="track"
|
||||
:item="track"
|
||||
:position="track.position"
|
||||
:context_uri="playlist.uri"
|
||||
>
|
||||
|
|
@ -95,6 +95,7 @@ const dataObject = {
|
|||
},
|
||||
|
||||
set(vm, response) {
|
||||
console.log(response[0])
|
||||
vm.playlist = response[0]
|
||||
vm.tracks = []
|
||||
vm.total = 0
|
||||
|
|
@ -128,34 +129,17 @@ export default {
|
|||
|
||||
data() {
|
||||
return {
|
||||
playlist: { tracks: {} },
|
||||
tracks: [],
|
||||
total: 0,
|
||||
offset: 0,
|
||||
|
||||
show_track_details_modal: false,
|
||||
playlist: { tracks: {} },
|
||||
selected_track: {},
|
||||
|
||||
show_playlist_details_modal: false
|
||||
show_playlist_details_modal: false,
|
||||
show_track_details_modal: false,
|
||||
total: 0,
|
||||
tracks: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
load_next({ loaded }) {
|
||||
const spotifyApi = new SpotifyWebApi()
|
||||
spotifyApi.setAccessToken(this.$store.state.spotify.webapi_token)
|
||||
spotifyApi
|
||||
.getPlaylistTracks(this.playlist.id, {
|
||||
limit: PAGE_SIZE,
|
||||
offset: this.offset,
|
||||
market: store.state.spotify.webapi_country
|
||||
})
|
||||
.then((data) => {
|
||||
this.append_tracks(data)
|
||||
loaded(data.items.length, PAGE_SIZE)
|
||||
})
|
||||
},
|
||||
|
||||
append_tracks(data) {
|
||||
let position = Math.max(
|
||||
-1,
|
||||
|
|
@ -174,15 +158,27 @@ export default {
|
|||
this.total = data.total
|
||||
this.offset += data.limit
|
||||
},
|
||||
|
||||
play() {
|
||||
this.show_details_modal = false
|
||||
webapi.player_play_uri(this.playlist.uri, true)
|
||||
load_next({ loaded }) {
|
||||
const spotifyApi = new SpotifyWebApi()
|
||||
spotifyApi.setAccessToken(this.$store.state.spotify.webapi_token)
|
||||
spotifyApi
|
||||
.getPlaylistTracks(this.playlist.id, {
|
||||
limit: PAGE_SIZE,
|
||||
market: store.state.spotify.webapi_country,
|
||||
offset: this.offset
|
||||
})
|
||||
.then((data) => {
|
||||
this.append_tracks(data)
|
||||
loaded(data.items.length, PAGE_SIZE)
|
||||
})
|
||||
},
|
||||
|
||||
open_track_dialog(track) {
|
||||
this.selected_track = track
|
||||
this.show_track_details_modal = true
|
||||
},
|
||||
play() {
|
||||
this.show_details_modal = false
|
||||
webapi.player_play_uri(this.playlist.uri, true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
<list-item-track-spotify
|
||||
v-for="track in tracks.items"
|
||||
:key="track.id"
|
||||
:track="track"
|
||||
:item="track"
|
||||
:position="0"
|
||||
:context_uri="track.uri"
|
||||
>
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
<list-item-artist-spotify
|
||||
v-for="artist in artists.items"
|
||||
:key="artist.id"
|
||||
:artist="artist"
|
||||
:item="artist"
|
||||
>
|
||||
<template #actions>
|
||||
<a @click.prevent.stop="open_artist_dialog(artist)">
|
||||
|
|
@ -238,7 +238,7 @@
|
|||
<list-item-playlist-spotify
|
||||
v-for="playlist in playlists.items"
|
||||
:key="playlist.id"
|
||||
:playlist="playlist"
|
||||
:item="playlist"
|
||||
>
|
||||
<template #actions>
|
||||
<a @click.prevent.stop="open_playlist_dialog(playlist)">
|
||||
|
|
|
|||
Loading…
Reference in New Issue