moved artist page to cider-artist component
This commit is contained in:
booploops
parent
0b5389a528
commit
60ee14c6f9
3 changed files with 67 additions and 43 deletions
|
|
@ -79,7 +79,6 @@ const app = new Vue({
|
|||
showingPlaylist: [],
|
||||
artistPage: {
|
||||
data: {},
|
||||
topSongsExpanded: false
|
||||
},
|
||||
library: {
|
||||
downloadNotification: {
|
||||
|
|
@ -319,19 +318,6 @@ const app = new Vue({
|
|||
return "";
|
||||
}
|
||||
},
|
||||
getArtistPalette(artist) {
|
||||
if (artist["attributes"]["artwork"]) {
|
||||
return {
|
||||
"background": "#" + artist["attributes"]["artwork"]["bgColor"],
|
||||
"color": "#" + artist["attributes"]["artwork"]["textColor1"],
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
"background": "#000000",
|
||||
"color": "#ffffff",
|
||||
}
|
||||
}
|
||||
},
|
||||
routeView(item) {
|
||||
let self = this
|
||||
app.showingPlaylist = [];
|
||||
|
|
|
|||
|
|
@ -206,7 +206,9 @@
|
|||
<div id="app-content">
|
||||
<!-- Artist Page -->
|
||||
<transition name="wpfade">
|
||||
<%- include('pages/artist') %>
|
||||
<template v-if="page == 'artist-page' && artistPage.data.attributes">
|
||||
<cider-artist :data="artistPage.data"></cider-artist>
|
||||
</template>
|
||||
</transition>
|
||||
<transition name="wpfade">
|
||||
<%- include('pages/webview') %>
|
||||
|
|
@ -388,6 +390,9 @@
|
|||
<!-- Playlists / Albums -->
|
||||
<%- include('pages/cider-playlist') %>
|
||||
|
||||
<!-- Artist Page -->
|
||||
<%- include('pages/artist') %>
|
||||
|
||||
<!-- Search -->
|
||||
<%- include('pages/search') %>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
<template v-if="page == 'artist-page' && artistPage.data.attributes">
|
||||
<script type="text/x-template" id="cider-artist">
|
||||
<div class="content-inner artist-page">
|
||||
<div class="artist-header" :style="getArtistPalette(artistPage.data)">
|
||||
<div class="artist-header" :style="getArtistPalette(data)">
|
||||
<animatedartwork-view
|
||||
v-if="app.artistPage.data.attributes.editorialVideo && (app.artistPage.data.attributes.editorialVideo.motionArtistWide16x9 || app.artistPage.data.attributes.editorialVideo.motionArtistFullscreen16x9)"
|
||||
:video="app.artistPage.data.attributes.editorialVideo.motionArtistWide16x9.video ?? (app.artistPage.data.attributes.editorialVideo.motionArtistFullscreen16x9.video ?? '')">
|
||||
v-if="data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)"
|
||||
:video="data.attributes.editorialVideo.motionArtistWide16x9.video ?? (data.attributes.editorialVideo.motionArtistFullscreen16x9.video ?? '')">
|
||||
</animatedartwork-view>
|
||||
<div class="row">
|
||||
<div class="col-sm" style="width: auto;">
|
||||
<div class="artist-image">
|
||||
<mediaitem-artwork
|
||||
:url="artistPage.data.attributes.artwork ? artistPage.data.attributes.artwork.url : ''"
|
||||
:url="data.attributes.artwork ? data.attributes.artwork.url : ''"
|
||||
size="220" type="artists"></mediaitem-artwork>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col flex-center">
|
||||
<h1>{{ artistPage.data.attributes.name }}</h1>
|
||||
<h1>{{ data.attributes.name }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -22,22 +22,22 @@
|
|||
<div class="row well">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-auto" v-if="artistPage.data.views['latest-release'].data.length != 0">
|
||||
<div class="col-auto" v-if="data.views['latest-release'].data.length != 0">
|
||||
<h3>Latest Release</h3>
|
||||
<div style="width: auto;margin: 0 auto;">
|
||||
<mediaitem-square-sp v-for="song in artistPage.data.views['latest-release'].data"
|
||||
<mediaitem-square-sp v-for="song in data.views['latest-release'].data"
|
||||
:item="song">
|
||||
</mediaitem-square-sp>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" v-if="artistPage.data.views['top-songs']">
|
||||
<div class="col" v-if="data.views['top-songs']">
|
||||
<h3>Top Songs</h3>
|
||||
<mediaitem-list-item
|
||||
v-for="song in artistPage.data.views['top-songs'].data.limit(artistPage.topSongsExpanded ? 10 : 5)"
|
||||
v-for="song in data.views['top-songs'].data.limit(topSongsExpanded ? 10 : 5)"
|
||||
:item="song"></mediaitem-list-item>
|
||||
<button class="showmoreless"
|
||||
@click="artistPage.topSongsExpanded = !artistPage.topSongsExpanded">
|
||||
<template v-if="!artistPage.topSongsExpanded">
|
||||
@click="topSongsExpanded = !topSongsExpanded">
|
||||
<template v-if="!topSongsExpanded">
|
||||
Show more
|
||||
</template>
|
||||
<template v-else>
|
||||
|
|
@ -50,34 +50,34 @@
|
|||
</div>
|
||||
<div class="row well">
|
||||
<div class="col">
|
||||
<template v-for="(view) in artistPage.data.meta.views.order"
|
||||
v-if="(artistPage.data.views[view].data.length != 0) && (view != 'latest-release') && (view != 'top-songs')">
|
||||
<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>{{ artistPage.data.views[view].attributes.title ?
|
||||
artistPage.data.views[view].attributes.title : "???"}}
|
||||
<h3>{{ data.views[view].attributes.title ?
|
||||
data.views[view].attributes.title : "???"}}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="artistPage.data.views[view].data.length >= 10">
|
||||
<div class="col-auto flex-center" v-if="data.views[view].data.length >= 10">
|
||||
<button class="cd-btn-seeall">See All</button>
|
||||
</div>
|
||||
</div>
|
||||
<mediaitem-scroller-horizontal-large :items="artistPage.data.views[view].data.limit(10)">
|
||||
<mediaitem-scroller-horizontal-large :items="data.views[view].data.limit(10)">
|
||||
</mediaitem-scroller-horizontal-large>
|
||||
</template>
|
||||
<div class="row">
|
||||
<div class="col" v-if="artistPage.data.attributes.artistBio">
|
||||
<h3>About {{ artistPage.data.attributes.name }}</h3>
|
||||
<p v-html="artistPage.data.attributes.artistBio"></p>
|
||||
<div class="col" v-if="data.attributes.artistBio">
|
||||
<h3>About {{ data.attributes.name }}</h3>
|
||||
<p v-html="data.attributes.artistBio"></p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div v-if="artistPage.data.attributes.origin">
|
||||
<h3>{{ artistPage.data.attributes.isGroup ? "Origin" : "Hometown" }}</h3>
|
||||
{{ artistPage.data.attributes.origin }}
|
||||
<div v-if="data.attributes.origin">
|
||||
<h3>{{ data.attributes.isGroup ? "Origin" : "Hometown" }}</h3>
|
||||
{{ data.attributes.origin }}
|
||||
</div>
|
||||
<div v-if="artistPage.data.attributes.bornOrFormed">
|
||||
<h3>{{ artistPage.data.attributes.isGroup ? "Born" : "Formed" }}</h3>
|
||||
{{ artistPage.data.attributes.bornOrFormed }}
|
||||
<div v-if="data.attributes.bornOrFormed">
|
||||
<h3>{{ data.attributes.isGroup ? "Born" : "Formed" }}</h3>
|
||||
{{ data.attributes.bornOrFormed }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -85,4 +85,37 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
<script>
|
||||
Vue.component('cider-artist', {
|
||||
template: "#cider-artist",
|
||||
props: ['data'],
|
||||
data: function () {
|
||||
return {
|
||||
topSongsExpanded: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue