278 lines
No EOL
14 KiB
Text
278 lines
No EOL
14 KiB
Text
<script type="text/x-template" id="cider-artist">
|
|
<div class="content-inner artist-page"
|
|
:class="[(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9) || hasHero()) ? 'animated' : '']">
|
|
<div class="artist-header" :key="data.id" v-observe-visibility="{callback: isHeaderVisible}">
|
|
<animatedartwork-view
|
|
:priority="true"
|
|
v-if="hasAnimated()"
|
|
:video="data.attributes.editorialVideo.motionArtistWide16x9.video ?? (data.attributes.editorialVideo.motionArtistFullscreen16x9.video ?? '')">
|
|
</animatedartwork-view>
|
|
<div class="header-content" style="pointer-events: all;">
|
|
<div class="row">
|
|
<div class="col-sm" style="width: auto;">
|
|
<div class="artist-image"
|
|
v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))&& !hasHero()">
|
|
<mediaitem-artwork
|
|
shadow="large"
|
|
:url="data.attributes.artwork ? data.attributes.artwork.url : ''"
|
|
size="190" type="artists"></mediaitem-artwork>
|
|
<button class="overlay-play" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
|
|
app.mk.play()
|
|
})" :aria-label="app.getLz('term.play')">
|
|
<%- include("../svg/play.svg") %>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col flex-center artist-title"
|
|
:class="{'artist-animation-on': (data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)) || hasHero() }"
|
|
>
|
|
<button class="artist-play" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
|
|
app.mk.play()
|
|
})" :aria-label="app.getLz('term.play')"><%- include("../svg/play.svg") %></button>
|
|
<h1>{{ data.attributes.name }}</h1>
|
|
</div>
|
|
</div>
|
|
<button class="more-btn-round favorite" @click="artistMenu" style="pointer-events: all;"
|
|
:aria-label="app.getLz('term.more')">
|
|
<div class="svg-icon"></div>
|
|
</button>
|
|
<button class="more-btn-round menu" @click="artistMenu" style="pointer-events: all;"
|
|
:aria-label="app.getLz('term.more')">
|
|
<div class="svg-icon"></div>
|
|
</button>
|
|
</div>
|
|
<div class="artworkContainer"
|
|
v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)) && !hasHero()">
|
|
<artwork-material :url="data.attributes.artwork.url" size="190" images="1"></artwork-material>
|
|
</div>
|
|
<div class="artist-hero" v-if="hasHero() && !hasAnimated()">
|
|
<mediaitem-artwork shadow="none" :url="hasHero()" size="2048" />
|
|
</div>
|
|
</div>
|
|
<div class="floating-header"
|
|
:style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
|
|
<div class="row">
|
|
<div class="col-auto flex-center">
|
|
<button class="artist-play" style="display:block;" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
|
|
app.mk.play()
|
|
})" :aria-label="app.getLz('term.play')"><%- include("../svg/play.svg") %></button>
|
|
</div>
|
|
<div class="col">
|
|
<h3>{{ data.attributes.name }}</h3>
|
|
</div>
|
|
<div class="col-auto flex-center">
|
|
<button class="more-btn-round menu" @click="artistMenu" :aria-label="app.getLz('term.more')">
|
|
<div class="svg-icon"></div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="artist-body">
|
|
<div class="arow well" :class="{arowb: data.views['latest-release'].data.length == 0}">
|
|
<div class="latestRelease" v-if="data.views['latest-release'].data.length != 0">
|
|
<h3>{{app.getLz('term.latestReleases')}}</h3>
|
|
<div style="width: auto;margin: 0 auto;">
|
|
<mediaitem-square kind="card" :no-scale="true" v-for="song in data.views['latest-release'].data"
|
|
:item="song">
|
|
</mediaitem-square>
|
|
</div>
|
|
</div>
|
|
<div class="topSongs" v-if="data.views['top-songs']">
|
|
<div class="row">
|
|
<div class="col" style="padding:0;">
|
|
<h3>{{app.getLz('term.topSongs')}}</h3>
|
|
</div>
|
|
<div class="col-auto flex-center" v-if="data.views['top-songs'].data.length >= 20"
|
|
style="padding:0;">
|
|
<button class="cd-btn-seeall"
|
|
@click="app.showArtistView(data.id, data.attributes.name + ' - Top Songs', 'top-songs')">
|
|
{{app.getLz('term.seeAll')}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col flex-center" style="padding:0;">
|
|
<div class="mediaitem-list-item__grid">
|
|
<listitem-horizontal :items="data.views['top-songs'].data.limit(20)">
|
|
</listitem-horizontal>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="row well">
|
|
<div class="col">
|
|
<template v-for="(view) in data.meta.views.order"
|
|
v-if="(data.views[view].data.length != 0) && (view != 'latest-release') && (view != 'top-songs')">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h3>{{ data.views[view].attributes.title ?
|
|
data.views[view].attributes.title : "???"}}
|
|
</h3>
|
|
</div>
|
|
<div class="col-auto flex-center" v-if="data.views[view].data.length >= 10">
|
|
<button class="cd-btn-seeall"
|
|
@click="app.showArtistView(data.id, data.attributes.name + ' - ' + data.views[view].attributes.title, view)">
|
|
{{app.getLz('term.seeAll')}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<template v-if="!((data.views[view].attributes.title ?
|
|
data.views[view].attributes.title : '???').includes('Video') || (data.views[view].attributes.title ?
|
|
data.views[view].attributes.title : '???').includes('More To See'))">
|
|
<mediaitem-scroller-horizontal-large :items="data.views[view].data.limit(10)">
|
|
</mediaitem-scroller-horizontal-large>
|
|
</template>
|
|
<template v-else>
|
|
<mediaitem-scroller-horizontal-mvview
|
|
:items="data.views[view].data.limit(10)"></mediaitem-scroller-horizontal-mvview>
|
|
</template>
|
|
</template>
|
|
<div class="row">
|
|
<div class="col" v-if="data.attributes.artistBio">
|
|
<h3>{{ $root.stringTemplateParser($root.getLz('term.aboutArtist'), {"artistName":
|
|
data.attributes.name}) }}</h3>
|
|
<p v-html="data.attributes.artistBio"></p>
|
|
</div>
|
|
<div class="col">
|
|
<div v-if="data.attributes.origin">
|
|
<h3>{{ data.attributes.isGroup ? "Origin" : "Hometown" }}</h3>
|
|
{{ data.attributes.origin }}
|
|
</div>
|
|
<div v-if="data.attributes.bornOrFormed">
|
|
<h3>{{ data.attributes.isGroup ? "Formed" : "Born" }}</h3>
|
|
{{ data.attributes.bornOrFormed }}
|
|
</div>
|
|
<div v-if="data.attributes.genreNames">
|
|
<h3>{{app.getLz('term.sortBy.genre')}}</h3>
|
|
{{ data.attributes.genreNames.join(', ') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
<script>
|
|
Vue.component('cider-artist', {
|
|
template: "#cider-artist",
|
|
props: ['data'],
|
|
data: function () {
|
|
return {
|
|
topSongsExpanded: false,
|
|
app: this.$root,
|
|
headerVisible: true
|
|
}
|
|
},
|
|
methods: {
|
|
hasAnimated() {
|
|
if(this.data.attributes?.editorialVideo && (this.data.attributes?.editorialVideo?.motionArtistWide16x9 || this.data.attributes?.editorialVideo?.motionArtistFullscreen16x9)) {
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
hasHero() {
|
|
if(this.data.attributes?.editorialArtwork?.centeredFullscreenBackground){
|
|
return this.data.attributes?.editorialArtwork?.centeredFullscreenBackground.url
|
|
} else if(this.data.attributes?.editorialArtwork?.bannerUber) {
|
|
return this.data.attributes?.editorialArtwork?.bannerUber.url
|
|
}else if(this.data.attributes?.editorialArtwork?.subscriptionHero){
|
|
return this.data.attributes?.editorialArtwork?.subscriptionHero.url
|
|
}
|
|
return false;
|
|
},
|
|
isHeaderVisible(visible) {
|
|
this.headerVisible = visible
|
|
},
|
|
async artistMenu(event) {
|
|
let self = this
|
|
let followAction = "follow"
|
|
let followActions = {
|
|
follow: {
|
|
icon: "./assets/feather/plus-circle.svg",
|
|
name: app.getLz('action.follow'),
|
|
action: () => {
|
|
self.app.cfg.home.followedArtists.push(self.data.id)
|
|
}
|
|
},
|
|
unfollow: {
|
|
icon: "./assets/feather/x-circle.svg",
|
|
name: app.getLz('action.unfollow'),
|
|
action: () => {
|
|
let index = self.app.cfg.home.followedArtists.indexOf(self.data.id)
|
|
if (index > -1) {
|
|
self.app.cfg.home.followedArtists.splice(index, 1)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
let favoriteActions = {
|
|
favorite: {
|
|
icon: "./assets/star.svg",
|
|
name: app.getLz('action.favorite'),
|
|
action: () => {
|
|
app.setArtistFavorite(app.artistPage.data.id, true)
|
|
}
|
|
},
|
|
removeFavorite: {
|
|
icon: "./assets/star.svg",
|
|
name: app.getLz('action.removeFavorite'),
|
|
action: () => {
|
|
app.setArtistFavorite(app.artistPage.data.id, false)
|
|
}
|
|
}
|
|
}
|
|
if (this.app.cfg.home.followedArtists.includes(self.data.id)) {
|
|
followAction = "unfollow"
|
|
}
|
|
const inFavorites = (await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/artists/${app.artistPage.data.id}`, {
|
|
"fields[artists]": "inFavorites"
|
|
})).data.data[0].attributes?.inFavorites
|
|
app.showMenuPanel({
|
|
items: [
|
|
{
|
|
icon: "./assets/feather/play.svg",
|
|
name: app.getLz('action.startRadio'),
|
|
action: () => {
|
|
app.mk.setStationQueue({artist: self.data.id}).then(() => {
|
|
app.mk.play()
|
|
})
|
|
}
|
|
},
|
|
favoriteActions[inFavorites ? "removeFavorite" : "favorite"],
|
|
// followActions[followAction],
|
|
{
|
|
icon: "./assets/feather/share.svg",
|
|
name: app.getLz('term.share'),
|
|
action: () => {
|
|
self.app.copyToClipboard(self.data.attributes.url)
|
|
}
|
|
}
|
|
]
|
|
}, event)
|
|
},
|
|
getArtistPalette(artist) {
|
|
if (artist["attributes"]["artwork"]) {
|
|
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> |