improvements to home page, added .spinner
This commit is contained in:
parent
a00af6fa8c
commit
9a75e9899a
7 changed files with 51 additions and 14 deletions
|
@ -87,7 +87,6 @@
|
|||
},
|
||||
mounted() {
|
||||
let duration = this.item.attributes.durationInMillis ?? 0
|
||||
console.log(duration)
|
||||
if(duration == 0 || !this.showDuration) {
|
||||
this.displayDuration = false
|
||||
}
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<mediaitem-list-item v-for="item in artistFeed" :item="item"></mediaitem-list-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="hint-text">No new activity from followed artists</div>
|
||||
<div class="spinner"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
<div class="content-inner playlist-page" v-if="data != [] && data.attributes != null"
|
||||
:style="{'--bgColor': (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : ''}">
|
||||
<template v-if="app.playlists.loadingState == 0">
|
||||
<div class="content-inner centered">Loading...</div>
|
||||
<div class="content-inner centered">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="app.playlists.loadingState == 1">
|
||||
<div class="playlist-display row"
|
||||
|
|
|
@ -6,17 +6,24 @@
|
|||
<h3>Home</h3>
|
||||
<div class="well profile-well">
|
||||
<div class="user-icon">
|
||||
<mediaitem-artwork shadow="none" :url="(profile && profile.attributes && profile.attributes.artwork) ? profile.attributes.artwork.url : ''"
|
||||
<mediaitem-artwork shadow="none"
|
||||
:url="(profile && profile.attributes && profile.attributes.artwork) ? profile.attributes.artwork.url : ''"
|
||||
size="300"></mediaitem-artwork>
|
||||
</div>
|
||||
<h3 class="name" >{{ (profile && profile.attributes && profile.attributes.name) ? profile.attributes.name : "" }}</h3>
|
||||
<h4 class="handle">@{{ (profile && profile.attributes && profile.attributes.handle) ? profile.attributes.handle : "" }}</h4>
|
||||
<h3 class="name">{{ (profile && profile.attributes && profile.attributes.name) ?
|
||||
profile.attributes.name : "" }}</h3>
|
||||
<h4 class="handle">@{{ (profile && profile.attributes && profile.attributes.handle) ?
|
||||
profile.attributes.handle : "" }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3>Recently Played</h3>
|
||||
<div class="well">
|
||||
<mediaitem-list-item v-for="item in recentlyPlayed.limit(6)" :item="item"></mediaitem-list-item>
|
||||
<template v-if="isSectionReady('recentlyPlayed')">
|
||||
<mediaitem-list-item v-for="item in recentlyPlayed.limit(6)"
|
||||
:item="item"></mediaitem-list-item>
|
||||
</template>
|
||||
<div class="spinner" v-else></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -36,7 +43,10 @@
|
|||
<div class="col madeforyou-col">
|
||||
<h3>Made For You</h3>
|
||||
<div class="well">
|
||||
<mediaitem-square kind="small" v-for="item in madeForYou" :item="item"></mediaitem-square>
|
||||
<template v-if="isSectionReady('madeForYou')">
|
||||
<mediaitem-square kind="small" v-for="item in madeForYou" :item="item"></mediaitem-square>
|
||||
</template>
|
||||
<div class="spinner" v-else></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
|
@ -53,7 +63,7 @@
|
|||
<mediaitem-list-item v-for="item in artistFeed.limit(6)" :item="item"></mediaitem-list-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="hint-text">No new activity from followed artists</div>
|
||||
<div class="spinner"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -62,8 +72,11 @@
|
|||
<div class="col">
|
||||
<h3>Friends Listening To</h3>
|
||||
<div class="well">
|
||||
<mediaitem-square kind="small" v-for="item in friendsListeningTo"
|
||||
:item="item"></mediaitem-square>
|
||||
<template v-if="isSectionReady('friendsListeningTo')">
|
||||
<mediaitem-square kind="small" v-for="item in friendsListeningTo"
|
||||
:item="item"></mediaitem-square>
|
||||
</template>
|
||||
<div class="spinner" v-else></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -89,6 +102,7 @@
|
|||
artistFeed: [],
|
||||
showingArtistFeed: false,
|
||||
page: "main",
|
||||
sectionsReady: []
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
|
@ -98,6 +112,9 @@
|
|||
await this.getFavorites()
|
||||
},
|
||||
methods: {
|
||||
isSectionReady(section) {
|
||||
return this.sectionsReady.includes(section)
|
||||
},
|
||||
removeFavoriteContext() {
|
||||
let self = this
|
||||
return {
|
||||
|
@ -204,6 +221,7 @@
|
|||
})[0].relationships.contents.data
|
||||
} catch (err) {
|
||||
}
|
||||
self.sectionsReady.push("madeForYou")
|
||||
|
||||
try {
|
||||
self.recentlyPlayed = data.data[1].relationships.contents.data
|
||||
|
@ -215,6 +233,8 @@
|
|||
})[0].relationships.contents.data
|
||||
} catch (err) {
|
||||
}
|
||||
self.sectionsReady.push("recentlyPlayed")
|
||||
self.sectionsReady.push("friendsListeningTo")
|
||||
});
|
||||
|
||||
app.mk.api.v3.music("/v1/me/social/profile/").then((response) => {
|
||||
|
|
|
@ -2,6 +2,6 @@
|
|||
<div class="content-inner">
|
||||
<h3>Welcome to element park. *BERR NERR NERR NERR NERRRRR BERR NER NER NER NERRR BERRR NR NR NRRRR*</h3>
|
||||
<button @click="app.playMediaItemById('1592151778', 'album')">Play Test Album</button>
|
||||
<cider-queue ref="queue"></cider-queue>
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue