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

WIP Artist page

Browse source
This commit is contained in:
booploops 2021-12-06 20:02:40 -08:00
parent b47d085f35
commit de160d36fd
8 changed files with 206 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

52
resources/cider-ui-tests/assets/lossless.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

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

@ -76,6 +76,10 @@ const app = new Vue({
personal: []
},
showingPlaylist: [],
artistPage: {
data: {},
topSongsExpanded: false
},
library: {
songs: {
listing: [],
@ -112,7 +116,7 @@ const app = new Vue({
drawerOpened: false,
drawerState: "queue"
},
page: "browse"
page: "artist-page"
},
methods: {
async init() {
@ -209,7 +213,21 @@ const app = new Vue({
}
},
async getArtistFromID(id){
var artistData = await this.mkapi("artists", false, id, {
"views": "featured-release,full-albums,appears-on-albums,featured-albums,featured-on-albums,singles,compilation-albums,live-albums,latest-release,top-music-videos,similar-artists,top-songs,playlists,more-to-hear,more-to-see",
"extend": "artistBio,bornOrFormed,editorialArtwork,editorialVideo,isGroup,origin,hero",
"extend[playlists]": "trackCount",
"omit[resource:songs]": "relationships",
"fields[albums]": "artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url,trackCount",
"limit[artists:top-songs]": 20,
"art[url]": "f"
}, {includeResponseMeta: !0})
this.artistPage.data = artistData.data[0]
this.page = "artist-page"
},
routeView (item){
let self = this
app.showingPlaylist = [];
let kind = (item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? ''));
let id = (item.attributes.playParams ? (item.attributes.playParams.id ?? (item.id?? '')): (item.id ?? ''));;
@ -236,7 +254,8 @@ const app = new Vue({
"artists:top-songs": 20
},
"art[url]": "f"};
this.getTypeFromID("artist",id,isLibrary,query)
this.getArtistFromID(id)
//this.getTypeFromID("artist",id,isLibrary,query)
},
playMediaItem(item){
let kind = (item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? ''));

53
resources/cider-ui-tests/style.css
View file

@ -1331,6 +1331,54 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
/* Cider */
/* Artist Page */
.artist-page {
padding: 0px;
}
.artist-page .artist-header {
background: var(--keyColor);
color: white;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 300px;
}
.artist-page .artist-image {
width: 200px;
height: 200px;
background: red;
margin: 32px;
}
.artist-page .artist-body {
}
.artist-page .showmoreless {
font-family: inherit;
font-size: 16px;
font-weight: 500;
background: transparent;
border: 0px;
border-radius: 6px;
appearance: none;
color: var(--keyColor);
padding: 8px 12px;
cursor: pointer;
margin-top: 12px;
float: right;
}
.artist-page .showmoreless:hover {
background: rgb(200 200 200 / 10%);
}
/* Artist Page End */
.text-overflow-elipsis {
display: -webkit-box;
min-width: 0px;
@ -1441,6 +1489,11 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
opacity: 0.7;
}
.cd-mediaitem-list-item .duration {
min-width: 60px;
text-align: center;
}
.cd-mediaitem-list-item .content-rating {
text-transform: uppercase;
font-size: 10px;

13
resources/cider-ui-tests/todo.js
View file

@ -95,6 +95,19 @@ await app.mk.api.library.songs("", {limit: 100}, {includeResponseMeta: !0}).then
console.log(data)
})
// Artist Page Data
app.mkapi("artists", false, "412778295", {
"views": "featured-release,full-albums,appears-on-albums,featured-albums,featured-on-albums,singles,compilation-albums,live-albums,latest-release,top-music-videos,similar-artists,top-songs,playlists,more-to-hear,more-to-see",
"extend": "artistBio,bornOrFormed,editorialArtwork,editorialVideo,isGroup,origin,hero",
"extend[playlists]": "trackCount",
"omit[resource:songs]": "relationships",
"fields[albums]": "artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url,trackCount",
"limit[artists:top-songs]": 20,
"art[url]": "f"
}, {includeResponseMeta: !0}).then((data)=>{
console.log(data)
})
// download entire library
var library = []
var downloaded = null;

2
resources/cider-ui-tests/views/components/mediaitem-list-item.ejs
View file

@ -24,7 +24,7 @@
<div class="content-rating" v-if="item.attributes.contentRating">
{{ item.attributes.contentRating }}
</div>
<div>
<div class="duration">
{{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
</div>
</div>

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

@ -197,6 +197,10 @@
</div>
</div>
<div id="app-content">
<!-- Artist Page -->
<transition name="wpfade">
<%- include('pages/artist') %>
</transition>
<!-- Playlist / Album page-->
<transition name="wpfade">
<template v-if="page.includes('playlist_')">

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

@ -0,0 +1,61 @@
<template v-if="page == 'artist-page' && artistPage.data.attributes">
<div class="content-inner artist-page">
<div class="artist-header">
<div class="row">
<div class="col-sm" style="width: auto;">
<div class="artist-image">
</div>
</div>
<div class="col flex-center">
<h1>{{ artistPage.data.attributes.name }}</h1>
</div>
</div>
</div>
<div class="artist-body">
<div class="row">
<div class="col-auto" v-if="artistPage.data.views['latest-release']">
<h3>Latest Release</h3>
<mediaitem-square
v-for="song in artistPage.data.views['latest-release'].data"
:item="song"></mediaitem-square>
</div>
<div class="col" v-if="artistPage.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)"
:item="song"></mediaitem-list-item>
<button class="showmoreless" @click="artistPage.topSongsExpanded = !artistPage.topSongsExpanded">
<template v-if="!artistPage.topSongsExpanded">
Show more
</template>
<template v-else>
Show less
</template>
</button>
</div>
</div>
<div class="row">
<div class="col">
<h3>Albums</h3>
<h3>Music Videos</h3>
<h3>Artist Playlists</h3>
<h3>Singles & EPs</h3>
<h3>Live Albums</h3>
<h3>Appears On</h3>
<h3>More To Hear</h3>
<h3>More To See</h3>
<div class="row">
<div class="col">
<h3>About Artist Name</h3>
</div>
<div class="col">
</div>
</div>
<h3>Similar Artists</h3>
</div>
</div>
</div>
</div>
</template>

1
resources/cider-ui-tests/views/pages/settings.ejs Normal file
View file

@ -0,0 +1 @@
<h1 class="header-text">Settings</h1>