updated recordLabel with i18n and root usage
This commit is contained in:
parent
f940bcf1e0
commit
835c2bddd5
1 changed files with 77 additions and 68 deletions
|
@ -10,93 +10,102 @@
|
|||
size="220" type="artists"></mediaitem-artwork>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col flex-center"
|
||||
>
|
||||
<div class="col flex-center">
|
||||
<h1>{{ data.attributes.name }}</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="artist-body">
|
||||
<div v-if = "app.showingPlaylist.attributes.description">
|
||||
<div v-if="$root.showingPlaylist.attributes.description">
|
||||
<div class="row">
|
||||
<h3>About </h3>
|
||||
<h3>{{ $root.getLz("term.about") }}</h3>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div>{{ app.showingPlaylist.attributes.description.standard }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<template v-if="data.views && data.views['latest-releases']">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>{{ data.views["latest-releases"].attributes.title ?? ""}}</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="data.views['latest-releases'].data.length >= 10">
|
||||
<button class="cd-btn-seeall" @click="app.showRecordLabelView(data.id, data.attributes.name + ' - Latest Releases', 'latest-releases')">{{app.getLz('term.seeAll')}}</button>
|
||||
<div>{{ $root.showingPlaylist.attributes.description.standard }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<mediaitem-square :item="item" v-for="item in data.views['latest-releases'].data">
|
||||
</mediaitem-square>
|
||||
<template v-if="data.views && data.views['latest-releases']">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>{{ data.views["latest-releases"].attributes.title ?? ""}}</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="data.views['latest-releases'].data.length >= 10">
|
||||
<button class="cd-btn-seeall"
|
||||
@click="$root.showRecordLabelView(data.id, data.attributes.name + ' - Latest Releases', 'latest-releases')">
|
||||
{{ $root.getLz('term.seeAll') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<mediaitem-square :item="item" v-for="item in data.views['latest-releases'].data">
|
||||
</mediaitem-square>
|
||||
</template>
|
||||
<template v-if="data.views && data.views['top-releases']">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>{{ data.views["top-releases"].attributes.title ?? ""}}</h3>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>{{ data.views["top-releases"].attributes.title ?? "" }}</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="data.views['top-releases'].data.length >= 10">
|
||||
<button class="cd-btn-seeall"
|
||||
@click="$root.showRecordLabelView(data.id, data.attributes.name + ' - Top Releases', 'top-releases')">
|
||||
{{ $root.getLz('term.seeAll') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="data.views['top-releases'].data.length >= 10">
|
||||
<button class="cd-btn-seeall" @click="app.showRecordLabelView(data.id, data.attributes.name + ' - Top Releases', 'top-releases')">{{app.getLz('term.seeAll')}}</button>
|
||||
</div>
|
||||
</div>
|
||||
<mediaitem-square :item="item" v-for="item in data.views['top-releases'].data">
|
||||
</mediaitem-square>
|
||||
<mediaitem-square :item="item" v-for="item in data.views['top-releases'].data">
|
||||
</mediaitem-square>
|
||||
</template>
|
||||
<template v-if="data.relationships && data.relationships.playlists && data.relationships.playlists.data.length > 0">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>Playlists</h3>
|
||||
<template
|
||||
v-if="data.relationships && data.relationships.playlists && data.relationships.playlists.data.length > 0">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>{{ $root.getLz('term.playlists') }}</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="data.relationships.playlists.data.length >= 5">
|
||||
<button class="cd-btn-seeall"
|
||||
@click="$root.showCollection(data.relationships.playlists, data.attributes.name + ' - Playlists', 'curator')">
|
||||
{{ $root.getLz('term.seeAll') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="data.relationships.playlists.data.length >= 5">
|
||||
<button class="cd-btn-seeall" @click="app.showCollection(data.relationships.playlists, data.attributes.name + ' - Playlists', 'curator')">{{app.getLz('term.seeAll')}}</button>
|
||||
</div>
|
||||
</div>
|
||||
<mediaitem-square :item="item" v-for="item in data.relationships.playlists.data.limit(5)">
|
||||
</mediaitem-square>
|
||||
<mediaitem-square :item="item" v-for="item in data.relationships.playlists.data.limit(5)">
|
||||
</mediaitem-square>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script>
|
||||
Vue.component('cider-recordlabel', {
|
||||
template: "#cider-recordlabel",
|
||||
props: ['data'],
|
||||
data: function () {
|
||||
return {
|
||||
topSongsExpanded: false,
|
||||
app: this.$root
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getArtistPalette(artist) {
|
||||
if (artist?.attributes?.artwork != null) {
|
||||
return {
|
||||
"background": "#" + artist["attributes"]["artwork"]["bgColor"],
|
||||
"color": "#" + artist["attributes"]["artwork"]["textColor1"],
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
"background": "#000000",
|
||||
"color": "#ffffff",
|
||||
}
|
||||
}
|
||||
},
|
||||
getTopResult() {
|
||||
if (this.search.results["meta"]) {
|
||||
return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Vue.component('cider-recordlabel', {
|
||||
template: "#cider-recordlabel",
|
||||
props: ['data'],
|
||||
data: function () {
|
||||
return {
|
||||
topSongsExpanded: false,
|
||||
$root: this.$root
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getArtistPalette(artist) {
|
||||
if (artist?.attributes?.artwork != null) {
|
||||
return {
|
||||
"background": "#" + artist["attributes"]["artwork"]["bgColor"],
|
||||
"color": "#" + artist["attributes"]["artwork"]["textColor1"],
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
"background": "#000000",
|
||||
"color": "#ffffff",
|
||||
}
|
||||
}
|
||||
},
|
||||
getTopResult() {
|
||||
if (this.search.results["meta"]) {
|
||||
return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
Loading…
Add table
Add a link
Reference in a new issue