okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

moved artist page to cider-artist component

Browse source
This commit is contained in:
booploops 2021-12-08 01:22:17 -08:00
parent 0b5389a528
commit 60ee14c6f9
3 changed files with 67 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

14
resources/cider-ui-tests/index.js
View file

@ -79,7 +79,6 @@ const app = new Vue({
showingPlaylist: [], showingPlaylist: [],
artistPage: { artistPage: {
data: {}, data: {},
topSongsExpanded: false
}, },
library: { library: {
downloadNotification: { downloadNotification: {
@ -319,19 +318,6 @@ const app = new Vue({
return ""; 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) { routeView(item) {
let self = this let self = this
app.showingPlaylist = []; app.showingPlaylist = [];

7
resources/cider-ui-tests/views/main.ejs
View file

@ -206,7 +206,9 @@
<div id="app-content"> <div id="app-content">
<!-- Artist Page --> <!-- Artist Page -->
<transition name="wpfade"> <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>
<transition name="wpfade"> <transition name="wpfade">
<%- include('pages/webview') %> <%- include('pages/webview') %>
@ -388,6 +390,9 @@
<!-- Playlists / Albums --> <!-- Playlists / Albums -->
<%- include('pages/cider-playlist') %> <%- include('pages/cider-playlist') %>
<!-- Artist Page -->
<%- include('pages/artist') %>
<!-- Search --> <!-- Search -->
<%- include('pages/search') %> <%- include('pages/search') %>

89
resources/cider-ui-tests/views/pages/artist.ejs
View file

@ -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="content-inner artist-page">
<div class="artist-header" :style="getArtistPalette(artistPage.data)"> <div class="artist-header" :style="getArtistPalette(data)">
<animatedartwork-view <animatedartwork-view
v-if="app.artistPage.data.attributes.editorialVideo && (app.artistPage.data.attributes.editorialVideo.motionArtistWide16x9 || app.artistPage.data.attributes.editorialVideo.motionArtistFullscreen16x9)" v-if="data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)"
:video="app.artistPage.data.attributes.editorialVideo.motionArtistWide16x9.video ?? (app.artistPage.data.attributes.editorialVideo.motionArtistFullscreen16x9.video ?? '')"> :video="data.attributes.editorialVideo.motionArtistWide16x9.video ?? (data.attributes.editorialVideo.motionArtistFullscreen16x9.video ?? '')">
</animatedartwork-view> </animatedartwork-view>
<div class="row"> <div class="row">
<div class="col-sm" style="width: auto;"> <div class="col-sm" style="width: auto;">
<div class="artist-image"> <div class="artist-image">
<mediaitem-artwork <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> size="220" type="artists"></mediaitem-artwork>
</div> </div>
</div> </div>
<div class="col flex-center"> <div class="col flex-center">
<h1>{{ artistPage.data.attributes.name }}</h1> <h1>{{ data.attributes.name }}</h1>
</div> </div>
</div> </div>
</div> </div>
@ -22,22 +22,22 @@
<div class="row well"> <div class="row well">
<div class="col"> <div class="col">
<div class="row"> <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> <h3>Latest Release</h3>
<div style="width: auto;margin: 0 auto;"> <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"> :item="song">
</mediaitem-square-sp> </mediaitem-square-sp>
</div> </div>
</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> <h3>Top Songs</h3>
<mediaitem-list-item <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> :item="song"></mediaitem-list-item>
<button class="showmoreless" <button class="showmoreless"
@click="artistPage.topSongsExpanded = !artistPage.topSongsExpanded"> @click="topSongsExpanded = !topSongsExpanded">
<template v-if="!artistPage.topSongsExpanded"> <template v-if="!topSongsExpanded">
Show more Show more
</template> </template>
<template v-else> <template v-else>
@ -50,34 +50,34 @@
</div> </div>
<div class="row well"> <div class="row well">
<div class="col"> <div class="col">
<template v-for="(view) in artistPage.data.meta.views.order" <template v-for="(view) in data.meta.views.order"
v-if="(artistPage.data.views[view].data.length != 0) && (view != 'latest-release') && (view != 'top-songs')"> v-if="(data.views[view].data.length != 0) && (view != 'latest-release') && (view != 'top-songs')">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h3>{{ artistPage.data.views[view].attributes.title ? <h3>{{ data.views[view].attributes.title ?
artistPage.data.views[view].attributes.title : "???"}} data.views[view].attributes.title : "???"}}
</h3> </h3>
</div> </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> <button class="cd-btn-seeall">See All</button>
</div> </div>
</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> </mediaitem-scroller-horizontal-large>
</template> </template>
<div class="row"> <div class="row">
<div class="col" v-if="artistPage.data.attributes.artistBio"> <div class="col" v-if="data.attributes.artistBio">
<h3>About {{ artistPage.data.attributes.name }}</h3> <h3>About {{ data.attributes.name }}</h3>
<p v-html="artistPage.data.attributes.artistBio"></p> <p v-html="data.attributes.artistBio"></p>
</div> </div>
<div class="col"> <div class="col">
<div v-if="artistPage.data.attributes.origin"> <div v-if="data.attributes.origin">
<h3>{{ artistPage.data.attributes.isGroup ? "Origin" : "Hometown" }}</h3> <h3>{{ data.attributes.isGroup ? "Origin" : "Hometown" }}</h3>
{{ artistPage.data.attributes.origin }} {{ data.attributes.origin }}
</div> </div>
<div v-if="artistPage.data.attributes.bornOrFormed"> <div v-if="data.attributes.bornOrFormed">
<h3>{{ artistPage.data.attributes.isGroup ? "Born" : "Formed" }}</h3> <h3>{{ data.attributes.isGroup ? "Born" : "Formed" }}</h3>
{{ artistPage.data.attributes.bornOrFormed }} {{ data.attributes.bornOrFormed }}
</div> </div>
</div> </div>
</div> </div>
@ -85,4 +85,37 @@
</div> </div>
</div> </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>