[web] Streamline name of component properties to prepare for refactoring

This commit is contained in:
Alain Nussbaumer
2024-03-24 11:02:11 +01:00
parent 439867b95b
commit e244b82082
8 changed files with 57 additions and 66 deletions

View File

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

View File

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

View File

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