updated recordLabel with i18n and root usage

This commit is contained in:
Core 2022-07-11 14:53:06 +01:00
parent f940bcf1e0
commit 835c2bddd5
No known key found for this signature in database
GPG key ID: FE9BF1B547F8F3C6

View file

@ -10,93 +10,102 @@
size="220" type="artists"></mediaitem-artwork> size="220" type="artists"></mediaitem-artwork>
</div> </div>
</div> </div>
<div class="col flex-center" <div class="col flex-center">
>
<h1>{{ data.attributes.name }}</h1> <h1>{{ data.attributes.name }}</h1>
</div> </div>
</div> </div>
</div> </div>
<div class="artist-body"> <div class="artist-body">
<div v-if = "app.showingPlaylist.attributes.description"> <div v-if="$root.showingPlaylist.attributes.description">
<div class="row"> <div class="row">
<h3>About </h3> <h3>{{ $root.getLz("term.about") }}</h3>
</div> </div>
<div class="row"> <div class="row">
<div>{{ app.showingPlaylist.attributes.description.standard }}</div> <div>{{ $root.showingPlaylist.attributes.description.standard }}</div>
</div> </div>
</div> </div>
<template v-if="data.views && data.views['latest-releases']"> <template v-if="data.views && data.views['latest-releases']">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h3>{{ data.views["latest-releases"].attributes.title ?? ""}}</h3> <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> </div>
<div class="col-auto flex-center" v-if="data.views['latest-releases'].data.length >= 10"> <mediaitem-square :item="item" v-for="item in data.views['latest-releases'].data">
<button class="cd-btn-seeall" @click="app.showRecordLabelView(data.id, data.attributes.name + ' - Latest Releases', 'latest-releases')">{{app.getLz('term.seeAll')}}</button> </mediaitem-square>
</div>
</div>
<mediaitem-square :item="item" v-for="item in data.views['latest-releases'].data">
</mediaitem-square>
</template> </template>
<template v-if="data.views && data.views['top-releases']"> <template v-if="data.views && data.views['top-releases']">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h3>{{ data.views["top-releases"].attributes.title ?? ""}}</h3> <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>
<div class="col-auto flex-center" v-if="data.views['top-releases'].data.length >= 10"> <mediaitem-square :item="item" v-for="item in data.views['top-releases'].data">
<button class="cd-btn-seeall" @click="app.showRecordLabelView(data.id, data.attributes.name + ' - Top Releases', 'top-releases')">{{app.getLz('term.seeAll')}}</button> </mediaitem-square>
</div>
</div>
<mediaitem-square :item="item" v-for="item in data.views['top-releases'].data">
</mediaitem-square>
</template> </template>
<template v-if="data.relationships && data.relationships.playlists && data.relationships.playlists.data.length > 0"> <template
<div class="row"> v-if="data.relationships && data.relationships.playlists && data.relationships.playlists.data.length > 0">
<div class="col"> <div class="row">
<h3>Playlists</h3> <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>
<div class="col-auto flex-center" v-if="data.relationships.playlists.data.length >= 5"> <mediaitem-square :item="item" v-for="item in data.relationships.playlists.data.limit(5)">
<button class="cd-btn-seeall" @click="app.showCollection(data.relationships.playlists, data.attributes.name + ' - Playlists', 'curator')">{{app.getLz('term.seeAll')}}</button> </mediaitem-square>
</div>
</div>
<mediaitem-square :item="item" v-for="item in data.relationships.playlists.data.limit(5)">
</mediaitem-square>
</template> </template>
</div> </div>
</div> </div>
</script> </script>
<script> <script>
Vue.component('cider-recordlabel', { Vue.component('cider-recordlabel', {
template: "#cider-recordlabel", template: "#cider-recordlabel",
props: ['data'], props: ['data'],
data: function () { data: function () {
return { return {
topSongsExpanded: false, topSongsExpanded: false,
app: this.$root $root: this.$root
} }
}, },
methods: { methods: {
getArtistPalette(artist) { getArtistPalette(artist) {
if (artist?.attributes?.artwork != null) { if (artist?.attributes?.artwork != null) {
return { return {
"background": "#" + artist["attributes"]["artwork"]["bgColor"], "background": "#" + artist["attributes"]["artwork"]["bgColor"],
"color": "#" + artist["attributes"]["artwork"]["textColor1"], "color": "#" + artist["attributes"]["artwork"]["textColor1"],
} }
} else { } else {
return { return {
"background": "#000000", "background": "#000000",
"color": "#ffffff", "color": "#ffffff",
} }
} }
}, },
getTopResult() { getTopResult() {
if (this.search.results["meta"]) { if (this.search.results["meta"]) {
return this.search.results[this.search.results.meta.results.order[0]]["data"][0] return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
} else { } else {
return false; return false;
} }
} }
} }
}) })
</script> </script>